front-end/banu-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: admin courses

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/assignments/components/AssignmentsFilters.vue
+2 -2
View File
@@ -104,7 +104,7 @@ const todayIso = new Date().toISOString()
const templateSearch = ref('')
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 templateOptions = computed(() => templatesResponse.value?.data ?? [])
@@ -113,7 +113,7 @@ const sessionListFilters = computed(() => ({
title: sessionSearch.value,
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 sessionOptions = computed(() => sessionsResponse.value?.data ?? [])
src/features/admin/assignments/components/modals/AddAssignmentModal.vue
+12 -10
View File
@@ -1,12 +1,14 @@
<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 }">
<form class="add-assignment" @submit.prevent="onSubmit(close)">
<LineTitleBlock
:title="isEditMode ? 'ویرایش تکلیف' : 'افزودن تکلیف جدید'"
:title-en="isEditMode ? 'Edit Assignment' : 'Add Assignment'"
/>
<div class="add-assignment__grid">
<TextField
v-model="form.title"
@@ -172,7 +174,7 @@ const { validate, validateAt, errors, resetErrors } = useYup(schema)
const templateSearch = ref('')
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 selectedTemplate = ref(null)
const templateOptions = computed(() => {
@@ -188,7 +190,7 @@ const sessionFilters = computed(() => ({
title: sessionSearch.value,
courseId: form.value.courseId,
}))
const sessionPagination = ref({ page: 1, perPage: 30 })
const sessionPagination = ref({ page: 1, perPage: 10 })
const { data: sessionsResponse } = useAdminSessionsListQuery(sessionFilters, sessionPagination, {
enabled: () => !!form.value.courseId,
})
@@ -307,8 +309,8 @@ const onSubmit = async (close) => {
&__actions {
display: flex;
justify-content: flex-end;
gap: 0.625rem;
align-items: center;
justify-content: space-between;
}
&__btn-cancel {
src/features/admin/consultations/components/ConsultationItem.vue
+8 -23
View File
@@ -1,8 +1,8 @@
<template>
<div class="consultation-item">
<div class="consultation-item__user">
<div v-if="consultation.user?.avatarUrl" class="consultation-item__avatar">
<img :src="consultation.user.avatarUrl" :alt="userName" />
<div v-if="consultation.student?.avatarUrl" class="consultation-item__avatar">
<img :src="consultation.student.avatarUrl" :alt="userName" />
</div>
<div v-else class="consultation-item__avatar consultation-item__avatar--placeholder">
<SvgIcon name="user" :size="24" color="#bcbcbc" />
@@ -11,9 +11,7 @@
<p class="consultation-item__name">{{ userName }}</p>
<p class="consultation-item__request-id">
<span class="consultation-item__request-id-label">شماره درخواست :</span>
<span class="consultation-item__request-id-value">
{{ consultation.requestId || consultation.id || '—' }}
</span>
<span class="consultation-item__request-id-value">{{ consultation.id || '—' }}</span>
</p>
</div>
</div>
@@ -26,7 +24,7 @@
<button
type="button"
class="consultation-item__status"
:class="`consultation-item__status--${consultation.status || 'in_progress'}`"
:class="`consultation-item__status--${consultation.status || 'open'}`"
@click="onStatusClick"
>
<span class="consultation-item__status-dot" />
@@ -69,24 +67,11 @@ const props = defineProps({
const emit = defineEmits(['show-details', 'change-status'])
const userName = computed(() => {
const u = props.consultation.user
if (!u) return '—'
return `${u.firstName || ''} ${u.lastName || ''}`.trim() || u.fullName || '—'
})
const userName = computed(() => props.consultation.student?.name || '—')
const statusLabel = computed(
() => props.consultation.statusLabel || CONSULTATION_STATUS[props.consultation.status] || '—'
)
const statusLabel = computed(() => CONSULTATION_STATUS[props.consultation.status] || '—')
const createdAt = computed(() => {
if (props.consultation.faCreatedAt) {
return props.consultation.faCreatedTime
? `${props.consultation.faCreatedTime}، ${props.consultation.faCreatedAt}`
: props.consultation.faCreatedAt
}
return formatJalaaliDate(props.consultation.createdAt) || '—'
})
const createdAt = computed(() => formatJalaaliDate(props.consultation.createdAt) || '—')
const menuOpen = ref(false)
const menuTrigger = ref(null)
@@ -246,7 +231,7 @@ const menuItems = computed(() =>
color: #009a12;
}
&--in_progress {
&--open {
background: rgba(0, 112, 116, 10%);
color: #007074;
}
src/features/admin/consultations/components/modals/ConsultationDetailsModal.vue
+14 -7
View File
@@ -17,7 +17,7 @@
:class="`consultation-details__row--${senderClass(message)}`"
>
<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>
</div>
</div>
@@ -77,13 +77,19 @@ const { data: consultation, isLoading } = useAdminConsultationQuery(consultation
const messages = computed(() => consultation.value?.messages ?? [])
const consultationDate = computed(
() => consultation.value?.faCreatedAt || formatJalaaliDate(consultation.value?.createdAt) || '—'
)
const consultationDate = computed(() => 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 canSend = computed(() => text.value.trim().length > 0)
@@ -94,7 +100,8 @@ const onSend = async () => {
if (!canSend.value || !consultationId.value) return
const value = text.value.trim()
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 })
}
src/features/admin/courses/components/CoursesFilters.vue
+1 -1
View File
@@ -37,7 +37,7 @@
@click="onReset"
>
<template #icon>
<SvgIcon name="close" :size="20" />
<SvgIcon name="close" :size="20" color="black" />
</template>
</CircleButton>
<CircleButton
src/features/admin/courses/components/modals/AddOfferedCourseModal.vue
+2 -2
View File
@@ -165,7 +165,7 @@ const { validate, validateAt, errors, resetErrors } = useYup(schema)
const termSearch = ref('')
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 selectedTerm = ref(null)
const termOptions = computed(() => {
@@ -178,7 +178,7 @@ const termOptions = computed(() => {
const templateSearch = ref('')
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 selectedTemplate = ref(null)
const templateOptions = computed(() => {
src/features/admin/courses/components/modals/CourseDetailsModal.vue
+14 -47
View File
@@ -84,24 +84,25 @@
class="course-details__student-row"
>
<div class="course-details__student-main">
<div v-if="student.avatarUrl" class="course-details__avatar">
<img :src="student.avatarUrl" :alt="studentName(student)" />
<div v-if="studentAvatar(student)" class="course-details__avatar">
<img :src="studentAvatar(student)" :alt="student.name" />
</div>
<div v-else class="course-details__avatar course-details__avatar--placeholder">
<SvgIcon name="user" :size="20" color="#bcbcbc" />
</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">
<span>{{ student.address?.province?.name || '—' }}</span>
<span class="course-details__sep">،</span>
<span>{{ student.address?.city?.name || '—' }}</span>
<span dir="ltr">{{ student.phone || '—' }}</span>
<template v-if="student.email">
<span class="course-details__sep">،</span>
<span dir="ltr">{{ student.email }}</span>
</template>
</p>
</div>
</div>
<div class="course-details__student-actions">
<div v-if="student.phone" class="course-details__student-actions">
<CircleButton
v-if="student.phoneNumber"
tooltip="ارسال پیام"
bg-color="rgba(104, 104, 104, 0.05)"
size="2.25rem"
@@ -111,16 +112,6 @@
<SvgIcon name="chat" :size="16" color="var(--color-sec-gray)" />
</template>
</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>
@@ -151,7 +142,6 @@
<script setup>
import { computed, ref } from 'vue'
import useModal from '@/composables/useModal'
import { useQueryClient } from '@tanstack/vue-query'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.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 CourseSessionItem from '@/features/admin/courses/components/CourseSessionItem.vue'
import {
adminCoursesKeys,
useAdminCourseQuery,
useAdminCourseSessionsQuery,
useAdminCourseStudentsQuery,
useRemoveAdminCourseStudentMutation,
useCourseAttendeesQuery,
} from '@/services/query/admin-courses'
defineOptions({ name: 'CourseDetailsModal' })
const queryClient = useQueryClient()
const { openModal, getModal } = useModal()
const modalData = computed(() => getModal('CourseDetailsModal')?.data ?? {})
@@ -226,7 +213,7 @@ const { pagination: studentsPagination, setPage: setStudentsPage } = usePaginati
perPage: 10,
})
const { data: studentsData, isLoading: studentsPending } = useAdminCourseStudentsQuery(
const { data: studentsData, isLoading: studentsPending } = useCourseAttendeesQuery(
courseId,
studentsFilters,
studentsPagination,
@@ -243,15 +230,7 @@ const studentsPaginationMeta = computed(() => ({
...studentsData.value?.meta,
}))
const studentName = (student) =>
`${student.firstName || ''} ${student.lastName || ''}`.trim() ||
student.fullName ||
student.phoneNumber ||
'—'
const invalidate = () => queryClient.invalidateQueries({ queryKey: adminCoursesKeys.all })
const removeStudentMutation = useRemoveAdminCourseStudentMutation()
const studentAvatar = (student) => student.avatarUrl || student.avatarDownloadUrl || ''
const onOpenAddSession = () => {
openModal('AddSessionToCourseModal', { courseId: courseId.value })
@@ -261,21 +240,9 @@ const onOpenAddStudent = () => {
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) => {
if (!student?.phoneNumber) return
window.location.href = `sms:${student.phoneNumber}`
if (!student?.phone) return
window.location.href = `sms:${student.phone}`
}
</script>
src/features/admin/courses/pages/CourseFormPage.vue
+3 -64
View File
@@ -97,7 +97,6 @@
option-label="label"
option-value="value"
:error="errors.contentType"
@change="onContentTypeChange"
/>
</div>
<div class="course-form__cell course-form__cell--full">
@@ -109,18 +108,6 @@
:error="errors.description"
/>
</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>
@@ -157,6 +144,7 @@
import { toast } from 'vue3-toastify'
import useYup from '@/composables/useYup'
import { computed, ref, watch } from 'vue'
import { COURSE_CONTENT_TYPE } from '@/enums'
import { useRoute, useRouter } from 'vue-router'
import useDebounce from '@/composables/useDebounce'
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 SelectField from '@/components/form/SelectField.vue'
import LineTitleBlock from '@/components/LineTitleBlock.vue'
import FileUploader from '@/components/form/FileUploader.vue'
import ImageCropper from '@/components/form/ImageCropper.vue'
import { objectToFormData } from '@/utils/object-to-formdata'
import { useUploadMediaMutation } from '@/services/query/auth'
import { courseSchema } from '@/features/admin/courses/schema'
import TextareaField from '@/components/form/TextareaField.vue'
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 {
adminCoursesKeys,
@@ -197,27 +183,23 @@ const form = ref({
sessionsCount: '',
prerequisites: [],
contentType: '',
contentMediaId: null,
description: '',
coverMediaId: null,
termId: termId.value,
})
const image = ref(null)
const contentFiles = ref([])
const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, label]) => ({
value,
label,
}))
const contentAccept = computed(() => COURSE_CONTENT_TYPE_ACCEPT[form.value.contentType] || '*')
const { validate, validateAt, errors } = useYup(courseSchema)
const teacherSearch = ref('')
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 selectedTeacher = ref(null)
const teacherOptions = computed(() => {
@@ -234,7 +216,7 @@ const teacherOptions = computed(() => {
const prereqSearch = ref('')
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 selectedPrereqs = ref([])
const prerequisiteOptions = computed(() => {
@@ -268,22 +250,11 @@ watch(existingCourse, (course) => {
sessionsCount: course.sessionsCount ?? '',
prerequisites: prereqs.map((p) => p.courseId ?? p.id).filter(Boolean),
contentType: course.contentType || '',
contentMediaId: course.contentMediaId || null,
description: course.description || '',
coverMediaId: course.coverMediaId || null,
termId: course.termId ?? termId.value,
}
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()
@@ -302,38 +273,6 @@ const onImageCropped = async (file) => {
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 updateMutation = useUpdateAdminCourseMutation()
src/features/admin/courses/pages/CoursesListPage.vue
+2 -8
View File
@@ -130,14 +130,8 @@ const tabs = [
]
const activeTab = ref(routeTermId.value ? 'offered' : 'templates')
const templateFilters = ref({ title: '', status: '', fromDate: '', toDate: '' })
const offeredFilters = ref({
title: '',
termId: routeTermId.value ?? '',
status: '',
fromDate: '',
toDate: '',
})
const templateFilters = ref({})
const offeredFilters = ref({})
const currentFilters = computed({
get: () => (activeTab.value === 'templates' ? templateFilters.value : offeredFilters.value),
src/features/admin/exams/components/ExamsFilters.vue
+1 -1
View File
@@ -81,7 +81,7 @@ const todayIso = new Date().toISOString()
const templateSearch = ref('')
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 templateOptions = computed(() => templatesResponse.value?.data ?? [])
src/features/admin/exams/pages/ExamFormPage.vue
+1 -1
View File
@@ -146,7 +146,7 @@ const { validate, validateAt, errors } = useYup(examSchema)
const sessionSearch = ref('')
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 selectedSession = ref(null)
const sessionOptions = computed(() => {
src/features/admin/messages/components/TicketItem.vue
+1 -5
View File
@@ -54,11 +54,7 @@ const props = defineProps({
const emit = defineEmits(['show-details'])
const userName = computed(() => {
const s = props.ticket.student
if (!s) return '—'
return s.name || `${s.firstName || ''} ${s.lastName || ''}`.trim() || s.fullName || '—'
})
const userName = computed(() => props.ticket.student?.name || '—')
const statusLabel = computed(() => TICKET_STATUS[props.ticket.status] || '—')
src/features/admin/sessions/components/SessionsFilters.vue
+1 -1
View File
@@ -108,7 +108,7 @@ const sessionTypeOptions = Object.entries(SESSION_TYPE).map(([value, label]) =>
const templateSearch = ref('')
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 templateOptions = computed(() => templatesResponse.value?.data ?? [])
src/features/admin/sessions/components/modals/SessionAttendanceModal.vue
+9 -4
View File
@@ -1,9 +1,14 @@
<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 }">
<div class="session-attendance">
<LineTitleBlock title="حضور و غیاب" title-en="Attendance" />
<div class="session-attendance__filters">
<SelectField
v-model="filters.termId"
@@ -120,7 +125,7 @@ const paginationMeta = computed(() => ({
const termSearch = ref('')
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 termOptions = computed(() => termsResponse.value?.data ?? [])
src/features/admin/sessions/components/modals/SessionDetailsModal.vue
+91 -148
View File
@@ -1,96 +1,63 @@
<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 }">
<div class="session-details">
<LineTitleBlock title="جزئیات جلسه" title-en="Session Details" />
<SkeletonLoaderBlock v-if="isLoading" :rows="3" :cols-per-row="1" />
<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">
<LineInfoBlock title="نوع جلسه" :desc="sessionTypeLabel" />
<LineInfoBlock title="مدت زمان" :numeric-desc="durationLabel" />
<LineInfoBlock title="ترتیب" :numeric-desc="session.order ?? '—'" />
<LineInfoBlock title="درس‌های مرتبط" :numeric-desc="usedInTermsCount" />
</div>
<LineInfoBlock title="عنوان جلسه" :desc="session.title || '—'" />
<LineInfoBlock
title="تاریخ شروع"
:numeric-desc="formatJalaaliDate(session.startsAt) || '—'"
/>
<LineInfoBlock
title="تاریخ پایان"
:numeric-desc="formatJalaaliDate(session.endsAt) || '—'"
/>
<LineInfoBlock title="مدت زمان جلسه" :numeric-desc="durationLabel" />
<div v-if="hasConfig" class="session-details__config">
<LineTitleBlock title="تنظیمات جلسه" title-en="Session Config" />
<div class="session-details__grid">
<LineInfoBlock
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>
<LineInfoBlock title="نوع جلسه" :desc="sessionTypeLabel" />
<LineInfoBlock title="دوره مرتبط" :desc="courseTitle" />
<LineInfoBlock title="متعلق به" :desc="termTitle" />
<LineInfoBlock title="محتوای جلسه" :desc="contentTypeLabel" />
</div>
<div v-if="session.description" class="session-details__desc">
<LineInfoBlock title="توضیحات" :desc="session.description" />
<LineInfoBlock title="توضیحات جلسه" :desc="session.description" />
</div>
<div v-if="session.materials?.length" class="session-details__materials">
<LineTitleBlock title="فایل‌های جلسه" title-en="Materials" />
<ul class="session-details__materials-list">
<li v-for="material in session.materials" :key="material.id">
<a
:href="material.filePath || material.fileUrl || '#'"
target="_blank"
rel="noopener noreferrer"
class="session-details__file"
>
<SvgIcon name="file" :size="16" color="var(--color-prim-gray)" />
<span>{{ material.title || `فایل ${material.id}` }}</span>
</a>
</li>
</ul>
<div v-if="isOnline && session.link" class="session-details__link-row">
<LineInfoBlock title="لینک جلسه" :desc="session.link" />
</div>
<div v-if="mediaUrl || session.contentType" class="session-details__media">
<VideoPlayerBlock
v-if="session.contentType === 'video'"
:src="mediaUrl"
:video-id="session.id"
/>
<VoiceRecorder
v-else-if="session.contentType === 'voice'"
:model-value="mediaUrl"
:disabled="true"
/>
<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>
</template>
<NoItems v-else title="یافت نشد" desc="اطلاعات این جلسه در دسترس نیست." />
@@ -98,7 +65,7 @@
<div class="session-details__divider" />
<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>
<SvgIcon name="arrow-left" :size="18" color="#fff" />
</template>
@@ -117,10 +84,11 @@ import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import { formatJalaaliDate } from '@/utils/date-utils'
import { SESSION_PLATFORM, SESSION_TYPE } from '@/enums'
import LineTitleBlock from '@/components/LineTitleBlock.vue'
import { COURSE_CONTENT_TYPE, SESSION_TYPE } from '@/enums'
import VoiceRecorder from '@/components/form/VoiceRecorder.vue'
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
import { useAdminSessionQuery } from '@/services/query/admin-sessions'
import VideoPlayerBlock from '@/components/blocks/VideoPlayerBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
defineOptions({ name: 'SessionDetailsModal' })
@@ -135,20 +103,30 @@ const { data: session, isLoading } = useAdminSessionQuery(sessionId, {
})
const sessionTypeLabel = computed(
() => session.value?.sessionTypeFa || SESSION_TYPE[session.value?.sessionType] || '—'
() => SESSION_TYPE[session.value?.type] || session.value?.typeFa || '—'
)
const durationLabel = computed(() =>
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 c = session.value?.sessionConfig
if (!c) return false
return Object.values(c).some((v) => v !== '' && v !== null && v !== undefined)
})
const termTitle = computed(
() => session.value?.course?.term?.title || session.value?.term?.title || '—'
)
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>
<style lang="scss" scoped>
@@ -156,51 +134,6 @@ const hasConfig = computed(() => {
width: 100%;
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 {
display: grid;
grid-template-columns: 1fr;
@@ -211,33 +144,43 @@ const hasConfig = computed(() => {
}
@media (min-width: 1024px) {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(4, 1fr);
}
}
&__config,
&__desc,
&__materials {
margin-top: 1rem;
&__link-row {
margin-top: 0.5rem;
}
&__materials-list {
list-style: none;
padding: 0;
margin: 0;
&__link-row {
display: grid;
grid-template-columns: 1fr;
@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;
flex-direction: column;
gap: 0.25rem;
justify-content: center;
}
&__file {
display: inline-flex;
align-items: center;
gap: 0.375rem;
gap: 0.5rem;
color: var(--color-primary);
text-decoration: none;
font-family: var(--font-family-fa);
font-size: 0.85rem;
font-size: 0.875rem;
padding: 0.5rem 0;
&:hover {
text-decoration: underline;
src/features/admin/sessions/pages/SessionFormPage.vue
+236 -181
View File
@@ -11,143 +11,131 @@
</BoxedIconTitleBlock>
<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__row session-form__row--three">
<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>
<div class="session-form__main-col">
<LineTitleBlock title="اطلاعات جلسه" title-en="Session Details" />
<!-- row 2 — durationMinutes / courseId / contentType -->
<div class="session-form__row session-form__row--three">
<TextField
v-model="form.durationMinutes"
name="durationMinutes"
label="مدت زمان جلسه (دقیقه)"
inputmode="numeric"
:convert-digits="true"
:error="errors.durationMinutes"
@blur="validateAt('durationMinutes', form.durationMinutes)"
/>
<SelectField
v-model="form.courseId"
name="courseId"
label="دوره"
:options="courseOptions"
option-label="title"
option-value="id"
:searchable="true"
:on-search="searchCourses"
: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 1 — title / startsAt / endsAt -->
<div class="session-form__row session-form__row--three">
<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.startsAt"
name="startsAt"
label="زمان شروع"
type="datetime"
:error="errors.startsAt"
@blur="validateAt('startsAt', form.startsAt)"
/>
<DatePickerField
v-model="form.endsAt"
name="endsAt"
label="زمان پایان"
type="datetime"
:error="errors.endsAt"
/>
</div>
<!-- row 3 — sessionType / meetingLink -->
<div class="session-form__row session-form__row--two">
<SelectField
v-model="form.sessionType"
name="sessionType"
label="نوع جلسه"
:options="sessionTypeOptions"
option-label="label"
option-value="value"
:error="errors.sessionType"
@change="onSessionTypeChange"
/>
<TextField
v-model="form.meetingLink"
name="meetingLink"
label="لینک جلسه"
:disabled="form.sessionType !== 'online'"
:error="errors.meetingLink"
@blur="validateAt('meetingLink', form.meetingLink)"
/>
</div>
<!-- row 2 — durationMinutes / courseId / contentType -->
<div class="session-form__row session-form__row--three">
<TextField
v-model="form.durationMinutes"
name="durationMinutes"
label="مدت زمان جلسه (دقیقه)"
inputmode="numeric"
:convert-digits="true"
:error="errors.durationMinutes"
@blur="validateAt('durationMinutes', form.durationMinutes)"
/>
<SelectField
v-model="form.courseId"
name="courseId"
label="دوره"
:options="courseOptions"
option-label="title"
option-value="id"
:searchable="true"
:on-search="searchCourses"
: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 -->
<div class="session-form__row">
<TextareaField
v-model="form.description"
name="description"
label="توضیحات جلسه"
:row="5"
/>
</div>
<!-- row 3 — type / link -->
<div class="session-form__row session-form__row--two">
<SelectField
v-model="form.type"
name="type"
label="نوع جلسه"
:options="sessionTypeOptions"
option-label="label"
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 -->
<div class="session-form__row">
<label class="session-form__uploader-label">محتوای جلسه</label>
<FileUploader
v-model="contentFiles"
:accept="contentAccept"
:multiple="false"
:max-files="1"
:disabled="!form.contentType"
@select="onContentSelect"
@remove="onContentRemove"
@error="onContentError"
/>
</div>
<!-- row 4 — description -->
<div class="session-form__row">
<TextareaField
v-model="form.description"
name="description"
label="توضیحات جلسه"
:row="5"
/>
</div>
<!-- row 6 — preview of uploaded content -->
<div v-if="contentPreviewUrl" class="session-form__row session-form__preview">
<video
v-if="form.contentType === 'video'"
:src="contentPreviewUrl"
controls
class="session-form__media"
/>
<audio
v-else-if="form.contentType === 'voice'"
:src="contentPreviewUrl"
controls
class="session-form__media"
/>
<a
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>
<!-- row 5 — content uploader -->
<div class="session-form__row">
<label class="session-form__uploader-label">محتوای جلسه</label>
<FileUploader
v-model="contentFiles"
:accept="contentAccept"
:multiple="false"
:max-files="1"
:disabled="!form.contentType"
@select="onContentSelect"
@remove="onContentRemove"
@error="onContentError"
/>
</div>
</div>
</div>
<div class="session-form__divider" />
@@ -191,6 +179,7 @@ import TextField from '@/components/form/TextField.vue'
import SelectField from '@/components/form/SelectField.vue'
import LineTitleBlock from '@/components/LineTitleBlock.vue'
import FileUploader from '@/components/form/FileUploader.vue'
import ImageCropper from '@/components/form/ImageCropper.vue'
import { objectToFormData } from '@/utils/object-to-formdata'
import { useUploadMediaMutation } from '@/services/query/auth'
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 isEditMode = computed(() => !!sessionId.value)
// نوع جلسه: only the two delivery modes — backend `type` collapses to online/offline.
const sessionTypeOptions = [
{ value: 'in_person', label: SESSION_TYPE.in_person },
{ value: 'offline', label: SESSION_TYPE.offline },
{ 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]) => ({
value,
label,
@@ -227,27 +214,28 @@ const contentTypeOptions = Object.entries(COURSE_CONTENT_TYPE).map(([value, labe
const form = ref({
title: '',
startTime: '',
endTime: '',
startsAt: '',
endsAt: '',
durationMinutes: '',
courseId: '',
contentType: '',
sessionType: '',
meetingLink: '',
type: '',
link: '',
description: '',
contentMediaId: null,
})
const image = ref(null)
const contentFiles = ref([])
const coverMediaId = ref(null)
const contentMediaId = ref(null)
const contentAccept = computed(() => COURSE_CONTENT_TYPE_ACCEPT[form.value.contentType] || '*')
const contentPreviewUrl = computed(() => contentFiles.value[0]?.url || '')
const { validate, validateAt, errors } = useYup(sessionSchema)
const courseSearch = ref('')
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 selectedCourse = ref(null)
const courseOptions = computed(() => {
@@ -264,50 +252,67 @@ const searchCourses = useDebounce((q) => {
const onContentTypeChange = () => {
contentFiles.value = []
form.value.contentMediaId = null
contentMediaId.value = null
}
const onSessionTypeChange = () => {
if (form.value.sessionType !== 'online') form.value.meetingLink = ''
if (form.value.type !== 'online') form.value.link = ''
}
const { data: existingSession } = useAdminSessionQuery(sessionId, {
enabled: () => !!sessionId.value,
})
watch(existingSession, (session) => {
if (!session) return
if (session.course) selectedCourse.value = session.course
form.value = {
title: session.title || '',
startTime: session.startsAt || session.sessionConfig?.startTime || '',
endTime: session.endsAt || session.sessionConfig?.endTime || '',
durationMinutes: session.durationMinutes ?? '',
courseId: session.course?.id || session.courseId || '',
contentType: session.contentType || '',
sessionType: session.sessionType || '',
meetingLink: session.link || session.sessionConfig?.meetingLink || '',
description: session.description || '',
contentMediaId: session.contentMediaId || null,
}
if (session.contentMedia) {
contentFiles.value = [
{
id: session.contentMedia.id,
name: session.contentMedia.fileName || session.contentMedia.name || 'file',
size: session.contentMedia.fileSize ?? 0,
url: session.contentMedia.url,
},
]
}
})
watch(
existingSession,
(session) => {
if (!session) return
if (session.course) selectedCourse.value = session.course
const media = Array.isArray(session.media) ? session.media : []
const coverMedia = media.find((m) => m.collectionName === 'cover')
const contentMedia = media.find((m) => m.collectionName !== 'cover')
const contentType = collectionToContentType(contentMedia?.collectionName)
form.value = {
title: session.title ?? '',
startsAt: session.startsAt ?? '',
endsAt: session.endsAt ?? '',
durationMinutes: session.durationMinutes ?? '',
courseId: session.course?.id ?? '',
contentType,
type: session.type ?? '',
link: session.link ?? '',
description: session.description ?? '',
}
coverMediaId.value = coverMedia?.id ?? null
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 purposeForContentType = (contentType) => {
if (contentType === 'video') return 'video'
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) => {
@@ -323,7 +328,7 @@ const onContentSelect = async (files) => {
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
contentMediaId.value = id
} catch {
contentFiles.value = []
}
@@ -331,26 +336,41 @@ const onContentSelect = async (files) => {
const onContentRemove = () => {
contentFiles.value = []
form.value.contentMediaId = null
contentMediaId.value = null
}
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 mediaIds = [coverMediaId.value, contentMediaId.value].filter((id) => id != null)
const payload = {
title: values.title,
startTime: values.startTime,
endTime: values.endTime,
startsAt: values.startsAt,
endsAt: values.endsAt,
durationMinutes: values.durationMinutes,
courseId: values.courseId,
contentType: values.contentType,
sessionType: values.sessionType,
meetingLink: values.sessionType === 'online' ? values.meetingLink : undefined,
type: values.type,
link: values.type === 'online' ? values.link : undefined,
description: values.description,
contentMediaId: values.contentMediaId,
mediaIds,
}
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]
}
})
@@ -397,6 +417,41 @@ const onCancel = () => router.push({ name: 'admin-sessions' })
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 {
display: grid;
grid-template-columns: 1fr;
@@ -461,8 +516,8 @@ const onCancel = () => router.push({ name: 'admin-sessions' })
&__actions {
display: flex;
justify-content: flex-end;
gap: 0.625rem;
justify-content: space-between;
align-items: center;
}
&__btn-cancel {
src/features/admin/sessions/schema/index.js
+4 -6
View File
@@ -2,17 +2,15 @@ import { number, object, string } from 'yup'
export const sessionSchema = object().shape({
title: string().required().min(3),
startTime: string().required(),
endTime: string().nullable().notRequired(),
startsAt: string().required(),
endsAt: string().nullable().notRequired(),
durationMinutes: number().typeError('مدت زمان باید عدد باشد').required().min(1),
courseId: string().required(),
contentType: string().oneOf(['voice', 'video', 'text']).required(),
sessionType: string().oneOf(['in_person', 'online']).required(),
meetingLink: string().when('sessionType', {
type: string().oneOf(['offline', 'online']).required(),
link: string().when('sessionType', {
is: 'online',
then: (schema) => schema.required(),
otherwise: (schema) => schema.nullable().notRequired(),
}),
description: string().nullable().notRequired(),
contentMediaId: number().nullable().notRequired(),
})
src/features/admin/terms/components/modals/TermDetailsModal.vue
+11 -57
View File
@@ -51,37 +51,23 @@
<div v-else-if="students.length > 0">
<div v-for="student in students" :key="student.id" class="term-details__student-row">
<div class="term-details__student-main">
<div v-if="student.avatarUrl" class="term-details__avatar">
<img :src="student.avatarUrl" :alt="studentName(student)" />
<div v-if="studentAvatar(student)" class="term-details__avatar">
<img :src="studentAvatar(student)" :alt="student.name" />
</div>
<div v-else class="term-details__avatar term-details__avatar--placeholder">
<SvgIcon name="user" :size="20" color="#bcbcbc" />
</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">
<span>{{ student.address?.province?.name || '—' }}</span>
<span class="term-details__sep">،</span>
<span>{{ student.address?.city?.name || '—' }}</span>
<span dir="ltr">{{ student.phone || '—' }}</span>
<template v-if="student.email">
<span class="term-details__sep">،</span>
<span dir="ltr">{{ student.email }}</span>
</template>
</p>
</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>
<NoItems v-else title="متاسفیم" desc="دانشجویی برای نمایش وجود ندارد." />
@@ -143,11 +129,9 @@ import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import NoItems from '@/components/blocks/NoItems.vue'
import { formatJalaaliDate } from '@/utils/date-utils'
import CircleButton from '@/components/CircleButton.vue'
import TabsBlock from '@/components/blocks/TabsBlock.vue'
import { usePagination } from '@/composables/usePagination'
import LineTitleBlock from '@/components/LineTitleBlock.vue'
import ToggleSwitch from '@/components/form/ToggleSwitch.vue'
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'
import PaginationBlock from '@/components/blocks/PaginationBlock.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
@@ -156,13 +140,7 @@ import {
useAdminCoursesListQuery,
useUpdateAdminCourseMutation,
} from '@/services/query/admin-courses'
import {
adminTermsKeys,
useAdminTermQuery,
useAdminTermStudentsQuery,
useRemoveAdminTermStudentMutation,
useToggleAdminTermStudentLeaveMutation,
} from '@/services/query/admin-terms'
import { useAdminTermQuery, useTermAttendeesQuery } from '@/services/query/admin-terms'
defineOptions({ name: 'TermDetailsModal' })
@@ -189,7 +167,7 @@ const {
reset: resetStudentPagination,
} = usePagination({ page: 1, perPage: 10 })
const { data: studentsData, isLoading: studentsPending } = useAdminTermStudentsQuery(
const { data: studentsData, isLoading: studentsPending } = useTermAttendeesQuery(
termId,
studentFilters,
studentPagination,
@@ -206,31 +184,7 @@ const studentPaginationMeta = computed(() => ({
...studentsData.value?.meta,
}))
const studentName = (student) =>
`${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 studentAvatar = (student) => student.avatarUrl || student.avatarDownloadUrl || ''
const courseFilters = computed(() => ({ termId: termId.value }))
const { pagination: coursePagination, setPage: setCoursePage } = usePagination({