From 4d8dccf2cc2ebb47b7b2c864f6d7e0faf081833d Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sun, 19 Jan 2025 19:16:08 +0330
Subject: [PATCH] added pagination

---
 frontend/components/global/Pagination.vue | 65 ++++++++++++++---------
 1 file changed, 41 insertions(+), 24 deletions(-)

diff --git a/frontend/components/global/Pagination.vue b/frontend/components/global/Pagination.vue
index a904a62..392a4ee 100644
--- a/frontend/components/global/Pagination.vue
+++ b/frontend/components/global/Pagination.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import type { GetProductsFilters } from "~/composables/api/products/useGetProducts";
+
 // types
 
 type Props = {
     total: number;
     items: {
-        type: "page" | "not-page";
+        type: string;
         value: number;
     }[];
 };
@@ -12,34 +14,48 @@ type Props = {
 // props
 
 defineProps<Props>();
+
+// state
+
+const params: GetProductsFilters = inject("params");
+
+const page = ref(Number(params.page) ?? 1);
+
+// watch
+
+watch(
+    () => page.value,
+    (newPage) => {
+        params.page = newPage;
+    }
+);
 </script>
 
 <template>
     <PaginationRoot
-        :total="100"
+        :total="total"
         :sibling-count="1"
-        :items-per-page="10"
+        :items-per-page="9"
         show-edges
+        v-model:page="page"
     >
-        <PaginationList
-            v-slot="{ items }"
-            class="flex items-center gap-1 text-stone-700 dark:text-white"
-        >
-            <PaginationFirst
-                class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition disabled:opacity-50 rounded-lg"
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+            <PaginationLast
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="ci:double-arrow-left" />
-            </PaginationFirst>
-            <PaginationPrev
-                class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition mr-4 disabled:opacity-50 rounded-lg"
+                <Icon name="bi:chevron-double-right" class="**:stroke-black" />
+            </PaginationLast>
+            <PaginationNext
+                class="w-9 h-9 ml-4 flex items-center justify-center cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="ci:chevron-left" />
-            </PaginationPrev>
+                <Icon name="bi:chevron-right" class="**:stroke-black" />
+            </PaginationNext>
+
             <template v-for="(page, index) in items">
                 <PaginationListItem
                     v-if="page.type === 'page'"
                     :key="index"
-                    class="w-9 h-9 border dark:border-stone-800 rounded-lg data-[selected]:!bg-white data-[selected]:shadow-sm data-[selected]:text-blackA11 hover:bg-white dark:hover:bg-stone-700/70 transition"
+                    class="w-9 h-9 border border-stone-800 rounded-lg data-[selected]:!bg-black data-[selected]:text-white data-[selected]:shadow-sm hover:bg-stone-700/20 transition"
                     :value="page.value"
                 >
                     {{ page.value }}
@@ -53,16 +69,17 @@ defineProps<Props>();
                     &#8230;
                 </PaginationEllipsis>
             </template>
-            <PaginationNext
-                class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition ml-4 disabled:opacity-50 rounded-lg"
+
+            <PaginationPrev
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition mr-4 disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="ci:chevron-right" />
-            </PaginationNext>
-            <PaginationLast
-                class="w-9 h-9 flex items-center justify-center bg-transparent hover:bg-white dark:hover:bg-stone-700/70 transition disabled:opacity-50 rounded-lg"
+                <Icon name="bi:chevron-left" class="**:stroke-black" />
+            </PaginationPrev>
+            <PaginationFirst
+                class="w-9 h-9 flex items-center justify-center bg-transparent cursor-pointer hover:bg-stone-700/20 transition disabled:opacity-50 disabled:cursor-not-allowed rounded-lg"
             >
-                <Icon name="ci:double-arrow-right" />
-            </PaginationLast>
+                <Icon name="bi:chevron-double-left" class="**:stroke-black" />
+            </PaginationFirst>
         </PaginationList>
     </PaginationRoot>
 </template>