connected tickets table to api

frontend/pages/profile/tickets/index.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+// imports
+
+import useGetAllTickets, {
+    type GetAllTicketsFilters,
+} from "~/composables/api/tickets/useGetAllTickets";
+
 // meta
 
 definePageMeta({
@@ -8,10 +14,12 @@ definePageMeta({
 
 // state
 
-const filters = ref({
+const params = useUrlSearchParams();
+
+const filters = ref<GetAllTicketsFilters>({
     sort: undefined,
-    status: undefined,
-    search: "",
+    filter: undefined,
+    page: params.page ?? 1,
 });
 
 const tableHeads = ref([
@@ -21,6 +29,22 @@ const tableHeads = ref([
     "وضعیت",
     "عملیات",
 ]);
+
+// queries
+
+const { data, isLoading: ticketsIsLoading } = useGetAllTickets(filters);
+
+// computed
+
+const tickets = computed(() => {
+    return data.value?.results.flat();
+});
+
+const paginationData = computed(() => {
+    return tickets!.value?.results.map((_, i: number) => {
+        return { type: "page", value: i };
+    });
+});
 </script>
 
 <template>
@@ -47,7 +71,7 @@ const tableHeads = ref([
                                 'در حال پردازش',
                                 'لغو شده',
                             ]"
-                            v-model="filters.status!"
+                            v-model="filters.filter!"
                             triggerRootClass="!py-2.5"
                             class="w-[5rem]"
                         />
@@ -63,7 +87,14 @@ const tableHeads = ref([
                 </NuxtLink>
             </div>
 
-            <Table>
+            <Placeholder
+                v-if="!tickets?.length && !ticketsIsLoading"
+                class="!w-full !py-[5rem]"
+                icon="bi:ticket"
+                title="تیکتی یافت نشد"
+            />
+
+            <Table v-else>
                 <template #thead>
                     <th
                         v-for="(tableHead, index) in tableHeads"
@@ -82,9 +113,22 @@ const tableHeads = ref([
                     </th>
                 </template>
                 <template #tbody>
-                    <TicketsTableRow v-for="i in 4" />
+                    <template v-if="ticketsIsLoading">
+                        <TicketsTableRowLoading v-for="i in 5" />
+                    </template>
+                    <template v-else>
+                        <TicketsTableRow
+                            v-for="(ticket, index) in tickets"
+                            :key="index"
+                            :data="ticket"
+                        />
+                    </template>
                 </template>
             </Table>
+
+            <div v-if="tickets?.length > 10" class="w-full flex-center py-10">
+                <Pagination :items="paginationData" :total="data?.count" />
+            </div>
         </div>
     </div>
 </template>