feat: Add initial e-learning frontend setup including admin and instructor services, layouts, and pages.
All checks were successful
Build and Deploy Frontend Management to Dev Server / Build Frontend Management Docker Image (push) Successful in 46s
Build and Deploy Frontend Management to Dev Server / Deploy E-learning Frontend Management to Dev Server (push) Successful in 6s
Build and Deploy Frontend Management to Dev Server / Notify Deployment Status (push) Successful in 1s

This commit is contained in:
Missez 2026-02-24 09:25:02 +07:00
parent 01d249c19a
commit 031ca5c984
12 changed files with 135 additions and 36 deletions

View file

@ -218,7 +218,7 @@
<p>เลอกระยะเวลาทองการเกบไว (ลบขอมลทเกากวากำหนด):</p>
<q-select
v-model="cleanupDays"
:options="[30, 60, 90, 180, 365]"
:options="[7, 15, 30, 60, 90, 180, 365]"
label="จำนวนวัน"
suffix="วัน"
outlined

View file

@ -75,7 +75,7 @@
<div class="space-y-4">
<!-- Stats -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="font-semibold text-gray-700 mb-4">สถ</h3>
<h3 class="font-semibold text-gray-700 mb-4">รายละเอยด</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-500">จำนวนบท</span>
@ -93,6 +93,14 @@
<span class="text-gray-500">แบบทดสอบ</span>
<span class="font-medium">{{ quizCount }}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500">สรางเม</span>
<span>{{ formatDate(course.created_at) }}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500">พเดทลาส</span>
<span>{{ formatDate(course.updated_at) }}</span>
</div>
</div>
</div>
@ -116,21 +124,6 @@
</div>
</div>
</div>
<!-- Timeline -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="font-semibold text-gray-700 mb-4">อมลระบบ</h3>
<div class="space-y-3 text-sm">
<div class="flex justify-between">
<span class="text-gray-500">สรางเม</span>
<span>{{ formatDate(course.created_at) }}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500">พเดทลาส</span>
<span>{{ formatDate(course.updated_at) }}</span>
</div>
</div>
</div>
</div>
</div>

View file

@ -146,7 +146,7 @@
<div class="card bg-white rounded-lg shadow-sm">
<div class="p-6 border-b flex justify-between items-center">
<h2 class="text-lg font-semibold text-gray-900">จกรรมลาส</h2>
<q-btn flat color="primary" label="ดูทั้งหมด" to="/admin/audit-logs" size="sm" />
<q-btn flat color="primary" label="ดูทั้งหมด" to="/admin/audit-log" size="sm" />
</div>
<div class="divide-y">
<div v-if="loading" class="p-8 text-center text-gray-500">

View file

@ -183,6 +183,34 @@
</div>
</div>
</div>
<!-- Course Structure -->
<div v-if="selectedCourse.chapters && selectedCourse.chapters.length > 0" class="mt-6">
<div class="font-bold text-lg mb-3">โครงสรางหลกสตร (Course Structure)</div>
<div class="space-y-3">
<q-expansion-item
v-for="(chapter, index) in selectedCourse.chapters"
:key="chapter.id"
:label="`บทที่ ${index + 1}: ${chapter.title.th}`"
:caption="`${chapter.lessons.length} บทเรียน`"
header-class="bg-gray-50 rounded-lg"
expand-icon-class="text-primary"
>
<div class="pl-4 pt-2">
<div
v-for="(lesson, lessonIndex) in chapter.lessons"
:key="lesson.id"
class="flex items-center gap-3 py-2 border-b last:border-b-0"
>
<q-icon name="article" color="primary" size="20px" />
<span class="text-gray-700">{{ lessonIndex + 1 }}. {{ lesson.title.th }}</span>
<span v-if="lesson.title.en" class="text-gray-400 text-xs ml-auto">{{ lesson.title.en }}</span>
</div>
</div>
</q-expansion-item>
</div>
</div>
</q-card-section>
<!-- Inner Loading -->

View file

@ -263,7 +263,8 @@ const statusOptions = [
{ label: 'เผยแพร่แล้ว', value: 'APPROVED' },
{ label: 'รอตรวจสอบ', value: 'PENDING' },
{ label: 'แบบร่าง', value: 'DRAFT' },
{ label: 'ถูกปฏิเสธ', value: 'REJECTED' }
{ label: 'ถูกปฏิเสธ', value: 'REJECTED' },
//{ label: '', value: 'ARCHIVED' }
];
// Stats
@ -275,7 +276,7 @@ const stats = computed(() => ({
rejected: courses.value.filter(c => c.status === 'REJECTED').length
}));
// Filtered courses
// Filtered courses (search only, status is handled server-side)
const filteredCourses = computed(() => {
let result = courses.value;
@ -287,10 +288,6 @@ const filteredCourses = computed(() => {
);
}
if (filterStatus.value) {
result = result.filter(course => course.status === filterStatus.value);
}
return result;
});
@ -298,7 +295,7 @@ const filteredCourses = computed(() => {
const fetchCourses = async () => {
loading.value = true;
try {
courses.value = await instructorService.getCourses();
courses.value = await instructorService.getCourses(filterStatus.value || undefined);
} catch (error) {
$q.notify({
type: 'negative',
@ -310,12 +307,18 @@ const fetchCourses = async () => {
}
};
// Re-fetch when status filter changes
watch(filterStatus, () => {
fetchCourses();
});
const getStatusColor = (status: string) => {
const colors: Record<string, string> = {
APPROVED: 'green',
PENDING: 'orange',
DRAFT: 'grey',
REJECTED: 'red'
REJECTED: 'red',
ARCHIVED: 'blue-grey'
};
return colors[status] || 'grey';
};
@ -325,7 +328,8 @@ const getStatusLabel = (status: string) => {
APPROVED: 'เผยแพร่แล้ว',
PENDING: 'รอตรวจสอบ',
DRAFT: 'แบบร่าง',
REJECTED: 'ถูกปฏิเสธ'
REJECTED: 'ถูกปฏิเสธ',
ARCHIVED: 'เก็บถาวร'
};
return labels[status] || status;
};