chamomind/elearning
6
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Implement instructor course structure management, enabling drag-and-drop reordering of chapters and lessons, and adding support for video and quiz lesson types.

Browse source
This commit is contained in:
Missez 2026-01-27 09:19:53 +07:00
parent be7348c74d
commit 310a5e7dd7
4 changed files with 1085 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend_management/pages/instructor/courses/[id]/structure.vue
View file

@ -105,7 +105,7 @@
<div v-show="chapter.expanded !== false">
<q-list separator>
<q-item
v-for="(lesson, lessonIndex) in chapter.lessons"
v-for="(lesson, lessonIndex) in getSortedLessons(chapter.lessons)"
:key="lesson.id"
class="py-3"
:class="{ 'opacity-50': draggedLesson?.id === lesson.id, 'bg-primary-50': dragOverLesson?.id === lesson.id }"
@ -135,7 +135,7 @@
</q-item-section>
<q-item-section side>
<div class="flex gap-1">
<q-btn flat dense icon="edit" size="sm" @click="openLessonDialog(chapter, lesson)">
<q-btn flat dense icon="edit" size="sm" @click="navigateToLessonEdit(chapter, lesson)">
<q-tooltip>แก้ไข</q-tooltip>
</q-btn>
<q-btn flat dense icon="delete" size="sm" color="negative" @click="confirmDeleteLesson(chapter, lesson)">
@ -486,6 +486,12 @@ const fetchChapters = async () => {
}
};
// Navigate to lesson edit page based on type
const navigateToLessonEdit = (chapter: ChapterResponse, lesson: LessonResponse) => {
const lessonType = lesson.type === 'QUIZ' ? 'quiz' : 'video';
navigateTo(`/instructor/courses/${courseId.value}/chapters/${chapter.id}/lessons/${lesson.id}/${lessonType}`);
};
const getLessonIcon = (type: string) => {
const icons: Record<string, string> = {
VIDEO: 'play_circle',
@ -513,6 +519,10 @@ const getLessonTypeLabel = (type: string) => {
return labels[type] || type;
};
const getSortedLessons = (lessons: LessonResponse[]) => {
return [...lessons].sort((a, b) => a.sort_order - b.sort_order);
};
// Chapter CRUD
const openChapterDialog = (chapter?: ChapterResponse) => {
if (chapter) {