467 lines
16 KiB
Vue
467 lines
16 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",
|
|
});
|
|
|
|
// UI State
|
|
const showDetail = ref(false);
|
|
const searchQuery = ref("");
|
|
const isCategoryOpen = ref(true);
|
|
|
|
// Helper to get localized text
|
|
const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
|
|
if (!text) return ''
|
|
if (typeof text === 'string') return text
|
|
return text.th || text.en || ''
|
|
}
|
|
|
|
// Categories Data
|
|
const { fetchCategories } = useCategory();
|
|
const categories = ref<any[]>([]);
|
|
const showAllCategories = ref(false);
|
|
|
|
const loadCategories = async () => {
|
|
const res = await fetchCategories();
|
|
if (res.success) {
|
|
categories.value = res.data || [];
|
|
}
|
|
};
|
|
|
|
const visibleCategories = computed(() => {
|
|
return showAllCategories.value ? categories.value : categories.value.slice(0, 8);
|
|
});
|
|
|
|
// Courses Data
|
|
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;
|
|
|
|
const res = await fetchCourseById(id);
|
|
if (res.success) {
|
|
selectedCourse.value = res.data;
|
|
}
|
|
isLoadingDetail.value = false;
|
|
};
|
|
|
|
const handleEnroll = async (id: number) => {
|
|
if (isEnrolling.value) return;
|
|
isEnrolling.value = true;
|
|
|
|
const res = await enrollCourse(id);
|
|
|
|
if (res.success) {
|
|
// Navigate to my-courses where the success modal will be shown
|
|
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
|
|
const filteredCourses = computed(() => {
|
|
if (!searchQuery.value) return courses.value;
|
|
const query = searchQuery.value.toLowerCase();
|
|
return courses.value.filter(
|
|
(c) => {
|
|
const title = getLocalizedText(c.title).toLowerCase();
|
|
const desc = getLocalizedText(c.description).toLowerCase();
|
|
return title.includes(query) || (desc && desc.includes(query));
|
|
}
|
|
);
|
|
});
|
|
</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"
|
|
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>
|
|
|
|
<!-- Learning Objectives -->
|
|
<div class="card mb-6">
|
|
<h3 class="font-bold mb-4 text-slate-900 dark:text-white">
|
|
{{ $t('course.whatYouWillLearn') }}
|
|
</h3>
|
|
<ul
|
|
class="grid-12"
|
|
style="grid-template-columns: 1fr 1fr; gap: 12px"
|
|
>
|
|
<li class="flex gap-2 text-sm text-slate-700 dark:text-slate-300">
|
|
<span style="color: var(--success)">✓</span> วิธีการวิจัยผู้ใช้
|
|
(User Research)
|
|
</li>
|
|
<li class="flex gap-2 text-sm text-slate-700 dark:text-slate-300">
|
|
<span style="color: var(--success)">✓</span>
|
|
การวาดโครงร่างและทำต้นแบบ
|
|
</li>
|
|
<li class="flex gap-2 text-sm text-slate-700 dark:text-slate-300">
|
|
<span style="color: var(--success)">✓</span> ระบบการออกแบบ
|
|
(Design Systems)
|
|
</li>
|
|
<li class="flex gap-2 text-sm text-slate-700 dark:text-slate-300">
|
|
<span style="color: var(--success)">✓</span> การทดสอบการใช้งาน
|
|
(Usability Testing)
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Course Syllabus / Outline -->
|
|
<div class="card">
|
|
<h3 class="font-bold mb-4 text-slate-900 dark:text-white">
|
|
{{ $t('course.courseContent') }}
|
|
</h3>
|
|
<!-- Chapter 1 -->
|
|
<div 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"
|
|
>01. {{ $t('course.introduction') }}</span
|
|
>
|
|
<span class="text-sm text-slate-600 dark:text-slate-400"
|
|
>3 {{ $t('course.lessons') }}</span
|
|
>
|
|
</div>
|
|
<div style="padding-left: 16px">
|
|
<div
|
|
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">1.1 การออกแบบ UX คืออะไร?</span>
|
|
<span class="text-sm text-slate-600 dark:text-slate-400"
|
|
>10:00</span
|
|
>
|
|
</div>
|
|
<div
|
|
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"
|
|
>1.2 กระบวนการคิดเชิงออกแบบ (Design Thinking)</span
|
|
>
|
|
<span class="text-sm text-slate-600 dark:text-slate-400"
|
|
>15:30</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>ระยะเวลา</span>
|
|
<span class="font-bold">4.5 ชั่วโมง</span>
|
|
</div>
|
|
<div
|
|
class="flex justify-between py-2 border-b"
|
|
style="border-color: var(--neutral-100)"
|
|
>
|
|
<span>{{ $t('course.certificate') }}</span>
|
|
<span class="font-bold">{{ $t('course.available') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|