465 lines
18 KiB
Vue
465 lines
18 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file discovery.vue
|
|
* @description Course Discovery / Catalog Page.
|
|
* Allows users to browse, filter, and view details of available courses.
|
|
* Includes a toggleable detailed view for course previews.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: "default",
|
|
middleware: "auth",
|
|
});
|
|
|
|
useHead({
|
|
title: "รายการคอร์ส - e-Learning",
|
|
});
|
|
|
|
// ==========================================
|
|
// 1. ตัวแปร State (สถานะของ UI)
|
|
// ==========================================
|
|
// showDetail: ควบคุมการแสดงผลหน้ารายละเอียดคอร์ส (true = แสดง, false = แสดงรายการ)
|
|
const showDetail = ref(false);
|
|
// searchQuery: เก็บคำค้นหาที่ผู้ใช้พิมพ์
|
|
const searchQuery = ref("");
|
|
// isCategoryOpen: ควบคุมการเปิด/ปิดเมนูหมวดหมู่ด้านข้าง
|
|
const isCategoryOpen = ref(true);
|
|
|
|
// ==========================================
|
|
// 2. ฟังก์ชันช่วยเหลือ (Helpers)
|
|
// ==========================================
|
|
// getLocalizedText: เลือกแสดงภาษาไทยหรืออังกฤษตามข้อมูลที่มี
|
|
// ถ้าเป็น object {th, en} จะพยายามหา th ก่อน, ถ้าไม่มีให้ใช้ en
|
|
const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
|
|
if (!text) return ''
|
|
if (typeof text === 'string') return text
|
|
return text.th || text.en || ''
|
|
}
|
|
|
|
// ==========================================
|
|
// 3. จัดการข้อมูลหมวดหมู่ (Categories)
|
|
// ==========================================
|
|
// ใช้ useCategory composable เพื่อดึงข้อมูลหมวดหมู่จาก API
|
|
const { fetchCategories } = useCategory();
|
|
const categories = ref<any[]>([]);
|
|
const showAllCategories = ref(false); // ควบคุมการแสดงหมวดหมู่ทั้งหมด (Show More/Less)
|
|
|
|
// ฟังก์ชันโหลดข้อมูลหมวดหมู่
|
|
const loadCategories = async () => {
|
|
const res = await fetchCategories();
|
|
if (res.success) {
|
|
categories.value = res.data || [];
|
|
}
|
|
};
|
|
|
|
// คำนวณหมวดหมู่ที่จะแสดงผล (ถ้ากด Show More จะแสดงทั้งหมด, ปกติแสดงแค่ 8 รายการ)
|
|
const visibleCategories = computed(() => {
|
|
return showAllCategories.value ? categories.value : categories.value.slice(0, 8);
|
|
});
|
|
|
|
// ==========================================
|
|
// 4. จัดการข้อมูลคอร์ส (Courses)
|
|
// ==========================================
|
|
// ใช้ useCourse composable สำหรับจัดการคอร์สเรียน (ดึงข้อมูล, ลงทะเบียน)
|
|
const { fetchCourses, fetchCourseById, enrollCourse } = useCourse();
|
|
const courses = ref<any[]>([]);
|
|
const isLoading = ref(false); // สถานะกำลังโหลดรายการคอร์ส
|
|
const selectedCourse = ref<any>(null); // คอร์สที่ถูกเลือกดูรายละเอียด
|
|
const isLoadingDetail = ref(false); // สถานะกำลังโหลดรายละเอียดคอร์ส
|
|
const isEnrolling = ref(false); // สถานะกำลังกดลงทะเบียน
|
|
|
|
// ฟังก์ชันโหลดข้อมูลคอร์สทั้งหมด
|
|
const loadCourses = async () => {
|
|
isLoading.value = true;
|
|
const res = await fetchCourses();
|
|
if (res.success) {
|
|
// แปลงข้อมูลเบื้องต้นสำหรับแสดงผลในการ์ด
|
|
courses.value = (res.data || []).map((c: any) => ({
|
|
...c,
|
|
rating: "0.0",
|
|
lessons: "0",
|
|
levelType: c.levelType || "neutral"
|
|
}));
|
|
}
|
|
isLoading.value = false;
|
|
};
|
|
|
|
// ฟังก์ชันเลือกคอร์สเพื่อดูรายละเอียด
|
|
const selectCourse = async (id: number) => {
|
|
isLoadingDetail.value = true;
|
|
selectedCourse.value = null;
|
|
showDetail.value = true; // เปลี่ยนหน้าเป็นแบบ Detail View
|
|
|
|
// ดึงข้อมูลรายละเอียดคอร์สจาก API โดยใช้ ID
|
|
const res = await fetchCourseById(id);
|
|
if (res.success) {
|
|
selectedCourse.value = res.data;
|
|
}
|
|
isLoadingDetail.value = false;
|
|
};
|
|
|
|
// ฟังก์ชันลงทะเบียนเรียน (Enroll)
|
|
const handleEnroll = async (id: number) => {
|
|
if (isEnrolling.value) return; // ป้องกันการกดรัว
|
|
isEnrolling.value = true;
|
|
|
|
const res = await enrollCourse(id);
|
|
|
|
if (res.success) {
|
|
// ถ้าสำเร็จ ให้เปลี่ยนหน้าไปที่ "คอร์สของฉัน" พร้อมส่ง parameter enrolled=true เพื่อแสดง popup
|
|
return navigateTo('/dashboard/my-courses?enrolled=true');
|
|
} else {
|
|
alert(res.error || 'Failed to enroll');
|
|
}
|
|
|
|
isEnrolling.value = false;
|
|
};
|
|
|
|
onMounted(() => {
|
|
// โหลดข้อมูลเมื่อหน้าเว็บเริ่มทำงาน
|
|
loadCategories();
|
|
loadCourses();
|
|
});
|
|
|
|
// Filter Logic based on search query
|
|
// ==========================================
|
|
// 5. ระบบกรองและค้นหา (Filter & Search)
|
|
// ==========================================
|
|
// selectedCategoryIds: เก็บ ID ของหมวดหมู่ที่ถูกติ๊กเลือก
|
|
const selectedCategoryIds = ref<number[]>([]);
|
|
|
|
// คำนวณคอร์สที่จะแสดงผลจริง (Filter Logic)
|
|
const filteredCourses = computed(() => {
|
|
let result = courses.value;
|
|
|
|
// 1. กรองตามหมวดหมู่ (Category Filter)
|
|
if (selectedCategoryIds.value.length > 0) {
|
|
result = result.filter(c => selectedCategoryIds.value.includes(c.category_id));
|
|
}
|
|
|
|
// 2. กรองตามคำค้นหา (Search Query) - ค้นหาจากชื่อหรือคำอธิบาย
|
|
if (searchQuery.value) {
|
|
const query = searchQuery.value.toLowerCase();
|
|
result = result.filter(
|
|
(c) => {
|
|
const title = getLocalizedText(c.title).toLowerCase();
|
|
const desc = getLocalizedText(c.description).toLowerCase();
|
|
return title.includes(query) || (desc && desc.includes(query));
|
|
}
|
|
);
|
|
}
|
|
|
|
return result;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- CATALOG VIEW: Browse courses -->
|
|
<div v-if="!showDetail">
|
|
<!-- Search & Filters Header -->
|
|
<div
|
|
class="flex justify-between items-center mb-6"
|
|
style="flex-wrap: wrap; gap: 16px"
|
|
>
|
|
<h1 class="text-[28px] font-bold text-slate-900 dark:text-white">
|
|
{{ $t('discovery.title') }}
|
|
</h1>
|
|
<div class="flex gap-3" style="flex-wrap: wrap">
|
|
<!-- Search Input -->
|
|
<div class="relative">
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800 placeholder:text-slate-500"
|
|
:placeholder="$t('discovery.searchPlaceholder')"
|
|
style="padding-left: 36px; width: 240px"
|
|
/>
|
|
</div>
|
|
<!-- Sorting Select -->
|
|
<select
|
|
class="input-field bg-white dark:bg-slate-800"
|
|
style="width: auto; color: #0f172a"
|
|
>
|
|
<option style="color: #0f172a">{{ $t('discovery.sortRecent') }}</option>
|
|
<option style="color: #0f172a">{{ $t('discovery.sortPopular') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Grid Layout -->
|
|
<div class="grid-12">
|
|
<!-- Sidebar Filters -->
|
|
<div class="col-span-3">
|
|
<div class="card">
|
|
<div class="mb-6">
|
|
<div
|
|
class="flex items-center justify-between mb-4 cursor-pointer"
|
|
@click="isCategoryOpen = !isCategoryOpen"
|
|
>
|
|
<h4 class="text-lg font-bold text-slate-900 dark:text-white">
|
|
{{ $t('discovery.categoryTitle') }} ({{ categories.length }})
|
|
</h4>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-5 w-5 text-slate-400 transition-transform duration-200"
|
|
:class="{ 'rotate-180': !isCategoryOpen }"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M5 15l7-7 7 7"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div v-show="isCategoryOpen" class="flex flex-col gap-1">
|
|
<div
|
|
v-for="cat in visibleCategories"
|
|
:key="cat.id"
|
|
class="flex items-center justify-between py-3 border-b border-slate-100 dark:border-slate-700/50 group cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 -mx-4 px-4 transition-colors"
|
|
>
|
|
<label
|
|
class="flex items-center gap-3 text-slate-700 dark:text-slate-300 cursor-pointer w-full"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
:value="cat.id"
|
|
v-model="selectedCategoryIds"
|
|
class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary"
|
|
/>
|
|
{{ getLocalizedText(cat.name) }}
|
|
</label>
|
|
</div>
|
|
<button
|
|
class="text-primary text-sm mt-4 font-medium hover:underline flex items-center gap-1"
|
|
@click="showAllCategories = !showAllCategories"
|
|
>
|
|
{{ showAllCategories ? $t('discovery.showLess') : $t('discovery.showMore') }}
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="h-4 w-4 transition-transform duration-200"
|
|
:class="{ 'rotate-180': showAllCategories }"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M19 9l-7 7-7-7"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Course List -->
|
|
<div class="col-span-9" style="min-width: 0">
|
|
<div class="course-grid">
|
|
<CourseCard
|
|
v-for="course in filteredCourses"
|
|
:key="course.id"
|
|
:title="course.title"
|
|
:price="course.price"
|
|
:description="course.description"
|
|
:rating="course.rating"
|
|
:lessons="course.lessons"
|
|
:image="course.thumbnail_url"
|
|
show-view-details
|
|
@view-details="selectCourse(course.id)"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div
|
|
v-if="filteredCourses.length === 0"
|
|
class="empty-state"
|
|
style="grid-column: 1 / -1"
|
|
>
|
|
<h3 class="empty-state-title">{{ $t('discovery.emptyTitle') }}</h3>
|
|
<p class="empty-state-description">
|
|
{{ $t('discovery.emptyDesc') }}
|
|
</p>
|
|
<button class="btn btn-secondary" @click="searchQuery = ''">
|
|
{{ $t('discovery.showAll') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Pagination / Load More -->
|
|
<div class="load-more-wrap">
|
|
<button
|
|
class="btn btn-secondary"
|
|
style="
|
|
border-color: #64748b;
|
|
color: white;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
"
|
|
>
|
|
{{ $t('discovery.loadMore') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
|
|
<div v-else>
|
|
<button
|
|
@click="showDetail = false"
|
|
class="btn btn-secondary mb-6 inline-flex items-center gap-2"
|
|
>
|
|
<span>←</span> {{ $t('discovery.backToCatalog') }}
|
|
</button>
|
|
|
|
<div v-if="isLoadingDetail" class="flex justify-center py-20">
|
|
<div class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="selectedCourse" class="grid-12">
|
|
<!-- Main Content (Left Column) -->
|
|
<div class="col-span-8">
|
|
<!-- Hero Video Placeholder -->
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
height: 400px;
|
|
background: var(--neutral-900);
|
|
border-radius: var(--radius-xl);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 24px;
|
|
position: relative;
|
|
border: 1px solid var(--border-color);
|
|
overflow: hidden;
|
|
"
|
|
>
|
|
<img
|
|
v-if="selectedCourse.thumbnail_url"
|
|
:src="selectedCourse.thumbnail_url"
|
|
class="absolute inset-0 w-full h-full object-cover opacity-50"
|
|
/>
|
|
<!-- Play Button -->
|
|
<div
|
|
class="relative z-10"
|
|
style="
|
|
width: 80px;
|
|
height: 80px;
|
|
background: var(--primary);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
|
"
|
|
>
|
|
<div
|
|
style="
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 15px solid transparent;
|
|
border-bottom: 15px solid transparent;
|
|
border-left: 25px solid white;
|
|
margin-left: 6px;
|
|
"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<h1 class="text-[32px] font-bold mb-4 text-slate-900 dark:text-white">
|
|
{{ getLocalizedText(selectedCourse.title) }}
|
|
</h1>
|
|
<p
|
|
class="text-slate-700 dark:text-slate-400 mb-6"
|
|
style="font-size: 1.1em; line-height: 1.7"
|
|
>
|
|
{{ getLocalizedText(selectedCourse.description) }}
|
|
</p>
|
|
|
|
<!-- Course Syllabus / Outline (Dynamic) -->
|
|
<div class="card" v-if="selectedCourse.chapters && selectedCourse.chapters.length > 0">
|
|
<h3 class="font-bold mb-4 text-slate-900 dark:text-white">
|
|
{{ $t('course.courseContent') }}
|
|
</h3>
|
|
<div v-for="chapter in selectedCourse.chapters" :key="chapter.id" class="mb-4">
|
|
<div
|
|
class="flex justify-between p-4 rounded mb-2"
|
|
style="background: #f3f4f6; border: 1px solid #e5e7eb"
|
|
>
|
|
<span class="font-bold text-slate-900 dark:text-slate-900"
|
|
>{{ getLocalizedText(chapter.title) }}</span
|
|
>
|
|
<span class="text-sm text-slate-600 dark:text-slate-400"
|
|
>{{ chapter.lessons ? chapter.lessons.length : 0 }} {{ $t('course.lessons') }}</span
|
|
>
|
|
</div>
|
|
<div style="padding-left: 16px" v-if="chapter.lessons">
|
|
<div
|
|
v-for="lesson in chapter.lessons"
|
|
:key="lesson.id"
|
|
class="flex justify-between py-2 border-b"
|
|
style="border-color: var(--neutral-100)"
|
|
>
|
|
<span class="text-sm text-slate-700 dark:text-slate-300">{{ getLocalizedText(lesson.title) }}</span>
|
|
<span class="text-sm text-slate-600 dark:text-slate-400"
|
|
>{{ lesson.duration_minutes || 0 }}:00</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar (Right Column): Sticky CTA -->
|
|
<div class="col-span-4">
|
|
<div class="card" style="position: sticky; top: 88px">
|
|
<div class="mb-6">
|
|
<span
|
|
class="text-sm text-slate-600 dark:text-slate-400"
|
|
style="text-decoration: line-through"
|
|
></span
|
|
>
|
|
<h2
|
|
class="text-primary font-bold"
|
|
style="font-size: 32px; margin: 0"
|
|
>
|
|
{{ selectedCourse.price || 'ฟรี' }}
|
|
</h2>
|
|
</div>
|
|
|
|
<button
|
|
@click="handleEnroll(selectedCourse.id)"
|
|
class="btn btn-primary w-full mb-4 text-white"
|
|
style="height: 48px; font-size: 16px"
|
|
:disabled="isEnrolling"
|
|
>
|
|
<span v-if="isEnrolling" class="spinner-border animate-spin inline-block w-4 h-4 border-2 rounded-full mr-2"></span>
|
|
{{ $t('course.enrollNow') }}
|
|
</button>
|
|
|
|
<div class="text-sm text-slate-600 dark:text-slate-400 mb-4">
|
|
<div
|
|
class="flex justify-between py-2 border-b"
|
|
style="border-color: var(--neutral-100)"
|
|
>
|
|
<span>{{ $t('course.certificate') }}</span>
|
|
<span class="font-bold">{{ selectedCourse.have_certificate ? $t('course.available') : '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|