Add id and text search

composables/useIsNumeric.ts

@@ -0,0 +1,5 @@
+export default function isIsNumeric() {
+    return {
+      isNumeric: (num: any) => (typeof(num) === 'number' || typeof(num) === "string" && num.trim() !== '') && !isNaN(num as number)
+    }
+}

composables/useQueryablePagination.ts

@@ -0,0 +1,18 @@
+
+const isNumeric = (num: any) => (typeof(num) === 'number' || typeof(num) === "string" && num.trim() !== '') && !isNaN(num as number);
+
+export default function useQueryablePagination<T>(iterable: Array<T>, pageSize: number, query: Ref<string>) {
+  const pagination = computed(() => {
+    let filtered = [];
+    if (isNumeric(query.value))
+        filtered = iterable.filter((x: any) => x.id == parseInt(query.value, 10));
+    else 
+        filtered = iterable.filter((x) => x.title.toLowerCase().includes(query.value.toLowerCase()));
+
+    return usePagination(icons, 100);
+})
+
+  return {
+  
+  }
+}

pages/summoner-emotes/index.vue

@@ -2,12 +2,17 @@
   <div class="d-flex flex-column gap-2">
       <h1 class="mb-3">Summoner Emotes</h1>
 
-      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
+      <div class="input-group">
-        :on-first="first" :on-last="last"/>
+        <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
+            v-model="query"/>
+      </div>
+
+      <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"/>
 
       <div class="d-flex flex-wrap justify-content-around gap-2">
         <div class="card bg-transparent bg-screen border-light border-opacity-25" style="max-width: 140px; width: 140px;"
-            v-for="emote in pages[index]" :key="emote.id">
+            v-for="emote in p.pages[p.index.value]" :key="emote.id">
             <img :src="emote.getInventoryIcon('latest')" loading="lazy" onerror="this.onerror = null; this.src='/clean-cuts/img/error.png';" />
 
             <div class="card-body d-flex flex-column justify-content-end">
@@ -17,8 +22,8 @@
         </div>
       </div>
 
-      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
+      <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
-        :on-first="first" :on-last="last"/>
+        :on-first="p.first" :on-last="p.last"/>
   </div>
 </template>
 
@@ -26,11 +31,24 @@
 import Pagination from '../../components/Pagination.vue';
 import Badge from '~/components/Badge.vue';
 import useClient from '../../composables/useClient';
+import useIsNumeric from '../../composables/useIsNumeric';
 import usePagination from '../../composables/usePagination';
 
-const { client } = useClient();;
+const { client } = useClient();
+
+const query = ref("");
 
 const emotes = (await client.summonerEmotes.listAsync({locale: "default", version: "latest"}))
   .sort((a, b) => a.id - b.id);
-const { count, pages, index, prev, next, first, last } = usePagination(emotes, 24);
+
+const { isNumeric } = useIsNumeric();
+const p = computed(() => {
+  let filtered = [];
+  if (isNumeric(query.value))
+      filtered = emotes.filter((x) => x.id == parseInt(query.value, 10));
+  else 
+      filtered = emotes.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
+
+  return usePagination(filtered, 24);
+})
 </script>

pages/summoner-icons/index.vue

@@ -2,8 +2,13 @@
   <div class="d-flex flex-column gap-2">
       <h1>Summoner Icons</h1>
 
-      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
+      <div class="input-group">
-        :on-first="first" :on-last="last"/>
+        <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
+            v-model="query"/>
+      </div>
+
+      <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"/>
 
       <div class="overflow-hidden rounded border border-light border-opacity-25 p-4">
           <table class="sortable table table-borderless">
@@ -15,7 +20,7 @@
                   </tr>
               </thead>
               <tbody>
-                <tr v-for="icon in pages[index]" :key="icon.id" style="position: relative;">
+                <tr v-for="icon in p.pages[p.index.value]" :key="icon.id" style="position: relative;">
                         <th scope="row">
                             <NuxtLink class="text-decoration-none text-light stretched-link" :to="`/summoner-icons/overview/${icon.id}`">
                                 {{ icon.id }}
@@ -36,8 +41,8 @@
           </table>
       </div>
 
-      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
+      <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
-        :on-first="first" :on-last="last"/>
+        :on-first="p.first" :on-last="p.last"/>
   </div>
 </template>
 
@@ -45,10 +50,23 @@
 import Pagination from '~/components/Pagination.vue';
 import useClient from '../../composables/useClient';
 import usePagination from '../../composables/usePagination';
+import useIsNumeric from '../../composables/useIsNumeric';
 
 const { client } = useClient();
 
+const query = ref("")
+
 const icons = (await client.summonerIcons.listAsync({locale: "default", version: "latest"}))
     .sort((a, b) => a.id - b.id);
-const { count, pages, index, prev, next, first, last } = usePagination(icons, 100);
+
+const { isNumeric } = useIsNumeric();
+const p = computed(() => {
+    let filtered = [];
+    if (isNumeric(query.value))
+        filtered = icons.filter((x) => x.id == parseInt(query.value, 10));
+    else 
+        filtered = icons.filter((x) => x.title.toLowerCase().includes(query.value.toLowerCase()));
+
+    return usePagination(filtered, 100);
+});
 </script>

pages/ward-skins/index.vue

@@ -2,8 +2,13 @@
   <div class="d-flex flex-column gap-2">
       <h1>Ward Skins</h1>
 
-      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
+      <div class="input-group">
-        :on-first="first" :on-last="last"/>
+        <input type="text" class="form-control bg-transparent border-light border-opacity-25" placeholder="Search" name="Search"
+            v-model="query"/>
+      </div>
+
+      <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"/>
       
       <div class="overflow-hidden rounded border border-light border-opacity-25 p-4">
           <table class="sortable table table-borderless">
@@ -15,7 +20,7 @@
                   </tr>
               </thead>
               <tbody>
-                      <tr v-for="skin in pages[index]" :key="skin.id" style="position: relative;">
+                      <tr v-for="skin in p.pages[p.index.value]" :key="skin.id" style="position: relative;">
                           <th scope="row">
                               <NuxtLink class="text-decoration-none text-light stretched-link" :to="`/ward-skins/overview/${skin.id}`">
                                   {{ skin.id }}
@@ -36,18 +41,31 @@
           </table>
       </div>
 
-      <Pagination :pages="pages" :count="count" :index="index" :on-prev="prev" :on-next="next"
+      <Pagination :pages="p.pages" :count="p.count" :index="p.index.value" :on-prev="p.prev" :on-next="p.next"
-        :on-first="first" :on-last="last"/>
+        :on-first="p.first" :on-last="p.last"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import Pagination from '../../components/Pagination.vue';
 import useClient from '../../composables/useClient';
+import useIsNumeric from '../../composables/useIsNumeric';
 import usePagination from '../../composables/usePagination';
 
 const { client } = useClient();
 
+const query = ref("");
+
 const skins = await client.wardSkins.listAsync({locale: "default", version: "latest"});
-const { count, pages, index, prev, next, first, last } = usePagination(skins, 100);
+
+const { isNumeric } = useIsNumeric();
+const p = computed(() => {
+    let filtered = [];
+    if (isNumeric(query.value))
+        filtered = skins.filter((x) => x.id == parseInt(query.value, 10));
+    else 
+        filtered = skins.filter((x) => x.name.toLowerCase().includes(query.value.toLowerCase()));
+
+    return usePagination(filtered, 100);
+})
 </script>