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

fix

Browse Source
This commit is contained in:
sajjadtalkhabi
2026-05-21 15:51:32 +03:30
parent 8990ceaddd
commit 74227d5021
71 changed files with 2014 additions and 1666 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/admin/terms/components/CourseItem.vue
+229
View File
@@ -0,0 +1,229 @@
<template>
<div class="course-item">
<div class="course-item__main">
<div v-if="course.image" class="course-item__image">
<img :src="course.image" :alt="course.title" />
</div>
<div v-else class="course-item__image course-item__image--placeholder">
<SvgIcon name="book" :size="22" color="#bcbcbc" />
</div>
<div class="course-item__title-block">
<p class="course-item__title">
<span>دوره</span>
<strong>{{ course.title }}</strong>
</p>
<div class="course-item__teacher">
<SvgIcon name="user" :size="11" color="#bcbcbc" />
<span class="course-item__teacher-label">استاد:</span>
<span class="course-item__teacher-name">{{ teacherName }}</span>
</div>
</div>
</div>
<div class="course-item__meta">
<Badge
variant="cyan"
size="sm"
icon="calendar"
:label="`وضعیت دوره :`"
:value="`در حال گذراندن`"
/>
</div>
<div v-if="!isActive" class="course-item__status">
<span class="course-item__status-badge">
<span class="course-item__status-dot" />
غیرفعال
</span>
</div>
<div class="course-item__actions">
<CircleButton
tooltip="حذف"
bg-color="rgba(104, 104, 104, 0.05)"
size="2.5rem"
@click="emit('delete', course)"
>
<template #icon>
<SvgIcon name="trash" :size="18" color="var(--color-error)" />
</template>
</CircleButton>
</div>
</div>
</template>
<script setup>
import { computed } from 'vue'
import Badge from '@/components/Badge.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import CircleButton from '@/components/CircleButton.vue'
const props = defineProps({
course: { type: Object, required: true },
})
const emit = defineEmits(['delete'])
const teacherName = computed(() => {
const t = props.course.teacher
if (!t) return '—'
return `${t.firstName || ''} ${t.lastName || ''}`.trim() || t.fullName || '—'
})
const isActive = computed(() => props.course.isActive ?? false)
</script>
<style lang="scss" scoped>
.course-item {
display: flex;
flex-direction: column;
gap: 0.625rem;
padding: 0.75rem;
background: rgba(255, 255, 255, 50%);
box-shadow: 0 4px 10px -6px rgba(241, 241, 241, 90%);
border-radius: 0.875rem;
margin-bottom: 0.625rem;
@media (min-width: 1280px) {
flex-flow: row wrap;
align-items: center;
}
&__main {
display: flex;
align-items: center;
gap: 0.625rem;
flex: 1 1 33%;
min-width: 0;
}
&__image {
width: 3rem;
height: 3rem;
min-width: 3rem;
border-radius: 0.375rem;
border: 1px solid #eee;
overflow: hidden;
flex-shrink: 0;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&--placeholder {
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
border: none;
}
}
&__title-block {
min-width: 0;
}
&__title {
font-family: var(--font-family-fa);
font-size: 0.95rem;
color: #4b4b4b;
margin: 0;
display: flex;
gap: 0.25rem;
strong {
font-weight: 700;
}
}
&__teacher {
display: flex;
align-items: center;
gap: 0.25rem;
margin-top: 0.25rem;
}
&__teacher-label {
font-family: var(--font-family-fa);
font-size: 0.65rem;
color: #838383;
}
&__teacher-name {
font-family: var(--font-family-fa);
font-size: 0.75rem;
color: #4b4b4b;
}
&__meta {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
flex: 1 1 33%;
justify-content: flex-start;
}
&__pill {
background: rgba(107, 107, 107, 5%);
padding: 0.25rem 1rem;
border-radius: 0.875rem;
line-height: 1.5;
white-space: nowrap;
}
&__pill-label {
font-family: var(--font-family-fa);
font-weight: 300;
font-size: 0.75rem;
color: #848484;
margin-inline-end: 0.25rem;
}
&__pill-value {
font-family: var(--font-family-en);
font-size: 0.75rem;
}
&__status {
flex: 0 0 auto;
}
&__status-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 1rem;
border-radius: 0.875rem;
background: rgba(204, 40, 49, 6%);
color: var(--color-error);
font-family: var(--font-family-fa);
font-size: 0.7rem;
}
&__status-dot {
width: 0.375rem;
height: 0.375rem;
border-radius: 9999px;
background: currentcolor;
}
&__actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.375rem;
flex: 1 1 100%;
@media (min-width: 1280px) {
flex: 1 1 auto;
}
}
&__details-btn {
min-width: 8rem;
padding: 0 0.875rem;
}
}
</style>
src/features/admin/terms/components/TermItem.vue
+2 -14
View File
@@ -43,16 +43,6 @@
<SvgIcon name="trash" :size="18" color="var(--color-error)" />
</template>
</CircleButton>
<CircleButton
tooltip="کپی"
bg-color="rgba(104, 104, 104, 0.05)"
size="2.5rem"
@click="emit('clone', term)"
>
<template #icon>
<SvgIcon name="copy" :size="18" color="var(--color-sec-gray)" />
</template>
</CircleButton>
<CircleButton
tooltip="ویرایش"
bg-color="rgba(104, 104, 104, 0.05)"
@@ -90,10 +80,8 @@ const props = defineProps({
const emit = defineEmits(['edit', 'delete', 'clone', 'change-status', 'show-details'])
const startDate = computed(
() => props.term.faStartDate || formatJalaaliDate(props.term.startDate) || ''
)
const endDate = computed(() => props.term.faEndDate || formatJalaaliDate(props.term.endDate) || '')
const startDate = computed(() => formatJalaaliDate(props.term.startsAt) || '')
const endDate = computed(() => formatJalaaliDate(props.term.endsAt) || '')
</script>
<style lang="scss" scoped>
src/features/admin/terms/components/TermsFilters.vue
+1 -1
View File
@@ -28,7 +28,7 @@
@click="onReset"
>
<template #icon>
<SvgIcon name="close" :size="20" />
<SvgIcon name="close" color="black" :size="20" />
</template>
</CircleButton>
<CircleButton
src/features/admin/terms/components/modals/AttachCourseToTermModal.vue
+23 -20
View File
@@ -96,14 +96,16 @@ import NoItems from '@/components/blocks/NoItems.vue'
import CircleButton from '@/components/CircleButton.vue'
import { adminTermsKeys } from '@/services/query/admin-terms'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import { useAdminCourseTemplatesListQuery } from '@/services/query/admin-course-templates'
import {
adminCoursesKeys,
useAddAdminCourseMutation,
useAdminCoursesListQuery,
useDeleteAdminCourseMutation,
useUpdateAdminCourseMutation,
} from '@/services/query/admin-courses'
// TODO: repurpose this modal as "copy course from another term" — the original
// flow (link a stand-alone template to a term) no longer matches the unified
// course model. Until then, this stays a stand-alone-course → new-offered-course copy.
defineOptions({ name: 'AttachCourseToTermModal' })
const queryClient = useQueryClient()
@@ -116,7 +118,7 @@ const searchQuery = ref('')
const templateFilters = computed(() => ({ title: searchQuery.value }))
const templatePagination = ref({ page: 1, perPage: 20 })
const { data: templatesResponse, isLoading } = useAdminCourseTemplatesListQuery(
const { data: templatesResponse, isLoading } = useAdminCoursesListQuery(
templateFilters,
templatePagination
)
@@ -124,18 +126,24 @@ const { data: templatesResponse, isLoading } = useAdminCourseTemplatesListQuery(
const templates = computed(() => templatesResponse.value?.data ?? [])
const courseFilters = computed(() => ({ termId: termId.value }))
const coursePagination = ref({ page: 1, perPage: 100 })
const coursePagination = ref({ page: 1, perPage: 10 })
const { data: coursesResponse } = useAdminCoursesListQuery(courseFilters, coursePagination, {
enabled: () => !!termId.value,
})
const attachedCourses = computed(() => coursesResponse.value?.data ?? [])
const attachedCourseByTemplate = (templateId) =>
attachedCourses.value.find((c) => c.template?.id === templateId || c.templateId === templateId)
// Tracks which stand-alone course (termId=null) has already been copied
// into this term. We match by title since the unified model no longer
// keeps a back-reference to the source course.
const attachedCourseByTemplate = (sourceId) => {
const source = templates.value.find((t) => t.id === sourceId)
if (!source) return null
return attachedCourses.value.find((c) => c.title === source.title)
}
const teacherName = (template) => {
const t = template.defaultTeacher || template.teacher
const teacherName = (course) => {
const t = course.teacher
if (!t) return '—'
return `${t.firstName || ''} ${t.lastName || ''}`.trim() || t.fullName || '—'
}
@@ -147,8 +155,7 @@ const onSearch = useDebounce((event) => {
const pendingId = ref(null)
const addMutation = useAddAdminCourseMutation()
const deleteMutation = useDeleteAdminCourseMutation()
const updateMutation = useUpdateAdminCourseMutation()
const invalidate = () => {
queryClient.invalidateQueries({ queryKey: adminCoursesKeys.all })
@@ -156,16 +163,12 @@ const invalidate = () => {
}
const onAttach = async (template) => {
console.log(template)
if (!termId.value) return
pendingId.value = template.id
try {
await addMutation.mutateAsync({
termId: termId.value,
templateId: template.id,
title: template.title,
capacity: template.defaultCapacity ?? null,
isActive: template.isActiveByDefault ?? true,
})
await updateMutation.mutateAsync({ id: template.id, payload: { termId: termId.value } })
invalidate()
} finally {
pendingId.value = null
@@ -177,7 +180,7 @@ const onDetach = async (template) => {
if (!offered) return
pendingId.value = template.id
try {
await deleteMutation.mutateAsync(offered.id)
await updateMutation.mutateAsync({ id: template.id, payload: { termId: null } })
invalidate()
} finally {
pendingId.value = null
@@ -303,7 +306,7 @@ watch(termId, () => {
&__footer {
display: flex;
justify-content: flex-start;
justify-content: flex-end;
}
&__close-btn {
src/features/admin/terms/components/modals/TermDetailsModal.vue
+18 -40
View File
@@ -16,11 +16,11 @@
<LineInfoBlock title="عنوان ترم" :desc="term.title || '-'" />
<LineInfoBlock
title="تاریخ شروع"
:numeric-desc="term.faStartDate || formatJalaaliDate(term.startDate) || '-'"
:numeric-desc="formatJalaaliDate(term.startsAt) || '-'"
/>
<LineInfoBlock
title="تاریخ پایان"
:numeric-desc="term.faEndDate || formatJalaaliDate(term.endDate) || '-'"
:numeric-desc="formatJalaaliDate(term.endsAt) || '-'"
/>
<LineInfoBlock title="تعداد دانشجویان" :numeric-desc="term.studentsCount ?? 0" />
<LineInfoBlock title="تعداد دوره‌ها" :numeric-desc="term.coursesCount ?? 0" />
@@ -109,10 +109,7 @@
v-for="course in termCourses"
:key="course.id"
:course="course"
@edit="onEditCourse"
@delete="onAskDeleteCourse"
@change-status="onChangeCourseStatus"
@show-details="onShowCourseDetails"
@delete="(course) => onAskDeleteCourse(course)"
/>
</div>
<NoItems v-else title="متاسفیم" desc="دوره‌ای برای نمایش وجود ندارد." />
@@ -138,6 +135,7 @@
<script setup>
import { computed, ref } from 'vue'
import CourseItem from '../CourseItem.vue'
import useModal from '@/composables/useModal'
import { useQueryClient } from '@tanstack/vue-query'
import BasicModal from '@/components/BasicModal.vue'
@@ -152,13 +150,11 @@ 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 CourseItem from '@/features/admin/courses/components/CourseItem.vue'
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
import {
adminCoursesKeys,
useAdminCoursesListQuery,
useChangeAdminCourseStatusMutation,
useDeleteAdminCourseMutation,
useUpdateAdminCourseMutation,
} from '@/services/query/admin-courses'
import {
adminTermsKeys,
@@ -181,10 +177,10 @@ const { data: term } = useAdminTermQuery(termId, {
})
const tabs = [
{ name: 'students', label: 'دانشجویان', icon: 'users' },
{ name: 'courses', label: 'دوره‌ها', icon: 'list-bullets' },
{ name: 'students', label: 'دانشجویان', icon: 'users' },
]
const activeTab = ref('students')
const activeTab = ref('courses')
const studentFilters = ref({})
const {
@@ -230,15 +226,10 @@ const onToggleLeave = (student, isOnLeave) => {
}
const onAskRemoveStudent = (student) => {
openModal('ConfirmModal', {
title: `حذف ${studentName(student)}`,
message: `آیا از حذف <strong>${studentName(student)}</strong> از این ترم اطمینان دارید؟`,
onConfirm: () =>
removeStudentMutation.mutate(
{ termId: termId.value, userId: student.id },
{ onSuccess: invalidate }
),
})
removeStudentMutation.mutate(
{ termId: termId.value, userId: student.id },
{ onSuccess: invalidate }
)
}
const courseFilters = computed(() => ({ termId: termId.value }))
@@ -265,31 +256,18 @@ const coursePaginationMeta = computed(() => ({
const invalidateCourses = () => queryClient.invalidateQueries({ queryKey: adminCoursesKeys.all })
const deleteCourseMutation = useDeleteAdminCourseMutation()
const changeCourseStatusMutation = useChangeAdminCourseStatusMutation()
// Backend has no dedicated status endpoint — PATCH /courses/:id with { isActive }.
const updateCourseMutation = useUpdateAdminCourseMutation()
const onOpenAddCourse = () => {
openModal('AttachCourseToTermModal', { termId: termId.value })
}
const onEditCourse = (course) => {
openModal('AddOfferedCourseModal', { mode: 'edit', courseId: course.id })
}
const onShowCourseDetails = (course) => {
openModal('CourseDetailsModal', { id: course.id })
}
const onAskDeleteCourse = (course) => {
openModal('ConfirmModal', {
title: `حذف ${course.title}`,
message: `بعد از حذف امکان بازگشت وجود ندارد، آیا از حذف <strong>${course.title}</strong> اطمینان دارید؟`,
onConfirm: () => deleteCourseMutation.mutate(course.id, { onSuccess: invalidateCourses }),
})
}
const onChangeCourseStatus = ({ id, isActive }) => {
changeCourseStatusMutation.mutate({ id, payload: { isActive } }, { onSuccess: invalidateCourses })
updateCourseMutation.mutate(
{ id: course.id, payload: { termId: null } },
{ onSuccess: invalidateCourses }
)
}
const onOpenAddStudent = () => {
@@ -352,7 +330,7 @@ const onOpenAddStudent = () => {
}
@media (min-width: 1280px) {
grid-template-columns: repeat(5, 1fr);
grid-template-columns: repeat(6, 1fr);
}
}
src/features/admin/terms/pages/TermFormPage.vue
+16 -12
View File
@@ -149,18 +149,22 @@ const { data: existingTerm } = useAdminTermQuery(termId, {
enabled: () => !!termId.value,
})
watch(existingTerm, (term) => {
if (!term) return
form.value = {
title: term.title || '',
description: term.description || '',
isActive: term.isActive ?? true,
startsAt: term.startsAt || '',
endsAt: term.endsAt || '',
coverMediaId: term.coverMediaId || null,
}
if (term.coverUrl) image.value = { url: term.coverUrl }
})
watch(
existingTerm,
(term) => {
console.log(term)
if (!term) return
form.value = {
title: term.title || '',
description: term.description || '',
isActive: term.isActive ?? true,
startsAt: term.startsAt || '',
endsAt: term.endsAt || '',
}
if (term.coverUrl) image.value = { url: term.coverUrl }
},
{ immediate: true }
)
const uploadMutation = useUploadMediaMutation()
src/features/admin/terms/pages/TermsListPage.vue
+4 -9
View File
@@ -73,9 +73,8 @@ import AttachCourseToTermModal from '@/features/admin/terms/components/modals/At
import {
adminTermsKeys,
useAdminTermsListQuery,
useChangeAdminTermStatusMutation,
useCloneAdminTermMutation,
useDeleteAdminTermMutation,
useUpdateAdminTermMutation,
} from '@/services/query/admin-terms'
const router = useRouter()
@@ -110,8 +109,8 @@ const onEdit = (term) => {
const invalidate = () => queryClient.invalidateQueries({ queryKey: adminTermsKeys.all })
const deleteMutation = useDeleteAdminTermMutation()
const cloneMutation = useCloneAdminTermMutation()
const changeStatusMutation = useChangeAdminTermStatusMutation()
// Backend has no dedicated status endpoint — PATCH /terms/:id with { isActive }.
const updateMutation = useUpdateAdminTermMutation()
const onAskDelete = (term) => {
openModal('ConfirmModal', {
@@ -121,12 +120,8 @@ const onAskDelete = (term) => {
})
}
const onClone = (term) => {
cloneMutation.mutate(term.id, { onSuccess: invalidate })
}
const onChangeStatus = ({ id, isActive }) => {
changeStatusMutation.mutate({ id, payload: { isActive } }, { onSuccess: invalidate })
updateMutation.mutate({ id, payload: { isActive } }, { onSuccess: invalidate })
}
const onShowDetails = (term) => {