From b0e4469ae81adeae3d61abff021a69d060c245f1 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 27 Feb 2025 20:50:28 +0330
Subject: [PATCH] connected ticket table to api

---
 frontend/pages/profile/tickets/index.vue | 130 +++++++++++++++++------
 1 file changed, 98 insertions(+), 32 deletions(-)

diff --git a/frontend/pages/profile/tickets/index.vue b/frontend/pages/profile/tickets/index.vue
index 363050c..13d71a6 100644
--- a/frontend/pages/profile/tickets/index.vue
+++ b/frontend/pages/profile/tickets/index.vue
@@ -14,12 +14,14 @@ definePageMeta({
 
 // state
 
-const params = useUrlSearchParams();
+const params: GetAllTicketsFilters = useUrlSearchParams("history");
 
-const filters = ref<GetAllTicketsFilters>({
-    sort: undefined,
-    filter: undefined,
-    page: params.page ?? 1,
+const filters = computed(() => {
+    return {
+        sort: params.sort ?? "created_at",
+        status: params.status ?? "",
+        page: params.page ?? 1,
+    };
 });
 
 const tableHeads = ref([
@@ -30,9 +32,39 @@ const tableHeads = ref([
     "عملیات",
 ]);
 
+const sortFilters = ref([
+    {
+        title: "جدید ترین",
+        value: "created_at",
+    },
+    {
+        title: "قدیمی ترین",
+        value: "-created_at",
+    },
+]);
+
+const statusFilters = ref([
+    {
+        title: "پاسخ داده شده",
+        value: "resolved",
+    },
+    {
+        title: "در حال پردازش",
+        value: "in_progress",
+    },
+    {
+        title: "بسته شده",
+        value: "closed",
+    },
+]);
+
+// provide / inject
+
+provide("params", params);
+
 // queries
 
-const { data, isLoading: ticketsIsLoading } = useGetAllTickets(filters);
+const { data, isPending: ticketsIsPending } = useGetAllTickets(filters);
 
 // computed
 
@@ -40,10 +72,10 @@ const tickets = computed(() => {
     return data.value?.results.flat();
 });
 
-const hasTickets = computed(() => tickets.value?.length > 0);
+const hasTickets = computed(() => data.value?.count > 0);
 
 const paginationData = computed(() => {
-    return tickets!.value?.results.map((_, i: number) => {
+    return data.value?.results.map((_, i: number) => {
         return { type: "page", value: i };
     });
 });
@@ -56,33 +88,67 @@ const paginationData = computed(() => {
         <div class="w-full flex flex-col gap-5">
             <div class="w-full flex items-center justify-between px-5">
                 <div class="flex items-center justify-start gap-8">
-                    <div
-                        v-if="hasTickets"
-                        class="flex items-center justify-start gap-3"
-                    >
+                    <div class="flex items-center justify-start gap-3">
                         <span class="text-sm">ترتیب بر اساس</span>
                         <Select
-                            :options="['جدید ترین', 'قدیمی ترین']"
-                            v-model="filters.sort!"
+                            v-model="params.sort!"
                             triggerRootClass="!py-2.5"
-                            class="w-[5rem]"
-                        />
+                            class="w-[6rem]"
+                        >
+                            <template #content>
+                                <SelectGroup>
+                                    <SelectItem
+                                        v-for="(category, index) in sortFilters"
+                                        :key="index"
+                                        class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                                        :value="category.value"
+                                    >
+                                        <SelectItemIndicator
+                                            class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                                        >
+                                            <Icon name="bi:check" size="20" />
+                                        </SelectItemIndicator>
+                                        <SelectItemText
+                                            class="text-end font-iran-yekan-x text-sm"
+                                        >
+                                            {{ category.title }}
+                                        </SelectItemText>
+                                    </SelectItem>
+                                </SelectGroup>
+                            </template>
+                        </Select>
                     </div>
-                    <div
-                        v-if="hasTickets"
-                        class="flex items-center justify-start gap-3"
-                    >
-                        <span class="text-sm">وضعیت پرداخت</span>
+                    <div class="flex items-center justify-start gap-3">
+                        <span class="text-sm">وضعیت</span>
                         <Select
-                            :options="[
-                                'پرداخت شده',
-                                'در حال پردازش',
-                                'لغو شده',
-                            ]"
-                            v-model="filters.filter!"
+                            v-model="params.status!"
                             triggerRootClass="!py-2.5"
-                            class="w-[5rem]"
-                        />
+                            class="w-[6rem]"
+                        >
+                            <template #content>
+                                <SelectGroup>
+                                    <SelectItem
+                                        v-for="(
+                                            category, index
+                                        ) in statusFilters"
+                                        :key="index"
+                                        class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                                        :value="category.value"
+                                    >
+                                        <SelectItemIndicator
+                                            class="absolute left-0 w-[25px] inline-flex items-center justify-center"
+                                        >
+                                            <Icon name="bi:check" size="20" />
+                                        </SelectItemIndicator>
+                                        <SelectItemText
+                                            class="text-end font-iran-yekan-x text-sm"
+                                        >
+                                            {{ category.title }}
+                                        </SelectItemText>
+                                    </SelectItem>
+                                </SelectGroup>
+                            </template>
+                        </Select>
                     </div>
                 </div>
 
@@ -96,7 +162,7 @@ const paginationData = computed(() => {
             </div>
 
             <Placeholder
-                v-if="!hasTickets && !ticketsIsLoading"
+                v-if="!hasTickets && !ticketsIsPending"
                 class="!w-full !py-[5rem]"
                 icon="bi:ticket"
                 title="تیکتی یافت نشد"
@@ -121,7 +187,7 @@ const paginationData = computed(() => {
                     </th>
                 </template>
                 <template #tbody>
-                    <template v-if="ticketsIsLoading">
+                    <template v-if="ticketsIsPending">
                         <TicketsTableRowLoading v-for="i in 5" />
                     </template>
                     <template v-else>
@@ -134,7 +200,7 @@ const paginationData = computed(() => {
                 </template>
             </Table>
 
-            <div v-if="tickets?.length > 10" class="w-full flex-center py-10">
+            <div v-if="data?.count > 7" class="w-full flex-center py-10">
                 <Pagination :items="paginationData" :total="data?.count" />
             </div>
         </div>