657 lines
23 KiB
Vue
657 lines
23 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Header -->
|
|
<div class="flex items-center gap-4 mb-6">
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="arrow_back"
|
|
@click="navigateTo(`/instructor/courses/${courseId}`)"
|
|
/>
|
|
<div class="flex-1">
|
|
<h1 class="text-2xl font-bold text-primary-600">จัดการโครงสร้างหลักสูตร</h1>
|
|
<p class="text-gray-600 mt-1">เพิ่ม แก้ไข และจัดเรียงบทเรียน</p>
|
|
</div>
|
|
<q-btn
|
|
color="primary"
|
|
icon="add"
|
|
label="เพิ่มบท"
|
|
@click="openChapterDialog()"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="flex justify-center py-20">
|
|
<q-spinner-dots size="50px" color="primary" />
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else-if="chapters.length === 0" class="bg-white rounded-xl shadow-sm p-10 text-center">
|
|
<q-icon name="folder_open" size="60px" color="grey-4" class="mb-4" />
|
|
<p class="text-gray-500 text-lg mb-4">ยังไม่มีบทเรียน</p>
|
|
<q-btn
|
|
color="primary"
|
|
icon="add"
|
|
label="เพิ่มบทแรก"
|
|
@click="openChapterDialog()"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Chapters List -->
|
|
<div v-else class="space-y-4">
|
|
<!-- Drop indicator before first chapter -->
|
|
<div
|
|
v-if="dragOverChapter && dragOverPosition === 'before' && sortedChapters.findIndex(ch => ch.id === dragOverChapter?.id) === 0"
|
|
class="h-1.5 bg-primary rounded-full mb-2 shadow-lg shadow-primary/50 transition-all animate-pulse"
|
|
/>
|
|
|
|
<q-card
|
|
v-for="(chapter, chapterIndex) in sortedChapters"
|
|
:key="chapter.id"
|
|
flat
|
|
bordered
|
|
class="rounded-lg relative"
|
|
:class="{ 'opacity-50': draggedChapter?.id === chapter.id }"
|
|
draggable="true"
|
|
@dragstart="onDragStart(chapter, $event)"
|
|
@dragend="onDragEnd"
|
|
@dragover.prevent="onDragOver(chapter, $event)"
|
|
@dragleave="onDragLeave"
|
|
@drop.prevent="onDrop(chapter)"
|
|
>
|
|
<!-- Drop indicator line at top -->
|
|
<div
|
|
v-if="dragOverChapter?.id === chapter.id && dragOverPosition === 'before'"
|
|
class="absolute -top-2 left-0 right-0 h-1.5 bg-primary rounded-full z-10 shadow-lg shadow-primary/50 transition-all animate-pulse"
|
|
/>
|
|
|
|
<!-- Drop indicator line at bottom -->
|
|
<div
|
|
v-if="dragOverChapter?.id === chapter.id && dragOverPosition === 'after'"
|
|
class="absolute -bottom-2 left-0 right-0 h-1.5 bg-primary rounded-full z-10 shadow-lg shadow-primary/50 transition-all animate-pulse"
|
|
/>
|
|
<!-- Chapter Header -->
|
|
<q-card-section class="bg-gray-50">
|
|
<div class="flex items-center gap-3">
|
|
<q-icon name="drag_indicator" class="cursor-move text-gray-400" />
|
|
<div class="flex-1">
|
|
<div class="font-semibold text-gray-900">
|
|
บทที่ {{ chapter.sort_order }}: {{ chapter.title.th }}
|
|
</div>
|
|
<div class="text-sm text-gray-500">
|
|
{{ chapter.lessons.length }} บทเรียน
|
|
</div>
|
|
</div>
|
|
<q-btn flat dense icon="add" color="primary" @click="openLessonDialog(chapter)">
|
|
<q-tooltip>เพิ่มบทเรียน</q-tooltip>
|
|
</q-btn>
|
|
<q-btn flat dense icon="edit" color="grey" @click="openChapterDialog(chapter)">
|
|
<q-tooltip>แก้ไข</q-tooltip>
|
|
</q-btn>
|
|
<q-btn flat dense icon="delete" color="negative" @click="confirmDeleteChapter(chapter)">
|
|
<q-tooltip>ลบ</q-tooltip>
|
|
</q-btn>
|
|
<q-btn
|
|
flat
|
|
dense
|
|
:icon="chapter.expanded ? 'expand_less' : 'expand_more'"
|
|
@click="chapter.expanded = !chapter.expanded"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- Lessons List -->
|
|
<q-slide-transition>
|
|
<div v-show="chapter.expanded !== false">
|
|
<q-list separator>
|
|
<q-item
|
|
v-for="(lesson, lessonIndex) in chapter.lessons"
|
|
:key="lesson.id"
|
|
class="py-3"
|
|
:class="{ 'opacity-50': draggedLesson?.id === lesson.id, 'bg-primary-50': dragOverLesson?.id === lesson.id }"
|
|
draggable="true"
|
|
@dragstart="onLessonDragStart(chapter, lesson, $event)"
|
|
@dragend="onLessonDragEnd"
|
|
@dragover.prevent="onLessonDragOver(chapter, lesson)"
|
|
@dragleave="onLessonDragLeave"
|
|
@drop.prevent="onLessonDrop(chapter, lesson)"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="drag_indicator" class="cursor-move text-gray-300" />
|
|
</q-item-section>
|
|
<q-item-section avatar>
|
|
<q-icon
|
|
:name="getLessonIcon(lesson.type)"
|
|
:color="getLessonIconColor(lesson.type)"
|
|
/>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>
|
|
{{ lesson.sort_order }}. {{ lesson.title.th }}
|
|
</q-item-label>
|
|
<q-item-label caption>
|
|
{{ getLessonTypeLabel(lesson.type) }}
|
|
</q-item-label>
|
|
</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-tooltip>แก้ไข</q-tooltip>
|
|
</q-btn>
|
|
<q-btn flat dense icon="delete" size="sm" color="negative" @click="confirmDeleteLesson(chapter, lesson)">
|
|
<q-tooltip>ลบ</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
<!-- Empty Lessons -->
|
|
<div v-if="chapter.lessons.length === 0" class="p-4 text-center text-gray-400">
|
|
ยังไม่มีบทเรียนในบทนี้
|
|
</div>
|
|
</div>
|
|
</q-slide-transition>
|
|
</q-card>
|
|
|
|
<!-- Drop indicator after last chapter -->
|
|
<div
|
|
v-if="dragOverChapter && dragOverPosition === 'after' && sortedChapters.findIndex(ch => ch.id === dragOverChapter?.id) === sortedChapters.length - 1"
|
|
class="h-1.5 bg-primary rounded-full mt-2 shadow-lg shadow-primary/50 transition-all animate-pulse"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Chapter Dialog -->
|
|
<q-dialog v-model="chapterDialog" persistent>
|
|
<q-card style="min-width: 450px">
|
|
<q-card-section class="row items-center q-pb-none">
|
|
<div class="text-h6">{{ editingChapter ? 'แก้ไขบท' : 'เพิ่มบทใหม่' }}</div>
|
|
<q-space />
|
|
<q-btn icon="close" flat round dense @click="chapterDialog = false" />
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
<q-form @submit="saveChapter">
|
|
<q-input
|
|
v-model="chapterForm.title.th"
|
|
label="ชื่อบท (ภาษาไทย) *"
|
|
outlined
|
|
:rules="[val => !!val || 'กรุณากรอกชื่อบท']"
|
|
/>
|
|
<q-input
|
|
v-model="chapterForm.title.en"
|
|
label="ชื่อบท (English)"
|
|
outlined
|
|
class="mb-4"
|
|
/>
|
|
<q-input
|
|
v-model="chapterForm.description.th"
|
|
label="คำอธิบาย (ภาษาไทย)"
|
|
type="textarea"
|
|
outlined
|
|
autogrow
|
|
class="mb-4"
|
|
/>
|
|
<q-input
|
|
v-model="chapterForm.description.en"
|
|
label="คำอธิบาย (English)"
|
|
type="textarea"
|
|
outlined
|
|
autogrow
|
|
class="mb-4"
|
|
/>
|
|
|
|
<div class="flex justify-end gap-2 mt-4">
|
|
<q-btn flat label="ยกเลิก" color="grey-7" @click="chapterDialog = false" />
|
|
<q-btn type="submit" label="บันทึก" color="primary" :loading="saving" />
|
|
</div>
|
|
</q-form>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<!-- Lesson Dialog -->
|
|
<q-dialog v-model="lessonDialog" persistent>
|
|
<q-card style="min-width: 500px">
|
|
<q-card-section class="row items-center q-pb-none">
|
|
<div class="text-h6">{{ editingLesson ? 'แก้ไขบทเรียน' : 'เพิ่มบทเรียน' }}</div>
|
|
<q-space />
|
|
<q-btn icon="close" flat round dense @click="lessonDialog = false" />
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
<q-form @submit="saveLesson">
|
|
<q-input
|
|
v-model="lessonForm.title.th"
|
|
label="ชื่อบทเรียน (ภาษาไทย) *"
|
|
outlined
|
|
:rules="[val => !!val || 'กรุณากรอกชื่อบทเรียน']"
|
|
/>
|
|
<q-input
|
|
v-model="lessonForm.title.en"
|
|
label="ชื่อบทเรียน (English)"
|
|
outlined
|
|
class="mb-4"
|
|
/>
|
|
|
|
<q-select
|
|
v-if="!editingLesson"
|
|
v-model="lessonForm.type"
|
|
:options="lessonTypeOptions"
|
|
label="ประเภท *"
|
|
outlined
|
|
emit-value
|
|
map-options
|
|
class="mb-4"
|
|
/>
|
|
|
|
<!-- <q-input
|
|
v-model.number="lessonForm.duration_minutes"
|
|
label="ระยะเวลา (นาที)"
|
|
type="number"
|
|
outlined
|
|
class="mb-4"
|
|
/> -->
|
|
|
|
<q-input
|
|
v-if="lessonForm.type"
|
|
v-model="lessonForm.content.th"
|
|
label="เนื้อหา (ภาษาไทย)"
|
|
type="textarea"
|
|
outlined
|
|
autogrow
|
|
rows="3"
|
|
class="mb-4"
|
|
/>
|
|
|
|
<q-input
|
|
v-if="lessonForm.type"
|
|
v-model="lessonForm.content.en"
|
|
label="เนื้อหา (English)"
|
|
type="textarea"
|
|
outlined
|
|
autogrow
|
|
rows="3"
|
|
/>
|
|
|
|
<div class="flex justify-end gap-2 mt-4">
|
|
<q-btn flat label="ยกเลิก" color="grey-7" @click="lessonDialog = false" />
|
|
<q-btn type="submit" label="บันทึก" color="primary" :loading="saving" />
|
|
</div>
|
|
</q-form>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useQuasar } from 'quasar';
|
|
import { instructorService, type ChapterResponse, type LessonResponse } from '~/services/instructor.service';
|
|
|
|
definePageMeta({
|
|
layout: 'instructor',
|
|
middleware: ['auth']
|
|
});
|
|
|
|
const $q = useQuasar();
|
|
const route = useRoute();
|
|
const courseId = computed(() => parseInt(route.params.id as string));
|
|
|
|
// Data
|
|
const loading = ref(true);
|
|
const saving = ref(false);
|
|
const chapters = ref<(ChapterResponse & { expanded?: boolean })[]>([]);
|
|
|
|
// Computed: sorted chapters for display
|
|
const sortedChapters = computed(() => {
|
|
return chapters.value.slice().sort((a, b) => a.sort_order - b.sort_order);
|
|
});
|
|
|
|
// Dialogs
|
|
const chapterDialog = ref(false);
|
|
const lessonDialog = ref(false);
|
|
const editingChapter = ref<ChapterResponse | null>(null);
|
|
const editingLesson = ref<LessonResponse | null>(null);
|
|
const selectedChapter = ref<ChapterResponse | null>(null);
|
|
|
|
// Drag and Drop
|
|
const draggedChapter = ref<ChapterResponse | null>(null);
|
|
const dragOverChapter = ref<ChapterResponse | null>(null);
|
|
const dragOverPosition = ref<'before' | 'after'>('before');
|
|
|
|
const onDragStart = (chapter: ChapterResponse, event: DragEvent) => {
|
|
draggedChapter.value = chapter;
|
|
if (event.dataTransfer) {
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
}
|
|
};
|
|
|
|
const onDragEnd = () => {
|
|
draggedChapter.value = null;
|
|
dragOverChapter.value = null;
|
|
};
|
|
|
|
const onDragOver = (chapter: ChapterResponse, event: DragEvent) => {
|
|
if (draggedChapter.value && draggedChapter.value.id !== chapter.id) {
|
|
dragOverChapter.value = chapter;
|
|
|
|
// Determine whether we're hovering over the top half (before) or bottom half (after)
|
|
const el = event.currentTarget as HTMLElement | null;
|
|
if (el) {
|
|
const rect = el.getBoundingClientRect();
|
|
const y = event.clientY - rect.top;
|
|
dragOverPosition.value = y < rect.height / 2 ? 'before' : 'after';
|
|
} else {
|
|
dragOverPosition.value = 'before';
|
|
}
|
|
}
|
|
};
|
|
|
|
const onDragLeave = () => {
|
|
dragOverChapter.value = null;
|
|
};
|
|
|
|
const onDrop = async (targetChapter: ChapterResponse) => {
|
|
if (!draggedChapter.value || draggedChapter.value.id === targetChapter.id) {
|
|
onDragEnd();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Insert behavior: move dragged chapter to target position (before/after target gap)
|
|
const sorted = chapters.value.slice().sort((a, b) => a.sort_order - b.sort_order);
|
|
const fromIndex = sorted.findIndex(ch => ch.id === draggedChapter.value!.id);
|
|
const targetIndex = sorted.findIndex(ch => ch.id === targetChapter.id);
|
|
|
|
if (fromIndex === -1 || targetIndex === -1) {
|
|
throw new Error('Chapter not found in list');
|
|
}
|
|
|
|
// Decide insert before/after based on hover position (top half => before, bottom half => after)
|
|
const desiredBeforeRemoval = dragOverPosition.value === 'before' ? targetIndex : targetIndex + 1;
|
|
|
|
// Remove dragged item then insert at the adjusted index AFTER removal
|
|
const [moved] = sorted.splice(fromIndex, 1);
|
|
let insertIndex = fromIndex < desiredBeforeRemoval ? desiredBeforeRemoval - 1 : desiredBeforeRemoval;
|
|
insertIndex = Math.max(0, Math.min(insertIndex, sorted.length));
|
|
sorted.splice(insertIndex, 0, moved);
|
|
|
|
// Re-number sort_order for UI consistency (server will also normalize)
|
|
const expandedMap = new Map(chapters.value.map(ch => [ch.id, ch.expanded]));
|
|
const optimistic = sorted.map((ch, idx) => ({
|
|
...ch,
|
|
sort_order: idx + 1,
|
|
expanded: expandedMap.get(ch.id) ?? true
|
|
}));
|
|
|
|
chapters.value = optimistic;
|
|
|
|
// Update only the dragged chapter's sort_order; backend should shift others accordingly
|
|
await instructorService.reorderChapter(courseId.value, moved.id, insertIndex + 1);
|
|
|
|
$q.notify({ type: 'positive', message: 'เรียงลำดับใหม่สำเร็จ', position: 'top' });
|
|
fetchChapters();
|
|
} catch (error) {
|
|
// Revert via re-fetch to guarantee consistency
|
|
fetchChapters();
|
|
$q.notify({ type: 'negative', message: 'ไม่สามารถเรียงลำดับได้', position: 'top' });
|
|
} finally {
|
|
onDragEnd();
|
|
}
|
|
};
|
|
|
|
// Lesson Drag and Drop
|
|
const draggedLesson = ref<LessonResponse | null>(null);
|
|
const dragOverLesson = ref<LessonResponse | null>(null);
|
|
const draggedLessonChapter = ref<ChapterResponse | null>(null);
|
|
|
|
const onLessonDragStart = (chapter: ChapterResponse, lesson: LessonResponse, event: DragEvent) => {
|
|
draggedLesson.value = lesson;
|
|
draggedLessonChapter.value = chapter;
|
|
if (event.dataTransfer) {
|
|
event.dataTransfer.effectAllowed = 'move';
|
|
}
|
|
};
|
|
|
|
const onLessonDragEnd = () => {
|
|
draggedLesson.value = null;
|
|
dragOverLesson.value = null;
|
|
draggedLessonChapter.value = null;
|
|
};
|
|
|
|
const onLessonDragOver = (chapter: ChapterResponse, lesson: LessonResponse) => {
|
|
// Only allow drag within same chapter
|
|
if (draggedLesson.value && draggedLessonChapter.value?.id === chapter.id && draggedLesson.value.id !== lesson.id) {
|
|
dragOverLesson.value = lesson;
|
|
}
|
|
};
|
|
|
|
const onLessonDragLeave = () => {
|
|
dragOverLesson.value = null;
|
|
};
|
|
|
|
const onLessonDrop = async (chapter: ChapterResponse, targetLesson: LessonResponse) => {
|
|
if (!draggedLesson.value || !draggedLessonChapter.value || draggedLessonChapter.value.id !== chapter.id || draggedLesson.value.id === targetLesson.id) {
|
|
onLessonDragEnd();
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Insert at target position - backend will shift other lessons
|
|
const targetSortOrder = targetLesson.sort_order;
|
|
|
|
await instructorService.reorderLesson(courseId.value, chapter.id, draggedLesson.value.id, targetSortOrder);
|
|
|
|
$q.notify({ type: 'positive', message: 'เรียงลำดับบทเรียนสำเร็จ', position: 'top' });
|
|
fetchChapters();
|
|
} catch (error) {
|
|
$q.notify({ type: 'negative', message: 'ไม่สามารถเรียงลำดับได้', position: 'top' });
|
|
} finally {
|
|
onLessonDragEnd();
|
|
}
|
|
};
|
|
|
|
// Forms
|
|
const chapterForm = ref({
|
|
title: { th: '', en: '' },
|
|
description: { th: '', en: '' }
|
|
});
|
|
|
|
const lessonForm = ref({
|
|
title: { th: '', en: '' },
|
|
content: { th: '', en: '' },
|
|
type: 'VIDEO' as 'VIDEO' | 'QUIZ'
|
|
});
|
|
|
|
const lessonTypeOptions = [
|
|
{ label: 'วิดีโอ', value: 'VIDEO' },
|
|
{ label: 'แบบทดสอบ', value: 'QUIZ' },
|
|
];
|
|
|
|
// Methods
|
|
const fetchChapters = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const data = await instructorService.getChapters(courseId.value);
|
|
chapters.value = data.map(ch => ({ ...ch, expanded: true }));
|
|
} catch (error) {
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: 'ไม่สามารถโหลดข้อมูลได้',
|
|
position: 'top'
|
|
});
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const getLessonIcon = (type: string) => {
|
|
const icons: Record<string, string> = {
|
|
VIDEO: 'play_circle',
|
|
QUIZ: 'quiz',
|
|
DOCUMENT: 'description'
|
|
};
|
|
return icons[type] || 'article';
|
|
};
|
|
|
|
const getLessonIconColor = (type: string) => {
|
|
const colors: Record<string, string> = {
|
|
VIDEO: 'primary',
|
|
QUIZ: 'orange',
|
|
DOCUMENT: 'grey'
|
|
};
|
|
return colors[type] || 'grey';
|
|
};
|
|
|
|
const getLessonTypeLabel = (type: string) => {
|
|
const labels: Record<string, string> = {
|
|
VIDEO: 'วิดีโอ',
|
|
QUIZ: 'แบบทดสอบ',
|
|
DOCUMENT: 'เอกสาร'
|
|
};
|
|
return labels[type] || type;
|
|
};
|
|
|
|
// Chapter CRUD
|
|
const openChapterDialog = (chapter?: ChapterResponse) => {
|
|
if (chapter) {
|
|
editingChapter.value = chapter;
|
|
chapterForm.value = {
|
|
title: { ...chapter.title },
|
|
description: { ...chapter.description }
|
|
};
|
|
} else {
|
|
editingChapter.value = null;
|
|
chapterForm.value = {
|
|
title: { th: '', en: '' },
|
|
description: { th: '', en: '' }
|
|
};
|
|
}
|
|
chapterDialog.value = true;
|
|
};
|
|
|
|
const saveChapter = async () => {
|
|
saving.value = true;
|
|
try {
|
|
if (editingChapter.value) {
|
|
await instructorService.updateChapter(courseId.value, editingChapter.value.id, chapterForm.value);
|
|
$q.notify({ type: 'positive', message: 'แก้ไขบทสำเร็จ', position: 'top' });
|
|
} else {
|
|
// Calculate sort_order for new chapter
|
|
const sortOrder = chapters.value.length + 1;
|
|
await instructorService.createChapter(courseId.value, {
|
|
...chapterForm.value,
|
|
sort_order: sortOrder
|
|
});
|
|
$q.notify({ type: 'positive', message: 'เพิ่มบทสำเร็จ', position: 'top' });
|
|
}
|
|
chapterDialog.value = false;
|
|
fetchChapters();
|
|
} catch (error) {
|
|
$q.notify({ type: 'negative', message: 'เกิดข้อผิดพลาด', position: 'top' });
|
|
} finally {
|
|
saving.value = false;
|
|
}
|
|
};
|
|
|
|
const confirmDeleteChapter = (chapter: ChapterResponse) => {
|
|
$q.dialog({
|
|
title: 'ยืนยันการลบ',
|
|
message: `ต้องการลบบท "${chapter.title.th}" หรือไม่? บทเรียนทั้งหมดในบทนี้จะถูกลบด้วย`,
|
|
cancel: true,
|
|
persistent: true
|
|
}).onOk(async () => {
|
|
try {
|
|
await instructorService.deleteChapter(courseId.value, chapter.id);
|
|
$q.notify({ type: 'positive', message: 'ลบบทสำเร็จ', position: 'top' });
|
|
fetchChapters();
|
|
} catch (error) {
|
|
$q.notify({ type: 'negative', message: 'ไม่สามารถลบได้', position: 'top' });
|
|
}
|
|
});
|
|
};
|
|
|
|
// Lesson CRUD
|
|
const openLessonDialog = (chapter: ChapterResponse, lesson?: LessonResponse) => {
|
|
selectedChapter.value = chapter;
|
|
if (lesson) {
|
|
editingLesson.value = lesson;
|
|
lessonForm.value = {
|
|
title: { ...lesson.title },
|
|
content: lesson.content ? { ...lesson.content } : { th: '', en: '' },
|
|
type: lesson.type as 'VIDEO' | 'QUIZ'
|
|
};
|
|
} else {
|
|
editingLesson.value = null;
|
|
lessonForm.value = {
|
|
title: { th: '', en: '' },
|
|
content: { th: '', en: '' },
|
|
type: 'VIDEO'
|
|
};
|
|
}
|
|
lessonDialog.value = true;
|
|
};
|
|
|
|
const saveLesson = async () => {
|
|
saving.value = true;
|
|
try {
|
|
if (!selectedChapter.value) return;
|
|
|
|
if (editingLesson.value) {
|
|
// Update - don't send type
|
|
const updateData = {
|
|
title: lessonForm.value.title,
|
|
content: lessonForm.value.content
|
|
};
|
|
await instructorService.updateLesson(
|
|
courseId.value,
|
|
selectedChapter.value.id,
|
|
editingLesson.value.id,
|
|
updateData
|
|
);
|
|
$q.notify({ type: 'positive', message: 'แก้ไขบทเรียนสำเร็จ', position: 'top' });
|
|
} else {
|
|
// Create - include type and sort_order
|
|
const createData = {
|
|
...lessonForm.value,
|
|
sort_order: (selectedChapter.value.lessons?.length || 0) + 1
|
|
};
|
|
await instructorService.createLesson(
|
|
courseId.value,
|
|
selectedChapter.value.id,
|
|
createData
|
|
);
|
|
$q.notify({ type: 'positive', message: 'เพิ่มบทเรียนสำเร็จ', position: 'top' });
|
|
}
|
|
lessonDialog.value = false;
|
|
fetchChapters();
|
|
} catch (error) {
|
|
$q.notify({ type: 'negative', message: 'เกิดข้อผิดพลาด', position: 'top' });
|
|
} finally {
|
|
saving.value = false;
|
|
}
|
|
};
|
|
|
|
const confirmDeleteLesson = (chapter: ChapterResponse, lesson: LessonResponse) => {
|
|
$q.dialog({
|
|
title: 'ยืนยันการลบ',
|
|
message: `ต้องการลบบทเรียน "${lesson.title.th}" หรือไม่?`,
|
|
cancel: true,
|
|
persistent: true
|
|
}).onOk(async () => {
|
|
try {
|
|
await instructorService.deleteLesson(courseId.value, chapter.id, lesson.id);
|
|
$q.notify({ type: 'positive', message: 'ลบบทเรียนสำเร็จ', position: 'top' });
|
|
fetchChapters();
|
|
} catch (error) {
|
|
$q.notify({ type: 'negative', message: 'ไม่สามารถลบได้', position: 'top' });
|
|
}
|
|
});
|
|
};
|
|
|
|
// Lifecycle
|
|
onMounted(() => {
|
|
fetchChapters();
|
|
});
|
|
</script>
|