Mamalizz
137 lines
4.3 KiB
Vue
137 lines
4.3 KiB
Vue
<script setup lang="ts">
|
|
// imports
|
|
|
|
import useGetAllTickets, {
|
|
type GetAllTicketsFilters,
|
|
} from "~/composables/api/tickets/useGetAllTickets";
|
|
|
|
// meta
|
|
|
|
definePageMeta({
|
|
middleware: "check-is-logged-in",
|
|
layout: "profile",
|
|
});
|
|
|
|
// state
|
|
|
|
const params = useUrlSearchParams();
|
|
|
|
const filters = ref<GetAllTicketsFilters>({
|
|
sort: undefined,
|
|
filter: undefined,
|
|
page: params.page ?? 1,
|
|
});
|
|
|
|
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>
|
|
<div class="w-full flex flex-col gap-5">
|
|
<ProfilePageTitle title="تیکت های شما" icon="bi:ticket" />
|
|
|
|
<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 class="flex items-center justify-start gap-3">
|
|
<span class="text-sm">ترتیب بر اساس</span>
|
|
<Select
|
|
:options="['جدید ترین', 'قدیمی ترین']"
|
|
v-model="filters.sort!"
|
|
triggerRootClass="!py-2.5"
|
|
class="w-[5rem]"
|
|
/>
|
|
</div>
|
|
<div class="flex items-center justify-start gap-3">
|
|
<span class="text-sm">وضعیت پرداخت</span>
|
|
<Select
|
|
:options="[
|
|
'پرداخت شده',
|
|
'در حال پردازش',
|
|
'لغو شده',
|
|
]"
|
|
v-model="filters.filter!"
|
|
triggerRootClass="!py-2.5"
|
|
class="w-[5rem]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<NuxtLink :to="{ name: 'profile-tickets-new' }">
|
|
<Button end-icon="bi:plus" size="md" class="rounded-full">
|
|
<span class="font-bold whitespace-pre">
|
|
تیکت جدید
|
|
</span>
|
|
</Button>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<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"
|
|
:key="index"
|
|
scope="col"
|
|
:class="
|
|
[0, 1, 2].includes(index)
|
|
? 'w-3/12'
|
|
: tableHeads.length - 1 == index
|
|
? 'w-1/2'
|
|
: 'w-2/12'
|
|
"
|
|
class="px-6 py-5 text-sm font-normal"
|
|
>
|
|
{{ tableHead }}
|
|
</th>
|
|
</template>
|
|
<template #tbody>
|
|
<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>
|
|
|
|
<style scoped></style>
|