feat: implement instructor courses listing page and data service
This commit is contained in:
Missez
parent
946d6ea0ca
commit
dec0fc5da0
2 changed files with 415 additions and 0 deletions
284
frontend_management/pages/instructor/courses/index.vue
Normal file
284
frontend_management/pages/instructor/courses/index.vue
Normal file
|
|
@ -0,0 +1,284 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-primary-600">หลักสูตรของฉัน</h1>
|
||||
<p class="text-gray-600 mt-1">จัดการหลักสูตรที่คุณสร้าง</p>
|
||||
</div>
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="+ สร้างหลักสูตรใหม่"
|
||||
@click="navigateTo('/instructor/courses/create')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 text-center">
|
||||
<div class="text-3xl font-bold text-primary-600">{{ stats.total }}</div>
|
||||
<div class="text-gray-500 text-sm mt-1">หลักสูตรทั้งหมด</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 text-center">
|
||||
<div class="text-3xl font-bold text-green-600">{{ stats.approved }}</div>
|
||||
<div class="text-gray-500 text-sm mt-1">เผยแพร่แล้ว</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 text-center">
|
||||
<div class="text-3xl font-bold text-yellow-600">{{ stats.pending }}</div>
|
||||
<div class="text-gray-500 text-sm mt-1">รอตรวจสอบ</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-5 text-center">
|
||||
<div class="text-3xl font-bold text-gray-500">{{ stats.draft }}</div>
|
||||
<div class="text-gray-500 text-sm mt-1">แบบร่าง</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Bar -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="md:col-span-2">
|
||||
<q-input
|
||||
v-model="searchQuery"
|
||||
placeholder="ค้นหาหลักสูตร..."
|
||||
outlined
|
||||
dense
|
||||
bg-color="grey-1"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<q-select
|
||||
v-model="filterStatus"
|
||||
:options="statusOptions"
|
||||
outlined
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Courses Grid -->
|
||||
<div v-if="loading" class="flex justify-center py-10">
|
||||
<q-spinner-dots size="50px" color="primary" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredCourses.length === 0" class="bg-white rounded-xl shadow-sm p-10 text-center">
|
||||
<q-icon name="school" size="60px" color="grey-5" class="mb-4" />
|
||||
<p class="text-gray-500 text-lg">ยังไม่มีหลักสูตร</p>
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="สร้างหลักสูตรแรก"
|
||||
class="mt-4"
|
||||
@click="navigateTo('/instructor/courses/create')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow"
|
||||
>
|
||||
<!-- Thumbnail -->
|
||||
<div class="h-40 bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
|
||||
<q-icon name="school" size="60px" color="white" />
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-4">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="font-semibold text-gray-900 line-clamp-2">{{ course.title.th }}</h3>
|
||||
<q-badge :color="getStatusColor(course.status)" class="ml-2">
|
||||
{{ getStatusLabel(course.status) }}
|
||||
</q-badge>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-500 line-clamp-2 mb-3">
|
||||
{{ course.description.th }}
|
||||
</p>
|
||||
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="font-semibold" :class="course.is_free ? 'text-green-600' : 'text-primary-600'">
|
||||
{{ course.is_free ? 'ฟรี' : `฿${parseFloat(course.price).toLocaleString()}` }}
|
||||
</span>
|
||||
<span class="text-gray-400">
|
||||
{{ formatDate(course.created_at) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="border-t px-4 py-3 flex gap-2">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="visibility"
|
||||
color="grey"
|
||||
@click="navigateTo(`/instructor/courses/${course.id}`)"
|
||||
>
|
||||
<q-tooltip>ดูรายละเอียด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="edit"
|
||||
color="primary"
|
||||
@click="navigateTo(`/instructor/courses/${course.id}/edit`)"
|
||||
>
|
||||
<q-tooltip>แก้ไข</q-tooltip>
|
||||
</q-btn>
|
||||
<q-space />
|
||||
<q-btn flat round dense icon="more_vert">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item clickable v-close-popup @click="duplicateCourse(course)">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="content_copy" />
|
||||
</q-item-section>
|
||||
<q-item-section>ทำสำเนา</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item clickable v-close-popup @click="confirmDelete(course)">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="delete" color="negative" />
|
||||
</q-item-section>
|
||||
<q-item-section class="text-negative">ลบ</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { instructorService, type CourseResponse } from '~/services/instructor.service';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'instructor',
|
||||
middleware: ['auth']
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
// Data
|
||||
const courses = ref<CourseResponse[]>([]);
|
||||
const loading = ref(true);
|
||||
const searchQuery = ref('');
|
||||
const filterStatus = ref<string | null>(null);
|
||||
|
||||
// Status options
|
||||
const statusOptions = [
|
||||
{ label: 'สถานะทั้งหมด', value: null },
|
||||
{ label: 'เผยแพร่แล้ว', value: 'APPROVED' },
|
||||
{ label: 'รอตรวจสอบ', value: 'PENDING' },
|
||||
{ label: 'แบบร่าง', value: 'DRAFT' },
|
||||
{ label: 'ถูกปฏิเสธ', value: 'REJECTED' }
|
||||
];
|
||||
|
||||
// Stats
|
||||
const stats = computed(() => ({
|
||||
total: courses.value.length,
|
||||
approved: courses.value.filter(c => c.status === 'APPROVED').length,
|
||||
pending: courses.value.filter(c => c.status === 'PENDING').length,
|
||||
draft: courses.value.filter(c => c.status === 'DRAFT').length
|
||||
}));
|
||||
|
||||
// Filtered courses
|
||||
const filteredCourses = computed(() => {
|
||||
let result = courses.value;
|
||||
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
result = result.filter(course =>
|
||||
course.title.th.toLowerCase().includes(query) ||
|
||||
course.title.en.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
if (filterStatus.value) {
|
||||
result = result.filter(course => course.status === filterStatus.value);
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
// Methods
|
||||
const fetchCourses = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
courses.value = await instructorService.getCourses();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'ไม่สามารถโหลดข้อมูลหลักสูตรได้',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusColor = (status: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
APPROVED: 'green',
|
||||
PENDING: 'yellow',
|
||||
DRAFT: 'grey',
|
||||
REJECTED: 'red'
|
||||
};
|
||||
return colors[status] || 'grey';
|
||||
};
|
||||
|
||||
const getStatusLabel = (status: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
APPROVED: 'เผยแพร่แล้ว',
|
||||
PENDING: 'รอตรวจสอบ',
|
||||
DRAFT: 'แบบร่าง',
|
||||
REJECTED: 'ถูกปฏิเสธ'
|
||||
};
|
||||
return labels[status] || status;
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const duplicateCourse = (course: CourseResponse) => {
|
||||
$q.notify({
|
||||
type: 'info',
|
||||
message: `กำลังทำสำเนา "${course.title.th}"...`,
|
||||
position: 'top'
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = (course: CourseResponse) => {
|
||||
$q.dialog({
|
||||
title: 'ยืนยันการลบ',
|
||||
message: `คุณต้องการลบหลักสูตร "${course.title.th}" หรือไม่?`,
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(() => {
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'ลบหลักสูตรสำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
fetchCourses();
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue