fix: ticket

2026-06-05 18:43:02 +03:30
parent 1c665830b0
commit ea562aeefa
53 changed files with 2475 additions and 859 deletions
@@ -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>