heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

connected ticket table to api

Browse Source
This commit is contained in:
Mamalizz
2025-02-27 20:50:28 +03:30
parent d5e295c08b
commit b0e4469ae8
1 changed files with 98 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/pages/profile/tickets/index.vue
+98 -32
View File
@@ -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>