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

feat: Add instructor course management pages for creating, listing, and viewing course details.

Browse source
This commit is contained in:
Missez 2026-01-26 09:53:49 +07:00
parent 69eb60f901
commit af7890cc8f
7 changed files with 229 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend_management/pages/admin/index.vue
View file

@ -17,7 +17,7 @@
<div
class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl cursor-pointer hover:bg-primary-200 transition"
>
👨‍💼
<q-icon name="person" />
<q-menu>
<q-list style="min-width: 200px">
<!-- User Info Header -->

2
frontend_management/pages/instructor/courses/[id]/index.vue
View file

@ -230,7 +230,7 @@ const fetchCourse = async () => {
const getStatusColor = (status: string) => {
const colors: Record<string, string> = {
APPROVED: 'green',
PENDING: 'yellow',
PENDING: 'orange',
DRAFT: 'grey',
REJECTED: 'red'
};

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

@ -108,6 +108,13 @@
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" />
@ -120,10 +127,10 @@
</q-item-section>
<q-item-section>
<q-item-label>
{{ chapterIndex + 1 }}.{{ lessonIndex + 1 }} {{ lesson.title.th }}
{{ lesson.sort_order }}. {{ lesson.title.th }}
</q-item-label>
<q-item-label caption>
{{ getLessonTypeLabel(lesson.type) }} · {{ lesson.duration_minutes }} นาที
{{ getLessonTypeLabel(lesson.type) }}
</q-item-label>
</q-item-section>
<q-item-section side>
@ -218,7 +225,6 @@
v-model="lessonForm.title.th"
label="ชื่อบทเรียน (ภาษาไทย) *"
outlined
class="mb-4"
:rules="[val => !!val || 'กรุณากรอกชื่อบทเรียน']"
/>
<q-input
@ -229,6 +235,7 @@
/>
<q-select
v-if="!editingLesson"
v-model="lessonForm.type"
:options="lessonTypeOptions"
label="ประเภท *"
@ -238,18 +245,29 @@
class="mb-4"
/>
<q-input
<!-- <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 !== 'QUIZ'"
v-model="lessonForm.content.th"
label="เนื้อหา (ภาษาไทย)"
v-if="lessonForm.type"
v-model="lessonForm.content.en"
label="เนื้อหา (English)"
type="textarea"
outlined
autogrow
@ -383,6 +401,57 @@ const onDrop = async (targetChapter: ChapterResponse) => {
}
};
// 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: '' },
@ -392,14 +461,12 @@ const chapterForm = ref({
const lessonForm = ref({
title: { th: '', en: '' },
content: { th: '', en: '' },
type: 'VIDEO' as 'VIDEO' | 'QUIZ' | 'DOCUMENT',
duration_minutes: 10
type: 'VIDEO' as 'VIDEO' | 'QUIZ'
});
const lessonTypeOptions = [
{ label: 'วิดีโอ', value: 'VIDEO' },
{ label: 'แบบทดสอบ', value: 'QUIZ' },
{ label: 'เอกสาร', value: 'DOCUMENT' }
];
// Methods
@ -513,16 +580,14 @@ const openLessonDialog = (chapter: ChapterResponse, lesson?: LessonResponse) =>
lessonForm.value = {
title: { ...lesson.title },
content: lesson.content ? { ...lesson.content } : { th: '', en: '' },
type: lesson.type,
duration_minutes: lesson.duration_minutes
type: lesson.type as 'VIDEO' | 'QUIZ'
};
} else {
editingLesson.value = null;
lessonForm.value = {
title: { th: '', en: '' },
content: { th: '', en: '' },
type: 'VIDEO',
duration_minutes: 10
type: 'VIDEO'
};
}
lessonDialog.value = true;
@ -531,11 +596,32 @@ const openLessonDialog = (chapter: ChapterResponse, lesson?: LessonResponse) =>
const saveLesson = async () => {
saving.value = true;
try {
if (!selectedChapter.value) return;
if (editingLesson.value) {
// TODO: Call updateLesson API
// 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 {
// TODO: Call createLesson API
// 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;
@ -555,7 +641,7 @@ const confirmDeleteLesson = (chapter: ChapterResponse, lesson: LessonResponse) =
persistent: true
}).onOk(async () => {
try {
// TODO: Call deleteLesson API
await instructorService.deleteLesson(courseId.value, chapter.id, lesson.id);
$q.notify({ type: 'positive', message: 'ลบบทเรียนสำเร็จ', position: 'top' });
fetchChapters();
} catch (error) {

2
frontend_management/pages/instructor/courses/create.vue
View file

@ -168,7 +168,7 @@ const categories = ref<CategoryResponse[]>([]);
// Form
const form = ref<CreateCourseRequest>({
category_id: 0,
category_id: 1,
title: { th: '', en: '' },
slug: '',
description: { th: '', en: '' },

4
frontend_management/pages/instructor/courses/index.vue
View file

@ -129,7 +129,7 @@
>
<q-tooltip>ดูรายละเอียด</q-tooltip>
</q-btn>
<q-btn
<!-- <q-btn
flat
dense
icon="edit"
@ -137,7 +137,7 @@
@click="navigateTo(`/instructor/courses/${course.id}/edit`)"
>
<q-tooltip>แก้ไข</q-tooltip>
</q-btn>
</q-btn> -->
<q-space />
<q-btn flat round dense icon="more_vert">
<q-menu>

6
frontend_management/pages/instructor/index.vue
View file

@ -17,7 +17,7 @@
<div
class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-2xl cursor-pointer hover:bg-primary-200 transition"
>
👨‍🏫
<q-icon name="person" />
<q-menu>
<q-list style="min-width: 200px">
<!-- User Info Header -->
@ -83,7 +83,7 @@
<!-- Chart Placeholder -->
<q-card>
<q-card-section>
<h3 class="text-xl font-semibold mb-4">📊 สถิติผู้สมัครรวม (รายเดือน)</h3>
<h3 class="text-xl font-semibold mb-4"> สถิติผู้สมัครรวม (รายเดือน)</h3>
<div class="bg-gray-100 rounded-lg p-12 text-center text-gray-500">
[กราฟแสดงสถิติผู้สมัครรวม (รายเดือน)]
</div>
@ -94,7 +94,7 @@
<q-card>
<q-card-section>
<div class="flex justify-between items-center mb-4">
<h3 class="text-xl font-semibold">📚 หลักสูตรล่าสุด</h3>
<h3 class="text-xl font-semibold"> หลักสูตร</h3>
<q-btn
flat
color="primary"

121
frontend_management/services/instructor.service.ts
View file

@ -258,10 +258,11 @@ export const instructorService = {
return MOCK_COURSE_DETAIL.chapters;
}
const response = await authRequest<{ code: number; data: ChapterResponse[]; total: number }>(
`/api/instructors/courses/${courseId}/chapters`
// Get chapters from course detail endpoint
const response = await authRequest<{ code: number; data: { chapters: ChapterResponse[] } }>(
`/api/instructors/courses/${courseId}`
);
return response.data;
return response.data.chapters || [];
},
async createChapter(courseId: number, data: CreateChapterRequest): Promise<ChapterResponse> {
@ -333,6 +334,92 @@ export const instructorService = {
`/api/instructors/courses/${courseId}/chapters/${chapterId}/reorder`,
{ method: 'PUT', body: { sort_order: sortOrder } }
);
},
// Lesson CRUD
async getLesson(courseId: number, chapterId: number, lessonId: number): Promise<LessonDetailResponse> {
const config = useRuntimeConfig();
const useMockData = config.public.useMockData as boolean;
if (useMockData) {
await new Promise(resolve => setTimeout(resolve, 500));
return MOCK_COURSE_DETAIL.chapters[0].lessons[0] as LessonDetailResponse;
}
const response = await authRequest<{ code: number; data: LessonDetailResponse }>(
`/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/${lessonId}`
);
return response.data;
},
async createLesson(courseId: number, chapterId: number, data: CreateLessonRequest): Promise<LessonResponse> {
const config = useRuntimeConfig();
const useMockData = config.public.useMockData as boolean;
if (useMockData) {
await new Promise(resolve => setTimeout(resolve, 500));
return {
...MOCK_COURSE_DETAIL.chapters[0].lessons[0],
id: Date.now(),
...data
};
}
const response = await authRequest<{ code: number; data: LessonResponse }>(
`/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons`,
{ method: 'POST', body: data }
);
return response.data;
},
async updateLesson(courseId: number, chapterId: number, lessonId: number, data: UpdateLessonRequest): Promise<LessonResponse> {
const config = useRuntimeConfig();
const useMockData = config.public.useMockData as boolean;
if (useMockData) {
await new Promise(resolve => setTimeout(resolve, 500));
return {
...MOCK_COURSE_DETAIL.chapters[0].lessons[0],
id: lessonId,
...data
};
}
const response = await authRequest<{ code: number; data: LessonResponse }>(
`/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/${lessonId}`,
{ method: 'PUT', body: data }
);
return response.data;
},
async deleteLesson(courseId: number, chapterId: number, lessonId: number): Promise<void> {
const config = useRuntimeConfig();
const useMockData = config.public.useMockData as boolean;
if (useMockData) {
await new Promise(resolve => setTimeout(resolve, 500));
return;
}
await authRequest(
`/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/${lessonId}`,
{ method: 'DELETE' }
);
},
async reorderLesson(courseId: number, chapterId: number, lessonId: number, sortOrder: number): Promise<void> {
const config = useRuntimeConfig();
const useMockData = config.public.useMockData as boolean;
if (useMockData) {
await new Promise(resolve => setTimeout(resolve, 300));
return;
}
await authRequest(
`/api/instructors/courses/${courseId}/chapters/${chapterId}/lessons/reorder`,
{ method: 'PUT', body: { lesson_id: lessonId, sort_order: sortOrder } }
);
}
};
@ -407,6 +494,34 @@ export interface CreateChapterRequest {
is_published?: boolean;
}
export interface CreateLessonRequest {
title: { th: string; en: string };
content?: { th: string; en: string } | null;
type: 'VIDEO' | 'QUIZ';
sort_order?: number;
}
export interface UpdateLessonRequest {
title: { th: string; en: string };
content?: { th: string; en: string } | null;
}
export interface AttachmentResponse {
id: number;
lesson_id: number;
file_name: string;
file_path: string;
file_size: number;
mime_type: string;
description: { th: string; en: string };
sort_order: number;
created_at: string;
}
export interface LessonDetailResponse extends LessonResponse {
attachments: AttachmentResponse[];
}
// Mock course detail
const MOCK_COURSE_DETAIL: CourseDetailResponse = {
...MOCK_COURSES[0],