fix: admin courses

This commit is contained in:
sajjadtalkhabi
2026-05-27 14:47:19 +03:30
parent 7eb2984f5e
commit cb86920015
50 changed files with 787 additions and 649 deletions
+1 -1
View File
@@ -1,2 +1,2 @@
VITE_API_BASE_URL=https://tripwisedaily.ir/api VITE_API_BASE_URL=http://109.122.252.86/api
VITE_USE_MOCKS=false VITE_USE_MOCKS=false
+1 -1
View File
@@ -49,7 +49,7 @@
@click="removeFile(index, file)" @click="removeFile(index, file)"
> >
<template #icon> <template #icon>
<SvgIcon name="close" :size="16" /> <SvgIcon name="close" color="red" :size="16" />
</template> </template>
</CircleButton> </CircleButton>
</div> </div>
+2 -2
View File
@@ -15,8 +15,8 @@ export default function useAuth() {
const savePhoneNumber = (phoneNumber) => { const savePhoneNumber = (phoneNumber) => {
if (!phoneNumber) return if (!phoneNumber) return
const current = tokenService.getUserInfo() || {} const current = tokenService.getUserInfo() || {}
if (!current.phoneNumber) { if (!current.phone && !current.phoneNumber) {
store.setUser({ ...current, phoneNumber }) store.setUser({ ...current, phone: phoneNumber })
} }
} }
+16
View File
@@ -36,6 +36,7 @@ export const fields = {
activitySummary: 'خلاصهٔ فعالیت', activitySummary: 'خلاصهٔ فعالیت',
avatar: 'تصویر پروفایل', avatar: 'تصویر پروفایل',
avatarId: 'تصویر پروفایل',
image: 'تصویر', image: 'تصویر',
status: 'وضعیت', status: 'وضعیت',
@@ -71,6 +72,9 @@ export const fields = {
educationStatus: 'وضعیت تحصیلی', educationStatus: 'وضعیت تحصیلی',
fieldOfStudy: 'رشتهٔ تحصیلی', fieldOfStudy: 'رشتهٔ تحصیلی',
seminaryLevel: 'مقطع حوزه', seminaryLevel: 'مقطع حوزه',
universityLevel: 'مقطع دانشگاهی',
universityName: 'نام حوزه علمیه / دانشگاه',
workExperienceSummary: 'خلاصهٔ سوابق شغلی',
hijabApproach: 'رویکرد حجاب', hijabApproach: 'رویکرد حجاب',
prerequisites: 'پیش‌نیازها', prerequisites: 'پیش‌نیازها',
@@ -84,5 +88,17 @@ export const fields = {
otherPlatformDetails: 'جزئیات سایر بسترها', otherPlatformDetails: 'جزئیات سایر بسترها',
faithProductionAudio: 'صدای تولید ایمانی', faithProductionAudio: 'صدای تولید ایمانی',
faithProductionId: 'صدای تولید ایمانی',
leaderMessageVideo: 'ویدیوی پیام رهبر', leaderMessageVideo: 'ویدیوی پیام رهبر',
leaderMessageId: 'ویدیوی پیام رهبر',
responseToLowSatisfaction: 'واکنش به رضایت پایین مخاطب',
responseToLowSatisfactionDescription: 'توضیح واکنش به رضایت پایین مخاطب',
responseToSessionCancellation: 'واکنش به لغو جلسه',
responseToSessionCancellationDescription: 'توضیح واکنش به لغو جلسه',
responseToAudienceConflict: 'واکنش به تعارض با مخاطب',
responseToAudienceConflictDescription: 'توضیح واکنش به تعارض با مخاطب',
responseToCompetingPropagator: 'واکنش به مبلغ رقیب',
responseToCompetingPropagatorDescription: 'توضیح واکنش به مبلغ رقیب',
responseToUnqualifiedAdvisors: 'واکنش به مشاوران غیرمتخصص',
} }
+2 -1
View File
@@ -148,6 +148,7 @@ export const COURSE_CONTENT_TYPE_ACCEPT = Object.freeze({
export const SESSION_TYPE = Object.freeze({ export const SESSION_TYPE = Object.freeze({
in_person: 'حضوری', in_person: 'حضوری',
online: 'آنلاین', online: 'آنلاین',
offline: 'آفلاین',
video: 'ویدئو', video: 'ویدئو',
audio: 'صوتی', audio: 'صوتی',
text: 'متن', text: 'متن',
@@ -201,7 +202,7 @@ export const SERVICE_TYPE = Object.freeze({
}) })
export const CONSULTATION_STATUS = Object.freeze({ export const CONSULTATION_STATUS = Object.freeze({
in_progress: 'در حال گفتگو', open: 'در حال گفتگو',
answered: 'پاسخ داده شده', answered: 'پاسخ داده شده',
closed: 'بسته شده', closed: 'بسته شده',
}) })
@@ -104,7 +104,7 @@ const todayIso = new Date().toISOString()
const templateSearch = ref('') const templateSearch = ref('')
const templateFilters = computed(() => ({ title: templateSearch.value })) const templateFilters = computed(() => ({ title: templateSearch.value }))
const templatePagination = ref({ page: 1, perPage: 30 }) const templatePagination = ref({ page: 1, perPage: 10 })
const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination) const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination)
const templateOptions = computed(() => templatesResponse.value?.data ?? []) const templateOptions = computed(() => templatesResponse.value?.data ?? [])
@@ -113,7 +113,7 @@ const sessionListFilters = computed(() => ({
title: sessionSearch.value, title: sessionSearch.value,
courseId: form.value.courseId || undefined, courseId: form.value.courseId || undefined,
})) }))
const sessionPagination = ref({ page: 1, perPage: 30 }) const sessionPagination = ref({ page: 1, perPage: 10 })
const { data: sessionsResponse } = useAdminSessionsListQuery(sessionListFilters, sessionPagination) const { data: sessionsResponse } = useAdminSessionsListQuery(sessionListFilters, sessionPagination)
const sessionOptions = computed(() => sessionsResponse.value?.data ?? []) const sessionOptions = computed(() => sessionsResponse.value?.data ?? [])
@@ -1,12 +1,14 @@
<template> <template>
<BasicModal width="95%" max-width="64rem" min-width="auto" :show-close-button="true"> <BasicModal
:title="isEditMode ? 'ویرایش تکلیف' : 'افزودن تکلیف جدید'"
:title-en="isEditMode ? 'Edit Assignment' : 'Add Assignment'"
width="95%"
max-width="64rem"
min-width="auto"
:show-close-button="true"
>
<template #default="{ close }"> <template #default="{ close }">
<form class="add-assignment" @submit.prevent="onSubmit(close)"> <form class="add-assignment" @submit.prevent="onSubmit(close)">
<LineTitleBlock
:title="isEditMode ? 'ویرایش تکلیف' : 'افزودن تکلیف جدید'"
:title-en="isEditMode ? 'Edit Assignment' : 'Add Assignment'"
/>
<div class="add-assignment__grid"> <div class="add-assignment__grid">
<TextField <TextField
v-model="form.title" v-model="form.title"
@@ -172,7 +174,7 @@ const { validate, validateAt, errors, resetErrors } = useYup(schema)
const templateSearch = ref('') const templateSearch = ref('')
const templateFilters = computed(() => ({ title: templateSearch.value })) const templateFilters = computed(() => ({ title: templateSearch.value }))
const templatePagination = ref({ page: 1, perPage: 30 }) const templatePagination = ref({ page: 1, perPage: 10 })
const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination) const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination)
const selectedTemplate = ref(null) const selectedTemplate = ref(null)
const templateOptions = computed(() => { const templateOptions = computed(() => {
@@ -188,7 +190,7 @@ const sessionFilters = computed(() => ({
title: sessionSearch.value, title: sessionSearch.value,
courseId: form.value.courseId, courseId: form.value.courseId,
})) }))
const sessionPagination = ref({ page: 1, perPage: 30 }) const sessionPagination = ref({ page: 1, perPage: 10 })
const { data: sessionsResponse } = useAdminSessionsListQuery(sessionFilters, sessionPagination, { const { data: sessionsResponse } = useAdminSessionsListQuery(sessionFilters, sessionPagination, {
enabled: () => !!form.value.courseId, enabled: () => !!form.value.courseId,
}) })
@@ -307,8 +309,8 @@ const onSubmit = async (close) => {
&__actions { &__actions {
display: flex; display: flex;
justify-content: flex-end; align-items: center;
gap: 0.625rem; justify-content: space-between;
} }
&__btn-cancel { &__btn-cancel {
@@ -1,8 +1,8 @@
<template> <template>
<div class="consultation-item"> <div class="consultation-item">
<div class="consultation-item__user"> <div class="consultation-item__user">
<div v-if="consultation.user?.avatarUrl" class="consultation-item__avatar"> <div v-if="consultation.student?.avatarUrl" class="consultation-item__avatar">
<img :src="consultation.user.avatarUrl" :alt="userName" /> <img :src="consultation.student.avatarUrl" :alt="userName" />
</div> </div>
<div v-else class="consultation-item__avatar consultation-item__avatar--placeholder"> <div v-else class="consultation-item__avatar consultation-item__avatar--placeholder">
<SvgIcon name="user" :size="24" color="#bcbcbc" /> <SvgIcon name="user" :size="24" color="#bcbcbc" />
@@ -11,9 +11,7 @@
<p class="consultation-item__name">{{ userName }}</p> <p class="consultation-item__name">{{ userName }}</p>
<p class="consultation-item__request-id"> <p class="consultation-item__request-id">
<span class="consultation-item__request-id-label">شماره درخواست :</span> <span class="consultation-item__request-id-label">شماره درخواست :</span>
<span class="consultation-item__request-id-value"> <span class="consultation-item__request-id-value">{{ consultation.id || '—' }}</span>
{{ consultation.requestId || consultation.id || '—' }}
</span>
</p> </p>
</div> </div>
</div> </div>
@@ -26,7 +24,7 @@
<button <button
type="button" type="button"
class="consultation-item__status" class="consultation-item__status"
:class="`consultation-item__status--${consultation.status || 'in_progress'}`" :class="`consultation-item__status--${consultation.status || 'open'}`"
@click="onStatusClick" @click="onStatusClick"
> >
<span class="consultation-item__status-dot" /> <span class="consultation-item__status-dot" />
@@ -69,24 +67,11 @@ const props = defineProps({
const emit = defineEmits(['show-details', 'change-status']) const emit = defineEmits(['show-details', 'change-status'])
const userName = computed(() => { const userName = computed(() => props.consultation.student?.name || '—')
const u = props.consultation.user
if (!u) return '—'
return `${u.firstName || ''} ${u.lastName || ''}`.trim() || u.fullName || '—'
})
const statusLabel = computed( const statusLabel = computed(() => CONSULTATION_STATUS[props.consultation.status] || '—')
() => props.consultation.statusLabel || CONSULTATION_STATUS[props.consultation.status] || '—'
)
const createdAt = computed(() => { const createdAt = computed(() => formatJalaaliDate(props.consultation.createdAt) || '—')
if (props.consultation.faCreatedAt) {
return props.consultation.faCreatedTime
? `${props.consultation.faCreatedTime}، ${props.consultation.faCreatedAt}`
: props.consultation.faCreatedAt
}
return formatJalaaliDate(props.consultation.createdAt) || '—'
})
const menuOpen = ref(false) const menuOpen = ref(false)
const menuTrigger = ref(null) const menuTrigger = ref(null)
@@ -246,7 +231,7 @@ const menuItems = computed(() =>
color: #009a12; color: #009a12;
} }
&--in_progress { &--open {
background: rgba(0, 112, 116, 10%); background: rgba(0, 112, 116, 10%);
color: #007074; color: #007074;
} }
@@ -17,7 +17,7 @@
:class="`consultation-details__row--${senderClass(message)}`" :class="`consultation-details__row--${senderClass(message)}`"
> >
<div class="consultation-details__bubble"> <div class="consultation-details__bubble">
<p class="consultation-details__text">{{ message.text }}</p> <p class="consultation-details__text">{{ message.message }}</p>
<span class="consultation-details__time">{{ messageTime(message) }}</span> <span class="consultation-details__time">{{ messageTime(message) }}</span>
</div> </div>
</div> </div>
@@ -77,13 +77,19 @@ const { data: consultation, isLoading } = useAdminConsultationQuery(consultation
const messages = computed(() => consultation.value?.messages ?? []) const messages = computed(() => consultation.value?.messages ?? [])
const consultationDate = computed( const consultationDate = computed(() => formatJalaaliDate(consultation.value?.createdAt) || '—')
() => consultation.value?.faCreatedAt || formatJalaaliDate(consultation.value?.createdAt) || '—'
)
const senderClass = (message) => (message.sender === 'admin' ? 'admin' : 'user') // Student is "the user"; everyone else (counselor, admin) renders on the
// opposite side of the thread. Same rule as the admin tickets modal.
const senderClass = (message) =>
message.senderId === consultation.value?.studentId ? 'user' : 'admin'
const messageTime = (message) => message.time || message.faSentAt || message.sentAt || '—' 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' })
}
const text = ref('') const text = ref('')
const canSend = computed(() => text.value.trim().length > 0) const canSend = computed(() => text.value.trim().length > 0)
@@ -94,7 +100,8 @@ const onSend = async () => {
if (!canSend.value || !consultationId.value) return if (!canSend.value || !consultationId.value) return
const value = text.value.trim() const value = text.value.trim()
text.value = '' text.value = ''
await sendMutation.mutateAsync({ id: consultationId.value, payload: { text: value } }) // Backend POST /counselor/tickets/:id/messages — body is { message: string }.
await sendMutation.mutateAsync({ id: consultationId.value, payload: { message: value } })
await queryClient.invalidateQueries({ queryKey: adminConsultationsKeys.all }) await queryClient.invalidateQueries({ queryKey: adminConsultationsKeys.all })
} }
@@ -37,7 +37,7 @@
@click="onReset" @click="onReset"
> >
<template #icon> <template #icon>
<SvgIcon name="close" :size="20" /> <SvgIcon name="close" :size="20" color="black" />
</template> </template>
</CircleButton> </CircleButton>
<CircleButton <CircleButton
@@ -165,7 +165,7 @@ const { validate, validateAt, errors, resetErrors } = useYup(schema)
const termSearch = ref('') const termSearch = ref('')
const termFilters = computed(() => ({ title: termSearch.value })) const termFilters = computed(() => ({ title: termSearch.value }))
const termPagination = ref({ page: 1, perPage: 30 }) const termPagination = ref({ page: 1, perPage: 10 })
const { data: termsResponse } = useAdminTermsListQuery(termFilters, termPagination) const { data: termsResponse } = useAdminTermsListQuery(termFilters, termPagination)
const selectedTerm = ref(null) const selectedTerm = ref(null)
const termOptions = computed(() => { const termOptions = computed(() => {
@@ -178,7 +178,7 @@ const termOptions = computed(() => {
const templateSearch = ref('') const templateSearch = ref('')
const templateFilters = computed(() => ({ title: templateSearch.value, termId: 'null' })) const templateFilters = computed(() => ({ title: templateSearch.value, termId: 'null' }))
const templatePagination = ref({ page: 1, perPage: 30 }) const templatePagination = ref({ page: 1, perPage: 10 })
const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination) const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination)
const selectedTemplate = ref(null) const selectedTemplate = ref(null)
const templateOptions = computed(() => { const templateOptions = computed(() => {
@@ -84,24 +84,25 @@
class="course-details__student-row" class="course-details__student-row"
> >
<div class="course-details__student-main"> <div class="course-details__student-main">
<div v-if="student.avatarUrl" class="course-details__avatar"> <div v-if="studentAvatar(student)" class="course-details__avatar">
<img :src="student.avatarUrl" :alt="studentName(student)" /> <img :src="studentAvatar(student)" :alt="student.name" />
</div> </div>
<div v-else class="course-details__avatar course-details__avatar--placeholder"> <div v-else class="course-details__avatar course-details__avatar--placeholder">
<SvgIcon name="user" :size="20" color="#bcbcbc" /> <SvgIcon name="user" :size="20" color="#bcbcbc" />
</div> </div>
<div> <div>
<p class="course-details__student-name">{{ studentName(student) }}</p> <p class="course-details__student-name">{{ student.name || '—' }}</p>
<p class="course-details__student-meta"> <p class="course-details__student-meta">
<span>{{ student.address?.province?.name || '—' }}</span> <span dir="ltr">{{ student.phone || '—' }}</span>
<span class="course-details__sep">،</span> <template v-if="student.email">
<span>{{ student.address?.city?.name || '—' }}</span> <span class="course-details__sep">،</span>
<span dir="ltr">{{ student.email }}</span>
</template>
</p> </p>
</div> </div>
</div> </div>
<div class="course-details__student-actions"> <div v-if="student.phone" class="course-details__student-actions">
<CircleButton <CircleButton
v-if="student.phoneNumber"
tooltip="ارسال پیام" tooltip="ارسال پیام"
bg-color="rgba(104, 104, 104, 0.05)" bg-color="rgba(104, 104, 104, 0.05)"
size="2.25rem" size="2.25rem"
@@ -111,16 +112,6 @@
<SvgIcon name="chat" :size="16" color="var(--color-sec-gray)" /> <SvgIcon name="chat" :size="16" color="var(--color-sec-gray)" />
</template> </template>
</CircleButton> </CircleButton>
<CircleButton
tooltip="حذف"
bg-color="rgba(104, 104, 104, 0.05)"
size="2.25rem"
@click="onAskRemoveStudent(student)"
>
<template #icon>
<SvgIcon name="trash" :size="16" color="var(--color-error)" />
</template>
</CircleButton>
</div> </div>
</div> </div>
</div> </div>
@@ -151,7 +142,6 @@
<script setup> <script setup>
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import useModal from '@/composables/useModal' import useModal from '@/composables/useModal'
import { useQueryClient } from '@tanstack/vue-query'
import BasicModal from '@/components/BasicModal.vue' import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue' import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue' import SvgIcon from '@/components/icons/SvgIcon.vue'
@@ -166,16 +156,13 @@ import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue' import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import CourseSessionItem from '@/features/admin/courses/components/CourseSessionItem.vue' import CourseSessionItem from '@/features/admin/courses/components/CourseSessionItem.vue'
import { import {
adminCoursesKeys,
useAdminCourseQuery, useAdminCourseQuery,
useAdminCourseSessionsQuery, useAdminCourseSessionsQuery,
useAdminCourseStudentsQuery, useCourseAttendeesQuery,
useRemoveAdminCourseStudentMutation,
} from '@/services/query/admin-courses' } from '@/services/query/admin-courses'
defineOptions({ name: 'CourseDetailsModal' }) defineOptions({ name: 'CourseDetailsModal' })
const queryClient = useQueryClient()
const { openModal, getModal } = useModal() const { openModal, getModal } = useModal()
const modalData = computed(() => getModal('CourseDetailsModal')?.data ?? {}) const modalData = computed(() => getModal('CourseDetailsModal')?.data ?? {})
@@ -226,7 +213,7 @@ const { pagination: studentsPagination, setPage: setStudentsPage } = usePaginati
perPage: 10, perPage: 10,
}) })
const { data: studentsData, isLoading: studentsPending } = useAdminCourseStudentsQuery( const { data: studentsData, isLoading: studentsPending } = useCourseAttendeesQuery(
courseId, courseId,
studentsFilters, studentsFilters,
studentsPagination, studentsPagination,
@@ -243,15 +230,7 @@ const studentsPaginationMeta = computed(() => ({
...studentsData.value?.meta, ...studentsData.value?.meta,
})) }))
const studentName = (student) => const studentAvatar = (student) => student.avatarUrl || student.avatarDownloadUrl || ''
`${student.firstName || ''} ${student.lastName || ''}`.trim() ||
student.fullName ||
student.phoneNumber ||
'—'
const invalidate = () => queryClient.invalidateQueries({ queryKey: adminCoursesKeys.all })
const removeStudentMutation = useRemoveAdminCourseStudentMutation()
const onOpenAddSession = () => { const onOpenAddSession = () => {
openModal('AddSessionToCourseModal', { courseId: courseId.value }) openModal('AddSessionToCourseModal', { courseId: courseId.value })
@@ -261,21 +240,9 @@ const onOpenAddStudent = () => {
openModal('AddCourseStudentModal', { courseId: courseId.value }) openModal('AddCourseStudentModal', { courseId: courseId.value })
} }
const onAskRemoveStudent = (student) => {
openModal('ConfirmModal', {
title: `حذف ${studentName(student)}`,
message: `آیا از حذف <strong>${studentName(student)}</strong> از این دوره اطمینان دارید؟`,
onConfirm: () =>
removeStudentMutation.mutate(
{ courseId: courseId.value, userId: student.id },
{ onSuccess: invalidate }
),
})
}
const onMessageStudent = (student) => { const onMessageStudent = (student) => {
if (!student?.phoneNumber) return if (!student?.phone) return
window.location.href = `sms:${student.phoneNumber}` window.location.href = `sms:${student.phone}`
} }
</script> </script>
@@ -97,7 +97,6 @@
option-label="label" option-label="label"
option-value="value" option-value="value"
:error="errors.contentType" :error="errors.contentType"
@change="onContentTypeChange"
/> />
</div> </div>
<div class="course-form__cell course-form__cell--full"> <div class="course-form__cell course-form__cell--full">
@@ -109,18 +108,6 @@
:error="errors.description" :error="errors.description"
/> />
</div> </div>
<div class="course-form__cell course-form__cell--full">
<label class="course-form__uploader-label">فایل دوره</label>
<FileUploader
v-model="contentFiles"
:accept="contentAccept"
:multiple="false"
:max-files="1"
@select="onContentSelect"
@remove="onContentRemove"
@error="onContentError"
/>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -157,6 +144,7 @@
import { toast } from 'vue3-toastify' import { toast } from 'vue3-toastify'
import useYup from '@/composables/useYup' import useYup from '@/composables/useYup'
import { computed, ref, watch } from 'vue' import { computed, ref, watch } from 'vue'
import { COURSE_CONTENT_TYPE } from '@/enums'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import useDebounce from '@/composables/useDebounce' import useDebounce from '@/composables/useDebounce'
import { useQueryClient } from '@tanstack/vue-query' import { useQueryClient } from '@tanstack/vue-query'
@@ -165,14 +153,12 @@ import SvgIcon from '@/components/icons/SvgIcon.vue'
import TextField from '@/components/form/TextField.vue' import TextField from '@/components/form/TextField.vue'
import SelectField from '@/components/form/SelectField.vue' import SelectField from '@/components/form/SelectField.vue'
import LineTitleBlock from '@/components/LineTitleBlock.vue' import LineTitleBlock from '@/components/LineTitleBlock.vue'
import FileUploader from '@/components/form/FileUploader.vue'
import ImageCropper from '@/components/form/ImageCropper.vue' import ImageCropper from '@/components/form/ImageCropper.vue'
import { objectToFormData } from '@/utils/object-to-formdata' import { objectToFormData } from '@/utils/object-to-formdata'
import { useUploadMediaMutation } from '@/services/query/auth' import { useUploadMediaMutation } from '@/services/query/auth'
import { courseSchema } from '@/features/admin/courses/schema' import { courseSchema } from '@/features/admin/courses/schema'
import TextareaField from '@/components/form/TextareaField.vue' import TextareaField from '@/components/form/TextareaField.vue'
import { useAdminUsersListQuery } from '@/services/query/admin-users' import { useAdminUsersListQuery } from '@/services/query/admin-users'
import { COURSE_CONTENT_TYPE, COURSE_CONTENT_TYPE_ACCEPT } from '@/enums'
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue' import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
import { import {
adminCoursesKeys, adminCoursesKeys,
@@ -197,27 +183,23 @@ const form = ref({
sessionsCount: '', sessionsCount: '',
prerequisites: [], prerequisites: [],
contentType: '', contentType: '',
contentMediaId: null,
description: '', description: '',
coverMediaId: null, coverMediaId: null,
termId: termId.value, termId: termId.value,
}) })
const image = ref(null) const image = ref(null)
const contentFiles = ref([])
const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, label]) => ({ const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, label]) => ({
value, value,
label, label,
})) }))
const contentAccept = computed(() => COURSE_CONTENT_TYPE_ACCEPT[form.value.contentType] || '*')
const { validate, validateAt, errors } = useYup(courseSchema) const { validate, validateAt, errors } = useYup(courseSchema)
const teacherSearch = ref('') const teacherSearch = ref('')
const teacherFilters = computed(() => ({ name: teacherSearch.value })) const teacherFilters = computed(() => ({ name: teacherSearch.value }))
const teacherPagination = ref({ page: 1, perPage: 30 }) const teacherPagination = ref({ page: 1, perPage: 10 })
const { data: teachersResponse } = useAdminUsersListQuery(teacherFilters, teacherPagination) const { data: teachersResponse } = useAdminUsersListQuery(teacherFilters, teacherPagination)
const selectedTeacher = ref(null) const selectedTeacher = ref(null)
const teacherOptions = computed(() => { const teacherOptions = computed(() => {
@@ -234,7 +216,7 @@ const teacherOptions = computed(() => {
const prereqSearch = ref('') const prereqSearch = ref('')
const prereqFilters = computed(() => ({ title: prereqSearch.value })) const prereqFilters = computed(() => ({ title: prereqSearch.value }))
const prereqPagination = ref({ page: 1, perPage: 30 }) const prereqPagination = ref({ page: 1, perPage: 10 })
const { data: prereqsResponse } = useAdminCoursesListQuery(prereqFilters, prereqPagination) const { data: prereqsResponse } = useAdminCoursesListQuery(prereqFilters, prereqPagination)
const selectedPrereqs = ref([]) const selectedPrereqs = ref([])
const prerequisiteOptions = computed(() => { const prerequisiteOptions = computed(() => {
@@ -268,22 +250,11 @@ watch(existingCourse, (course) => {
sessionsCount: course.sessionsCount ?? '', sessionsCount: course.sessionsCount ?? '',
prerequisites: prereqs.map((p) => p.courseId ?? p.id).filter(Boolean), prerequisites: prereqs.map((p) => p.courseId ?? p.id).filter(Boolean),
contentType: course.contentType || '', contentType: course.contentType || '',
contentMediaId: course.contentMediaId || null,
description: course.description || '', description: course.description || '',
coverMediaId: course.coverMediaId || null, coverMediaId: course.coverMediaId || null,
termId: course.termId ?? termId.value, termId: course.termId ?? termId.value,
} }
if (course.coverUrl) image.value = { url: course.coverUrl } if (course.coverUrl) image.value = { url: course.coverUrl }
if (course.contentMedia) {
contentFiles.value = [
{
id: course.contentMedia.id,
name: course.contentMedia.name || course.contentMedia.fileName || 'file',
size: course.contentMedia.size ?? 0,
url: course.contentMedia.url,
},
]
}
}) })
const uploadMutation = useUploadMediaMutation() const uploadMutation = useUploadMediaMutation()
@@ -302,38 +273,6 @@ const onImageCropped = async (file) => {
const onImageError = (msg) => toast.error(msg) const onImageError = (msg) => toast.error(msg)
const onContentTypeChange = () => {
contentFiles.value = []
form.value.contentMediaId = null
}
const onContentSelect = async (files) => {
const file = files?.[0]
if (!file) return
try {
const formData = objectToFormData({
file,
purpose: 'voice',
context: 'course',
type: form.value.contentType,
})
const response = await uploadMutation.mutateAsync(formData)
const payload = response?.data ?? response
const id = payload?.id ?? payload?.uploadId
contentFiles.value = [{ id, name: file.name, size: file.size, url: payload?.url }]
form.value.contentMediaId = id
} catch {
contentFiles.value = []
}
}
const onContentRemove = () => {
contentFiles.value = []
form.value.contentMediaId = null
}
const onContentError = (msg) => toast.error(msg)
const addMutation = useAddAdminCourseMutation() const addMutation = useAddAdminCourseMutation()
const updateMutation = useUpdateAdminCourseMutation() const updateMutation = useUpdateAdminCourseMutation()
@@ -130,14 +130,8 @@ const tabs = [
] ]
const activeTab = ref(routeTermId.value ? 'offered' : 'templates') const activeTab = ref(routeTermId.value ? 'offered' : 'templates')
const templateFilters = ref({ title: '', status: '', fromDate: '', toDate: '' }) const templateFilters = ref({})
const offeredFilters = ref({ const offeredFilters = ref({})
title: '',
termId: routeTermId.value ?? '',
status: '',
fromDate: '',
toDate: '',
})
const currentFilters = computed({ const currentFilters = computed({
get: () => (activeTab.value === 'templates' ? templateFilters.value : offeredFilters.value), get: () => (activeTab.value === 'templates' ? templateFilters.value : offeredFilters.value),
@@ -81,7 +81,7 @@ const todayIso = new Date().toISOString()
const templateSearch = ref('') const templateSearch = ref('')
const templateFilters = computed(() => ({ title: templateSearch.value })) const templateFilters = computed(() => ({ title: templateSearch.value }))
const templatePagination = ref({ page: 1, perPage: 30 }) const templatePagination = ref({ page: 1, perPage: 10 })
const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination) const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination)
const templateOptions = computed(() => templatesResponse.value?.data ?? []) const templateOptions = computed(() => templatesResponse.value?.data ?? [])
@@ -146,7 +146,7 @@ const { validate, validateAt, errors } = useYup(examSchema)
const sessionSearch = ref('') const sessionSearch = ref('')
const sessionFilters = computed(() => ({ title: sessionSearch.value })) const sessionFilters = computed(() => ({ title: sessionSearch.value }))
const sessionPagination = ref({ page: 1, perPage: 30 }) const sessionPagination = ref({ page: 1, perPage: 10 })
const { data: sessionsResponse } = useAdminSessionsListQuery(sessionFilters, sessionPagination) const { data: sessionsResponse } = useAdminSessionsListQuery(sessionFilters, sessionPagination)
const selectedSession = ref(null) const selectedSession = ref(null)
const sessionOptions = computed(() => { const sessionOptions = computed(() => {
@@ -54,11 +54,7 @@ const props = defineProps({
const emit = defineEmits(['show-details']) const emit = defineEmits(['show-details'])
const userName = computed(() => { const userName = computed(() => props.ticket.student?.name || '—')
const s = props.ticket.student
if (!s) return '—'
return s.name || `${s.firstName || ''} ${s.lastName || ''}`.trim() || s.fullName || '—'
})
const statusLabel = computed(() => TICKET_STATUS[props.ticket.status] || '—') const statusLabel = computed(() => TICKET_STATUS[props.ticket.status] || '—')
@@ -108,7 +108,7 @@ const sessionTypeOptions = Object.entries(SESSION_TYPE).map(([value, label]) =>
const templateSearch = ref('') const templateSearch = ref('')
const templateFilters = computed(() => ({ title: templateSearch.value })) const templateFilters = computed(() => ({ title: templateSearch.value }))
const templatePagination = ref({ page: 1, perPage: 30 }) const templatePagination = ref({ page: 1, perPage: 10 })
const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination) const { data: templatesResponse } = useAdminCoursesListQuery(templateFilters, templatePagination)
const templateOptions = computed(() => templatesResponse.value?.data ?? []) const templateOptions = computed(() => templatesResponse.value?.data ?? [])
@@ -1,9 +1,14 @@
<template> <template>
<BasicModal width="95%" max-width="60rem" min-width="auto" :show-close-button="true"> <BasicModal
title="حضور و غیاب"
title-en="Attendance"
width="95%"
max-width="60rem"
min-width="auto"
:show-close-button="true"
>
<template #default="{ close }"> <template #default="{ close }">
<div class="session-attendance"> <div class="session-attendance">
<LineTitleBlock title="حضور و غیاب" title-en="Attendance" />
<div class="session-attendance__filters"> <div class="session-attendance__filters">
<SelectField <SelectField
v-model="filters.termId" v-model="filters.termId"
@@ -120,7 +125,7 @@ const paginationMeta = computed(() => ({
const termSearch = ref('') const termSearch = ref('')
const termListFilters = computed(() => ({ title: termSearch.value })) const termListFilters = computed(() => ({ title: termSearch.value }))
const termPagination = ref({ page: 1, perPage: 30 }) const termPagination = ref({ page: 1, perPage: 10 })
const { data: termsResponse } = useAdminTermsListQuery(termListFilters, termPagination) const { data: termsResponse } = useAdminTermsListQuery(termListFilters, termPagination)
const termOptions = computed(() => termsResponse.value?.data ?? []) const termOptions = computed(() => termsResponse.value?.data ?? [])
@@ -1,96 +1,63 @@
<template> <template>
<BasicModal width="95%" max-width="60rem" min-width="auto" :show-close-button="true"> <BasicModal
title="جزئیات جلسه"
title-en="details"
width="95%"
max-width="60rem"
min-width="auto"
:show-close-button="true"
>
<template #default="{ close }"> <template #default="{ close }">
<div class="session-details"> <div class="session-details">
<LineTitleBlock title="جزئیات جلسه" title-en="Session Details" />
<SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" /> <SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
<template v-else-if="session"> <template v-else-if="session">
<div class="session-details__hero">
<div class="session-details__image">
<img v-if="session.image" :src="session.image" :alt="session.title" />
<SvgIcon v-else name="book" :size="36" color="#bcbcbc" />
</div>
<div class="session-details__hero-info">
<p class="session-details__title">{{ session.title || '—' }}</p>
<p v-if="session.course?.title" class="session-details__sub">
دوره: {{ session.course.title }}
</p>
</div>
</div>
<div class="session-details__grid"> <div class="session-details__grid">
<LineInfoBlock title="نوع جلسه" :desc="sessionTypeLabel" /> <LineInfoBlock title="عنوان جلسه" :desc="session.title || '—'" />
<LineInfoBlock title="مدت زمان" :numeric-desc="durationLabel" /> <LineInfoBlock
<LineInfoBlock title=رتیب" :numeric-desc="session.order ?? ''" /> title=اریخ شروع"
<LineInfoBlock title="درس‌های مرتبط" :numeric-desc="usedInTermsCount" /> :numeric-desc="formatJalaaliDate(session.startsAt) || ''"
</div> />
<LineInfoBlock
title="تاریخ پایان"
:numeric-desc="formatJalaaliDate(session.endsAt) || ''"
/>
<LineInfoBlock title="مدت زمان جلسه" :numeric-desc="durationLabel" />
<div v-if="hasConfig" class="session-details__config"> <LineInfoBlock title="نوع جلسه" :desc="sessionTypeLabel" />
<LineTitleBlock title="تنظیمات جلسه" title-en="Session Config" /> <LineInfoBlock title="دوره مرتبط" :desc="courseTitle" />
<div class="session-details__grid"> <LineInfoBlock title="متعلق به" :desc="termTitle" />
<LineInfoBlock <LineInfoBlock title="محتوای جلسه" :desc="contentTypeLabel" />
v-if="session.sessionConfig?.startTime"
title="تاریخ و ساعت شروع"
:numeric-desc="
formatJalaaliDate(session.sessionConfig.startTime) ||
session.sessionConfig.startTime
"
/>
<LineInfoBlock
v-if="session.sessionConfig?.location"
title="مکان"
:desc="session.sessionConfig.location"
/>
<LineInfoBlock
v-if="session.sessionConfig?.meetingLink"
title="لینک جلسه"
:desc="session.sessionConfig.meetingLink"
/>
<LineInfoBlock
v-if="session.sessionConfig?.platform"
title="پلتفرم"
:desc="
SESSION_PLATFORM[session.sessionConfig.platform] || session.sessionConfig.platform
"
/>
<LineInfoBlock
v-if="session.sessionConfig?.minWatchedPercent != null"
title="حداقل درصد مشاهده"
:numeric-desc="`${session.sessionConfig.minWatchedPercent}%`"
/>
<LineInfoBlock
v-if="session.sessionConfig?.minReadPercent != null"
title="حداقل درصد مطالعه"
:numeric-desc="`${session.sessionConfig.minReadPercent}%`"
/>
<LineInfoBlock
v-if="session.sessionConfig?.mustCompleteBeforeNext != null"
title="الزام تکمیل قبل از جلسه بعدی"
:desc="session.sessionConfig.mustCompleteBeforeNext ? 'بله' : 'خیر'"
/>
</div>
</div> </div>
<div v-if="session.description" class="session-details__desc"> <div v-if="session.description" class="session-details__desc">
<LineInfoBlock title="توضیحات" :desc="session.description" /> <LineInfoBlock title="توضیحات جلسه" :desc="session.description" />
</div> </div>
<div v-if="session.materials?.length" class="session-details__materials"> <div v-if="isOnline && session.link" class="session-details__link-row">
<LineTitleBlock title="فایل‌های جلسه" title-en="Materials" /> <LineInfoBlock title="لینک جلسه" :desc="session.link" />
<ul class="session-details__materials-list"> </div>
<li v-for="material in session.materials" :key="material.id">
<a <div v-if="mediaUrl || session.contentType" class="session-details__media">
:href="material.filePath || material.fileUrl || '#'" <VideoPlayerBlock
target="_blank" v-if="session.contentType === 'video'"
rel="noopener noreferrer" :src="mediaUrl"
class="session-details__file" :video-id="session.id"
> />
<SvgIcon name="file" :size="16" color="var(--color-prim-gray)" /> <VoiceRecorder
<span>{{ material.title || `فایل ${material.id}` }}</span> v-else-if="session.contentType === 'voice'"
</a> :model-value="mediaUrl"
</li> :disabled="true"
</ul> />
<a
v-else-if="mediaUrl"
:href="mediaUrl"
target="_blank"
rel="noopener noreferrer"
class="session-details__file"
>
<SvgIcon name="file" :size="18" color="var(--color-primary)" />
<span>{{ mediaFileName }}</span>
</a>
</div> </div>
</template> </template>
<NoItems v-else title="یافت نشد" desc="اطلاعات این جلسه در دسترس نیست." /> <NoItems v-else title="یافت نشد" desc="اطلاعات این جلسه در دسترس نیست." />
@@ -98,7 +65,7 @@
<div class="session-details__divider" /> <div class="session-details__divider" />
<div class="session-details__footer"> <div class="session-details__footer">
<BaseButton text="بستن" custom-class="session-details__close-btn" @click="close"> <BaseButton text="تایید" custom-class="session-details__close-btn" @click="close">
<template #appendIcon> <template #appendIcon>
<SvgIcon name="arrow-left" :size="18" color="#fff" /> <SvgIcon name="arrow-left" :size="18" color="#fff" />
</template> </template>
@@ -117,10 +84,11 @@ import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue' import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue' import NoItems from '@/components/blocks/NoItems.vue'
import { formatJalaaliDate } from '@/utils/date-utils' import { formatJalaaliDate } from '@/utils/date-utils'
import { SESSION_PLATFORM, SESSION_TYPE } from '@/enums' import { COURSE_CONTENT_TYPE, SESSION_TYPE } from '@/enums'
import LineTitleBlock from '@/components/LineTitleBlock.vue' import VoiceRecorder from '@/components/form/VoiceRecorder.vue'
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue' import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
import { useAdminSessionQuery } from '@/services/query/admin-sessions' import { useAdminSessionQuery } from '@/services/query/admin-sessions'
import VideoPlayerBlock from '@/components/blocks/VideoPlayerBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue' import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
defineOptions({ name: 'SessionDetailsModal' }) defineOptions({ name: 'SessionDetailsModal' })
@@ -135,20 +103,30 @@ const { data: session, isLoading } = useAdminSessionQuery(sessionId, {
}) })
const sessionTypeLabel = computed( const sessionTypeLabel = computed(
() => session.value?.sessionTypeFa || SESSION_TYPE[session.value?.sessionType] || '—' () => SESSION_TYPE[session.value?.type] || session.value?.typeFa || '—'
) )
const durationLabel = computed(() => const durationLabel = computed(() =>
session.value?.durationMinutes == null ? '—' : `${session.value.durationMinutes} دقیقه` session.value?.durationMinutes == null ? '—' : `${session.value.durationMinutes} دقیقه`
) )
const usedInTermsCount = computed(() => session.value?.usedInTerms?.length ?? 0) const courseTitle = computed(() => session.value?.course?.title || '—')
const hasConfig = computed(() => { const termTitle = computed(
const c = session.value?.sessionConfig () => session.value?.course?.term?.title || session.value?.term?.title || '—'
if (!c) return false )
return Object.values(c).some((v) => v !== '' && v !== null && v !== undefined)
}) const contentTypeLabel = computed(() => COURSE_CONTENT_TYPE[session.value?.contentType] || '—')
const isOnline = computed(() => session.value?.type === 'online')
const mediaUrl = computed(
() => session.value?.contentMedia?.url || session.value?.contentMedia?.downloadUrl || ''
)
const mediaFileName = computed(
() => session.value?.contentMedia?.fileName || session.value?.contentMedia?.name || 'فایل پیوست'
)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@@ -156,51 +134,6 @@ const hasConfig = computed(() => {
width: 100%; width: 100%;
text-align: start; text-align: start;
&__hero {
display: flex;
align-items: center;
gap: 1rem;
margin: 1rem 0;
}
&__image {
width: 5rem;
height: 5rem;
border-radius: 0.5rem;
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&__hero-info {
flex: 1;
min-width: 0;
}
&__title {
font-family: var(--font-family-fa);
font-size: 1.1rem;
font-weight: 500;
color: #4b4b4b;
margin: 0 0 0.375rem;
}
&__sub {
font-family: var(--font-family-fa);
font-size: 0.8rem;
color: #838383;
margin: 0;
}
&__grid { &__grid {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -211,33 +144,43 @@ const hasConfig = computed(() => {
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
&__config,
&__desc, &__desc,
&__materials { &__link-row {
margin-top: 1rem; margin-top: 0.5rem;
} }
&__materials-list { &__link-row {
list-style: none; display: grid;
padding: 0; grid-template-columns: 1fr;
margin: 0;
@media (min-width: 640px) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 1024px) {
grid-template-columns: repeat(4, 1fr);
}
}
&__media {
margin-top: 1rem;
display: flex; display: flex;
flex-direction: column; justify-content: center;
gap: 0.25rem;
} }
&__file { &__file {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.375rem; gap: 0.5rem;
color: var(--color-primary); color: var(--color-primary);
text-decoration: none; text-decoration: none;
font-family: var(--font-family-fa); font-family: var(--font-family-fa);
font-size: 0.85rem; font-size: 0.875rem;
padding: 0.5rem 0;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@@ -11,143 +11,131 @@
</BoxedIconTitleBlock> </BoxedIconTitleBlock>
<form class="session-form__form" @submit.prevent="onSubmit"> <form class="session-form__form" @submit.prevent="onSubmit">
<LineTitleBlock title="اطلاعات جلسه" title-en="Session Details" /> <div class="session-form__grid">
<div class="session-form__image-col">
<ImageCropper
v-model="image"
name="image"
bg-color="#eeeeee"
@crop="onImageCropped"
@error="onImageError"
/>
</div>
<!-- row 1 title / startTime / endTime --> <div class="session-form__main-col">
<div class="session-form__row session-form__row--three"> <LineTitleBlock title="اطلاعات جلسه" title-en="Session Details" />
<TextField
v-model="form.title"
name="title"
label="عنوان جلسه"
:error="errors.title"
@blur="validateAt('title', form.title)"
>
<template #appendIcon>
<SvgIcon name="book" :size="20" color="var(--color-thd-gray)" />
</template>
</TextField>
<DatePickerField
v-model="form.startTime"
name="startTime"
label="زمان شروع"
type="datetime"
:error="errors.startTime"
@blur="validateAt('startTime', form.startTime)"
/>
<DatePickerField
v-model="form.endTime"
name="endTime"
label="زمان پایان"
type="datetime"
:error="errors.endTime"
/>
</div>
<!-- row 2 durationMinutes / courseId / contentType --> <!-- row 1 title / startsAt / endsAt -->
<div class="session-form__row session-form__row--three"> <div class="session-form__row session-form__row--three">
<TextField <TextField
v-model="form.durationMinutes" v-model="form.title"
name="durationMinutes" name="title"
label="مدت زمان جلسه (دقیقه)" label="عنوان جلسه"
inputmode="numeric" :error="errors.title"
:convert-digits="true" @blur="validateAt('title', form.title)"
:error="errors.durationMinutes" >
@blur="validateAt('durationMinutes', form.durationMinutes)" <template #appendIcon>
/> <SvgIcon name="book" :size="20" color="var(--color-thd-gray)" />
<SelectField </template>
v-model="form.courseId" </TextField>
name="courseId" <DatePickerField
label="دوره" v-model="form.startsAt"
:options="courseOptions" name="startsAt"
option-label="title" label="زمان شروع"
option-value="id" type="datetime"
:searchable="true" :error="errors.startsAt"
:on-search="searchCourses" @blur="validateAt('startsAt', form.startsAt)"
:error="errors.courseId" />
/> <DatePickerField
<SelectField v-model="form.endsAt"
v-model="form.contentType" name="endsAt"
name="contentType" label="زمان پایان"
label="محتوای جلسه" type="datetime"
:options="contentTypeOptions" :error="errors.endsAt"
option-label="label" />
option-value="value" </div>
:error="errors.contentType"
@change="onContentTypeChange"
/>
</div>
<!-- row 3 sessionType / meetingLink --> <!-- row 2 durationMinutes / courseId / contentType -->
<div class="session-form__row session-form__row--two"> <div class="session-form__row session-form__row--three">
<SelectField <TextField
v-model="form.sessionType" v-model="form.durationMinutes"
name="sessionType" name="durationMinutes"
label="نوع جلسه" label="مدت زمان جلسه (دقیقه)"
:options="sessionTypeOptions" inputmode="numeric"
option-label="label" :convert-digits="true"
option-value="value" :error="errors.durationMinutes"
:error="errors.sessionType" @blur="validateAt('durationMinutes', form.durationMinutes)"
@change="onSessionTypeChange" />
/> <SelectField
<TextField v-model="form.courseId"
v-model="form.meetingLink" name="courseId"
name="meetingLink" label="دوره"
label="لینک جلسه" :options="courseOptions"
:disabled="form.sessionType !== 'online'" option-label="title"
:error="errors.meetingLink" option-value="id"
@blur="validateAt('meetingLink', form.meetingLink)" :searchable="true"
/> :on-search="searchCourses"
</div> :error="errors.courseId"
/>
<SelectField
v-model="form.contentType"
name="contentType"
label="محتوای جلسه"
:options="contentTypeOptions"
option-label="label"
option-value="value"
:error="errors.contentType"
@change="onContentTypeChange"
/>
</div>
<!-- row 4 description --> <!-- row 3 type / link -->
<div class="session-form__row"> <div class="session-form__row session-form__row--two">
<TextareaField <SelectField
v-model="form.description" v-model="form.type"
name="description" name="type"
label="توضیحات جلسه" label="نوع جلسه"
:row="5" :options="sessionTypeOptions"
/> option-label="label"
</div> option-value="value"
:error="errors.type"
@change="onSessionTypeChange"
/>
<TextField
v-model="form.link"
name="link"
label="لینک جلسه"
:disabled="form.type !== 'online'"
:error="errors.link"
@blur="validateAt('link', form.link)"
/>
</div>
<!-- row 5 content uploader --> <!-- row 4 description -->
<div class="session-form__row"> <div class="session-form__row">
<label class="session-form__uploader-label">محتوای جلسه</label> <TextareaField
<FileUploader v-model="form.description"
v-model="contentFiles" name="description"
:accept="contentAccept" label="توضیحات جلسه"
:multiple="false" :row="5"
:max-files="1" />
:disabled="!form.contentType" </div>
@select="onContentSelect"
@remove="onContentRemove"
@error="onContentError"
/>
</div>
<!-- row 6 preview of uploaded content --> <!-- row 5 content uploader -->
<div v-if="contentPreviewUrl" class="session-form__row session-form__preview"> <div class="session-form__row">
<video <label class="session-form__uploader-label">محتوای جلسه</label>
v-if="form.contentType === 'video'" <FileUploader
:src="contentPreviewUrl" v-model="contentFiles"
controls :accept="contentAccept"
class="session-form__media" :multiple="false"
/> :max-files="1"
<audio :disabled="!form.contentType"
v-else-if="form.contentType === 'voice'" @select="onContentSelect"
:src="contentPreviewUrl" @remove="onContentRemove"
controls @error="onContentError"
class="session-form__media" />
/> </div>
<a </div>
v-else
:href="contentPreviewUrl"
target="_blank"
rel="noopener noreferrer"
class="session-form__file-link"
>
<SvgIcon name="file" :size="18" color="var(--color-primary)" />
<span>{{ contentFiles[0]?.name || 'فایل پیوست' }}</span>
</a>
</div> </div>
<div class="session-form__divider" /> <div class="session-form__divider" />
@@ -191,6 +179,7 @@ import TextField from '@/components/form/TextField.vue'
import SelectField from '@/components/form/SelectField.vue' import SelectField from '@/components/form/SelectField.vue'
import LineTitleBlock from '@/components/LineTitleBlock.vue' import LineTitleBlock from '@/components/LineTitleBlock.vue'
import FileUploader from '@/components/form/FileUploader.vue' import FileUploader from '@/components/form/FileUploader.vue'
import ImageCropper from '@/components/form/ImageCropper.vue'
import { objectToFormData } from '@/utils/object-to-formdata' import { objectToFormData } from '@/utils/object-to-formdata'
import { useUploadMediaMutation } from '@/services/query/auth' import { useUploadMediaMutation } from '@/services/query/auth'
import TextareaField from '@/components/form/TextareaField.vue' import TextareaField from '@/components/form/TextareaField.vue'
@@ -213,13 +202,11 @@ const queryClient = useQueryClient()
const sessionId = computed(() => (route.params.id ? Number(route.params.id) : null)) const sessionId = computed(() => (route.params.id ? Number(route.params.id) : null))
const isEditMode = computed(() => !!sessionId.value) const isEditMode = computed(() => !!sessionId.value)
// نوع جلسه: only the two delivery modes — backend `type` collapses to online/offline.
const sessionTypeOptions = [ const sessionTypeOptions = [
{ value: 'in_person', label: SESSION_TYPE.in_person }, { value: 'offline', label: SESSION_TYPE.offline },
{ value: 'online', label: SESSION_TYPE.online }, { value: 'online', label: SESSION_TYPE.online },
] ]
// محتوای جلسه: voice / video / text — reuses the course content-type enum.
const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, label]) => ({ const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, label]) => ({
value, value,
label, label,
@@ -227,27 +214,28 @@ const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, labe
const form = ref({ const form = ref({
title: '', title: '',
startTime: '', startsAt: '',
endTime: '', endsAt: '',
durationMinutes: '', durationMinutes: '',
courseId: '', courseId: '',
contentType: '', contentType: '',
sessionType: '', type: '',
meetingLink: '', link: '',
description: '', description: '',
contentMediaId: null,
}) })
const image = ref(null)
const contentFiles = ref([]) const contentFiles = ref([])
const coverMediaId = ref(null)
const contentMediaId = ref(null)
const contentAccept = computed(() => COURSE_CONTENT_TYPE_ACCEPT[form.value.contentType] || '*') const contentAccept = computed(() => COURSE_CONTENT_TYPE_ACCEPT[form.value.contentType] || '*')
const contentPreviewUrl = computed(() => contentFiles.value[0]?.url || '')
const { validate, validateAt, errors } = useYup(sessionSchema) const { validate, validateAt, errors } = useYup(sessionSchema)
const courseSearch = ref('') const courseSearch = ref('')
const courseFilters = computed(() => ({ title: courseSearch.value })) const courseFilters = computed(() => ({ title: courseSearch.value }))
const coursePagination = ref({ page: 1, perPage: 30 }) const coursePagination = ref({ page: 1, perPage: 10 })
const { data: coursesResponse } = useAdminCoursesListQuery(courseFilters, coursePagination) const { data: coursesResponse } = useAdminCoursesListQuery(courseFilters, coursePagination)
const selectedCourse = ref(null) const selectedCourse = ref(null)
const courseOptions = computed(() => { const courseOptions = computed(() => {
@@ -264,50 +252,67 @@ const searchCourses = useDebounce((q) => {
const onContentTypeChange = () => { const onContentTypeChange = () => {
contentFiles.value = [] contentFiles.value = []
form.value.contentMediaId = null contentMediaId.value = null
} }
const onSessionTypeChange = () => { const onSessionTypeChange = () => {
if (form.value.sessionType !== 'online') form.value.meetingLink = '' if (form.value.type !== 'online') form.value.link = ''
} }
const { data: existingSession } = useAdminSessionQuery(sessionId, { const { data: existingSession } = useAdminSessionQuery(sessionId, {
enabled: () => !!sessionId.value, enabled: () => !!sessionId.value,
}) })
watch(existingSession, (session) => { watch(
if (!session) return existingSession,
if (session.course) selectedCourse.value = session.course (session) => {
form.value = { if (!session) return
title: session.title || '', if (session.course) selectedCourse.value = session.course
startTime: session.startsAt || session.sessionConfig?.startTime || '', const media = Array.isArray(session.media) ? session.media : []
endTime: session.endsAt || session.sessionConfig?.endTime || '', const coverMedia = media.find((m) => m.collectionName === 'cover')
durationMinutes: session.durationMinutes ?? '', const contentMedia = media.find((m) => m.collectionName !== 'cover')
courseId: session.course?.id || session.courseId || '', const contentType = collectionToContentType(contentMedia?.collectionName)
contentType: session.contentType || '', form.value = {
sessionType: session.sessionType || '', title: session.title ?? '',
meetingLink: session.link || session.sessionConfig?.meetingLink || '', startsAt: session.startsAt ?? '',
description: session.description || '', endsAt: session.endsAt ?? '',
contentMediaId: session.contentMediaId || null, durationMinutes: session.durationMinutes ?? '',
} courseId: session.course?.id ?? '',
if (session.contentMedia) { contentType,
contentFiles.value = [ type: session.type ?? '',
{ link: session.link ?? '',
id: session.contentMedia.id, description: session.description ?? '',
name: session.contentMedia.fileName || session.contentMedia.name || 'file', }
size: session.contentMedia.fileSize ?? 0, coverMediaId.value = coverMedia?.id ?? null
url: session.contentMedia.url, contentMediaId.value = contentMedia?.id ?? null
}, if (contentMedia) {
] contentFiles.value = [
} {
}) id: contentMedia.id,
name: contentMedia.fileName ?? 'file',
size: contentMedia.fileSize ?? 0,
url: contentMedia.url,
},
]
}
if (coverMedia?.url) image.value = { url: coverMedia.url }
},
{ immediate: true }
)
const uploadMutation = useUploadMediaMutation() const uploadMutation = useUploadMediaMutation()
const purposeForContentType = (contentType) => { const purposeForContentType = (contentType) => {
if (contentType === 'video') return 'video' if (contentType === 'video') return 'video'
if (contentType === 'voice') return 'voice' if (contentType === 'voice') return 'voice'
return 'attachment' return 'pdf'
}
const collectionToContentType = (collectionName) => {
if (collectionName === 'videos') return 'video'
if (collectionName === 'voices') return 'voice'
if (collectionName === 'pdf') return 'text'
return ''
} }
const onContentSelect = async (files) => { const onContentSelect = async (files) => {
@@ -323,7 +328,7 @@ const onContentSelect = async (files) => {
const payload = response?.data ?? response const payload = response?.data ?? response
const id = payload?.id ?? payload?.uploadId const id = payload?.id ?? payload?.uploadId
contentFiles.value = [{ id, name: file.name, size: file.size, url: payload?.url }] contentFiles.value = [{ id, name: file.name, size: file.size, url: payload?.url }]
form.value.contentMediaId = id contentMediaId.value = id
} catch { } catch {
contentFiles.value = [] contentFiles.value = []
} }
@@ -331,26 +336,41 @@ const onContentSelect = async (files) => {
const onContentRemove = () => { const onContentRemove = () => {
contentFiles.value = [] contentFiles.value = []
form.value.contentMediaId = null contentMediaId.value = null
} }
const onContentError = (msg) => toast.error(msg) const onContentError = (msg) => toast.error(msg)
const onImageCropped = async (file) => {
try {
const formData = objectToFormData({ file, purpose: 'cover', context: 'session' })
const response = await uploadMutation.mutateAsync(formData)
const payload = response?.data ?? response
image.value = { url: payload?.url, ...payload }
coverMediaId.value = payload?.id ?? null
} catch {
/* handled globally */
}
}
const onImageError = (msg) => toast.error(msg)
const buildPayload = (values) => { const buildPayload = (values) => {
const mediaIds = [coverMediaId.value, contentMediaId.value].filter((id) => id != null)
const payload = { const payload = {
title: values.title, title: values.title,
startTime: values.startTime, startsAt: values.startsAt,
endTime: values.endTime, endsAt: values.endsAt,
durationMinutes: values.durationMinutes, durationMinutes: values.durationMinutes,
courseId: values.courseId, courseId: values.courseId,
contentType: values.contentType, type: values.type,
sessionType: values.sessionType, link: values.type === 'online' ? values.link : undefined,
meetingLink: values.sessionType === 'online' ? values.meetingLink : undefined,
description: values.description, description: values.description,
contentMediaId: values.contentMediaId, mediaIds,
} }
Object.keys(payload).forEach((key) => { Object.keys(payload).forEach((key) => {
if (payload[key] === undefined || payload[key] === '' || payload[key] === null) { const value = payload[key]
if (value === undefined || value === '' || value === null) {
delete payload[key] delete payload[key]
} }
}) })
@@ -397,6 +417,41 @@ const onCancel = () => router.push({ name: 'admin-sessions' })
gap: 0.75rem; gap: 0.75rem;
} }
&__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
@media (min-width: 1024px) {
grid-template-columns: 4fr 8fr;
}
@media (min-width: 1280px) {
grid-template-columns: 3fr 9fr;
}
}
&__image-col {
order: 2;
@media (min-width: 1024px) {
order: 1;
padding: 0.5rem;
}
}
&__main-col {
order: 1;
display: flex;
flex-direction: column;
gap: 0.75rem;
@media (min-width: 1024px) {
order: 2;
padding-inline-start: 1.25rem;
}
}
&__row { &__row {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -461,8 +516,8 @@ const onCancel = () => router.push({ name: 'admin-sessions' })
&__actions { &__actions {
display: flex; display: flex;
justify-content: flex-end; justify-content: space-between;
gap: 0.625rem; align-items: center;
} }
&__btn-cancel { &__btn-cancel {
+4 -6
View File
@@ -2,17 +2,15 @@ import { number, object, string } from 'yup'
export const sessionSchema = object().shape({ export const sessionSchema = object().shape({
title: string().required().min(3), title: string().required().min(3),
startTime: string().required(), startsAt: string().required(),
endTime: string().nullable().notRequired(), endsAt: string().nullable().notRequired(),
durationMinutes: number().typeError('مدت زمان باید عدد باشد').required().min(1), durationMinutes: number().typeError('مدت زمان باید عدد باشد').required().min(1),
courseId: string().required(), courseId: string().required(),
contentType: string().oneOf(['voice', 'video', 'text']).required(), type: string().oneOf(['offline', 'online']).required(),
sessionType: string().oneOf(['in_person', 'online']).required(), link: string().when('sessionType', {
meetingLink: string().when('sessionType', {
is: 'online', is: 'online',
then: (schema) => schema.required(), then: (schema) => schema.required(),
otherwise: (schema) => schema.nullable().notRequired(), otherwise: (schema) => schema.nullable().notRequired(),
}), }),
description: string().nullable().notRequired(), description: string().nullable().notRequired(),
contentMediaId: number().nullable().notRequired(),
}) })
@@ -51,37 +51,23 @@
<div v-else-if="students.length > 0"> <div v-else-if="students.length > 0">
<div v-for="student in students" :key="student.id" class="term-details__student-row"> <div v-for="student in students" :key="student.id" class="term-details__student-row">
<div class="term-details__student-main"> <div class="term-details__student-main">
<div v-if="student.avatarUrl" class="term-details__avatar"> <div v-if="studentAvatar(student)" class="term-details__avatar">
<img :src="student.avatarUrl" :alt="studentName(student)" /> <img :src="studentAvatar(student)" :alt="student.name" />
</div> </div>
<div v-else class="term-details__avatar term-details__avatar--placeholder"> <div v-else class="term-details__avatar term-details__avatar--placeholder">
<SvgIcon name="user" :size="20" color="#bcbcbc" /> <SvgIcon name="user" :size="20" color="#bcbcbc" />
</div> </div>
<div> <div>
<p class="term-details__student-name">{{ studentName(student) }}</p> <p class="term-details__student-name">{{ student.name || '—' }}</p>
<p class="term-details__student-meta"> <p class="term-details__student-meta">
<span>{{ student.address?.province?.name || '—' }}</span> <span dir="ltr">{{ student.phone || '—' }}</span>
<span class="term-details__sep">،</span> <template v-if="student.email">
<span>{{ student.address?.city?.name || '—' }}</span> <span class="term-details__sep">،</span>
<span dir="ltr">{{ student.email }}</span>
</template>
</p> </p>
</div> </div>
</div> </div>
<div class="term-details__student-actions">
<ToggleSwitch
:model-value="!!student.isOnLeave"
@update:model-value="onToggleLeave(student, $event)"
/>
<CircleButton
tooltip="حذف از ترم"
bg-color="rgba(104, 104, 104, 0.05)"
size="2.5rem"
@click="onAskRemoveStudent(student)"
>
<template #icon>
<SvgIcon name="trash" :size="18" color="var(--color-error)" />
</template>
</CircleButton>
</div>
</div> </div>
</div> </div>
<NoItems v-else title="متاسفیم" desc="دانشجویی برای نمایش وجود ندارد." /> <NoItems v-else title="متاسفیم" desc="دانشجویی برای نمایش وجود ندارد." />
@@ -143,11 +129,9 @@ import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue' import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue' import NoItems from '@/components/blocks/NoItems.vue'
import { formatJalaaliDate } from '@/utils/date-utils' import { formatJalaaliDate } from '@/utils/date-utils'
import CircleButton from '@/components/CircleButton.vue'
import TabsBlock from '@/components/blocks/TabsBlock.vue' import TabsBlock from '@/components/blocks/TabsBlock.vue'
import { usePagination } from '@/composables/usePagination' import { usePagination } from '@/composables/usePagination'
import LineTitleBlock from '@/components/LineTitleBlock.vue' import LineTitleBlock from '@/components/LineTitleBlock.vue'
import ToggleSwitch from '@/components/form/ToggleSwitch.vue'
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue' import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
import PaginationBlock from '@/components/blocks/PaginationBlock.vue' import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue' import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
@@ -156,13 +140,7 @@ import {
useAdminCoursesListQuery, useAdminCoursesListQuery,
useUpdateAdminCourseMutation, useUpdateAdminCourseMutation,
} from '@/services/query/admin-courses' } from '@/services/query/admin-courses'
import { import { useAdminTermQuery, useTermAttendeesQuery } from '@/services/query/admin-terms'
adminTermsKeys,
useAdminTermQuery,
useAdminTermStudentsQuery,
useRemoveAdminTermStudentMutation,
useToggleAdminTermStudentLeaveMutation,
} from '@/services/query/admin-terms'
defineOptions({ name: 'TermDetailsModal' }) defineOptions({ name: 'TermDetailsModal' })
@@ -189,7 +167,7 @@ const {
reset: resetStudentPagination, reset: resetStudentPagination,
} = usePagination({ page: 1, perPage: 10 }) } = usePagination({ page: 1, perPage: 10 })
const { data: studentsData, isLoading: studentsPending } = useAdminTermStudentsQuery( const { data: studentsData, isLoading: studentsPending } = useTermAttendeesQuery(
termId, termId,
studentFilters, studentFilters,
studentPagination, studentPagination,
@@ -206,31 +184,7 @@ const studentPaginationMeta = computed(() => ({
...studentsData.value?.meta, ...studentsData.value?.meta,
})) }))
const studentName = (student) => const studentAvatar = (student) => student.avatarUrl || student.avatarDownloadUrl || ''
`${student.firstName || ''} ${student.lastName || ''}`.trim() || student.fullName || '—'
const invalidate = () => queryClient.invalidateQueries({ queryKey: adminTermsKeys.all })
const toggleLeaveMutation = useToggleAdminTermStudentLeaveMutation()
const removeStudentMutation = useRemoveAdminTermStudentMutation()
const onToggleLeave = (student, isOnLeave) => {
toggleLeaveMutation.mutate(
{
termId: termId.value,
userId: student.id,
payload: { setLeave: isOnLeave },
},
{ onSuccess: invalidate }
)
}
const onAskRemoveStudent = (student) => {
removeStudentMutation.mutate(
{ termId: termId.value, userId: student.id },
{ onSuccess: invalidate }
)
}
const courseFilters = computed(() => ({ termId: termId.value })) const courseFilters = computed(() => ({ termId: termId.value }))
const { pagination: coursePagination, setPage: setCoursePage } = usePagination({ const { pagination: coursePagination, setPage: setCoursePage } = usePagination({
+5 -1
View File
@@ -91,7 +91,11 @@ const redirectAfterLogin = useRedirectAfterLogin()
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
const response = await loginMutation.mutateAsync(payload) const response = await loginMutation.mutateAsync({
phone: payload.phoneNumber,
password: payload.password,
deviceName: 'web',
})
applySession(response?.data ?? response) applySession(response?.data ?? response)
redirectAfterLogin() redirectAfterLogin()
} }
+7 -1
View File
@@ -114,7 +114,13 @@ const { savePhoneNumber } = useAuth()
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
await registerMutation.mutateAsync(payload) const name = [payload.firstName, payload.lastName].filter(Boolean).join(' ').trim()
await registerMutation.mutateAsync({
name,
phone: payload.phoneNumber,
password: payload.password,
passwordConfirmation: payload.passwordConfirmation,
})
savePhoneNumber(payload.phoneNumber) savePhoneNumber(payload.phoneNumber)
emit('next', { phoneNumber: payload.phoneNumber }) emit('next', { phoneNumber: payload.phoneNumber })
} }
@@ -96,7 +96,7 @@
</div> </div>
<div class="educational-info__divider" /> <div class="educational-info__divider" />
<StepActions @back="store.goToPrevStep()" /> <StepActions :loading="saveRegisterMutation.isPending.value" @back="store.goToPrevStep()" />
</form> </form>
</template> </template>
@@ -108,9 +108,13 @@ import TextField from '@/components/form/TextField.vue'
import SelectField from '@/components/form/SelectField.vue' import SelectField from '@/components/form/SelectField.vue'
import LineTitleBlock from '@/components/LineTitleBlock.vue' import LineTitleBlock from '@/components/LineTitleBlock.vue'
import TextareaField from '@/components/form/TextareaField.vue' import TextareaField from '@/components/form/TextareaField.vue'
import { useSaveRegisterDataMutation } from '@/services/query/auth'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue' import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { educationalInformationSchema } from '@/features/auth/schema/student-register' import { educationalInformationSchema } from '@/features/auth/schema/student-register'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration' import {
toKeyValueList,
useStudentRegistrationStore,
} from '@/features/auth/store/student-registration'
import { EDUCATION_STATUS, SEMINARY_LEVEL, STUDENT_REGISTRATION, UNIVERSITY_LEVEL } from '@/enums' import { EDUCATION_STATUS, SEMINARY_LEVEL, STUDENT_REGISTRATION, UNIVERSITY_LEVEL } from '@/enums'
const store = useStudentRegistrationStore() const store = useStudentRegistrationStore()
@@ -139,9 +143,12 @@ const form = ref({ ...store.educational })
const { validate, validateAt, errors } = useYup(educationalInformationSchema) const { validate, validateAt, errors } = useYup(educationalInformationSchema)
const saveRegisterMutation = useSaveRegisterDataMutation()
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
await saveRegisterMutation.mutateAsync(toKeyValueList(payload))
store.educational = { ...store.educational, ...payload } store.educational = { ...store.educational, ...payload }
store.markStepAsCompleted(STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION) store.markStepAsCompleted(STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION)
store.goToNextStep() store.goToNextStep()
@@ -92,6 +92,7 @@ const props = defineProps({
maxSeconds: { type: Number, default: 120 }, maxSeconds: { type: Number, default: 120 },
context: { type: String, default: 'verification' }, context: { type: String, default: 'verification' },
subType: { type: String, default: '' }, subType: { type: String, default: '' },
purpose: { type: String, default: '' },
error: { type: String, default: '' }, error: { type: String, default: '' },
}) })
@@ -191,6 +192,7 @@ const handleStop = async () => {
file, file,
subType: props.subType || props.kind, subType: props.subType || props.kind,
context: props.context, context: props.context,
...(props.purpose ? { purpose: props.purpose } : {}),
}) })
const response = await uploadMutation.mutateAsync(fd) const response = await uploadMutation.mutateAsync(fd)
const payload = response?.data ?? response const payload = response?.data ?? response
@@ -276,7 +278,6 @@ onBeforeUnmount(() => {
} }
&__media--audio { &__media--audio {
width: 100%;
height: 2.5rem; height: 2.5rem;
background: transparent; background: transparent;
position: absolute; position: absolute;
@@ -151,7 +151,10 @@
<div class="personal-info__divider" /> <div class="personal-info__divider" />
<StepActions :show-back="false" :loading="uploadMutation.isPending.value" /> <StepActions
:show-back="false"
:loading="uploadMutation.isPending.value || saveRegisterMutation.isPending.value"
/>
</form> </form>
</template> </template>
@@ -167,13 +170,14 @@ import LineTitleBlock from '@/components/LineTitleBlock.vue'
import ImageCropper from '@/components/form/ImageCropper.vue' import ImageCropper from '@/components/form/ImageCropper.vue'
import { objectToFormData } from '@/utils/object-to-formdata' import { objectToFormData } from '@/utils/object-to-formdata'
import TextareaField from '@/components/form/TextareaField.vue' import TextareaField from '@/components/form/TextareaField.vue'
import { useUploadMediaMutation } from '@/services/query/auth'
import DatePickerField from '@/components/form/DatePickerField.vue' import DatePickerField from '@/components/form/DatePickerField.vue'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue' import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { GENDER, MARITAL_STATUS, STUDENT_REGISTRATION } from '@/enums' import { GENDER, MARITAL_STATUS, STUDENT_REGISTRATION } from '@/enums'
import { toKeyValueList } from '@/features/auth/store/student-registration'
import { personalInformationSchema } from '@/features/auth/schema/student-register' import { personalInformationSchema } from '@/features/auth/schema/student-register'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue' import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration' import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
import { useSaveRegisterDataMutation, useUploadMediaMutation } from '@/services/query/auth'
import { useGetCitiesOfProvinceQuery, useGetProvincesQuery } from '@/services/query/common' import { useGetCitiesOfProvinceQuery, useGetProvincesQuery } from '@/services/query/common'
const store = useStudentRegistrationStore() const store = useStudentRegistrationStore()
@@ -202,7 +206,9 @@ const maxBirthDate = computed(() => {
} }
}) })
const initialPhoneNumber = ref(user.value?.phoneNumber || store.personal.phoneNumber || '') const initialPhoneNumber = ref(
user.value?.phone || user.value?.phoneNumber || store.personal.phoneNumber || ''
)
const form = ref({ const form = ref({
firstName: store.personal.firstName || '', firstName: store.personal.firstName || '',
@@ -246,7 +252,7 @@ const uploadMutation = useUploadMediaMutation()
const onAvatarCropped = async (file) => { const onAvatarCropped = async (file) => {
try { try {
const fd = objectToFormData({ file, subType: 'avatar', context: 'verification' }) const fd = objectToFormData({ file, purpose: 'avatar', context: 'verification' })
const response = await uploadMutation.mutateAsync(fd) const response = await uploadMutation.mutateAsync(fd)
const payload = response?.data ?? response const payload = response?.data ?? response
const value = { url: payload?.url, uploadId: payload?.uploadId || payload?.id, ...payload } const value = { url: payload?.url, uploadId: payload?.uploadId || payload?.id, ...payload }
@@ -260,10 +266,14 @@ const onAvatarCropped = async (file) => {
const onAvatarError = (msg) => toast.error(msg) const onAvatarError = (msg) => toast.error(msg)
const saveRegisterMutation = useSaveRegisterDataMutation()
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
store.personal = { ...store.personal, ...payload, avatar: form.value.avatar } const next = { ...payload, avatar: form.value.avatar }
await saveRegisterMutation.mutateAsync(toKeyValueList(next))
store.personal = { ...store.personal, ...next }
store.markStepAsCompleted(STUDENT_REGISTRATION.PERSONAL_INFORMATION) store.markStepAsCompleted(STUDENT_REGISTRATION.PERSONAL_INFORMATION)
store.goToNextStep() store.goToNextStep()
} }
@@ -101,7 +101,7 @@
</div> </div>
<div class="professional-info__divider" /> <div class="professional-info__divider" />
<StepActions @back="store.goToPrevStep()" /> <StepActions :loading="saveRegisterMutation.isPending.value" @back="store.goToPrevStep()" />
</form> </form>
</template> </template>
@@ -114,9 +114,13 @@ import LineTitleBlock from '@/components/LineTitleBlock.vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue' import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import TextareaField from '@/components/form/TextareaField.vue' import TextareaField from '@/components/form/TextareaField.vue'
import { PROPAGATION_PLATFORM, STUDENT_REGISTRATION } from '@/enums' import { PROPAGATION_PLATFORM, STUDENT_REGISTRATION } from '@/enums'
import { useSaveRegisterDataMutation } from '@/services/query/auth'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue' import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { professionalInformationSchema } from '@/features/auth/schema/student-register' import { professionalInformationSchema } from '@/features/auth/schema/student-register'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration' import {
toKeyValueList,
useStudentRegistrationStore,
} from '@/features/auth/store/student-registration'
const store = useStudentRegistrationStore() const store = useStudentRegistrationStore()
@@ -167,6 +171,8 @@ const onPlatformsChange = (selected) => {
const { validate, validateAt, errors } = useYup(professionalInformationSchema) const { validate, validateAt, errors } = useYup(professionalInformationSchema)
const saveRegisterMutation = useSaveRegisterDataMutation()
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
@@ -181,12 +187,14 @@ const onSubmit = async () => {
return { platform, platformDetails: '' } return { platform, platformDetails: '' }
}) })
store.professional = { const next = {
propagationExperienceYears: Number(payload.propagationExperienceYears), propagationExperienceYears: Number(payload.propagationExperienceYears),
propagationMethodDescription: payload.propagationMethodDescription, propagationMethodDescription: payload.propagationMethodDescription,
specializedTopics: payload.specializedTopics, specializedTopics: payload.specializedTopics,
propagationPlatforms, propagationPlatforms,
} }
await saveRegisterMutation.mutateAsync(toKeyValueList(next))
store.professional = next
store.markStepAsCompleted(STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION) store.markStepAsCompleted(STUDENT_REGISTRATION.PROFESSIONAL_INFORMATION)
store.goToNextStep() store.goToNextStep()
} }
@@ -7,6 +7,7 @@
kind="audio" kind="audio"
sub-type="audio" sub-type="audio"
context="verification" context="verification"
purpose="voice"
:max-seconds="180" :max-seconds="180"
:error="errors.faithProductionAudio" :error="errors.faithProductionAudio"
@uploaded="onUploaded" @uploaded="onUploaded"
@@ -28,20 +29,23 @@
</div> </div>
<div class="skill-six__divider" /> <div class="skill-six__divider" />
<StepActions @back="store.goToPrevStep()" /> <StepActions :loading="saveRegisterMutation.isPending.value" @back="store.goToPrevStep()" />
</form> </form>
</template> </template>
<script setup> <script setup>
import { computed, ref } from 'vue'
import useYup from '@/composables/useYup' import useYup from '@/composables/useYup'
import { computed, ref, watch } from 'vue'
import { STUDENT_REGISTRATION } from '@/enums' import { STUDENT_REGISTRATION } from '@/enums'
import LineTitleBlock from '@/components/LineTitleBlock.vue' import LineTitleBlock from '@/components/LineTitleBlock.vue'
import { useGetRegistrationVideoQuery } from '@/services/query/auth' import { useSaveRegisterDataMutation } from '@/services/query/auth'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue' import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { skillAssessmentPart6Schema } from '@/features/auth/schema/student-register' import { skillAssessmentPart6Schema } from '@/features/auth/schema/student-register'
import MediaRecorder from '@/features/auth/components/studentRegister/MediaRecorder.vue' import MediaRecorder from '@/features/auth/components/studentRegister/MediaRecorder.vue'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration' import {
toKeyValueList,
useStudentRegistrationStore,
} from '@/features/auth/store/student-registration'
const store = useStudentRegistrationStore() const store = useStudentRegistrationStore()
@@ -59,20 +63,14 @@ const onUploaded = (value) => {
form.value.faithProductionId = value?.uploadId || '' form.value.faithProductionId = value?.uploadId || ''
} }
const { data: media } = useGetRegistrationVideoQuery() const videoUrl = computed(() => store.registrationMedia.faithProductionVideoUrl || '')
const videoUrl = computed( const saveRegisterMutation = useSaveRegisterDataMutation()
() =>
media.value?.faithProductionVideoUrl || store.registrationMedia.faithProductionVideoUrl || ''
)
watch(media, (val) => {
if (val) store.registrationMedia = { ...store.registrationMedia, ...val }
})
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
await saveRegisterMutation.mutateAsync(toKeyValueList(payload))
store.skill6 = { ...store.skill6, ...payload } store.skill6 = { ...store.skill6, ...payload }
store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6) store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6)
store.goToNextStep() store.goToNextStep()
@@ -29,7 +29,7 @@
<div class="skill-seven__divider" /> <div class="skill-seven__divider" />
<StepActions <StepActions
:loading="completeMutation.isPending.value" :loading="saveRegisterMutation.isPending.value"
next-text="تایید اطلاعات" next-text="تایید اطلاعات"
@back="store.goToPrevStep()" @back="store.goToPrevStep()"
/> />
@@ -39,18 +39,19 @@
<script setup> <script setup>
import { toast } from 'vue3-toastify' import { toast } from 'vue3-toastify'
import useYup from '@/composables/useYup' import useYup from '@/composables/useYup'
import { computed, ref, watch } from 'vue' import { computed, ref } from 'vue'
import useAuth from '@/composables/useAuth'
import { STUDENT_REGISTRATION } from '@/enums' import { STUDENT_REGISTRATION } from '@/enums'
import LineTitleBlock from '@/components/LineTitleBlock.vue' import LineTitleBlock from '@/components/LineTitleBlock.vue'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue' import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { skillAssessmentPart7Schema } from '@/features/auth/schema/student-register' import { skillAssessmentPart7Schema } from '@/features/auth/schema/student-register'
import MediaRecorder from '@/features/auth/components/studentRegister/MediaRecorder.vue' import MediaRecorder from '@/features/auth/components/studentRegister/MediaRecorder.vue'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration' import {
import { useCompleteProfileMutation, useGetRegistrationVideoQuery } from '@/services/query/auth' toKeyValueList,
useStudentRegistrationStore,
} from '@/features/auth/store/student-registration'
import { useSaveRegisterDataMutation } from '@/services/query/auth'
const store = useStudentRegistrationStore() const store = useStudentRegistrationStore()
const { applySession } = useAuth()
const video = ref(store.skill7.leaderMessageVideo || null) const video = ref(store.skill7.leaderMessageVideo || null)
@@ -66,28 +67,17 @@ const onUploaded = (value) => {
form.value.leaderMessageId = value?.uploadId || '' form.value.leaderMessageId = value?.uploadId || ''
} }
const { data: media } = useGetRegistrationVideoQuery() const videoUrl = computed(() => store.registrationMedia.leaderMessageVideoUrl || '')
const videoUrl = computed( const saveRegisterMutation = useSaveRegisterDataMutation()
() => media.value?.leaderMessageVideoUrl || store.registrationMedia.leaderMessageVideoUrl || ''
)
watch(media, (val) => {
if (val) store.registrationMedia = { ...store.registrationMedia, ...val }
})
const completeMutation = useCompleteProfileMutation()
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
store.skill7 = { ...store.skill7, ...payload }
store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7)
try { try {
const response = await completeMutation.mutateAsync(store.buildCompletePayload()) await saveRegisterMutation.mutateAsync(toKeyValueList(payload))
const data = response?.data ?? response store.skill7 = { ...store.skill7, ...payload }
applySession(data) store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7)
store.isProfileCompleted = true store.isProfileCompleted = true
} catch (error) { } catch (error) {
toast.error(error?.response?.data?.message || 'عملیات با خطا مواجه شد') toast.error(error?.response?.data?.message || 'عملیات با خطا مواجه شد')
@@ -33,7 +33,7 @@
</div> </div>
<div class="skill-step__divider" /> <div class="skill-step__divider" />
<StepActions @back="store.goToPrevStep()" /> <StepActions :loading="saveRegisterMutation.isPending.value" @back="store.goToPrevStep()" />
</form> </form>
</template> </template>
@@ -44,8 +44,12 @@ import SelectField from '@/components/form/SelectField.vue'
import LineTitleBlock from '@/components/LineTitleBlock.vue' import LineTitleBlock from '@/components/LineTitleBlock.vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue' import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import TextareaField from '@/components/form/TextareaField.vue' import TextareaField from '@/components/form/TextareaField.vue'
import { useSaveRegisterDataMutation } from '@/services/query/auth'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue' import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration' import {
toKeyValueList,
useStudentRegistrationStore,
} from '@/features/auth/store/student-registration'
const props = defineProps({ const props = defineProps({
step: { type: Number, required: true }, step: { type: Number, required: true },
@@ -80,9 +84,12 @@ const onSelect = () => {
const { validate, errors } = useYup(props.schema) const { validate, errors } = useYup(props.schema)
const saveRegisterMutation = useSaveRegisterDataMutation()
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
await saveRegisterMutation.mutateAsync(toKeyValueList(payload))
store[props.storeKey] = { ...store[props.storeKey], ...payload } store[props.storeKey] = { ...store[props.storeKey], ...payload }
store.markStepAsCompleted(props.step) store.markStepAsCompleted(props.step)
store.goToNextStep() store.goToNextStep()
@@ -8,7 +8,7 @@
v-model="form.phoneNumber" v-model="form.phoneNumber"
name="phoneNumber" name="phoneNumber"
label="شماره موبایل" label="شماره موبایل"
:disabled="!!user?.phoneNumber" :disabled="!!(user?.phone || user?.phoneNumber)"
> >
<template #appendIcon> <template #appendIcon>
<SvgIcon name="phone" :size="22" color="var(--color-thd-gray)" /> <SvgIcon name="phone" :size="22" color="var(--color-thd-gray)" />
@@ -71,7 +71,7 @@ const redirectAfterLogin = useRedirectAfterLogin()
const schema = resetPasswordSchema const schema = resetPasswordSchema
const form = ref({ const form = ref({
phoneNumber: user.value?.phoneNumber || '', phoneNumber: user.value?.phone || user.value?.phoneNumber || '',
password: '', password: '',
passwordConfirmation: '', passwordConfirmation: '',
}) })
@@ -23,6 +23,7 @@
import useModal from '@/composables/useModal' import useModal from '@/composables/useModal'
import { computed, markRaw, watch } from 'vue' import { computed, markRaw, watch } from 'vue'
import { STUDENT_REGISTRATION } from '@/enums' import { STUDENT_REGISTRATION } from '@/enums'
import { useGetRegisterDataQuery } from '@/services/query/auth'
import SideBarSteps from '@/features/auth/components/studentRegister/SideBarSteps.vue' import SideBarSteps from '@/features/auth/components/studentRegister/SideBarSteps.vue'
import SuccessModal from '@/features/auth/components/studentRegister/SuccessModal.vue' import SuccessModal from '@/features/auth/components/studentRegister/SuccessModal.vue'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration' import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
@@ -40,6 +41,15 @@ import ProfessionalInformation from '@/features/auth/components/studentRegister/
const store = useStudentRegistrationStore() const store = useStudentRegistrationStore()
const { isModal, openModal } = useModal() const { isModal, openModal } = useModal()
const { data: registerData } = useGetRegisterDataQuery()
watch(
registerData,
(list) => {
if (Array.isArray(list) && list.length > 0) store.hydrateFromKeyValueList(list)
},
{ immediate: true }
)
const STEP_TO_COMPONENT = { const STEP_TO_COMPONENT = {
[STUDENT_REGISTRATION.PERSONAL_INFORMATION]: markRaw(PersonalInformation), [STUDENT_REGISTRATION.PERSONAL_INFORMATION]: markRaw(PersonalInformation),
[STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION]: markRaw(EducationalInformation), [STUDENT_REGISTRATION.EDUCATIONAL_INFORMATION]: markRaw(EducationalInformation),
+1 -1
View File
@@ -9,7 +9,7 @@ const requiredString = (min = 0) => {
} }
export const personalInformationSchema = object().shape({ export const personalInformationSchema = object().shape({
avatar: mixed().required(), avatar: mixed().notRequired(),
avatarId: mixed().notRequired(), avatarId: mixed().notRequired(),
firstName: requiredString(3), firstName: requiredString(3),
lastName: requiredString(3), lastName: requiredString(3),
@@ -69,6 +69,65 @@ const emptyState = () => ({
registrationMedia: {}, registrationMedia: {},
}) })
// Each field is owned by exactly one section. Used to route GET /me/register-data
// values back into the matching slice on hydration.
const SECTION_FIELDS = {
personal: [
'avatar',
'avatarId',
'firstName',
'lastName',
'birthDate',
'nationalCode',
'maritalStatus',
'gender',
'phoneNumber',
'provinceId',
'cityId',
'address',
],
educational: [
'educationStatus',
'seminaryLevel',
'universityLevel',
'universityName',
'fieldOfStudy',
'workExperienceSummary',
'activitySummary',
],
professional: [
'propagationExperienceYears',
'propagationMethodDescription',
'specializedTopics',
'propagationPlatforms',
],
skill1: ['responseToLowSatisfaction', 'responseToLowSatisfactionDescription'],
skill2: ['responseToSessionCancellation', 'responseToSessionCancellationDescription'],
skill3: ['responseToAudienceConflict', 'responseToAudienceConflictDescription'],
skill4: ['responseToCompetingPropagator', 'responseToCompetingPropagatorDescription'],
skill5: ['responseToUnqualifiedAdvisors', 'relevantCertificates', 'hijabApproach'],
skill6: ['faithProductionAudio', 'faithProductionId'],
skill7: ['leaderMessageVideo', 'leaderMessageId'],
}
const FIELD_TO_SECTION = Object.entries(SECTION_FIELDS).reduce((acc, [section, fields]) => {
fields.forEach((field) => {
acc[field] = section
})
return acc
}, {})
export const toKeyValueList = (obj = {}) =>
Object.entries(obj).map(([key, value]) => ({ key, value }))
export const fromKeyValueList = (list = []) => {
if (!Array.isArray(list)) return {}
return list.reduce((acc, item) => {
if (item && typeof item === 'object' && 'key' in item) acc[item.key] = item.value
return acc
}, {})
}
const readPersisted = () => { const readPersisted = () => {
try { try {
const raw = localStorage.getItem(STORAGE_KEY) const raw = localStorage.getItem(STORAGE_KEY)
@@ -98,6 +157,19 @@ export const useStudentRegistrationStore = defineStore('studentRegistration', ()
const completedSteps = ref(initial.completedSteps || []) const completedSteps = ref(initial.completedSteps || [])
const registrationMedia = ref(initial.registrationMedia || {}) const registrationMedia = ref(initial.registrationMedia || {})
const sectionRefs = {
personal,
educational,
professional,
skill1,
skill2,
skill3,
skill4,
skill5,
skill6,
skill7,
}
const snapshot = computed(() => ({ const snapshot = computed(() => ({
isProfileCompleted: isProfileCompleted.value, isProfileCompleted: isProfileCompleted.value,
personal: personal.value, personal: personal.value,
@@ -171,6 +243,22 @@ export const useStudentRegistrationStore = defineStore('studentRegistration', ()
: personal.value.avatarId, : personal.value.avatarId,
}) })
// Take the flat `{key,value}` list from GET /me/register-data and slot each
// value into the right section ref, leaving anything we don't recognise alone.
const hydrateFromKeyValueList = (list) => {
const flat = fromKeyValueList(list)
const buckets = {}
Object.entries(flat).forEach(([key, value]) => {
const section = FIELD_TO_SECTION[key]
if (!section) return
buckets[section] = { ...(buckets[section] || {}), [key]: value }
})
Object.entries(buckets).forEach(([section, patch]) => {
const target = sectionRefs[section]
if (target) target.value = { ...target.value, ...patch }
})
}
const reset = () => { const reset = () => {
const fresh = emptyState() const fresh = emptyState()
isProfileCompleted.value = fresh.isProfileCompleted isProfileCompleted.value = fresh.isProfileCompleted
@@ -215,6 +303,7 @@ export const useStudentRegistrationStore = defineStore('studentRegistration', ()
goToPrevStep, goToPrevStep,
canGoToStep, canGoToStep,
buildCompletePayload, buildCompletePayload,
hydrateFromKeyValueList,
reset, reset,
} }
}) })
@@ -295,23 +295,27 @@ const { data: profile } = useGetMeQuery()
watch(profile, (user) => { watch(profile, (user) => {
if (!user) return if (!user) return
const nameParts = String(user.name || '').trim().split(/\s+/).filter(Boolean)
const firstName = user.firstName || nameParts[0] || ''
const lastName = user.lastName || nameParts.slice(1).join(' ') || ''
const phone = user.phone || user.phoneNumber || ''
form.value = { form.value = {
...form.value, ...form.value,
firstName: user.firstName || '', firstName,
lastName: user.lastName || '', lastName,
birthDate: user.profile?.birthDate || '', birthDate: user.profile?.birthDate || '',
nationalCode: user.nationalCode || '', nationalCode: user.nationalCode || '',
maritalStatus: user.profile?.maritalStatus || '', maritalStatus: user.profile?.maritalStatus || '',
gender: user.profile?.gender || '', gender: user.profile?.gender || '',
bio: user.profile?.bio || '', bio: user.profile?.bio || '',
phoneNumber: user.phoneNumber || '', phoneNumber: phone,
provinceId: user.address?.province?.id || '', provinceId: user.address?.province?.id || '',
cityId: user.address?.city?.id || '', cityId: user.address?.city?.id || '',
address: user.address?.address || '', address: user.address?.address || '',
avatarId: user.profile?.avatarId || null, avatarId: user.profile?.avatarId || null,
} }
initialNationalCode.value = user.nationalCode || '' initialNationalCode.value = user.nationalCode || ''
initialPhoneNumber.value = user.phoneNumber || '' initialPhoneNumber.value = phone
if (user.avatarUrl) avatar.value = { url: user.avatarUrl } if (user.avatarUrl) avatar.value = { url: user.avatarUrl }
}) })
@@ -336,11 +340,21 @@ const updateMutation = useUpdateProfileMutation()
const onSubmit = async () => { const onSubmit = async () => {
const { isValid, payload } = await validate(form.value) const { isValid, payload } = await validate(form.value)
if (!isValid) return if (!isValid) return
if (!payload.password) { // Backend PATCH /me accepts: name, email, phone, password (+confirmation),
delete payload.password // avatar_media_id. Other UI-only fields (province/city/address/birthDate/)
delete payload.passwordConfirmation // are not in the backend Postman doc and are dropped here.
const name = [payload.firstName, payload.lastName].filter(Boolean).join(' ').trim()
const body = {
...(name ? { name } : {}),
...(payload.phoneNumber ? { phone: payload.phoneNumber } : {}),
...(payload.email ? { email: payload.email } : {}),
...(payload.avatarId ? { avatarMediaId: payload.avatarId } : {}),
} }
await updateMutation.mutateAsync(payload) if (payload.password) {
body.password = payload.password
body.passwordConfirmation = payload.passwordConfirmation
}
await updateMutation.mutateAsync(body)
await queryClient.invalidateQueries({ queryKey: authKeys.me() }) await queryClient.invalidateQueries({ queryKey: authKeys.me() })
toast.success('پروفایل با موفقیت به‌روز شد') toast.success('پروفایل با موفقیت به‌روز شد')
router.push({ name: 'student-dashboard' }) router.push({ name: 'student-dashboard' })
+2 -1
View File
@@ -10,5 +10,6 @@ export const apiShowAdminConsultation = (id) =>
export const apiSendAdminConsultationMessage = (id, payload) => export const apiSendAdminConsultationMessage = (id, payload) =>
http.post(buildUrl(endpoints.sendConsultationMessage, { id }), payload) http.post(buildUrl(endpoints.sendConsultationMessage, { id }), payload)
// Backend uses PATCH (not POST).
export const apiChangeAdminConsultationStatus = (id, payload) => export const apiChangeAdminConsultationStatus = (id, payload) =>
http.post(buildUrl(endpoints.changeConsultationStatus, { id }), payload) http.patch(buildUrl(endpoints.changeConsultationStatus, { id }), payload)
+3
View File
@@ -15,6 +15,9 @@ export const apiDeleteAdminCourse = (id) => http.delete(buildUrl(endpoints.delet
export const apiGetAdminCourseStudents = (courseId, params) => export const apiGetAdminCourseStudents = (courseId, params) =>
http.get(buildUrl(endpoints.listCourseStudents, { courseId }), { params }) http.get(buildUrl(endpoints.listCourseStudents, { courseId }), { params })
export const apiGetCourseAttendees = (courseId, params) =>
http.get(buildUrl(endpoints.getCourseAttendees, { courseId }), { params })
export const apiAddAdminCourseStudent = (courseId, payload) => export const apiAddAdminCourseStudent = (courseId, payload) =>
http.post(buildUrl(endpoints.addCourseStudent, { courseId }), payload) http.post(buildUrl(endpoints.addCourseStudent, { courseId }), payload)
+3
View File
@@ -17,6 +17,9 @@ export const apiCloneAdminTerm = (id) => http.post(buildUrl(endpoints.cloneTerm,
export const apiGetAdminTermStudents = (termId, params) => export const apiGetAdminTermStudents = (termId, params) =>
http.get(buildUrl(endpoints.listUserTerm, { termId }), { params }) http.get(buildUrl(endpoints.listUserTerm, { termId }), { params })
export const apiGetTermAttendees = (termId, params) =>
http.get(buildUrl(endpoints.getTermAttendees, { termId }), { params })
export const apiAddAdminTermStudents = (termId, payload) => export const apiAddAdminTermStudents = (termId, payload) =>
http.post(buildUrl(endpoints.addUserTerm, { termId }), payload) http.post(buildUrl(endpoints.addUserTerm, { termId }), payload)
+12 -1
View File
@@ -1,6 +1,12 @@
import { http } from '@/services/api/http' import { http } from '@/services/api/http'
import { endpoints } from '@/services/api/endpoints' import { endpoints } from '@/services/api/endpoints'
// Backend (Postman: Auth) is the source of truth. Payloads use the backend's
// field names — `name`, `phone`, `password`, `password_confirmation`,
// `device_name`, `avatar_media_id` — and responses are passed through unchanged.
// Callers (forms / store) are responsible for translating UI-local field names
// (firstName/lastName/phoneNumber) into this shape.
export const apiLogin = (payload) => http.post(endpoints.login, payload) export const apiLogin = (payload) => http.post(endpoints.login, payload)
export const apiLoginWithCode = (payload) => http.post(endpoints.loginWithCode2Step, payload) export const apiLoginWithCode = (payload) => http.post(endpoints.loginWithCode2Step, payload)
@@ -25,7 +31,12 @@ export const apiGetMe = () => http.get(endpoints.me)
export const apiCompleteProfile = (payload) => http.post(endpoints.completeProfile, payload) export const apiCompleteProfile = (payload) => http.post(endpoints.completeProfile, payload)
export const apiUpdateProfile = (payload) => http.put(endpoints.updateProfile, payload) export const apiUpdateProfile = (payload) => http.patch(endpoints.updateProfile, payload)
// `data` is an array of `{ key, value }` entries. The backend echoes whatever
// we POST back from the GET, so this is effectively a free-form key/value bag.
export const apiGetRegisterData = () => http.get(endpoints.registerData)
export const apiSaveRegisterData = (data) => http.post(endpoints.registerData, { data })
export const apiGetRegistrationQuestionVideo = () => export const apiGetRegistrationQuestionVideo = () =>
http.get(endpoints.getRegistrationQuestionVideo) http.get(endpoints.getRegistrationQuestionVideo)
+19 -10
View File
@@ -1,18 +1,22 @@
export const endpoints = { export const endpoints = {
// ─── Auth & profile ──────────────────────────────────────────────────────── // ─── Auth & profile ────────────────────────────────────────────────────────
register: '/register', // Backend-aligned (Postman: Auth collection)
register: '/auth/register',
login: '/auth/login',
logout: '/auth/logout',
me: '/auth/me',
updateProfile: '/me',
registerData: '/me/register-data',
// FE-only — NOT in backend Postman doc; kept so existing UI/mock layer works.
resendVerificationCodeForRegister: '/resend-verification-code', resendVerificationCodeForRegister: '/resend-verification-code',
verifyCode: '/verify-code', verifyCode: '/verify-code',
completeProfile: '/complete-profile', completeProfile: '/complete-profile',
getRegistrationQuestionVideo: '/verification-registration-media', getRegistrationQuestionVideo: '/verification-registration-media',
login: '/login',
loginWithCode2Step: '/login-with-code', loginWithCode2Step: '/login-with-code',
forgotPassword: '/forgot-password', forgotPassword: '/forgot-password',
verifyForgotPasswordCode: '/verify-forgot-password-code', verifyForgotPasswordCode: '/verify-forgot-password-code',
resetPassword: '/reset-password', resetPassword: '/reset-password',
logout: '/logout',
me: '/auth/me',
updateProfile: '/profile',
// ─── Geo ─────────────────────────────────────────────────────────────────── // ─── Geo ───────────────────────────────────────────────────────────────────
provinceList: '/provinces', provinceList: '/provinces',
@@ -67,6 +71,7 @@ export const endpoints = {
showTerm: '/terms/:id', showTerm: '/terms/:id',
updateTerm: '/terms/:id', updateTerm: '/terms/:id',
deleteTerm: '/terms/:id', deleteTerm: '/terms/:id',
getTermAttendees: '/terms/:termId/attendees',
// ─── Backend-aligned: Courses ────────────────────────────────────────────── // ─── Backend-aligned: Courses ──────────────────────────────────────────────
getCoursesList: '/courses', getCoursesList: '/courses',
@@ -74,6 +79,7 @@ export const endpoints = {
showCourse: '/courses/:id', showCourse: '/courses/:id',
updateCourse: '/courses/:id', updateCourse: '/courses/:id',
deleteCourse: '/courses/:id', deleteCourse: '/courses/:id',
getCourseAttendees: '/courses/:courseId/attendees',
// ─── Backend-aligned: Sessions ───────────────────────────────────────────── // ─── Backend-aligned: Sessions ─────────────────────────────────────────────
getSessionsList: '/sessions', getSessionsList: '/sessions',
@@ -146,16 +152,19 @@ export const endpoints = {
getAssignmentSubmissions: '/homeworks/:homeworkId/submissions', getAssignmentSubmissions: '/homeworks/:homeworkId/submissions',
showAssignmentSubmission: '/homework-submissions/:submissionId', showAssignmentSubmission: '/homework-submissions/:submissionId',
// ─── Tickets / Consultations (out of scope of Terms/Courses backend doc) ─── // ─── Backend-aligned: Tickets ─────────────────────────────────────────────
// Admin "messages" UI talks to /admin/tickets.
// Admin "consultations" UI talks to /counselor/tickets (same schema; the
// counselor scope is the consultation pool).
getTicketsList: '/admin/tickets', getTicketsList: '/admin/tickets',
showTicket: '/admin/tickets/:id', showTicket: '/admin/tickets/:id',
sendTicketMessage: '/admin/tickets/:id/messages', sendTicketMessage: '/admin/tickets/:id/messages',
changeTicketStatus: '/admin/tickets/:id/status', changeTicketStatus: '/admin/tickets/:id/status',
getConsultationsList: '/admin/consultations', getConsultationsList: '/counselor/tickets',
showConsultation: '/admin/consultations/:id', showConsultation: '/counselor/tickets/:id',
sendConsultationMessage: '/admin/consultations/:id/messages', sendConsultationMessage: '/counselor/tickets/:id/messages',
changeConsultationStatus: '/admin/consultations/:id/status', changeConsultationStatus: '/counselor/tickets/:id/status',
} }
export const buildUrl = (template, params = {}) => export const buildUrl = (template, params = {}) =>
+1 -1
View File
@@ -89,7 +89,7 @@ const createInstance = (baseUrl, { headers = {}, ...configs } = {}) => {
addResponseUnwrapInterceptor(instance) addResponseUnwrapInterceptor(instance)
addCamelizeInterceptor(instance) addCamelizeInterceptor(instance)
addSnakizeInterceptor(instance) addSnakizeInterceptor(instance)
addUnauthorizeInterceptor(instance) // addUnauthorizeInterceptor(instance)
return instance return instance
} }
+1 -1
View File
@@ -45,7 +45,7 @@ register('GET', endpoints.me, () => ({
data: currentMe, data: currentMe,
})) }))
register('PUT', endpoints.updateProfile, ({ data }) => { register('PATCH', endpoints.updateProfile, ({ data }) => {
Object.assign(currentMe, { Object.assign(currentMe, {
name: data.name ?? currentMe.name, name: data.name ?? currentMe.name,
email: data.email ?? currentMe.email, email: data.email ?? currentMe.email,
@@ -18,6 +18,10 @@ export const useAdminConsultationsListQuery = (filtersRef, paginationRef, option
queryKey: ['admin', 'consultations', 'list', filtersRef, paginationRef], queryKey: ['admin', 'consultations', 'list', filtersRef, paginationRef],
queryFn: () => queryFn: () =>
apiGetAdminConsultations({ ...cleanFilters(filtersRef.value), ...paginationRef.value }), apiGetAdminConsultations({ ...cleanFilters(filtersRef.value), ...paginationRef.value }),
select: (response) => ({
data: response?.data ?? [],
meta: response?.meta,
}),
...options, ...options,
}) })
+16
View File
@@ -9,6 +9,7 @@ import {
apiGetAdminCourseSessions, apiGetAdminCourseSessions,
apiGetAdminCourseStudents, apiGetAdminCourseStudents,
apiGetAdminCourses, apiGetAdminCourses,
apiGetCourseAttendees,
apiRemoveAdminCourseStudent, apiRemoveAdminCourseStudent,
apiShowAdminCourse, apiShowAdminCourse,
apiUpdateAdminCourse, apiUpdateAdminCourse,
@@ -78,6 +79,21 @@ export const useAdminCourseStudentsQuery = (courseIdRef, filtersRef, paginationR
...options, ...options,
}) })
export const useCourseAttendeesQuery = (courseIdRef, filtersRef, paginationRef, options = {}) =>
useQuery({
queryKey: ['courses', 'attendees', courseIdRef, filtersRef, paginationRef],
queryFn: () =>
apiGetCourseAttendees(courseIdRef.value, {
...cleanFilters(filtersRef?.value || {}),
...paginationRef?.value,
}),
select: (response) => ({
data: response?.data?.items ?? response?.data ?? [],
meta: response?.data?.meta ?? response?.meta,
}),
...options,
})
export const useAddAdminCourseStudentMutation = () => export const useAddAdminCourseStudentMutation = () =>
useMutation({ useMutation({
mutationFn: ({ courseId, payload }) => apiAddAdminCourseStudent(courseId, payload), mutationFn: ({ courseId, payload }) => apiAddAdminCourseStudent(courseId, payload),
+23
View File
@@ -9,6 +9,7 @@ import {
apiGetAdminTerms, apiGetAdminTerms,
apiGetAdminTermCourses, apiGetAdminTermCourses,
apiGetAdminTermStudents, apiGetAdminTermStudents,
apiGetTermAttendees,
apiRemoveAdminTermCourse, apiRemoveAdminTermCourse,
apiRemoveAdminTermStudent, apiRemoveAdminTermStudent,
apiShowAdminTerm, apiShowAdminTerm,
@@ -28,6 +29,13 @@ export const adminTermsKeys = {
filters, filters,
pagination, pagination,
], ],
attendees: (termId, filters, pagination) => [
'terms',
'attendees',
termId,
filters,
pagination,
],
courses: (termId, filters, pagination) => [ courses: (termId, filters, pagination) => [
'admin', 'admin',
'terms', 'terms',
@@ -80,6 +88,21 @@ export const useAdminTermStudentsQuery = (termIdRef, filtersRef, paginationRef,
...options, ...options,
}) })
export const useTermAttendeesQuery = (termIdRef, filtersRef, paginationRef, options = {}) =>
useQuery({
queryKey: ['terms', 'attendees', termIdRef, filtersRef, paginationRef],
queryFn: () =>
apiGetTermAttendees(termIdRef.value, {
...cleanFilters(filtersRef?.value || {}),
...paginationRef?.value,
}),
select: (response) => ({
data: response?.data?.items ?? response?.data ?? [],
meta: response?.data?.meta ?? response?.meta,
}),
...options,
})
export const useAddAdminTermStudentsMutation = () => export const useAddAdminTermStudentsMutation = () =>
useMutation({ useMutation({
mutationFn: ({ termId, payload }) => apiAddAdminTermStudents(termId, payload), mutationFn: ({ termId, payload }) => apiAddAdminTermStudents(termId, payload),
+19
View File
@@ -4,6 +4,7 @@ import {
apiCompleteProfile, apiCompleteProfile,
apiForgotPassword, apiForgotPassword,
apiGetMe, apiGetMe,
apiGetRegisterData,
apiGetRegistrationQuestionVideo, apiGetRegistrationQuestionVideo,
apiLogin, apiLogin,
apiLoginWithCode, apiLoginWithCode,
@@ -11,6 +12,7 @@ import {
apiRegister, apiRegister,
apiResendVerificationCode, apiResendVerificationCode,
apiResetPassword, apiResetPassword,
apiSaveRegisterData,
apiUpdateProfile, apiUpdateProfile,
apiUploadMedia, apiUploadMedia,
apiVerifyCode, apiVerifyCode,
@@ -20,6 +22,7 @@ import {
export const authKeys = { export const authKeys = {
me: () => ['auth', 'me'], me: () => ['auth', 'me'],
registrationVideo: () => ['auth', 'registration-video'], registrationVideo: () => ['auth', 'registration-video'],
registerData: () => ['auth', 'register-data'],
} }
export const useLoginMutation = () => useMutation({ mutationFn: apiLogin }) export const useLoginMutation = () => useMutation({ mutationFn: apiLogin })
@@ -63,3 +66,19 @@ export const useGetRegistrationVideoQuery = (options = {}) =>
}) })
export const useUploadMediaMutation = () => useMutation({ mutationFn: apiUploadMedia }) export const useUploadMediaMutation = () => useMutation({ mutationFn: apiUploadMedia })
export const useGetRegisterDataQuery = (options = {}) =>
useQuery({
queryKey: authKeys.registerData(),
queryFn: () => apiGetRegisterData(),
select: (response) => {
const data = response?.data ?? response
if (Array.isArray(data)) return data
if (Array.isArray(data?.data)) return data.data
return []
},
...options,
})
export const useSaveRegisterDataMutation = () =>
useMutation({ mutationFn: apiSaveRegisterData })
+38
View File
@@ -7,11 +7,48 @@ export const commonKeys = {
cities: (provinceId) => ['common', 'cities', provinceId], cities: (provinceId) => ['common', 'cities', provinceId],
} }
// Sample data so the register form is usable while the backend geo endpoints
// are still being built. Once /provinces and /provinces/:id/cities are live,
// the real response overwrites these and the keys stay the same.
const SAMPLE_PROVINCES = [
{ id: 1, name: 'تهران' },
{ id: 2, name: 'اصفهان' },
{ id: 3, name: 'فارس' },
{ id: 4, name: 'خراسان رضوی' },
{ id: 5, name: 'قم' },
]
const SAMPLE_CITIES_BY_PROVINCE = {
1: [
{ id: 101, name: 'تهران' },
{ id: 102, name: 'ری' },
{ id: 103, name: 'شمیرانات' },
{ id: 104, name: 'اسلامشهر' },
],
2: [
{ id: 201, name: 'اصفهان' },
{ id: 202, name: 'کاشان' },
{ id: 203, name: 'نجف‌آباد' },
],
3: [
{ id: 301, name: 'شیراز' },
{ id: 302, name: 'مرودشت' },
{ id: 303, name: 'کازرون' },
],
4: [
{ id: 401, name: 'مشهد' },
{ id: 402, name: 'نیشابور' },
{ id: 403, name: 'سبزوار' },
],
5: [{ id: 501, name: 'قم' }],
}
export const useGetProvincesQuery = (options = {}) => export const useGetProvincesQuery = (options = {}) =>
useQuery({ useQuery({
queryKey: commonKeys.provinces(), queryKey: commonKeys.provinces(),
queryFn: () => apiGetProvinces(), queryFn: () => apiGetProvinces(),
select: (response) => response?.data ?? response, select: (response) => response?.data ?? response,
initialData: SAMPLE_PROVINCES,
...options, ...options,
}) })
@@ -20,5 +57,6 @@ export const useGetCitiesOfProvinceQuery = (provinceIdRef, options = {}) =>
queryKey: ['common', 'cities', provinceIdRef], queryKey: ['common', 'cities', provinceIdRef],
queryFn: () => apiGetCitiesOfProvince(provinceIdRef.value), queryFn: () => apiGetCitiesOfProvince(provinceIdRef.value),
select: (response) => response?.data ?? response, select: (response) => response?.data ?? response,
initialData: () => SAMPLE_CITIES_BY_PROVINCE[provinceIdRef.value] || [],
...options, ...options,
}) })
+6 -1
View File
@@ -7,7 +7,12 @@ export const useAuthStore = defineStore('auth', () => {
const user = ref(tokenService.getUserInfo()) const user = ref(tokenService.getUserInfo())
const isAuthenticated = computed(() => !!tokenService.getToken() && !!user.value) const isAuthenticated = computed(() => !!tokenService.getToken() && !!user.value)
const role = computed(() => user.value?.role || user.value?.roleName || null) const role = computed(() => {
const u = user.value
if (!u) return null
if (Array.isArray(u.roles) && u.roles.length) return u.roles[0]
return u.role || u.roleName || null
})
const setUser = (userData) => { const setUser = (userData) => {
user.value = userData user.value = userData