sajjadtalkhabi
124 lines
3.3 KiB
Vue
124 lines
3.3 KiB
Vue
<template>
|
|
<BasicModal
|
|
title="جزئیات خدمت"
|
|
title-en="Service Detail"
|
|
width="95%"
|
|
max-width="64rem"
|
|
min-width="auto"
|
|
:show-close-button="true"
|
|
>
|
|
<template #default>
|
|
<div class="service-details">
|
|
<SkeletonLoaderBlock v-if="isLoading && !service" :rows="3" :cols-per-row="1" />
|
|
<template v-else>
|
|
<div class="service-details__row service-details__row--two">
|
|
<LineInfoBlock title="عنوان خدمت" :desc="serviceTitle" />
|
|
<LineInfoBlock title="نوع خدمت" :desc="serviceTypeLabel" />
|
|
</div>
|
|
|
|
<div class="service-details__row">
|
|
<LineInfoBlock title="درخواست" :desc="requestText" />
|
|
</div>
|
|
|
|
<div class="service-details__divider" />
|
|
|
|
<footer class="service-details__footer">
|
|
<BaseButton
|
|
text="ارسال پیام"
|
|
custom-class="service-details__send-btn"
|
|
@click="onSendMessage"
|
|
>
|
|
<template #appendIcon>
|
|
<SvgIcon name="arrow-left" :size="18" color="#fff" />
|
|
</template>
|
|
</BaseButton>
|
|
</footer>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</BasicModal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue'
|
|
import { SERVICE_TYPE } from '@/enums'
|
|
import useModal from '@/composables/useModal'
|
|
import BasicModal from '@/components/BasicModal.vue'
|
|
import BaseButton from '@/components/BaseButton.vue'
|
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
|
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
|
|
import { useAdminServiceQuery } from '@/services/query/admin-services'
|
|
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
|
|
|
defineOptions({ name: 'ServiceDetailsModal' })
|
|
|
|
const { openModal, getModal } = useModal()
|
|
|
|
const modalData = computed(() => getModal('ServiceDetailsModal')?.data ?? {})
|
|
const serviceId = computed(() => modalData.value.id ?? null)
|
|
|
|
const { data: service, isLoading } = useAdminServiceQuery(serviceId, {
|
|
enabled: () => !!serviceId.value,
|
|
})
|
|
|
|
// Subject is the canonical title on the new schema; older fixtures used `title`.
|
|
const serviceTitle = computed(
|
|
() => service.value?.subject || service.value?.title || service.value?.serviceTitle || '—'
|
|
)
|
|
|
|
const serviceTypeLabel = computed(
|
|
() => service.value?.typeLabel || SERVICE_TYPE[service.value?.type] || '—'
|
|
)
|
|
|
|
// Pre-migration fixtures used `requestText`/`description`; the new schema puts
|
|
// the body inside the first message.
|
|
const requestText = computed(
|
|
() =>
|
|
service.value?.requestText ||
|
|
service.value?.description ||
|
|
service.value?.messages?.[0]?.message ||
|
|
'—'
|
|
)
|
|
|
|
const onSendMessage = () => {
|
|
openModal('SendMessageModal', { id: serviceId.value })
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.service-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
text-align: start;
|
|
padding-block: 0.5rem;
|
|
|
|
&__row {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 0.5rem;
|
|
|
|
&--two {
|
|
@media (min-width: 640px) {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__divider {
|
|
border-block-end: 1px solid #ddd;
|
|
margin-block: 0.5rem;
|
|
}
|
|
|
|
&__footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__send-btn {
|
|
min-width: 17rem;
|
|
padding: 0 1.5rem;
|
|
}
|
|
}
|
|
</style>
|