031ca5c984
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
346 lines
14 KiB
Vue
346 lines
14 KiB
Vue
<template>
|
|
<NuxtLayout name="admin">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">จัดการคอร์สแนะนำ</h1>
|
|
<p class="text-gray-600">Recommended Courses Management</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search & Filter -->
|
|
<!-- <div class="bg-white p-4 rounded-lg shadow-sm mb-6">
|
|
<div class="flex gap-4">
|
|
<q-input
|
|
v-model="search"
|
|
outlined
|
|
dense
|
|
placeholder="ค้นหาคอร์ส..."
|
|
class="w-full max-w-md"
|
|
>
|
|
<template v-slot:prepend>
|
|
<q-icon name="search" />
|
|
</template>
|
|
</q-input>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- Table -->
|
|
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
|
<q-table
|
|
:rows="courses"
|
|
:columns="columns"
|
|
row-key="id"
|
|
:loading="loading"
|
|
:pagination="initialPagination"
|
|
>
|
|
<!-- Thumbnail Column -->
|
|
<template v-slot:body-cell-thumbnail="props">
|
|
<q-td :props="props">
|
|
<q-img
|
|
:src="props.row.thumbnail_url || '/placeholder-course.jpg'"
|
|
class="w-16 h-10 rounded object-cover"
|
|
/>
|
|
</q-td>
|
|
</template>
|
|
|
|
<!-- Title Column -->
|
|
<template v-slot:body-cell-title="props">
|
|
<q-td :props="props">
|
|
<div class="font-medium text-gray-900">{{ props.row.title.th }}</div>
|
|
<div class="text-xs text-gray-500">{{ props.row.title.en }}</div>
|
|
</q-td>
|
|
</template>
|
|
|
|
<!-- Instructor Column -->
|
|
<template v-slot:body-cell-instructor="props">
|
|
<q-td :props="props">
|
|
<div class="flex items-center gap-2">
|
|
<q-avatar size="24px" class="bg-primary-100 text-primary">
|
|
<!-- <img :src="props.row.instructor.user.avatar_url || '/default-avatar.png'"> -->
|
|
<q-icon name="person" size="16px" />
|
|
</q-avatar>
|
|
<div>
|
|
<div class="text-sm font-medium">
|
|
{{ (props.row.instructors && props.row.instructors.length > 0) ? props.row.instructors.find((i: any) => i.is_primary)?.user.username : 'Unknown' }}
|
|
</div>
|
|
<!-- <div class="text-xs text-gray-500">{{ props.row.instructor.user.username }}</div> -->
|
|
</div>
|
|
</div>
|
|
</q-td>
|
|
</template>
|
|
|
|
<!-- Price Column -->
|
|
<template v-slot:body-cell-price="props">
|
|
<q-td :props="props">
|
|
<div v-if="props.row.is_free" class="text-green-600 font-medium">Free</div>
|
|
<div v-else class="font-medium">{{ formatPrice(props.row.price) }}</div>
|
|
</q-td>
|
|
</template>
|
|
|
|
<!-- Recommended Toggle Column -->
|
|
<template v-slot:body-cell-is_recommended="props">
|
|
<q-td :props="props">
|
|
<q-toggle
|
|
v-model="props.row.is_recommended"
|
|
color="green"
|
|
@update:model-value="(val) => handleToggleRecommendation(props.row, val)"
|
|
/>
|
|
</q-td>
|
|
</template>
|
|
|
|
<!-- Actions Column -->
|
|
<template v-slot:body-cell-actions="props">
|
|
<q-td :props="props">
|
|
<q-btn flat round dense icon="visibility" color="primary" @click="viewCourse(props.row.id)">
|
|
<q-tooltip>ดูรายละเอียด</q-tooltip>
|
|
</q-btn>
|
|
</q-td>
|
|
</template>
|
|
|
|
</q-table>
|
|
</div>
|
|
|
|
<!-- View Details Dialog -->
|
|
<q-dialog v-model="showDialog" maximized transition-show="slide-up" transition-hide="slide-down">
|
|
<q-card>
|
|
<q-bar class="bg-primary-500 text-white">
|
|
<q-space />
|
|
<q-btn dense flat icon="close" v-close-popup>
|
|
<q-tooltip class="bg-white text-primary">Close</q-tooltip>
|
|
</q-btn>
|
|
</q-bar>
|
|
|
|
<q-card-section>
|
|
<div class="text-h6">รายละเอียดคอร์ส (Course Details)</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section v-if="selectedCourse" class="q-pt-none">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Left Column: Image & Basic Info -->
|
|
<div>
|
|
<q-img
|
|
:src="selectedCourse.thumbnail_url || '/placeholder-course.jpg'"
|
|
class="rounded-lg shadow-md mb-4"
|
|
style="max-height: 300px; object-fit: cover;"
|
|
/>
|
|
|
|
<div class="text-2xl font-bold text-gray-800 mb-2">{{ selectedCourse.title.th }}</div>
|
|
<div class="text-lg text-gray-600 mb-4">{{ selectedCourse.title.en }}</div>
|
|
|
|
<div class="flex gap-2 mb-4">
|
|
<q-badge :color="selectedCourse.is_free ? 'green' : 'blue'" class="text-base p-2">
|
|
{{ selectedCourse.is_free ? 'FREE' : formatPrice(selectedCourse.price) }}
|
|
</q-badge>
|
|
<q-badge :color="getStatusColor(selectedCourse.status)" class="text-base p-2">
|
|
{{ selectedCourse.status }}
|
|
</q-badge>
|
|
<q-badge v-if="selectedCourse.have_certificate" color="orange" class="text-base p-2">
|
|
Certificate
|
|
</q-badge>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Details -->
|
|
<div class="space-y-4">
|
|
<!-- Description -->
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="font-bold mb-2">รายละเอียด (Description)</div>
|
|
<div class="text-gray-700 whitespace-pre-wrap">{{ selectedCourse.description.th }}</div>
|
|
<div class="text-gray-500 mt-2 text-sm">{{ selectedCourse.description.en }}</div>
|
|
</div>
|
|
|
|
<!-- Category -->
|
|
<div class="bg-gray-50 p-4 rounded-lg gap-2">
|
|
<div class="font-bold mb-2">หมวดหมู่ (Category):</div>
|
|
<div class="text-gray-700 mb-2">{{ selectedCourse.category.name.th }} ({{ selectedCourse.category.name.en }})</div>
|
|
</div>
|
|
|
|
<!-- Instructors -->
|
|
<div class="bg-gray-50 p-4 rounded-lg">
|
|
<div class="font-bold mb-2">ผู้สอน (Instructors)</div>
|
|
<div v-for="inst in selectedCourse.instructors" :key="inst.user_id" class="flex items-center gap-2 mb-2">
|
|
<q-avatar size="32px" class="bg-primary-100 text-primary">
|
|
<q-icon name="person" />
|
|
</q-avatar>
|
|
<div>
|
|
<div class="font-medium text-gray-700">{{ inst.user.username }}</div>
|
|
<div class="text-xs text-gray-500" v-if="inst.is_primary">(Primary)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-3 gap-2">
|
|
<div class="bg-blue-50 p-2 rounded-lg text-center">
|
|
<div class="text-2xl font-bold text-blue-800">{{ selectedCourse.chapters_count || 0 }}</div>
|
|
<div class="text-blue-600 text-sm">Chapters</div>
|
|
</div>
|
|
<div class="bg-purple-50 p-2 rounded-lg text-center">
|
|
<div class="text-2xl font-bold text-purple-800">{{ selectedCourse.lessons_count || 0 }}</div>
|
|
<div class="text-purple-600 text-sm">Lessons</div>
|
|
</div>
|
|
</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 -->
|
|
<q-inner-loading :showing="dialogLoading">
|
|
<q-spinner-gears size="50px" color="primary" />
|
|
</q-inner-loading>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
</div>
|
|
</NuxtLayout>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue';
|
|
import { useQuasar } from 'quasar';
|
|
import { adminService, type RecommendedCourse } from '~/services/admin.service';
|
|
|
|
const $q = useQuasar();
|
|
const loading = ref(false);
|
|
const courses = ref<RecommendedCourse[]>([]);
|
|
const search = ref('');
|
|
|
|
// Dialog state
|
|
const showDialog = ref(false);
|
|
const dialogLoading = ref(false);
|
|
const selectedCourse = ref<RecommendedCourse | null>(null);
|
|
|
|
const initialPagination = {
|
|
sortBy: 'desc',
|
|
descending: false,
|
|
page: 1,
|
|
rowsPerPage: 10
|
|
}
|
|
|
|
const columns = [
|
|
{ name: 'id', label: 'ID', field: 'id', sortable: true, align: 'left' as const },
|
|
{ name: 'thumbnail', label: 'Image', field: 'thumbnail_url', align: 'left' as const },
|
|
{
|
|
name: 'title',
|
|
label: 'Course Name',
|
|
field: (row: RecommendedCourse) => row.title.th,
|
|
sortable: true,
|
|
align: 'left' as const
|
|
},
|
|
{
|
|
name: 'instructor',
|
|
label: 'Instructor',
|
|
field: (row: RecommendedCourse) => row.instructors?.find((i: any) => i.is_primary)?.user.username || '',
|
|
align: 'left' as const
|
|
},
|
|
{ name: 'category', label: 'Category', field: (row: RecommendedCourse) => row.category.name.th, sortable: true, align: 'left' as const },
|
|
{ name: 'price', label: 'Price', field: 'price', sortable: true, align: 'right' as const },
|
|
{ name: 'is_recommended', label: 'Recommended', field: 'is_recommended', sortable: true, align: 'center' as const },
|
|
{ name: 'actions', label: 'Actions', field: 'actions', align: 'center' as const },
|
|
];
|
|
|
|
const fetchCourses = async () => {
|
|
loading.value = true;
|
|
try {
|
|
courses.value = await adminService.getRecommendedCourses();
|
|
} catch (error) {
|
|
console.error('Error fetching courses:', error);
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: 'ไม่สามารถโหลดข้อมูลคอร์สได้',
|
|
position: 'top'
|
|
});
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const viewCourse = async (id: number) => {
|
|
showDialog.value = true;
|
|
dialogLoading.value = true;
|
|
selectedCourse.value = null; // Clear previous data
|
|
try {
|
|
selectedCourse.value = await adminService.getRecommendedCourseById(id);
|
|
} catch (error) {
|
|
console.error('Error fetching course details:', error);
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: 'ไม่สามารถโหลดข้อมูลรายละเอียดคอร์สได้',
|
|
position: 'top'
|
|
});
|
|
showDialog.value = false;
|
|
} finally {
|
|
dialogLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const handleToggleRecommendation = async (course: RecommendedCourse, isRecommended: boolean) => {
|
|
try {
|
|
await adminService.toggleCourseRecommendation(course.id, isRecommended);
|
|
$q.notify({
|
|
type: 'positive',
|
|
message: isRecommended ? 'เพิ่มคอร์สแนะนำสำร็จ' : 'ยกเลิกคอร์สแนะนำสำเร็จ',
|
|
position: 'top'
|
|
});
|
|
} catch (error) {
|
|
console.error('Error toggling recommendation:', error);
|
|
// Revert the toggle if API fails
|
|
course.is_recommended = !isRecommended;
|
|
$q.notify({
|
|
type: 'negative',
|
|
message: 'เกิดข้อผิดพลาดในการบันทึกข้อมูล',
|
|
position: 'top'
|
|
});
|
|
}
|
|
};
|
|
|
|
const formatPrice = (price: number) => {
|
|
return new Intl.NumberFormat('th-TH', {
|
|
style: 'currency',
|
|
currency: 'THB'
|
|
}).format(price);
|
|
};
|
|
|
|
const getStatusColor = (status: string) => {
|
|
switch (status) {
|
|
case 'PUBLISHED': return 'positive';
|
|
case 'DRAFT': return 'grey';
|
|
case 'PENDING': return 'warning';
|
|
case 'REJECTED': return 'negative';
|
|
default: return 'grey';
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
fetchCourses();
|
|
});
|
|
</script>
|