sajjadtalkhabi
96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<template>
|
|
<div class="missionary-lesson-details">
|
|
<BoxedIconTitleBlock
|
|
class="missionary-lesson-details__heading"
|
|
title="جزئیات درس"
|
|
:desc="course?.title || 'جلسات این درس را مشاهده کنید.'"
|
|
>
|
|
<template #icon>
|
|
<SvgIcon name="book" :size="24" color="var(--color-primary)" />
|
|
</template>
|
|
</BoxedIconTitleBlock>
|
|
|
|
<SimpleTitleIconBlock title="همه جلسه ها" class="missionary-lesson-details__list-title">
|
|
<template #header-icon>
|
|
<SvgIcon name="list-bullets" :size="16" color="#bcbcbc" />
|
|
</template>
|
|
</SimpleTitleIconBlock>
|
|
|
|
<SkeletonLoaderBlock
|
|
v-if="sessionsLoading && sessions.length === 0"
|
|
:rows="3"
|
|
:cols-per-row="1"
|
|
/>
|
|
<div v-else-if="sessions.length > 0">
|
|
<StudentSessionItem
|
|
v-for="session in sessions"
|
|
:key="session.id"
|
|
:session="session"
|
|
@start="onStartSession"
|
|
/>
|
|
</div>
|
|
<NoItems v-else title="جلسهای نیست" desc="جلسهای برای این درس ثبت نشده است." />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import SvgIcon from '@/components/icons/SvgIcon.vue'
|
|
import NoItems from '@/components/blocks/NoItems.vue'
|
|
import { StudentSessionItem } from '@/features/student/sessions'
|
|
import BoxedIconTitleBlock from '@/components/blocks/BoxedIconTitleBlock.vue'
|
|
import SkeletonLoaderBlock from '@/components/blocks/SkeletonLoaderBlock.vue'
|
|
import SimpleTitleIconBlock from '@/components/blocks/SimpleTitleIconBlock.vue'
|
|
import {
|
|
useMissionaryPassedCoursesQuery,
|
|
useMissionaryPassedSessionsQuery,
|
|
} from '@/services/query/missionary-education'
|
|
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
|
|
const courseId = computed(() => route.params.id)
|
|
const termId = computed(() => route.query.termId || null)
|
|
|
|
// Course header comes from the passed-courses list cache (same key as the term
|
|
// page), so it needs no detail endpoint.
|
|
const coursesFilters = computed(() => ({ termId: termId.value }))
|
|
const coursesPagination = ref({ page: 1, perPage: 20 })
|
|
const { data: coursesData } = useMissionaryPassedCoursesQuery(coursesFilters, coursesPagination, {
|
|
enabled: () => !!termId.value,
|
|
})
|
|
const course = computed(() =>
|
|
(coursesData.value?.data ?? []).find((c) => String(c.id) === String(courseId.value))
|
|
)
|
|
|
|
const sessionsFilters = computed(() => ({ courseId: courseId.value }))
|
|
const sessionsPagination = ref({ page: 1, perPage: 20 })
|
|
const { data: sessionsData, isLoading: sessionsLoading } = useMissionaryPassedSessionsQuery(
|
|
sessionsFilters,
|
|
sessionsPagination,
|
|
{ enabled: () => !!courseId.value, keepPreviousData: true }
|
|
)
|
|
const sessions = computed(() => sessionsData.value?.data ?? [])
|
|
|
|
const onStartSession = (session) => {
|
|
router.push({ name: 'missionary-education-session', params: { id: session.id } }).catch(() => {})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.missionary-lesson-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
|
|
&__heading {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
&__list-title {
|
|
margin-top: 0.5rem;
|
|
}
|
|
}
|
|
</style>
|