sajjadtalkhabi
109 lines
3.8 KiB
Vue
109 lines
3.8 KiB
Vue
<template>
|
|
<div class="consultations-page">
|
|
<BoxedIconTitleBlock
|
|
class="consultations-page__heading"
|
|
title="مدیریت مشاوره"
|
|
desc="در این قسمت میتوانید مشاوره های خواسته شده را مدیریت کنید"
|
|
>
|
|
<template #icon>
|
|
<SvgIcon name="chat" :size="24" color="var(--color-primary)" />
|
|
</template>
|
|
</BoxedIconTitleBlock>
|
|
|
|
<ConsultationsFilters v-model="filters" @apply="onFilterApply" @reset="onFilterReset" />
|
|
|
|
<SimpleTitleIconBlock
|
|
title="لیست تمام مشاوره های خواسته شده"
|
|
class="consultations-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="consultations.length > 0">
|
|
<ConsultationItem
|
|
v-for="consultation in consultations"
|
|
:key="consultation.id"
|
|
:consultation="consultation"
|
|
@show-details="onShowDetails"
|
|
@change-status="onChangeStatus"
|
|
/>
|
|
</div>
|
|
<NoItems v-else title="متاسفیم" desc="درخواست مشاورهای برای نمایش وجود ندارد." />
|
|
|
|
<PaginationBlock :pagination="paginationMeta" @update:page="setPage" />
|
|
|
|
<CounselorConsultationDetailsModal v-if="isModal('CounselorConsultationDetailsModal')" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import useModal from '@/composables/useModal'
|
|
import { useQueryClient } from '@tanstack/vue-query'
|
|
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 BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
|
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
|
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
|
|
import ConsultationItem from '@/features/admin/consultations/components/ConsultationItem.vue'
|
|
import ConsultationsFilters from '@/features/admin/consultations/components/ConsultationsFilters.vue'
|
|
import CounselorConsultationDetailsModal from '@/features/counselor/components/modals/CounselorConsultationDetailsModal.vue'
|
|
import {
|
|
counselorTicketsKeys,
|
|
useChangeCounselorTicketStatusMutation,
|
|
useCounselorTicketsListQuery,
|
|
} from '@/services/query/counselor-tickets'
|
|
|
|
const { openModal, isModal } = useModal()
|
|
const queryClient = useQueryClient()
|
|
|
|
const filters = ref({ type: 'advise', userName: '', status: '', fromDate: '', toDate: '' })
|
|
const { pagination, setPage, reset: resetPagination } = usePagination({ page: 1, perPage: 10 })
|
|
|
|
const { data, isLoading } = useCounselorTicketsListQuery(filters, pagination, {
|
|
keepPreviousData: true,
|
|
})
|
|
|
|
const consultations = 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 = (consultation) => {
|
|
openModal('CounselorConsultationDetailsModal', { id: consultation.id })
|
|
}
|
|
|
|
const changeStatusMutation = useChangeCounselorTicketStatusMutation()
|
|
|
|
const onChangeStatus = async ({ consultation, status }) => {
|
|
await changeStatusMutation.mutateAsync({ id: consultation.id, payload: { status } })
|
|
await queryClient.invalidateQueries({ queryKey: counselorTicketsKeys.all })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.consultations-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
|
|
&__heading {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
&__list-title {
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
}
|
|
</style>
|