Refactor into useQueryable and Search components

components/Pagination.vue

@@ -1,37 +1,39 @@
 <script setup lang="ts">
 const props = defineProps<{
-  index: number,
+  pagination: {
-  pages: Array<any>,
+    count: number;
-  count: number,
+    pages: any[][];
-  onPrev: () => void,
+    index: globalThis.Ref<number, number>;
-  onNext: () => void,
+    prev: () => void;
-  onFirst: () => void,
+    next: () => void;
-  onLast: () => void,
+    first: () => void;
+    last: () => void;
+  }
 }>();
 
-const hasPrevCss = computed(() => { return !(props.index > 0) ? "disabled" : ""; });
+const hasPrevCss = computed(() => { return !(props.pagination.index.value > 0) ? "disabled" : ""; });
-const hasNextCss = computed(() => { return !(props.index < props.count - 1) ? "disabled" : "";})
+const hasNextCss = computed(() => { return !(props.pagination.index.value < props.pagination.count - 1) ? "disabled" : "";})
 </script>
 
 <template>
-  <div class="btn-group app-background">
+  <div class="btn-group app-background" style="min-width: 300px;">
     <a :class="`btn btn-outline-secondary border-light border-opacity-25`"
-      @click="onFirst()">
+      @click="pagination.first()">
       <MaterialIcon name="chevron-double-left" :size="32" />
     </a>
     <a :class="`btn btn-outline-secondary border-light border-opacity-25 ${hasPrevCss}`"
-      @click="onPrev()">
+      @click="pagination.prev()">
       <MaterialIcon name="chevron-left" :size="32" />
     </a>
     <a :class="`btn btn-outline-secondary border-light border-opacity-25 text-light`">
-      <span class="d-flex justify-content-center align-items-center h-100 w-100">{{ `${index + 1} / ${count}` }}</span>
+      <span class="d-flex justify-content-center align-items-center h-100 w-100">{{ `${pagination.index.value + 1} / ${pagination.count}` }}</span>
     </a>
     <a :class="`btn btn-outline-secondary border-light border-opacity-25 ${hasNextCss}`"
-      @click="onNext()">
+      @click="pagination.next()">
       <MaterialIcon name="chevron-right" :size="32" />
     </a>
     <a :class="`btn btn-outline-secondary border-light border-opacity-25`"
-      @click="onLast()">
+      @click="pagination.last()">
       <MaterialIcon name="chevron-double-right" :size="32" />
     </a>
   </div>

components/Search.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const model = defineModel();
+</script>
+
+<template>
+  <div class="input-group" style="max-width: 400px;">
+    <input type="text" class="form-control border-light border-opacity-25"
+      placeholder="Search" name="Search" v-model="model" />
+  </div>
+</template>

composables/useQueryable.ts

@@ -0,0 +1,34 @@
+export default function useQueryable<T>(
+  items: Ref<T[]>,
+  idPredicate: (x: T) => number,
+  namePredicate: (x: T) => string
+) {
+  const query = ref("");
+  const { isNumeric } = useIsNumeric();
+
+  const useResults = () => {
+    let _results = [];
+    if (isNumeric(items.value))
+      _results = items.value.filter((x) => idPredicate(x) == parseInt(query.value, 10));
+    else
+      _results = items.value.filter((x) => namePredicate(x).toLocaleLowerCase().includes(query.value.toLocaleLowerCase()));
+    return _results;
+  }
+
+  const results = computed(() => {
+    return useResults();
+  });
+
+  const paginate = (count: number) => {
+    return computed(() => {
+      const results = useResults();
+      return usePagination(results, count);
+    })
+  };
+
+  return {
+    query,
+    results,
+    paginate
+  }
+}

pages/champions/index.vue

@@ -12,12 +12,20 @@ watch(currentLocale, async () => {
     summaries.value = await getSummaries();
     skins.value = await getSkins();
 });
+
+const { query, results } = useQueryable(summaries, (x) => x.id, (x) => x.name);
 </script>
 
 <template>
   <div class="d-flex flex-column gap-4">
+    <div class="d-flex justify-content-end gap-2">
+        <Card class="d-flex justify-content-center align-items-center me-auto">
+            <span>{{ summaries.length }} champions</span> 
+        </Card>
+        <Search v-model="query"/>
+    </div>
     <div class="d-flex flex-row flex-wrap gap-4 justify-content-center">
-        <div v-for="summary in summaries" :key="`${summary.id}`" 
+        <div v-for="summary in results" :key="`${summary.id}`" 
             style="width: 200px;"
             data-aos="zoom-out"
             data-aos-duration="500">

pages/cherry-augments/index.vue

@@ -4,22 +4,12 @@ const { currentLocale } = useLocale();
 const getCherryAugments = async () => (await client.cherryAugments.listAsync({locale: currentLocale.value, version: "latest"}))
   .sort((a, b) => a.id - b.id);
 
-const query = ref("");
-
 const cherryAugments = ref(await getCherryAugments());
 watch (currentLocale, async() => {
   cherryAugments.value = await getCherryAugments();
 });
 
-const { isNumeric } = useIsNumeric();
+const { query, results } = useQueryable(cherryAugments, (x) => x.id, (x) => x.nameTRA);
-const filteredCherryAugments = computed(() => {
-  let filtered = [];
-  if (isNumeric(query.value))
-    filtered = cherryAugments.value.filter((x) => x.id == parseInt(query.value, 10));
-  else
-    filtered = cherryAugments.value.filter((x) => x.nameTRA.toLowerCase().includes(query.value.toLowerCase()));
-  return filtered;
-})
 </script>
 
 <template>
@@ -28,14 +18,11 @@ const filteredCherryAugments = computed(() => {
       <Card class="d-flex justify-content-center align-items-center me-auto">
         <span>{{ cherryAugments.length }} augments</span>
       </Card>
-      <div class="input-group" style="max-width: 400px;">
+      <Search v-model="query"/>
-        <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
-          v-model="query"/>
-      </div>
     </div>
 
     <div class="d-flex flex-wrap justify-content-around gap-4">
-      <div v-for="cherryAugment in filteredCherryAugments" :key="`${cherryAugment.id}-${cherryAugment.nameTRA}`"
+      <div v-for="cherryAugment in results" :key="`${cherryAugment.id}-${cherryAugment.nameTRA}`"
         style="width: 200px;"
         data-aos="zoom-out"
         data-aos-duration="500">

pages/companions/index.vue

@@ -4,23 +4,13 @@ const { currentLocale } = useLocale();
 const getCompanions = async () => (await client.companions.listAsync({locale: currentLocale.value, version: "latest"}))
 .sort((a, b) => a.itemId - b.itemId);
 
-const query = ref("");
-
 const companions = ref(await getCompanions());
 watch(currentLocale, async() => {
   companions.value = await getCompanions();
 });
 
-const { isNumeric } = useIsNumeric();
+const { query, paginate } = useQueryable(companions, (x) => x.itemId, (x) => x.name);
-const p = computed(() => {
+const pagination = paginate(100);
-  let filtered = [];
-  if (isNumeric(query.value))
-    filtered = companions.value.filter((x) => x.itemId == parseInt(query.value, 10));
-  else
-    filtered = companions.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
-
-  return usePagination(filtered, 100);
-})
 </script>
 
 <template>
@@ -29,18 +19,12 @@ const p = computed(() => {
       <Card class="d-flex justify-content-center align-items-center me-auto">
         <span>{{ companions.length }} companions</span>
       </Card>
-
+      <Pagination :pagination="pagination"/>
-      <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
+      <Search v-model="query"/>
-        :on-first="p.first" :on-last="p.last" style="min-width: 300px;"/>
-
-      <div class="input-group" style="max-width: 400px;">
-        <input type="text" class="form-control border-light border-opacity-25"
-          placeholder="Search" name="Search" v-model="query" />
-      </div>
     </div>
 
     <div class="d-flex flex-row flex-wrap justify-content-center gap-4">
-      <div style="width: 350px;" v-for="companion in p.pages[p.index.value]" :key="companion.itemId"
+      <div style="width: 350px;" v-for="companion in pagination.pages[pagination.index.value]" :key="companion.itemId"
         data-aos="zoom-out"
         data-aos-duration="500">
         <div class="ratio ratio-16x9 position-relative trans-hover-grow">

pages/items/index.vue

@@ -7,12 +7,20 @@ const items = ref(await getItems());
 watch(currentLocale, async () => {
     items.value = await getItems();
 });
+
+const { query, results } = useQueryable(items, (x) => x.id, (x) => x.name);
 </script>
 
 <template>
   <div class="d-flex flex-column gap-4">
+    <div class="d-flex justify-content-end gap-2">
+        <Card class="d-flex justify-content-end me-auto">
+            <span>{{ items.length }} items</span>
+        </Card>
+        <Search v-model="query"/>
+    </div>
     <div class="d-flex flex-row flex-wrap gap-2 justify-content-center">
-        <div v-for="item in items" :key="`${item.id}`"
+        <div v-for="item in results" :key="`${item.id}`"
             style="width: 64px;"
             data-aos="zoom-out"
             data-aos-duration="500">

pages/loots/index.vue

@@ -20,7 +20,7 @@ const loots = ref(await getLoots());
 const categories = new Set(loots.value.map((x) => x.type));
 
 const { isNumeric } = useIsNumeric();
-const p = computed(() => {
+const pagination = computed(() => {
   let filtered = [];
   
   filtered = loots.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
@@ -60,16 +60,12 @@ watch(currentLocale, async() => {
       <Card class="d-flex justify-content-center align-items-center me-auto">
         <span>{{ loots.length }} loots</span>
       </Card>
-      <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
+      <Pagination :pagination="pagination"/>
-        :on-first="p.first" :on-last="p.last" style="min-width: 300px;"/>
+      <Search v-model="query"/>
-      <div class="input-group" style="max-width: 400px;">
-        <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
-          v-model="query"/>
-      </div>
     </div>
 
     <div class="d-flex flex-wrap justify-content-center gap-4">
-      <div style="width: 225px;" v-for="loot in p.pages[p.index.value]" :key="`${loot.id}`"
+      <div style="width: 225px;" v-for="loot in pagination.pages[pagination.index.value]" :key="`${loot.id}`"
         data-aos="zoom-out"
         data-aos-duration="500">
         <div class="ratio ratio-1x1 position-relative trans-hover-grow">

pages/runes/index.vue

@@ -4,22 +4,12 @@ const { currentLocale } = useLocale();
 const getRunes = async () => (await client.perks.listAsync({locale: currentLocale.value, version: "latest"}))
 .sort((a, b) => a.id - b.id)
 
-const query = ref("");
-
 const runes = ref(await getRunes());
 watch(currentLocale, async() => {
     runes.value = await getRunes();
 });
 
-const { isNumeric } = useIsNumeric();
+const { query, results } = useQueryable(runes, (x) => x.id, (x) => x.name);
-const filteredRunes = computed(() => {
-    let filtered = [];
-    if (isNumeric(query.value))
-        filtered = runes.value.filter((x) => x.id == parseInt(query.value, 10));
-    else 
-        filtered = runes.value.filter((x) => x.name.toLocaleLowerCase().includes(query.value.toLocaleLowerCase()));
-    return filtered;
-})
 </script>
 
 <template>
@@ -29,13 +19,10 @@ const filteredRunes = computed(() => {
             <Card class="d-flex justify-content-center align-items-center me-auto">
                 <span>{{ runes.length }} runes</span>
             </Card>
-            <div class="input-group" style="max-width: 400px;">
+            <Search v-model="query"/>
-                <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
-                    v-model="query"/>
-            </div>
         </div>
         <div class="d-flex flex-column align-items-center gap-2">
-            <Card class="d-flex w-50 flex-column" v-for="rune in filteredRunes" :key="rune.id"
+            <Card class="d-flex w-50 flex-column" v-for="rune in results" :key="rune.id"
                 data-aos="zoom-out"
                 data-aos-duration="500"
                 style="height: fit-content;">

pages/summoner-emotes/index.vue

@@ -4,23 +4,13 @@ const { currentLocale } = useLocale();
 const getEmotes = async () => (await client.summonerEmotes.listAsync({locale: currentLocale.value, version: "latest"}))
 .sort((a, b) => a.id - b.id);
 
-const query = ref("");
-
 const emotes = ref(await getEmotes());
 watch(currentLocale, async() => {
   emotes.value = await getEmotes();
 });
 
-const { isNumeric } = useIsNumeric();
+const { query, paginate } = useQueryable(emotes, (x) => x.id, (x) => x.name);
-const p = computed(() => {
+const pagination = paginate(100);
-  let filtered = [];
-  if (isNumeric(query.value))
-      filtered = emotes.value.filter((x) => x.id == parseInt(query.value, 10));
-  else 
-      filtered = emotes.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
-
-  return usePagination(filtered, 100);
-})
 </script>
 
 <template>
@@ -29,15 +19,11 @@ const p = computed(() => {
       <Card class="d-flex justify-content-center align-items-center me-auto">
         <span>{{ emotes.length }} summoner emotes</span>
       </Card>
-      <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
+      <Pagination :pagination="pagination"/>
-        :on-first="p.first" :on-last="p.last" style="min-width: 300px;"/>
+      <Search v-model="query"/>
-      <div class="input-group" style="max-width: 400px;">
-        <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
-            v-model="query"/>
-      </div>
     </div>
     <div class="d-flex flex-wrap justify-content-center gap-4">
-      <div style="width: 200px;" v-for="summonerEmote in p.pages[p.index.value]" :key="`${summonerEmote.id}`"
+      <div style="width: 200px;" v-for="summonerEmote in pagination.pages[pagination.index.value]" :key="`${summonerEmote.id}`"
         data-aos="zoom-out"
         data-aos-duration="500">
         <div class="ratio ratio-1x1 position-relative trans-hover-grow">

pages/summoner-icons/index.vue

@@ -4,23 +4,13 @@ const { currentLocale } = useLocale();
 const getIcons = async () => (await client.summonerIcons.listAsync({locale: currentLocale.value, version: "latest"}))
 .sort((a, b) => a.id - b.id);
 
-const query = ref("")
-
 const icons = ref(await getIcons());
 watch(currentLocale, async() => {
     icons.value = await getIcons();
 });
 
-const { isNumeric } = useIsNumeric();
+const { query, paginate } = useQueryable(icons, (x) => x.id, (x) => x.title);
-const p = computed(() => {
+const pagination = paginate(100);
-    let filtered = [];
-    if (isNumeric(query.value))
-        filtered = icons.value.filter((x) => x.id == parseInt(query.value, 10));
-    else 
-        filtered = icons.value.filter((x) => x.title.toLowerCase().includes(query.value.toLowerCase()));
-
-    return usePagination(filtered, 100);
-});
 </script>
 
 <template>
@@ -29,16 +19,12 @@ const p = computed(() => {
         <Card class="d-flex justify-content-center align-items-center me-auto">
             <span>{{ icons.length }} summoner icons</span>
         </Card>
-        <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
+        <Pagination :pagination="pagination"/>
-            :on-first="p.first" :on-last="p.last" style="min-width: 300px;"/>
+        <Search v-model="query"/>
-        <div class="input-group" style="max-width: 400px;">
-            <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
-                v-model="query"/>
-        </div>
     </div>
 
     <div class="d-flex flex-wrap justify-content-center gap-4">
-        <div style="width: 200px;" v-for="summonerIcon in p.pages[p.index.value]" :key="summonerIcon.id"
+        <div style="width: 200px;" v-for="summonerIcon in pagination.pages[pagination.index.value]" :key="summonerIcon.id"
             data-aos="zoom-out"
             data-aos-duration="500">
             <div class="ratio ratio-1x1 position-relative trans-hover-grow">

pages/tft-damage-skins/index.vue

@@ -4,22 +4,12 @@ const { currentLocale } = useLocale();
 const getTftDamageSkins = async () => (await client.tftDamageSkins.listAsync({ locale: currentLocale.value, version: "latest"}))
   .sort((a, b) => a.itemId - b.itemId);
 
-const query = ref("");
-
 const tftDamageSkins = ref(await getTftDamageSkins());
 watch(currentLocale, async() => {
   tftDamageSkins.value = await getTftDamageSkins();
 });
 
-const { isNumeric } = useIsNumeric();
+const { query, results } = useQueryable(tftDamageSkins, (x) => x.itemId, (x) => x.name);
-const p = computed(() => {
-  let filtered = [];
-  if (isNumeric(query.value))
-    filtered = tftDamageSkins.value.filter((x) => x.itemId == parseInt(query.value));
-  else
-    filtered = tftDamageSkins.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
-  return filtered;
-})
 </script>
 
 <template>
@@ -28,14 +18,11 @@ const p = computed(() => {
       <Card class="d-flex justify-content-center align-items-center me-auto">
         <span>{{ tftDamageSkins.length }} TFT damage skins</span>
       </Card>
-      <div class="input-group" style="max-width: 400px;">
+      <Search v-model="query"/>
-        <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
-          v-model="query"/>
-      </div>
     </div>
 
     <div class="d-flex flex-wrap gap-4 justify-content-center">
-      <div style="width: 200px;" v-for="tftDamageSkin in p" :key="`${tftDamageSkin.itemId}`"
+      <div style="width: 200px;" v-for="tftDamageSkin in results" :key="`${tftDamageSkin.itemId}`"
         data-aos="zoom-out"
         data-aos-duration="500">
         <div class="ratio ratio-1x1 position-relative trans-hover-grow">

pages/tft-map-skins/index.vue

@@ -4,22 +4,12 @@ const { currentLocale } = useLocale();
 const getTftMapSkins = async () => (await client.tftMapSkins.listAsync({ locale: currentLocale.value, version: "latest"}))
   .sort((a, b) => a.itemId - b.itemId);
 
-const query = ref("");
-
 const tftMapSkins = ref(await getTftMapSkins());
 watch(currentLocale, async() => {
   tftMapSkins.value = await getTftMapSkins();
 });
 
-const { isNumeric } = useIsNumeric();
+const { query, results } = useQueryable(tftMapSkins, (x) => x.itemId, (x) => x.name);
-const p = computed(() => {
-  let filtered = [];
-  if (isNumeric(query.value))
-    filtered = tftMapSkins.value.filter((x) => x.itemId == parseInt(query.value));
-  else
-    filtered = tftMapSkins.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
-  return filtered;
-})
 </script>
 
 <template>
@@ -28,13 +18,10 @@ const p = computed(() => {
       <Card class="d-flex justify-content-center align-items-center me-auto">
         <span>{{ tftMapSkins.length }} TFT map skins</span>
       </Card>
-      <div class="input-group" style="max-width: 400px;">
+      <Search v-model="query"/>
-        <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
-          v-model="query"/>
-      </div>
     </div>
     <div class="d-flex flex-wrap justify-content-center gap-4">
-      <div style="width: 350px;" v-for="tftMapSkin in p" :key="`${tftMapSkin.itemId}`"
+      <div style="width: 350px;" v-for="tftMapSkin in results" :key="`${tftMapSkin.itemId}`"
         data-aos="zoom-out"
         data-aos-duration="500">
         <div class="ratio ratio-4x3 position-relative trans-hover-grow">

pages/ward-skins/index.vue

@@ -3,23 +3,12 @@ const { client } = useClient();
 const { currentLocale } = useLocale();
 const getSkins = async () => await client.wardSkins.listAsync({locale: currentLocale.value, version: "latest"});
 
-const query = ref("");
-
 const skins = ref(await getSkins());
 watch(currentLocale, async() => {
     skins.value = await getSkins();
 });
 
-const { isNumeric } = useIsNumeric();
+const { query, results } = useQueryable(skins, (x) => x.id, (x) => x.name);
-const p = computed(() => {
-    let filtered = [];
-    if (isNumeric(query.value))
-        filtered = skins.value.filter((x) => x.id == parseInt(query.value, 10));
-    else 
-        filtered = skins.value.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
-
-    return filtered;
-});
 </script>
 
 <template>
@@ -28,14 +17,11 @@ const p = computed(() => {
         <Card class="d-flex justify-content-center align-items-center me-auto">
             <span>{{ skins.length }} skins</span>
         </Card>
-        <div class="input-group" style="max-width: 400px;">
+        <Search v-model="query"/>
-            <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
-                v-model="query"/>
-        </div>
       </div>
       
       <div class="d-flex flex-row flex-wrap gap-4 justify-content-center">
-        <div v-for="wardSkin in p" :key="`${wardSkin.id}`"
+        <div v-for="wardSkin in results" :key="`${wardSkin.id}`"
             style="width: 225px;"
             data-aos="zoom-out"
             data-aos-duration="500">