feat: Add initial frontend setup including authentication, instructor, and admin course management modules.
This commit is contained in:
Missez
parent
9fd217e1db
commit
19844f343b
16 changed files with 2065 additions and 293 deletions
|
|
@ -167,12 +167,205 @@
|
|||
|
||||
<!-- Announcements Tab -->
|
||||
<q-tab-panel name="announcements" class="p-6">
|
||||
<div class="text-center py-10 text-gray-500">
|
||||
<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="openAnnouncementDialog()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="loadingAnnouncements" 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="openAnnouncementDialog()"
|
||||
/>
|
||||
</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="openAnnouncementDialog(announcement)" />
|
||||
<q-btn flat round icon="delete" color="negative" size="sm" @click="confirmDeleteAnnouncement(announcement)" />
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
|
||||
<!-- Announcement Dialog -->
|
||||
<q-dialog v-model="showAnnouncementDialog" persistent>
|
||||
<q-card style="min-width: 600px; max-width: 700px">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-h6">{{ editingAnnouncement ? 'แก้ไขประกาศ' : 'สร้างประกาศใหม่' }}</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense @click="showAnnouncementDialog = false" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<div class="space-y-4">
|
||||
<q-input
|
||||
v-model="announcementForm.title.th"
|
||||
outlined
|
||||
label="หัวข้อ (ภาษาไทย) *"
|
||||
:rules="[val => !!val || 'กรุณากรอกหัวข้อ']"
|
||||
/>
|
||||
<q-input
|
||||
v-model="announcementForm.title.en"
|
||||
outlined
|
||||
label="หัวข้อ (English)"
|
||||
/>
|
||||
<q-input
|
||||
v-model="announcementForm.content.th"
|
||||
outlined
|
||||
type="textarea"
|
||||
rows="4"
|
||||
label="เนื้อหา (ภาษาไทย) *"
|
||||
:rules="[val => !!val || 'กรุณากรอกเนื้อหา']"
|
||||
/>
|
||||
<q-input
|
||||
v-model="announcementForm.content.en"
|
||||
outlined
|
||||
type="textarea"
|
||||
rows="4"
|
||||
label="เนื้อหา (English)"
|
||||
/>
|
||||
<div class="flex gap-4">
|
||||
<q-toggle v-model="announcementForm.is_pinned" label="ปักหมุด" />
|
||||
<q-select
|
||||
v-model="announcementForm.status"
|
||||
:options="[
|
||||
{ label: 'ฉบับร่าง', value: 'DRAFT' },
|
||||
{ label: 'เผยแพร่', value: 'PUBLISHED' }
|
||||
]"
|
||||
outlined
|
||||
emit-value
|
||||
map-options
|
||||
label="สถานะ"
|
||||
class="flex-1"
|
||||
/>
|
||||
</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="editingAnnouncement?.attachments?.length > 0" class="space-y-2 mb-2">
|
||||
<div
|
||||
v-for="attachment in editingAnnouncement.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="!editingAnnouncement?.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="showAnnouncementDialog = false" />
|
||||
<q-btn
|
||||
:label="editingAnnouncement ? 'บันทึก' : 'สร้าง'"
|
||||
color="primary"
|
||||
:loading="savingAnnouncement"
|
||||
@click="saveAnnouncement"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -182,7 +375,9 @@ import { useQuasar } from 'quasar';
|
|||
import {
|
||||
instructorService,
|
||||
type CourseDetailResponse,
|
||||
type ChapterResponse
|
||||
type ChapterResponse,
|
||||
type AnnouncementResponse,
|
||||
type CreateAnnouncementRequest
|
||||
} from '~/services/instructor.service';
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -198,6 +393,25 @@ const course = ref<CourseDetailResponse | null>(null);
|
|||
const loading = ref(true);
|
||||
const activeTab = ref('structure');
|
||||
|
||||
// Announcements data
|
||||
const announcements = ref<AnnouncementResponse[]>([]);
|
||||
const loadingAnnouncements = ref(false);
|
||||
const showAnnouncementDialog = ref(false);
|
||||
const editingAnnouncement = ref<AnnouncementResponse | null>(null);
|
||||
const savingAnnouncement = ref(false);
|
||||
const announcementForm = ref<CreateAnnouncementRequest>({
|
||||
title: { th: '', en: '' },
|
||||
content: { th: '', en: '' },
|
||||
status: 'DRAFT',
|
||||
is_pinned: false
|
||||
});
|
||||
|
||||
// Attachment handling
|
||||
const fileInputRef = ref<HTMLInputElement | null>(null);
|
||||
const uploadingAttachment = ref(false);
|
||||
const deletingAttachmentId = ref<number | null>(null);
|
||||
const pendingFiles = ref<File[]>([]);
|
||||
|
||||
// Computed
|
||||
const totalLessons = computed(() => {
|
||||
if (!course.value) return 0;
|
||||
|
|
@ -300,6 +514,224 @@ const requestApproval = () => {
|
|||
});
|
||||
};
|
||||
|
||||
// Announcements methods
|
||||
const fetchAnnouncements = async () => {
|
||||
loadingAnnouncements.value = true;
|
||||
try {
|
||||
const courseId = parseInt(route.params.id as string);
|
||||
announcements.value = await instructorService.getAnnouncements(courseId);
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'ไม่สามารถโหลดข้อมูลประกาศได้',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
loadingAnnouncements.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const openAnnouncementDialog = (announcement?: AnnouncementResponse) => {
|
||||
if (announcement) {
|
||||
editingAnnouncement.value = announcement;
|
||||
announcementForm.value = {
|
||||
title: { ...announcement.title },
|
||||
content: { ...announcement.content },
|
||||
status: announcement.status,
|
||||
is_pinned: announcement.is_pinned
|
||||
};
|
||||
} else {
|
||||
editingAnnouncement.value = null;
|
||||
announcementForm.value = {
|
||||
title: { th: '', en: '' },
|
||||
content: { th: '', en: '' },
|
||||
status: 'DRAFT',
|
||||
is_pinned: false
|
||||
};
|
||||
}
|
||||
pendingFiles.value = [];
|
||||
showAnnouncementDialog.value = true;
|
||||
};
|
||||
|
||||
const saveAnnouncement = async () => {
|
||||
if (!announcementForm.value.title.th || !announcementForm.value.content.th) {
|
||||
$q.notify({
|
||||
type: 'warning',
|
||||
message: 'กรุณากรอกหัวข้อและเนื้อหา',
|
||||
position: 'top'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
savingAnnouncement.value = true;
|
||||
try {
|
||||
const courseId = parseInt(route.params.id as string);
|
||||
if (editingAnnouncement.value) {
|
||||
await instructorService.updateAnnouncement(courseId, editingAnnouncement.value.id, announcementForm.value);
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'บันทึกประกาศสำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
} else {
|
||||
// Create announcement with files
|
||||
await instructorService.createAnnouncement(
|
||||
courseId,
|
||||
announcementForm.value,
|
||||
pendingFiles.value.length > 0 ? pendingFiles.value : undefined
|
||||
);
|
||||
pendingFiles.value = [];
|
||||
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'สร้างประกาศสำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
}
|
||||
showAnnouncementDialog.value = false;
|
||||
fetchAnnouncements();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'เกิดข้อผิดพลาด',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
savingAnnouncement.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDeleteAnnouncement = (announcement: AnnouncementResponse) => {
|
||||
$q.dialog({
|
||||
title: 'ยืนยันการลบ',
|
||||
message: `คุณต้องการลบประกาศ "${announcement.title.th}" หรือไม่?`,
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(async () => {
|
||||
try {
|
||||
const courseId = parseInt(route.params.id as string);
|
||||
await instructorService.deleteAnnouncement(courseId, announcement.id);
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'ลบประกาศสำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
fetchAnnouncements();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'เกิดข้อผิดพลาดในการลบประกาศ',
|
||||
position: 'top'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Attachment handling methods
|
||||
const triggerFileInput = () => {
|
||||
fileInputRef.value?.click();
|
||||
};
|
||||
|
||||
const handleFileUpload = async (event: Event) => {
|
||||
const input = event.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// If editing existing announcement, upload immediately
|
||||
if (editingAnnouncement.value) {
|
||||
uploadingAttachment.value = true;
|
||||
try {
|
||||
const courseId = parseInt(route.params.id as string);
|
||||
const updated = await instructorService.uploadAnnouncementAttachment(
|
||||
courseId,
|
||||
editingAnnouncement.value.id,
|
||||
file
|
||||
);
|
||||
editingAnnouncement.value = updated;
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'อัพโหลดไฟล์สำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
fetchAnnouncements();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'เกิดข้อผิดพลาดในการอัพโหลดไฟล์',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
uploadingAttachment.value = false;
|
||||
input.value = '';
|
||||
}
|
||||
} else {
|
||||
// If creating new announcement, add to pending files
|
||||
pendingFiles.value.push(file);
|
||||
input.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const removePendingFile = (index: number) => {
|
||||
pendingFiles.value.splice(index, 1);
|
||||
};
|
||||
|
||||
const deleteAttachment = async (attachmentId: number) => {
|
||||
if (!editingAnnouncement.value) return;
|
||||
|
||||
deletingAttachmentId.value = attachmentId;
|
||||
try {
|
||||
const courseId = parseInt(route.params.id as string);
|
||||
await instructorService.deleteAnnouncementAttachment(
|
||||
courseId,
|
||||
editingAnnouncement.value.id,
|
||||
attachmentId
|
||||
);
|
||||
// Remove from local state
|
||||
editingAnnouncement.value.attachments = editingAnnouncement.value.attachments.filter(
|
||||
a => a.id !== attachmentId
|
||||
);
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'ลบไฟล์สำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
fetchAnnouncements();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'เกิดข้อผิดพลาดในการลบไฟล์',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
deletingAttachmentId.value = null;
|
||||
}
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number): string => {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
// Watch for tab change to load announcements
|
||||
watch(activeTab, (newTab) => {
|
||||
if (newTab === 'announcements' && announcements.value.length === 0) {
|
||||
fetchAnnouncements();
|
||||
}
|
||||
});
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
fetchCourse();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue