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>
|
||||
131
frontend_management/services/instructor.service.ts
Normal file
131
frontend_management/services/instructor.service.ts
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
// Course Response structure
|
||||
export interface CourseResponse {
|
||||
id: number;
|
||||
category_id: number;
|
||||
title: {
|
||||
en: string;
|
||||
th: string;
|
||||
};
|
||||
slug: string;
|
||||
description: {
|
||||
en: string;
|
||||
th: string;
|
||||
};
|
||||
thumbnail_url: string | null;
|
||||
price: string;
|
||||
is_free: boolean;
|
||||
have_certificate: boolean;
|
||||
status: 'DRAFT' | 'PENDING' | 'APPROVED' | 'REJECTED';
|
||||
approved_by: number | null;
|
||||
approved_at: string | null;
|
||||
rejection_reason: string | null;
|
||||
created_at: string;
|
||||
created_by: number;
|
||||
updated_at: string;
|
||||
updated_by: number | null;
|
||||
}
|
||||
|
||||
export interface CoursesListResponse {
|
||||
code: number;
|
||||
message: string;
|
||||
data: CourseResponse[];
|
||||
total: number;
|
||||
}
|
||||
|
||||
// Helper function to get auth token from cookie
|
||||
const getAuthToken = (): string => {
|
||||
const tokenCookie = useCookie('token');
|
||||
return tokenCookie.value || '';
|
||||
};
|
||||
|
||||
// Mock courses data
|
||||
const MOCK_COURSES: CourseResponse[] = [
|
||||
{
|
||||
id: 1,
|
||||
category_id: 1,
|
||||
title: { en: 'JavaScript Fundamentals', th: 'พื้นฐาน JavaScript' },
|
||||
slug: 'javascript-fundamentals',
|
||||
description: {
|
||||
en: 'Learn JavaScript fundamentals from scratch',
|
||||
th: 'เรียนรู้พื้นฐาน JavaScript ตั้งแต่เริ่มต้น'
|
||||
},
|
||||
thumbnail_url: null,
|
||||
price: '0',
|
||||
is_free: true,
|
||||
have_certificate: true,
|
||||
status: 'APPROVED',
|
||||
approved_by: 1,
|
||||
approved_at: '2024-01-15T00:00:00Z',
|
||||
rejection_reason: null,
|
||||
created_at: '2024-01-15T00:00:00Z',
|
||||
created_by: 2,
|
||||
updated_at: '2024-01-15T00:00:00Z',
|
||||
updated_by: null
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
category_id: 2,
|
||||
title: { en: 'React for Beginners', th: 'React สำหรับผู้เริ่มต้น' },
|
||||
slug: 'react-for-beginners',
|
||||
description: {
|
||||
en: 'Build modern web apps with React',
|
||||
th: 'สร้างเว็บแอปพลิเคชันด้วย React'
|
||||
},
|
||||
thumbnail_url: null,
|
||||
price: '990',
|
||||
is_free: false,
|
||||
have_certificate: true,
|
||||
status: 'PENDING',
|
||||
approved_by: null,
|
||||
approved_at: null,
|
||||
rejection_reason: null,
|
||||
created_at: '2024-02-01T00:00:00Z',
|
||||
created_by: 2,
|
||||
updated_at: '2024-02-01T00:00:00Z',
|
||||
updated_by: null
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
category_id: 1,
|
||||
title: { en: 'TypeScript Masterclass', th: 'TypeScript ขั้นสูง' },
|
||||
slug: 'typescript-masterclass',
|
||||
description: {
|
||||
en: 'Master TypeScript for better JavaScript development',
|
||||
th: 'เรียนรู้ TypeScript เพื่อพัฒนา JavaScript ได้ดียิ่งขึ้น'
|
||||
},
|
||||
thumbnail_url: null,
|
||||
price: '1290',
|
||||
is_free: false,
|
||||
have_certificate: true,
|
||||
status: 'DRAFT',
|
||||
approved_by: null,
|
||||
approved_at: null,
|
||||
rejection_reason: null,
|
||||
created_at: '2024-02-15T00:00:00Z',
|
||||
created_by: 2,
|
||||
updated_at: '2024-02-15T00:00:00Z',
|
||||
updated_by: null
|
||||
}
|
||||
];
|
||||
|
||||
export const instructorService = {
|
||||
async getCourses(): Promise<CourseResponse[]> {
|
||||
const config = useRuntimeConfig();
|
||||
const useMockData = config.public.useMockData as boolean;
|
||||
|
||||
if (useMockData) {
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
return MOCK_COURSES;
|
||||
}
|
||||
|
||||
const token = getAuthToken();
|
||||
const response = await $fetch<CoursesListResponse>('/api/instructors/courses', {
|
||||
baseURL: config.public.apiBaseUrl as string,
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
return response.data;
|
||||
}
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue