Refactor into useQueryable and Search components

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 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;
-})
+const { query, results } = useQueryable(cherryAugments, (x) => x.id, (x) => x.nameTRA);
 </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;">
-        <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
-          v-model="query"/>
-      </div>
+      <Search v-model="query"/>
     </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 p = computed(() => {
-  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);
-})
+const { query, paginate } = useQueryable(companions, (x) => x.itemId, (x) => x.name);
+const pagination = paginate(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 :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
-        :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>
+      <Pagination :pagination="pagination"/>
+      <Search v-model="query"/>
     </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"
-        :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 bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
-          v-model="query"/>
-      </div>
+      <Pagination :pagination="pagination"/>
+      <Search v-model="query"/>
     </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 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;
-})
+const { query, results } = useQueryable(runes, (x) => x.id, (x) => x.name);
 </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;">
-                <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
-                    v-model="query"/>
-            </div>
+            <Search v-model="query"/>
         </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 p = computed(() => {
-  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);
-})
+const { query, paginate } = useQueryable(emotes, (x) => x.id, (x) => x.name);
+const pagination = paginate(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"
-        :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>
+      <Pagination :pagination="pagination"/>
+      <Search v-model="query"/>
     </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 p = computed(() => {
-    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);
-});
+const { query, paginate } = useQueryable(icons, (x) => x.id, (x) => x.title);
+const pagination = paginate(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"
-            :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>
+        <Pagination :pagination="pagination"/>
+        <Search v-model="query"/>
     </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 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;
-})
+const { query, results } = useQueryable(tftDamageSkins, (x) => x.itemId, (x) => x.name);
 </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;">
-        <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
-          v-model="query"/>
-      </div>
+      <Search v-model="query"/>
     </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 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;
-})
+const { query, results } = useQueryable(tftMapSkins, (x) => x.itemId, (x) => x.name);
 </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;">
-        <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
-          v-model="query"/>
-      </div>
+      <Search v-model="query"/>
     </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 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;
-});
+const { query, results } = useQueryable(skins, (x) => x.id, (x) => x.name);
 </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;">
-            <input type="text" class="form-control border-light border-opacity-25" placeholder="Search" name="Search"
-                v-model="query"/>
-        </div>
+        <Search v-model="query"/>
       </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">