sajjadtalkhabi
92 lines
3.1 KiB
Vue
92 lines
3.1 KiB
Vue
<template>
|
|
<div class="tickets-page">
|
|
<BoxedIconTitleBlock
|
|
class="tickets-page__heading"
|
|
title="مدیریت پیامها"
|
|
desc="در این قسمت میتوانید تیکتها و پیامهای کاربران را مدیریت کنید"
|
|
>
|
|
<template #icon>
|
|
<SvgIcon name="chat" :size="24" color="var(--color-primary)" />
|
|
</template>
|
|
</BoxedIconTitleBlock>
|
|
|
|
<TicketsFilters v-model="filters" @apply="onFilterApply" @reset="onFilterReset" />
|
|
|
|
<SimpleTitleIconBlock title="لیست تمام تیکتها" class="tickets-page__list-title">
|
|
<template #header-icon>
|
|
<SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
|
|
</template>
|
|
</SimpleTitleIconBlock>
|
|
|
|
<SkeletonLoaderBlock v-if="isLoading" :rows="6" :cols-per-row="1" />
|
|
<div v-else-if="tickets.length > 0">
|
|
<TicketItem
|
|
v-for="ticket in tickets"
|
|
:key="ticket.id"
|
|
:ticket="ticket"
|
|
@show-details="onShowDetails"
|
|
/>
|
|
</div>
|
|
<NoItems v-else title="متاسفیم" desc="تیکتی برای نمایش وجود ندارد." />
|
|
|
|
<PaginationBlock :pagination="paginationMeta" @update:page="setPage" />
|
|
|
|
<TicketDetailsModal v-if="isModal('TicketDetailsModal')" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import useModal from '@/composables/useModal'
|
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
|
import NoItems from '@/components/blocks/NoItems.vue'
|
|
import { usePagination } from '@/composables/usePagination'
|
|
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
|
|
import { useAdminTicketsListQuery } from '@/services/query/admin-tickets'
|
|
import TicketItem from '@/features/admin/messages/components/TicketItem.vue'
|
|
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
|
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
|
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
|
|
import TicketsFilters from '@/features/admin/messages/components/TicketsFilters.vue'
|
|
import TicketDetailsModal from '@/features/admin/messages/components/modals/TicketDetailsModal.vue'
|
|
|
|
const { openModal, isModal } = useModal()
|
|
|
|
const filters = ref({ type: 'ticket', userName: '', status: '', fromDate: '', toDate: '' })
|
|
const { pagination, setPage, reset: resetPagination } = usePagination({ page: 1, perPage: 10 })
|
|
|
|
const { data, isLoading } = useAdminTicketsListQuery(filters, pagination, {
|
|
keepPreviousData: true,
|
|
})
|
|
|
|
const tickets = computed(() => data.value?.data ?? [])
|
|
const paginationMeta = computed(() => ({
|
|
page: pagination.value.page,
|
|
perPage: pagination.value.perPage,
|
|
...data.value?.meta,
|
|
}))
|
|
|
|
const onFilterApply = () => resetPagination()
|
|
const onFilterReset = () => resetPagination()
|
|
|
|
const onShowDetails = (ticket) => {
|
|
openModal('TicketDetailsModal', { id: ticket.id })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.tickets-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
|
|
&__heading {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
&__list-title {
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
}
|
|
</style>
|