eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: batch details

Browse Source
This commit is contained in:
Jannat Patel
2024-01-05 18:22:03 +05:30
parent 10cdd712d2
commit 3a33f047f5
15 changed files with 1215 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
frontend/src/components/CourseOutline.vue
View File

@@ -1,67 +1,96 @@
<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="chapter.idx == route.params.chapterNumber">
<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 font-medium">
{{ 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>
<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";
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 route = useRoute()
const props = defineProps({
courseName: {
type: String,
required: true,
},
});
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,
});
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;
background-color: theme('colors.gray.100');
padding: 0.5rem 0 0.5rem 2rem;
}
</style>
</style>