97 lines
2.3 KiB
Vue
97 lines
2.3 KiB
Vue
<template>
|
|
<div class="course-outline text-base">
|
|
<div class="mt-4">
|
|
<Disclosure
|
|
v-slot="{ open }"
|
|
v-for="(chapter, index) in outline.data"
|
|
:key="chapter.name"
|
|
:defaultOpen="openChapter(chapter.idx)"
|
|
>
|
|
<DisclosureButton class="flex w-full px-2 pt-2 pb-3">
|
|
<ChevronRight
|
|
:class="{
|
|
'rotate-90 transform duration-200': open,
|
|
'duration-200': !open,
|
|
open: index == 1,
|
|
}"
|
|
class="h-5 w-5 text-gray-900 stroke-1 mr-2"
|
|
/>
|
|
<div class="text-base">
|
|
{{ chapter.title }}
|
|
</div>
|
|
</DisclosureButton>
|
|
<DisclosurePanel class="pb-2">
|
|
<div v-for="lesson in chapter.lessons" :key="lesson.name">
|
|
<div class="outline-lesson mb-2 pl-9">
|
|
<router-link
|
|
:to="{
|
|
name: 'Lesson',
|
|
params: {
|
|
courseName: courseName,
|
|
chapterNumber: lesson.number.split('.')[0],
|
|
lessonNumber: lesson.number.split('.')[1],
|
|
},
|
|
}"
|
|
>
|
|
<div class="flex items-center text-sm">
|
|
<MonitorPlay
|
|
v-if="lesson.icon === 'icon-youtube'"
|
|
class="h-4 w-4 text-gray-900 stroke-1 mr-2"
|
|
/>
|
|
<HelpCircle
|
|
v-else-if="lesson.icon === 'icon-quiz'"
|
|
class="h-4 w-4 text-gray-900 stroke-1 mr-2"
|
|
/>
|
|
<FileText
|
|
v-else-if="lesson.icon === 'icon-list'"
|
|
class="h-4 w-4 text-gray-900 stroke-1 mr-2"
|
|
/>
|
|
{{ lesson.title }}
|
|
</div>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</DisclosurePanel>
|
|
</Disclosure>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { createResource } from 'frappe-ui'
|
|
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/vue'
|
|
import {
|
|
ChevronRight,
|
|
MonitorPlay,
|
|
HelpCircle,
|
|
FileText,
|
|
} from 'lucide-vue-next'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
const props = defineProps({
|
|
courseName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
})
|
|
|
|
const outline = createResource({
|
|
url: 'lms.lms.utils.get_course_outline',
|
|
cache: ['course_outline', props.courseName],
|
|
params: {
|
|
course: props.courseName,
|
|
},
|
|
auto: true,
|
|
})
|
|
|
|
const openChapter = (index) => {
|
|
return index == route.params.chapterNumber || index == 1
|
|
}
|
|
</script>
|
|
<style>
|
|
.outline-lesson:has(.router-link-active) {
|
|
background-color: theme('colors.gray.100');
|
|
padding: 0.5rem 0 0.5rem 2rem;
|
|
}
|
|
</style>
|