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

feat: Implement instructor course and lesson management with dedicated views for quizzes, videos, and admin categories.

Browse source
This commit is contained in:
Missez 2026-01-30 10:56:48 +07:00
parent 344e1e4341
commit 878a17f922
9 changed files with 903 additions and 399 deletions
Download patch file Download diff file Expand all files Collapse all files

127
frontend_management/pages/instructor/courses/[id]/edit.vue
View file

@ -31,12 +31,16 @@
label="ชื่อหลักสูตร (ภาษาไทย) *"
outlined
:rules="[val => !!val || 'กรุณากรอกชื่อหลักสูตร']"
lazy-rules="ondemand"
hide-bottom-space
/>
<q-input
v-model="form.title.en"
label="ชื่อหลักสูตร (English) *"
outlined
:rules="[val => !!val || 'Please enter course title']"
lazy-rules="ondemand"
hide-bottom-space
/>
</div>
@ -47,6 +51,8 @@
outlined
hint="ใช้สำหรับ URL เช่น javascript-basics"
:rules="[val => !!val || 'กรุณากรอก slug']"
lazy-rules="ondemand"
hide-bottom-space
/>
<q-select
v-model="form.category_id"
@ -99,6 +105,8 @@
outlined
prefix="฿"
:rules="[val => form.is_free || val > 0 || 'กรุณากรอกราคา']"
lazy-rules="ondemand"
hide-bottom-space
/>
<q-toggle
v-model="form.have_certificate"
@ -107,43 +115,6 @@
/>
</div>
<!-- Thumbnail -->
<q-separator class="my-6" />
<h2 class="text-lg font-semibold text-primary-600 mb-4">รูปภาพปก</h2>
<div class="mb-6">
<div class="flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg p-6 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer" @click="triggerThumbnailUpload">
<div v-if="form.thumbnail_url" class="relative group w-full max-w-md aspect-video">
<img
:src="form.thumbnail_url"
:key="form.thumbnail_url"
alt="Thumbnail preview"
class="w-full h-full object-cover rounded-lg shadow-sm"
@error="form.thumbnail_url = ''"
/>
<div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center rounded-lg">
<q-icon name="photo_camera" color="white" size="40px" />
<span class="text-white ml-2">เปลี่ยนรูปภาพ</span>
</div>
<div v-if="uploadingThumbnail" class="absolute inset-0 bg-white/80 flex items-center justify-center rounded-lg">
<q-spinner color="primary" size="2em" />
</div>
</div>
<div v-else class="text-center py-8">
<q-icon name="add_photo_alternate" size="48px" class="text-gray-400 mb-2" />
<div class="text-gray-600 font-medium">คลิกเพื่ออัพโหลดรูปภาพปก</div>
<div class="text-xs text-gray-400 mt-1">ขนาดแนะนำ 1280x720 (16:9) สูงสุด 5MB</div>
</div>
<input
ref="thumbnailInputRef"
type="file"
accept="image/*"
class="hidden"
@change="handleThumbnailUpload"
/>
</div>
</div>
<!-- Actions -->
<div class="flex justify-end gap-3 mt-8">
<q-btn
@ -180,8 +151,6 @@ const route = useRoute();
// Data
const initialLoading = ref(true);
const saving = ref(false);
const uploadingThumbnail = ref(false);
const thumbnailInputRef = ref<HTMLInputElement | null>(null);
const categories = ref<CategoryResponse[]>([]);
// Form
@ -251,11 +220,15 @@ const handleSubmit = async () => {
form.value.price = 0;
}
await instructorService.updateCourse(courseId, form.value);
// Create payload and remove thumbnail_url to avoid overwriting it
const payload = { ...form.value };
delete (payload as any).thumbnail_url;
const response = await instructorService.updateCourse(courseId, payload);
$q.notify({
type: 'positive',
message: 'บันทึกการแก้ไขสำเร็จ',
message: response.message,
position: 'top'
});
@ -263,7 +236,7 @@ const handleSubmit = async () => {
} catch (error: any) {
$q.notify({
type: 'negative',
message: error.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่',
message: error.data?.error?.message || error.data?.message || 'เกิดข้อผิดพลาด กรุณาลองใหม่',
position: 'top'
});
} finally {
@ -271,76 +244,6 @@ const handleSubmit = async () => {
}
};
const triggerThumbnailUpload = () => {
thumbnailInputRef.value?.click();
};
const handleThumbnailUpload = async (event: Event) => {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
// Validate file type
if (!file.type.startsWith('image/')) {
$q.notify({
type: 'warning',
message: 'กรุณาเลือกไฟล์รูปภาพเท่านั้น',
position: 'top'
});
return;
}
// Validate file size (max 5MB)
if (file.size > 5 * 1024 * 1024) {
$q.notify({
type: 'warning',
message: 'ไฟล์มีขนาดใหญ่เกิน 5MB',
position: 'top'
});
return;
}
uploadingThumbnail.value = true;
try {
const courseId = parseInt(route.params.id as string);
// Clear current thumbnail first to force complete re-mount
form.value.thumbnail_url = null;
// Upload the file
await instructorService.uploadCourseThumbnail(courseId, file);
// Wait for Vue to unmount old img
await nextTick();
// Re-fetch course data to get fresh presigned URL from backend
const updatedCourse = await instructorService.getCourseById(courseId);
// Add cache buster to force reload
if (updatedCourse.thumbnail_url) {
// For presigned URLs, we cannot append query parameters as it invalidates the signature
// The presigned URL itself should be unique enough or handle caching differently
form.value.thumbnail_url = updatedCourse.thumbnail_url;
}
$q.notify({
type: 'positive',
message: 'อัพโหลดรูปภาพปกเรียบร้อย',
position: 'top'
});
// Clear input value to allow re-uploading same file if needed
input.value = '';
} catch (error: any) {
$q.notify({
type: 'negative',
message: error.message || 'เกิดข้อผิดพลาดในการอัพโหลดรูปภาพ',
position: 'top'
});
} finally {
uploadingThumbnail.value = false;
}
};
// Lifecycle
onMounted(() => {
fetchData();