Mamalizz
95 lines
3.1 KiB
Vue
95 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import TicketsTableRow from "~/components/profile/tickets/TicketsTableRow.vue";
|
|
|
|
// meta
|
|
|
|
definePageMeta({
|
|
middleware: "check-is-logged-in",
|
|
layout: "profile",
|
|
});
|
|
|
|
// state
|
|
|
|
const filters = ref({
|
|
sort: undefined,
|
|
status: undefined,
|
|
search: "",
|
|
});
|
|
|
|
const tableHeads = ref([
|
|
"دسته بندی",
|
|
"موضوع",
|
|
"تاریخ ایجاد و بروز رسانی",
|
|
"وضعیت",
|
|
"عملیات",
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full flex flex-col gap-10">
|
|
<ProfilePageTitle title="تیکت های شما" icon="bi:ticket" />
|
|
|
|
<div class="w-full flex flex-col gap-8">
|
|
<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.status!"
|
|
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>
|
|
|
|
<Table>
|
|
<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>
|
|
<TicketsTableRow v-for="i in 4" />
|
|
</template>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|