FIX: pagination changed to redux-vue

src/app/components/Clients/Pagination.vue

@@ -1,33 +1,62 @@
 <template>
-  <div
-    class="mt-4 flex items-center justify-center gap-2"
+  <PaginationRoot
+    :total="clientsStore.total"
+    :page="clientsStore.page"
+    :itemsPerPage="clientsStore.limit"
+    :sibling-count="1"
+    show-edges
+    @update:page="setPage"
   >
-    <button
-      class="btn"
-      v-if="clientsStore.page > 1"
-      @click="setPage(clientsStore.page - 1)"
+    <PaginationList
+      v-slot="{ items }"
+      class="mt-4 mb-2 flex items-center gap-1 justify-center"
     >
-      ←
-    </button>
-
-    <span class="text-sm text-gray-500">
-      {{ clientsStore.page }} / {{ clientsStore.totalPages }}
-    </span>
-
-    <button
-      class="btn"
-      v-if="clientsStore.page < clientsStore.totalPages"
-      @click="setPage(clientsStore.page + 1)"
-    >
-      →
-    </button>
-  </div>
+      <PaginationFirst class="inline-flex items-center text-gray-700 dark:text-neutral-200">
+        <IconsChevronDoubleLeft class="w-4 md:mr-2" />
+      </PaginationFirst>
+      <PaginationPrev class="inline-flex items-center text-gray-700 dark:text-neutral-200">
+        <IconsChevronLeft class="w-4 md:mr-2" />
+      </PaginationPrev>
+      <template v-for="(page, index) in items">
+        <PaginationListItem
+          v-if="page.type === 'page'"
+          :key="index"
+          class="inline-flex items-center rounded border-2 border-gray-100 px-4 py-2 text-gray-700 transition hover:border-red-800 hover:bg-red-800 hover:text-white dark:border-neutral-600 dark:text-neutral-200 data-[selected]:border-red-800 data-[selected]:bg-red-800 data-[selected]:text-white"
+          :value="page.value"
+        >
+          {{ page.value }}
+        </PaginationListItem>
+        <PaginationEllipsis
+          v-else
+          :key="page.type"
+          :index="index"
+          class="w-9 h-9 flex items-center justify-center text-gray-700 dark:text-neutral-200"
+        >
+          &#8230;
+        </PaginationEllipsis>
+      </template>
+      <PaginationNext class="inline-flex items-center text-gray-700 dark:text-neutral-200">
+        <IconsChevronRight class="w-4 md:mr-2" />
+      </PaginationNext>
+      <PaginationLast class="inline-flex items-center text-gray-700 dark:text-neutral-200">
+        <IconsChevronDoubleRight class="w-4 md:mr-2" />
+      </PaginationLast>
+    </PaginationList>
+  </PaginationRoot>
 </template>
 
 <script setup lang="ts">
- const clientsStore = useClientsStore();
-
- function setPage(p: number) {
-   clientsStore.setPageQuery(p);
+import { 
+  PaginationEllipsis, 
+  PaginationFirst, 
+  PaginationLast, 
+  PaginationList, 
+  PaginationListItem, 
+  PaginationNext, 
+  PaginationPrev, 
+  PaginationRoot } from 'radix-vue'
+const clientsStore = useClientsStore();
+function setPage(p: number) {
+ clientsStore.setPageQuery(p);
 }
-</script>
+</script>

src/app/components/Icons/ChevronDoubleLeft.vue

@@ -0,0 +1,7 @@
+<template>
+  <ChevronDoubleLeftIcon />
+</template>
+
+<script lang="ts" setup>
+import ChevronDoubleLeftIcon from '@heroicons/vue/24/outline/esm/ChevronDoubleLeftIcon';
+</script>

src/app/components/Icons/ChevronDoubleRight.vue

@@ -0,0 +1,7 @@
+<template>
+  <ChevronDoubleRightIcon />
+</template>
+
+<script lang="ts" setup>
+import ChevronDoubleRightIcon from '@heroicons/vue/24/outline/esm/ChevronDoubleRightIcon';
+</script>

src/app/components/Icons/ChevronLeft.vue

@@ -0,0 +1,7 @@
+<template>
+  <ChevronLeftIcon />
+</template>
+
+<script lang="ts" setup>
+import ChevronLeftIcon from '@heroicons/vue/24/outline/esm/ChevronLeftIcon';
+</script>

src/app/components/Icons/ChevronRight.vue

@@ -0,0 +1,7 @@
+<template>
+  <ChevronRightIcon />
+</template>
+
+<script lang="ts" setup>
+import ChevronRightIcon from '@heroicons/vue/24/outline/esm/ChevronRightIcon';
+</script>

src/app/pages/index.vue

@@ -15,11 +15,6 @@
           v-if="clientsStore.clients && clientsStore.clients.length > 0"
         />
       </div>
-      <div>
-        <ClientsPagination
-          v-if="clientsStore.totalPages > 1"
-         />
-      </div>
       <ClientsEmpty
         v-if="clientsStore.clients && clientsStore.clients.length === 0"
       />
@@ -29,6 +24,11 @@
       >
         <IconsLoading class="mx-auto w-5 animate-spin" />
       </div>
+      <div>
+        <ClientsPagination
+          v-if="clientsStore.total > clientsStore.limit"
+         />
+      </div>
     </Panel>
   </main>
 </template>

src/app/stores/clients.ts

@@ -33,7 +33,7 @@ export const useClientsStore = defineStore('Clients', () => {
   const sortClient = ref<boolean>(true)
   const page = ref<number>(1);
   const limit = ref<number>(10);
-  const totalPages = ref<number>(1);
+  const total = ref<number>(0);
 
   const searchParams = ref({
     filter: undefined as string | undefined,
@@ -133,14 +133,13 @@ export const useClientsStore = defineStore('Clients', () => {
     });
 
     clients.value = transformedClients ?? null;
-    if (_clients.value){
-      let total = (_clients.value?.total ?? _clients.value?.clients?.length) ?? 0;
-      totalPages.value = total <= limit.value ? 1 : Math.ceil(total / limit.value);
-    }
+    total.value = (_clients.value?.total ?? _clients.value?.clients?.length) ?? 0;
   }
 
   function setSearchQuery(filter: string) {
     clients.value = null;
+    total.value = 0;
+    setPageQuery(1);
     searchParams.value.filter = filter || undefined;
   }
 
@@ -156,5 +155,5 @@ export const useClientsStore = defineStore('Clients', () => {
     searchParams.value.sortClient = value;
   }
 
-  return { clients, clientsPersist, sortClient, page, totalPages, refresh, _clients, setSearchQuery, setPageQuery, setSortClientQuery };
+  return { clients, clientsPersist, sortClient, page, total, limit, refresh, _clients, setSearchQuery, setPageQuery, setSortClientQuery };
 });