feat: Implement instructor course management, including student progress tracking and course content views, alongside admin user management.
This commit is contained in:
Missez
parent
c9381b9385
commit
be5b9756be
11 changed files with 2116 additions and 1386 deletions
458
frontend_management/components/course/AnnouncementsTab.vue
Normal file
458
frontend_management/components/course/AnnouncementsTab.vue
Normal file
|
|
@ -0,0 +1,458 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900">ประกาศ</h2>
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="สร้างประกาศ"
|
||||
icon="add"
|
||||
@click="openDialog()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="flex justify-center py-10">
|
||||
<q-spinner color="primary" size="40px" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="announcements.length === 0" class="text-center py-10 text-gray-500">
|
||||
<q-icon name="campaign" size="60px" color="grey-4" class="mb-4" />
|
||||
<p>ยังไม่มีประกาศ</p>
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="สร้างประกาศแรก"
|
||||
class="mt-4"
|
||||
@click="openDialog()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="space-y-4">
|
||||
<q-card
|
||||
v-for="announcement in announcements"
|
||||
:key="announcement.id"
|
||||
flat
|
||||
bordered
|
||||
class="rounded-lg"
|
||||
>
|
||||
<q-card-section>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<q-icon v-if="announcement.is_pinned" name="push_pin" color="orange" size="20px" />
|
||||
<h3 class="font-semibold text-gray-900">{{ announcement.title.th }}</h3>
|
||||
<q-badge :color="announcement.status === 'PUBLISHED' ? 'green' : 'grey'">
|
||||
{{ announcement.status === 'PUBLISHED' ? 'เผยแพร่' : 'ฉบับร่าง' }}
|
||||
</q-badge>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1">{{ announcement.title.en }}</p>
|
||||
<p class="text-gray-600 mt-3 whitespace-pre-line">{{ announcement.content.th }}</p>
|
||||
<p class="text-xs text-gray-400 mt-3">
|
||||
สร้างเมื่อ {{ formatDate(announcement.created_at) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<q-btn flat round icon="edit" color="primary" size="sm" @click="openDialog(announcement)" />
|
||||
<q-btn flat round icon="delete" color="negative" size="sm" @click="confirmDelete(announcement)" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<!-- Announcement Dialog -->
|
||||
<q-dialog v-model="showDialog" persistent>
|
||||
<q-card style="min-width: 600px; max-width: 700px">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-h6">{{ editing ? 'แก้ไขประกาศ' : 'สร้างประกาศใหม่' }}</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense @click="showDialog = false" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<div class="space-y-4">
|
||||
<q-input
|
||||
v-model="form.title.th"
|
||||
outlined
|
||||
label="หัวข้อ (ภาษาไทย) *"
|
||||
:rules="[val => !!val || 'กรุณากรอกหัวข้อ']"
|
||||
lazy-rules="ondemand"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
v-model="form.title.en"
|
||||
outlined
|
||||
label="หัวข้อ (English)"
|
||||
/>
|
||||
<q-input
|
||||
v-model="form.content.th"
|
||||
outlined
|
||||
type="textarea"
|
||||
rows="4"
|
||||
label="เนื้อหา (ภาษาไทย) *"
|
||||
:rules="[val => !!val || 'กรุณากรอกเนื้อหา']"
|
||||
lazy-rules="ondemand"
|
||||
hide-bottom-space
|
||||
/>
|
||||
<q-input
|
||||
v-model="form.content.en"
|
||||
outlined
|
||||
type="textarea"
|
||||
rows="4"
|
||||
label="เนื้อหา (English)"
|
||||
/>
|
||||
<div class="flex gap-4">
|
||||
<q-toggle v-model="form.is_pinned" label="ปักหมุด" />
|
||||
<q-select
|
||||
v-model="form.status"
|
||||
:options="[
|
||||
{ label: 'ฉบับร่าง', value: 'DRAFT' },
|
||||
{ label: 'เผยแพร่', value: 'PUBLISHED' }
|
||||
]"
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
label="สถานะ"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Published At -->
|
||||
<div class="row q-col-gutter-sm" v-if="form.status === 'PUBLISHED'">
|
||||
<div class="col-12 col-md-12">
|
||||
<q-input filled v-model="form.published_at" label="วันเวลาที่เผยแพร่ (ไม่ระบุ = เผยแพร่ทันที)">
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="event" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-date v-model="form.published_at" mask="YYYY-MM-DD HH:mm">
|
||||
<div class="row items-center justify-end">
|
||||
<q-btn v-close-popup label="Close" color="primary" flat />
|
||||
</div>
|
||||
</q-date>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
|
||||
<template v-slot:append>
|
||||
<q-icon name="access_time" class="cursor-pointer">
|
||||
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
||||
<q-time v-model="form.published_at" mask="YYYY-MM-DD HH:mm" format24h>
|
||||
<div class="row items-center justify-end">
|
||||
<q-btn v-close-popup label="Close" color="primary" flat />
|
||||
</div>
|
||||
</q-time>
|
||||
</q-popup-proxy>
|
||||
</q-icon>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Attachments Section -->
|
||||
<div class="border rounded-lg p-4">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h4 class="font-semibold text-gray-700">ไฟล์แนบ</h4>
|
||||
<q-btn
|
||||
size="sm"
|
||||
color="primary"
|
||||
icon="attach_file"
|
||||
label="เพิ่มไฟล์"
|
||||
:loading="uploadingAttachment"
|
||||
@click="triggerFileInput"
|
||||
/>
|
||||
<input
|
||||
ref="fileInputRef"
|
||||
type="file"
|
||||
class="hidden"
|
||||
@change="handleFileUpload"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Existing Attachments (edit mode) -->
|
||||
<div v-if="editing?.attachments && editing.attachments.length > 0" class="space-y-2 mb-2">
|
||||
<div
|
||||
v-for="attachment in editing?.attachments"
|
||||
:key="attachment.id"
|
||||
class="flex items-center justify-between bg-gray-50 rounded p-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<q-icon name="insert_drive_file" color="grey" />
|
||||
<span class="text-sm">{{ attachment.file_name }}</span>
|
||||
<span class="text-xs text-gray-400">({{ formatFileSize(attachment.file_size) }})</span>
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
icon="delete"
|
||||
color="negative"
|
||||
:loading="deletingAttachmentId === attachment.id"
|
||||
@click="deleteAttachment(attachment.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Files (create mode) -->
|
||||
<div v-if="pendingFiles.length > 0" class="space-y-2 mb-2">
|
||||
<div
|
||||
v-for="(file, index) in pendingFiles"
|
||||
:key="index"
|
||||
class="flex items-center justify-between bg-blue-50 rounded p-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<q-icon name="upload_file" color="primary" />
|
||||
<span class="text-sm">{{ file.name }}</span>
|
||||
<span class="text-xs text-gray-400">({{ formatFileSize(file.size) }})</span>
|
||||
<q-badge color="blue" label="รอสร้าง" size="sm" />
|
||||
</div>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
size="sm"
|
||||
icon="close"
|
||||
color="grey"
|
||||
@click="removePendingFile(index)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!editing?.attachments?.length && pendingFiles.length === 0" class="text-center py-4 text-gray-400 text-sm">
|
||||
ยังไม่มีไฟล์แนบ
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="q-pa-md">
|
||||
<q-btn flat label="ยกเลิก" color="grey-7" @click="showDialog = false" />
|
||||
<q-btn
|
||||
:label="editing ? 'บันทึก' : 'สร้าง'"
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
@click="save"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import {
|
||||
instructorService,
|
||||
type AnnouncementResponse,
|
||||
type CreateAnnouncementRequest
|
||||
} from '~/services/instructor.service';
|
||||
|
||||
interface Props {
|
||||
courseId: number;
|
||||
}
|
||||
|
||||
const props = defineProps<Props>();
|
||||
const $q = useQuasar();
|
||||
|
||||
// State
|
||||
const announcements = ref<AnnouncementResponse[]>([]);
|
||||
const loading = ref(false);
|
||||
const showDialog = ref(false);
|
||||
const editing = ref<AnnouncementResponse | null>(null);
|
||||
const saving = ref(false);
|
||||
|
||||
// Form
|
||||
const form = ref<CreateAnnouncementRequest>({
|
||||
title: { th: '', en: '' },
|
||||
content: { th: '', en: '' },
|
||||
is_pinned: false,
|
||||
status: 'DRAFT',
|
||||
published_at: ''
|
||||
});
|
||||
|
||||
// Attachments
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
const uploadingAttachment = ref(false);
|
||||
const deletingAttachmentId = ref<number | null>(null);
|
||||
const pendingFiles = ref<File[]>([]);
|
||||
|
||||
// Methods
|
||||
const fetchAnnouncements = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
announcements.value = await instructorService.getAnnouncements(props.courseId);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch announcements:', error);
|
||||
$q.notify({ type: 'negative', message: 'ไม่สามารถโหลดประกาศได้', position: 'top' });
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openDialog = (announcement?: AnnouncementResponse) => {
|
||||
editing.value = announcement || null;
|
||||
if (announcement) {
|
||||
// Format date for q-date/q-time (YYYY-MM-DD HH:mm)
|
||||
let formattedPublishedAt = '';
|
||||
if (announcement.published_at) {
|
||||
const date = new Date(announcement.published_at);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
formattedPublishedAt = `${year}-${month}-${day} ${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
form.value = {
|
||||
title: { ...announcement.title },
|
||||
content: { ...announcement.content },
|
||||
is_pinned: announcement.is_pinned,
|
||||
status: announcement.status,
|
||||
published_at: formattedPublishedAt
|
||||
};
|
||||
} else {
|
||||
form.value = {
|
||||
title: { th: '', en: '' },
|
||||
content: { th: '', en: '' },
|
||||
is_pinned: false,
|
||||
status: 'DRAFT',
|
||||
published_at: ''
|
||||
};
|
||||
}
|
||||
pendingFiles.value = [];
|
||||
showDialog.value = true;
|
||||
};
|
||||
|
||||
// Watch for published_at changes to auto-set status
|
||||
watch(() => form.value.published_at, (newVal) => {
|
||||
if (newVal) {
|
||||
form.value.status = 'PUBLISHED';
|
||||
}
|
||||
});
|
||||
|
||||
// Watch for status changes to clear published_at if DRAFT
|
||||
watch(() => form.value.status, (newVal) => {
|
||||
if (newVal === 'DRAFT') {
|
||||
form.value.published_at = '';
|
||||
}
|
||||
});
|
||||
|
||||
const save = async () => {
|
||||
if (!form.value.title.th || !form.value.content.th) {
|
||||
$q.notify({ type: 'warning', message: 'กรุณากรอกข้อมูลที่จำเป็น', position: 'top' });
|
||||
return;
|
||||
}
|
||||
|
||||
saving.value = true;
|
||||
try {
|
||||
if (editing.value) {
|
||||
await instructorService.updateAnnouncement(props.courseId, editing.value.id, form.value);
|
||||
$q.notify({ type: 'positive', message: 'บันทึกประกาศสำเร็จ', position: 'top' });
|
||||
} else {
|
||||
const created = await instructorService.createAnnouncement(props.courseId, form.value);
|
||||
|
||||
// Upload pending files
|
||||
for (const file of pendingFiles.value) {
|
||||
try {
|
||||
await instructorService.uploadAnnouncementAttachment(props.courseId, created.data.id, file);
|
||||
} catch (err) {
|
||||
console.error('Failed to upload attachment:', err);
|
||||
}
|
||||
}
|
||||
|
||||
$q.notify({ type: 'positive', message: 'สร้างประกาศสำเร็จ', position: 'top' });
|
||||
}
|
||||
showDialog.value = false;
|
||||
fetchAnnouncements();
|
||||
} catch (error: any) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: error.data?.message || 'ไม่สามารถบันทึกประกาศได้',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = (announcement: AnnouncementResponse) => {
|
||||
$q.dialog({
|
||||
title: 'ยืนยันการลบ',
|
||||
message: `คุณต้องการลบประกาศ "${announcement.title.th}" หรือไม่?`,
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(async () => {
|
||||
try {
|
||||
await instructorService.deleteAnnouncement(props.courseId, announcement.id);
|
||||
$q.notify({ type: 'positive', message: 'ลบประกาศสำเร็จ', position: 'top' });
|
||||
fetchAnnouncements();
|
||||
} catch (error) {
|
||||
$q.notify({ type: 'negative', message: 'ไม่สามารถลบประกาศได้', position: 'top' });
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const triggerFileInput = () => {
|
||||
fileInputRef.value?.click();
|
||||
};
|
||||
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const files = input.files;
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
if (editing.value) {
|
||||
// Upload immediately in edit mode
|
||||
uploadingAttachment.value = true;
|
||||
try {
|
||||
await instructorService.uploadAnnouncementAttachment(props.courseId, editing.value.id, files[0]);
|
||||
$q.notify({ type: 'positive', message: 'อัพโหลดไฟล์สำเร็จ', position: 'top' });
|
||||
// Refresh editing
|
||||
const all = await instructorService.getAnnouncements(props.courseId);
|
||||
editing.value = all.find(a => a.id === editing.value?.id) || null;
|
||||
} catch (error) {
|
||||
$q.notify({ type: 'negative', message: 'ไม่สามารถอัพโหลดไฟล์ได้', position: 'top' });
|
||||
} finally {
|
||||
uploadingAttachment.value = false;
|
||||
}
|
||||
} else {
|
||||
// Add to pending files in create mode
|
||||
pendingFiles.value.push(files[0]);
|
||||
}
|
||||
|
||||
input.value = '';
|
||||
};
|
||||
|
||||
const removePendingFile = (index: number) => {
|
||||
pendingFiles.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const deleteAttachment = async (attachmentId: number) => {
|
||||
if (!editing.value) return;
|
||||
deletingAttachmentId.value = attachmentId;
|
||||
try {
|
||||
await instructorService.deleteAnnouncementAttachment(props.courseId, editing.value.id, attachmentId);
|
||||
$q.notify({ type: 'positive', message: 'ลบไฟล์สำเร็จ', position: 'top' });
|
||||
// Refresh editing
|
||||
const all = await instructorService.getAnnouncements(props.courseId);
|
||||
editing.value = all.find(a => a.id === editing.value?.id) || null;
|
||||
} catch (error) {
|
||||
$q.notify({ type: 'negative', message: 'ไม่สามารถลบไฟล์ได้', position: 'top' });
|
||||
} finally {
|
||||
deletingAttachmentId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
const date = new Date(dateStr);
|
||||
return date.toLocaleDateString('th-TH', { day: 'numeric', month: 'short', year: 'numeric' });
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
};
|
||||
|
||||
// Fetch on mount
|
||||
onMounted(() => {
|
||||
fetchAnnouncements();
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue