fix: ticket
This commit is contained in:
sajjadtalkhabi
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="status-tile">
|
||||
<div class="status-tile__icon" :style="{ color: iconColor }">
|
||||
<SvgIcon :name="icon" :size="32" />
|
||||
</div>
|
||||
<p class="status-tile__label">{{ label }}</p>
|
||||
<p class="status-tile__count" :style="{ color: countColor }">{{ count }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
|
||||
defineProps({
|
||||
icon: { type: String, required: true },
|
||||
label: { type: String, required: true },
|
||||
count: { type: [Number, String], default: 0 },
|
||||
/** Hex color for the count number. Defaults to a neutral gray. */
|
||||
countColor: { type: String, default: '#4C4C4C' },
|
||||
/** Hex color for the icon. Defaults to a neutral gray. */
|
||||
iconColor: { type: String, default: '#A7A7A7' },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.status-tile {
|
||||
flex: 0 0 12.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.5rem;
|
||||
padding: 0.875rem 0.75rem 1rem;
|
||||
background: rgba(255, 255, 255, 40%);
|
||||
box-shadow: 0 6.75px 19.4px rgba(0, 0, 0, 4%);
|
||||
border-radius: 0.75rem;
|
||||
min-height: 7rem;
|
||||
|
||||
&__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
}
|
||||
|
||||
&__label {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 400;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.25;
|
||||
color: #4c4c4c;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&__count {
|
||||
font-family: var(--font-family-en);
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="ticket-item">
|
||||
<div class="ticket-item__user">
|
||||
<div v-if="ticket.student?.avatarUrl" class="ticket-item__avatar">
|
||||
<img :src="ticket.student.avatarUrl" :alt="userName" />
|
||||
</div>
|
||||
<div v-else class="ticket-item__avatar ticket-item__avatar--placeholder">
|
||||
<SvgIcon name="user" :size="24" color="#bcbcbc" />
|
||||
</div>
|
||||
<div class="ticket-item__info">
|
||||
<p class="ticket-item__name">{{ userName }}</p>
|
||||
<p class="ticket-item__request-id">
|
||||
<span class="ticket-item__request-id-label">شماره درخواست :</span>
|
||||
<span class="ticket-item__request-id-value">{{ ticket.id || '—' }}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ticket-item__meta">
|
||||
<Badge variant="neutral" size="sm" label="تاریخ پیام :" :value="createdAt" />
|
||||
<Badge :variant="statusVariant" size="sm" dot :value="statusLabel" />
|
||||
</div>
|
||||
|
||||
<div class="ticket-item__actions">
|
||||
<BaseButton
|
||||
text="جزئیات تیکت"
|
||||
custom-class="ticket-item__details-btn"
|
||||
@click="emit('show-details', ticket)"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="caret-left" :size="16" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { TICKET_STATUS } from '@/enums'
|
||||
import Badge from '@/components/Badge.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
|
||||
const STATUS_VARIANT = {
|
||||
open: 'warning',
|
||||
answered: 'success',
|
||||
closed: 'info',
|
||||
}
|
||||
|
||||
const props = defineProps({
|
||||
ticket: { type: Object, required: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(['show-details'])
|
||||
|
||||
const userName = computed(() => props.ticket.student?.name || props.ticket.subject || '—')
|
||||
|
||||
const statusLabel = computed(() => TICKET_STATUS[props.ticket.status] || '—')
|
||||
const statusVariant = computed(() => STATUS_VARIANT[props.ticket.status] || 'neutral')
|
||||
|
||||
const createdAt = computed(() => formatJalaaliDate(props.ticket.createdAt) || '—')
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ticket-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.625rem;
|
||||
padding: 0.75rem;
|
||||
background: rgba(255, 255, 255, 50%);
|
||||
box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 70%);
|
||||
border-radius: 0.875rem;
|
||||
margin-bottom: 0.625rem;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 1 1 30%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
min-width: 3rem;
|
||||
border-radius: 9999px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&--placeholder {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
&__info {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&__name {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.95rem;
|
||||
color: #4b4b4b;
|
||||
margin: 0 0 0.25rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&__request-id {
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.7rem;
|
||||
color: #8f8f8f;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__request-id-label {
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
&__request-id-value {
|
||||
font-family: var(--font-family-en);
|
||||
color: #535353;
|
||||
}
|
||||
|
||||
&__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0.375rem;
|
||||
flex: 1 1 45%;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
flex: 1 1 100%;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__details-btn {
|
||||
min-width: 9rem;
|
||||
padding: 0 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<BasicModal width="95%" max-width="58rem" min-width="auto" :show-close-button="true">
|
||||
<template #default="{ close }">
|
||||
<form class="ctm" @submit.prevent="onSubmit(close)">
|
||||
<header class="ctm__header">
|
||||
<LineTitleBlock title="ارسال تیکت جدید" title-en="New ticket" />
|
||||
</header>
|
||||
|
||||
<div class="ctm__row ctm__row--two">
|
||||
<TextField
|
||||
v-model="form.subject"
|
||||
name="subject"
|
||||
label="موضوع را وارد کنید"
|
||||
placeholder="موضوع تیکت"
|
||||
:error="errors.subject"
|
||||
@blur="validateAt('subject', form.subject)"
|
||||
/>
|
||||
<SelectField
|
||||
v-model="form.priority"
|
||||
name="priority"
|
||||
label="اولویت تیکت"
|
||||
placeholder="انتخاب کنید"
|
||||
:options="priorityOptions"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
:error="errors.priority"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ctm__row">
|
||||
<TextareaField
|
||||
v-model="form.message"
|
||||
name="message"
|
||||
label="توضیحات خودتان را وارد کنید"
|
||||
placeholder="لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."
|
||||
:row="4"
|
||||
:error="errors.message"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ctm__upload">
|
||||
<FileUploader
|
||||
v-model="files"
|
||||
accept="image/*,application/pdf"
|
||||
:max-files="5"
|
||||
@select="onFilesSelect"
|
||||
@error="onFileError"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="ctm__divider" />
|
||||
|
||||
<footer class="ctm__footer">
|
||||
<button type="button" class="ctm__cancel" @click="close">
|
||||
<span>منصرف شدم</span>
|
||||
<SvgIcon name="caret-left" :size="16" color="currentColor" />
|
||||
</button>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
text="ارسال تیکت"
|
||||
custom-class="ctm__submit"
|
||||
:loading="createMutation.isPending.value"
|
||||
:disabled="uploadMutation.isPending.value"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</footer>
|
||||
</form>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import * as yup from 'yup'
|
||||
import { toast } from 'vue3-toastify'
|
||||
import useYup from '@/composables/useYup'
|
||||
import BasicModal from '@/components/BasicModal.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import { useQueryClient } from '@tanstack/vue-query'
|
||||
import TextField from '@/components/form/TextField.vue'
|
||||
import SelectField from '@/components/form/SelectField.vue'
|
||||
import LineTitleBlock from '@/components/LineTitleBlock.vue'
|
||||
import FileUploader from '@/components/form/FileUploader.vue'
|
||||
import { objectToFormData } from '@/utils/object-to-formdata'
|
||||
import { useUploadMediaMutation } from '@/services/query/auth'
|
||||
import TextareaField from '@/components/form/TextareaField.vue'
|
||||
import {
|
||||
studentTicketsKeys,
|
||||
useCreateStudentTicketMutation,
|
||||
} from '@/services/query/student-tickets'
|
||||
|
||||
defineOptions({ name: 'CreateTicketModal' })
|
||||
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const priorityOptions = [
|
||||
{ value: 'very_urgent', label: 'بسیار فوری' },
|
||||
{ value: 'urgent', label: 'فوری' },
|
||||
{ value: 'normal', label: 'عادی' },
|
||||
{ value: 'low', label: 'کم اهمیت' },
|
||||
]
|
||||
|
||||
const form = ref({
|
||||
subject: '',
|
||||
priority: 'very_urgent',
|
||||
message: '',
|
||||
})
|
||||
|
||||
// Uploaded-media descriptors { id, name, size, url }, populated as files are
|
||||
// picked. Submit just collects the IDs (same pattern as CreateServiceForm /
|
||||
// AddAssignmentModal).
|
||||
const files = ref([])
|
||||
|
||||
const schema = yup.object({
|
||||
subject: yup.string().trim().required('موضوع تیکت را وارد کنید'),
|
||||
priority: yup.string().required('اولویت را انتخاب کنید'),
|
||||
message: yup
|
||||
.string()
|
||||
.trim()
|
||||
.min(5, 'توضیحات حداقل ۵ کاراکتر باشد')
|
||||
.required('توضیحات را وارد کنید'),
|
||||
})
|
||||
|
||||
const { validate, validateAt, errors, resetErrors } = useYup(schema)
|
||||
|
||||
const uploadMutation = useUploadMediaMutation()
|
||||
const createMutation = useCreateStudentTicketMutation()
|
||||
|
||||
// FileUploader emits `select` on add (we upload + push the result) and
|
||||
// `update:modelValue` on remove (handled by v-model directly).
|
||||
const onFilesSelect = async (picked) => {
|
||||
for (const file of picked) {
|
||||
try {
|
||||
const fd = objectToFormData({ file, purpose: 'attachment', context: 'ticket' })
|
||||
const response = await uploadMutation.mutateAsync(fd)
|
||||
const payload = response?.data ?? response
|
||||
const id = payload?.id ?? payload?.uploadId
|
||||
if (id == null) continue
|
||||
files.value = [
|
||||
...files.value,
|
||||
{ id, name: file.name, size: file.size, url: payload?.url ?? '' },
|
||||
]
|
||||
} catch {
|
||||
toast.error(`بارگذاری فایل "${file.name}" با خطا مواجه شد.`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const onFileError = (msg) => toast.warning(msg)
|
||||
|
||||
const onSubmit = async (close) => {
|
||||
const { isValid, payload } = await validate(form.value)
|
||||
if (!isValid) return
|
||||
|
||||
try {
|
||||
await createMutation.mutateAsync({
|
||||
type: 'ticket',
|
||||
// Backend POST /student/tickets accepts `category` — we use it to carry
|
||||
// the FE-only priority value until the backend adds a dedicated field.
|
||||
category: payload.priority,
|
||||
subject: payload.subject,
|
||||
message: payload.message,
|
||||
mediaIds: files.value.map((f) => f.id).filter((id) => id != null),
|
||||
})
|
||||
await queryClient.invalidateQueries({ queryKey: studentTicketsKeys.all })
|
||||
toast.success('تیکت با موفقیت ثبت شد.')
|
||||
resetErrors()
|
||||
form.value = { subject: '', priority: 'very_urgent', message: '' }
|
||||
files.value = []
|
||||
close?.()
|
||||
} catch {
|
||||
toast.error('ارسال تیکت با خطا مواجه شد.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ctm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: start;
|
||||
padding-block: 0.25rem 0.5rem;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0.875rem;
|
||||
|
||||
&--two {
|
||||
@media (min-width: 640px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__upload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
border-block-end: 1px solid #ddd;
|
||||
margin-block: 0.25rem;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__cancel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #969696;
|
||||
|
||||
&:hover {
|
||||
color: #6b6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
&__submit {
|
||||
min-width: 16rem;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,144 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
title="جزئیات تیکت"
|
||||
title-en="Ticket details"
|
||||
width="95%"
|
||||
max-width="58rem"
|
||||
min-width="auto"
|
||||
:show-close-button="true"
|
||||
>
|
||||
<template #default>
|
||||
<div class="tdm">
|
||||
<SkeletonLoaderBlock v-if="isLoading && !ticket" :rows="2" :cols-per-row="1" />
|
||||
|
||||
<template v-else-if="ticket">
|
||||
<div class="tdm__top">
|
||||
<Badge :variant="statusVariant" size="sm" dot :value="statusLabel" />
|
||||
<span class="tdm__date">{{ requestDate }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="messages.length > 0" class="tdm__messages">
|
||||
<div v-for="message in messages" :key="message.id" class="tdm__bubble">
|
||||
<p class="tdm__text">{{ message.message }}</p>
|
||||
<span class="tdm__time">{{ messageTime(message) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<NoItems v-else title="پیامی نیست" desc="هنوز پیامی برای این تیکت ثبت نشده است." />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { TICKET_STATUS } from '@/enums'
|
||||
import Badge from '@/components/Badge.vue'
|
||||
import useModal from '@/composables/useModal'
|
||||
import BasicModal from '@/components/BasicModal.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import { formatJalaaliDate } from '@/utils/date-utils'
|
||||
import { useStudentTicketQuery } from '@/services/query/student-tickets'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
|
||||
defineOptions({ name: 'TicketDetailsModal' })
|
||||
|
||||
const STATUS_VARIANT = {
|
||||
open: 'warning',
|
||||
answered: 'success',
|
||||
closed: 'info',
|
||||
}
|
||||
|
||||
const { getModal } = useModal()
|
||||
|
||||
const modalData = computed(() => getModal('TicketDetailsModal')?.data ?? {})
|
||||
const ticketId = computed(() => modalData.value.id ?? null)
|
||||
|
||||
const { data: ticket, isLoading } = useStudentTicketQuery(ticketId, {
|
||||
enabled: () => !!ticketId.value,
|
||||
})
|
||||
|
||||
const messages = computed(() => ticket.value?.messages ?? [])
|
||||
|
||||
const statusLabel = computed(() => TICKET_STATUS[ticket.value?.status] || '—')
|
||||
const statusVariant = computed(() => STATUS_VARIANT[ticket.value?.status] || 'neutral')
|
||||
|
||||
const requestDate = computed(() => formatJalaaliDate(ticket.value?.createdAt) || '—')
|
||||
|
||||
const messageTime = (message) => {
|
||||
if (!message.createdAt) return ''
|
||||
const d = new Date(message.createdAt)
|
||||
if (Number.isNaN(d.getTime())) return ''
|
||||
return d.toLocaleTimeString('fa-IR', { hour: '2-digit', minute: '2-digit' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tdm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-block: 0.25rem 0.5rem;
|
||||
text-align: start;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&__top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__date {
|
||||
background: #f5f5f5;
|
||||
color: #a3a3a3;
|
||||
border-radius: 9999px;
|
||||
padding: 0.3rem 0.875rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.7rem;
|
||||
line-height: 1.45;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__messages {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
&__bubble {
|
||||
position: relative;
|
||||
background: #f6f6f6;
|
||||
padding: 1rem 1rem 1.5rem;
|
||||
border-radius: 0.75rem 0.75rem 0;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
&__text {
|
||||
font-family: var(--font-family-fa);
|
||||
font-weight: 300;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.7;
|
||||
margin: 0;
|
||||
text-align: justify;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
&__time {
|
||||
position: absolute;
|
||||
inset-inline-end: 1rem;
|
||||
inset-block-end: 0.5rem;
|
||||
font-family: var(--font-family-fa);
|
||||
font-size: 0.65rem;
|
||||
color: #a7a7a7;
|
||||
line-height: 1.45;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,207 @@
|
||||
<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>
|
||||
|
||||
<div class="tickets-page__tiles-scroll">
|
||||
<div class="tickets-page__tiles">
|
||||
<StatusTile
|
||||
v-for="tile in statusTiles"
|
||||
:key="tile.key"
|
||||
:icon="tile.icon"
|
||||
:label="tile.label"
|
||||
:count="tile.count"
|
||||
:count-color="tile.countColor"
|
||||
:icon-color="tile.iconColor"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tickets-page__title-bar">
|
||||
<SimpleTitleIconBlock title="لیست تمام تیکتها" class="tickets-page__list-title">
|
||||
<template #header-icon>
|
||||
<SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
|
||||
</template>
|
||||
</SimpleTitleIconBlock>
|
||||
<BaseButton
|
||||
type="button"
|
||||
text="ارسال تیکت جدید"
|
||||
custom-class="tickets-page__new-btn"
|
||||
@click="onNewTicket"
|
||||
>
|
||||
<template #appendIcon>
|
||||
<SvgIcon name="plus" :size="16" color="#fff" />
|
||||
</template>
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
<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')" />
|
||||
<CreateTicketModal v-if="isModal('CreateTicketModal')" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
import useModal from '@/composables/useModal'
|
||||
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
||||
import BaseButton from '@/components/BaseButton.vue'
|
||||
import NoItems from '@/components/blocks/NoItems.vue'
|
||||
import { usePagination } from '@/composables/usePagination'
|
||||
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
|
||||
import { useStudentTicketsQuery } from '@/services/query/student-tickets'
|
||||
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
||||
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
||||
import StatusTile from '@/features/student/tickets/components/StatusTile.vue'
|
||||
import TicketItem from '@/features/student/tickets/components/TicketItem.vue'
|
||||
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
|
||||
import CreateTicketModal from '@/features/student/tickets/components/modals/CreateTicketModal.vue'
|
||||
import TicketDetailsModal from '@/features/student/tickets/components/modals/TicketDetailsModal.vue'
|
||||
|
||||
const { openModal, isModal } = useModal()
|
||||
|
||||
const filters = ref({ type: 'ticket' })
|
||||
const { pagination, setPage } = usePagination({ page: 1, perPage: 10 })
|
||||
|
||||
const { data, isLoading } = useStudentTicketsQuery(filters, pagination, {
|
||||
keepPreviousData: true,
|
||||
})
|
||||
|
||||
// The query select normalizes to { data: Array, meta }. The page also tolerates
|
||||
// a backend that nests under `data.items` (Laravel-style pagination) until the
|
||||
// backend shape is locked in.
|
||||
const tickets = computed(() => {
|
||||
const raw = data.value?.data
|
||||
if (Array.isArray(raw)) return raw
|
||||
if (Array.isArray(raw?.items)) return raw.items
|
||||
return []
|
||||
})
|
||||
|
||||
const paginationMeta = computed(() => ({
|
||||
page: pagination.value.page,
|
||||
perPage: pagination.value.perPage,
|
||||
...data.value?.meta,
|
||||
}))
|
||||
|
||||
const statusTiles = computed(() => {
|
||||
const list = tickets.value
|
||||
const countBy = (predicate) => list.filter((_el) => predicate(_el)).length
|
||||
return [
|
||||
{
|
||||
key: 'all',
|
||||
icon: 'list-bullets',
|
||||
label: 'همه تیکتها',
|
||||
count: list.length,
|
||||
iconColor: '#A7A7A7',
|
||||
countColor: '#4C4C4C',
|
||||
},
|
||||
{
|
||||
key: 'open',
|
||||
icon: 'chat',
|
||||
label: 'باز',
|
||||
count: countBy((t) => t.status === 'open'),
|
||||
iconColor: '#CC6F00',
|
||||
countColor: '#CC6F00',
|
||||
},
|
||||
{
|
||||
key: 'in_review',
|
||||
icon: 'chat-centered-dots',
|
||||
label: 'در حال بررسی',
|
||||
count: countBy((t) => t.status === 'answered' && t.assignee),
|
||||
iconColor: '#007074',
|
||||
countColor: '#007074',
|
||||
},
|
||||
{
|
||||
key: 'answered',
|
||||
icon: 'check-square',
|
||||
label: 'پاسخ داده شده',
|
||||
count: countBy((t) => t.status === 'answered'),
|
||||
iconColor: '#33BE65',
|
||||
countColor: '#33BE65',
|
||||
},
|
||||
{
|
||||
key: 'closed',
|
||||
icon: 'close',
|
||||
label: 'بسته شده',
|
||||
count: countBy((t) => t.status === 'closed'),
|
||||
iconColor: '#CC2831',
|
||||
countColor: '#CC2831',
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
const onShowDetails = (ticket) => {
|
||||
openModal('TicketDetailsModal', { id: ticket.id })
|
||||
}
|
||||
|
||||
const onNewTicket = () => {
|
||||
openModal('CreateTicketModal')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tickets-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
// Horizontal scroll for the 5 status tiles on small screens.
|
||||
&__tiles-scroll {
|
||||
overflow: auto hidden;
|
||||
margin-inline: -0.25rem;
|
||||
padding-inline: 0.25rem;
|
||||
padding-block: 0.5rem;
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
&__tiles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.75rem;
|
||||
min-width: max-content;
|
||||
}
|
||||
|
||||
&__title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-block: 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
&__list-title {
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__new-btn {
|
||||
min-width: 11rem;
|
||||
height: 2.25rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user