307 lines
16 KiB
Vue
307 lines
16 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file discovery.vue
|
|
* @description Course Discovery / Catalog Page matching Figma Desktop Layout.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: "default",
|
|
middleware: "auth",
|
|
});
|
|
|
|
useHead({
|
|
title: "รายการคอร์ส - e-Learning",
|
|
});
|
|
|
|
const { t, locale } = useI18n();
|
|
const { currentUser } = useAuth();
|
|
const $q = useQuasar();
|
|
const { fetchCategories } = useCategory();
|
|
const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } = useCourse();
|
|
|
|
const showDetail = ref(false);
|
|
const searchQuery = ref("");
|
|
const activeCategory = ref<number | 'all'>('all');
|
|
const viewMode = ref<'grid' | 'list'>('grid');
|
|
const sortBy = ref('ยอดนิยม');
|
|
const sortOptions = ['ยอดนิยม', 'ล่าสุด', 'ราคาต่ำ-สูงสุด', 'ราคาสูง-ต่ำสุด'];
|
|
|
|
const categories = ref<any[]>([]);
|
|
const courses = ref<any[]>([]);
|
|
const selectedCourse = ref<any>(null);
|
|
|
|
const isLoading = ref(false);
|
|
const isLoadingDetail = ref(false);
|
|
const isEnrolling = ref(false);
|
|
|
|
const currentPage = ref(1);
|
|
const totalPages = ref(1);
|
|
const itemsPerPage = 12;
|
|
|
|
const getCategoryIcon = (name: any) => {
|
|
const text = getLocalizedText(name) || ''
|
|
if (text.includes('เว็บ') || text.includes('Web') || text.includes('โปรแกรม') || text.includes('Program') || text.includes('โค้ด')) return 'code'
|
|
if (text.includes('ออกแบบ') || text.includes('Design') || text.includes('UI')) return 'palette'
|
|
if (text.includes('ธุรกิจ') || text.includes('Business') || text.includes('การตลาด') || text.includes('Market')) return 'trending_up'
|
|
if (text.includes('ข้อมูล') || text.includes('Data') || text.includes('วิเคราะ') || text.includes('Sci')) return 'storage'
|
|
return 'category'
|
|
}
|
|
|
|
const formatPrice = (course: any) => {
|
|
if (course.is_free) return 'ฟรี';
|
|
if (!course.price) return 'ฟรี';
|
|
return `฿${parseFloat(course.price).toLocaleString()}`;
|
|
};
|
|
|
|
const getInstructorName = (course: any) => {
|
|
let user = null;
|
|
if (course.instructors && course.instructors.length > 0) {
|
|
const primary = course.instructors.find((i: any) => i.is_primary);
|
|
user = primary ? primary.user : course.instructors[0].user;
|
|
} else {
|
|
user = course.creator || course.instructor;
|
|
}
|
|
|
|
if (user?.profile?.first_name) {
|
|
return `${user.profile.first_name} ${user.profile.last_name || ''}`.trim();
|
|
}
|
|
if (user?.first_name) {
|
|
return `${user.first_name} ${user.last_name || ''}`.trim();
|
|
}
|
|
return user?.username || 'ผู้สอน';
|
|
};
|
|
|
|
const loadCategories = async () => {
|
|
const res = await fetchCategories();
|
|
if (res.success) categories.value = res.data || [];
|
|
};
|
|
|
|
const loadCourses = async (page = 1) => {
|
|
isLoading.value = true;
|
|
const categoryId = activeCategory.value === 'all' ? undefined : activeCategory.value as number;
|
|
|
|
const res = await fetchCourses({
|
|
category_id: categoryId,
|
|
search: searchQuery.value,
|
|
page: page,
|
|
limit: itemsPerPage,
|
|
forceRefresh: true,
|
|
});
|
|
|
|
if (res.success) {
|
|
courses.value = (res.data || []).map(c => {
|
|
const cat = categories.value.find(cat => cat.id === c.category_id);
|
|
return {
|
|
...c,
|
|
category_name: cat ? getLocalizedText(cat.name) : '',
|
|
instructor_name: getInstructorName(c),
|
|
formatted_price: formatPrice(c),
|
|
rating: c.rating || '4.9',
|
|
reviews_count: c.total_lessons ? c.total_lessons * 123 : Math.floor(Math.random() * 2000) + 100
|
|
}
|
|
});
|
|
totalPages.value = res.totalPages || 1;
|
|
currentPage.value = res.page || 1;
|
|
}
|
|
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) {
|
|
return navigateTo("/dashboard/my-courses?enrolled=true");
|
|
} else {
|
|
$q.notify({
|
|
type: "negative",
|
|
message: res.error || t("enrollment.error"),
|
|
position: "top",
|
|
timeout: 3000,
|
|
actions: [{ icon: "close", color: "white" }],
|
|
});
|
|
}
|
|
isEnrolling.value = false;
|
|
};
|
|
|
|
watch(
|
|
activeCategory,
|
|
() => {
|
|
currentPage.value = 1;
|
|
loadCourses(1);
|
|
}
|
|
);
|
|
|
|
onMounted(async () => {
|
|
await loadCategories();
|
|
|
|
// Check if category_id or course_id is in query
|
|
const route = useRoute();
|
|
if (route.query.category_id) {
|
|
activeCategory.value = Number(route.query.category_id);
|
|
}
|
|
|
|
await loadCourses(1);
|
|
|
|
if (route.query.course_id) {
|
|
selectCourse(Number(route.query.course_id));
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen p-4 md:p-8 transition-colors duration-300">
|
|
<div class="max-w-[1240px] mx-auto">
|
|
<!-- ส่วนของการค้นหาคอร์ส (Catalog View) -->
|
|
<div v-if="!showDetail" class="bg-white dark:bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-[0_2px_15px_rgb(0,0,0,0.02)] border border-slate-100 dark:border-slate-800 min-h-[500px] mb-12">
|
|
|
|
<!-- ส่วนหัวและการค้นหา -->
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
|
|
<h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">คอร์สเรียนทั้งหมด</h2>
|
|
<div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full md:w-auto">
|
|
<div class="relative w-full sm:w-[260px] flex-1">
|
|
<q-icon name="search" size="18px" class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-[#3B6BE8]" />
|
|
<input v-model="searchQuery" @keyup.enter="loadCourses(1)" class="w-full bg-slate-100 dark:bg-slate-800 border-none rounded-xl py-2.5 pl-11 pr-4 text-sm font-medium text-slate-700 dark:text-slate-200 placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500/20 outline-none transition-all shadow-sm" placeholder="ค้นหาคอร์ส..." />
|
|
</div>
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<button @click="viewMode = 'grid'" :class="viewMode === 'grid' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="grid_view" size="20px" /></button>
|
|
<button @click="viewMode = 'list'" :class="viewMode === 'list' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-[#3B6BE8]' : 'bg-white border-slate-200 dark:bg-slate-800 dark:border-slate-700 text-slate-400 hover:bg-slate-50'" class="w-[42px] h-[42px] flex items-center justify-center rounded-xl border transition-colors outline-none"><q-icon name="view_list" size="20px" /></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters Category -->
|
|
<div class="flex flex-col xl:flex-row xl:items-center justify-between gap-4 mb-10 w-full relative">
|
|
<!-- Figma Style: Separate pill buttons -->
|
|
<div class="flex flex-wrap items-center gap-3 w-full xl:w-auto">
|
|
<button
|
|
@click="activeCategory = 'all'"
|
|
:class="activeCategory === 'all' ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
|
|
class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none">
|
|
<q-icon name="check_circle_outline" size="18px" :class="activeCategory === 'all' ? 'text-[#3B6BE8]' : 'text-slate-400'"/> ทั้งหมด
|
|
</button>
|
|
|
|
<button
|
|
v-for="cat in categories" :key="cat.id"
|
|
@click="activeCategory = cat.id"
|
|
:class="activeCategory === cat.id ? 'bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] border-transparent font-bold' : 'bg-white dark:bg-transparent border-slate-200 dark:border-slate-700 text-slate-800 dark:text-slate-300 hover:border-slate-300 font-medium'"
|
|
class="px-5 py-2.5 rounded-full border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none bg-transparent">
|
|
<q-icon :name="getCategoryIcon(cat.name)" size="18px" :class="activeCategory === cat.id ? 'text-[#3B6BE8]' : 'text-slate-600 dark:text-slate-400'"/>
|
|
{{ getLocalizedText(cat.name) }}
|
|
</button>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Loader -->
|
|
<div v-if="isLoading" class="flex justify-center py-24">
|
|
<q-spinner size="3rem" color="primary" />
|
|
</div>
|
|
|
|
<div v-else-if="courses.length > 0">
|
|
<!-- GRID VIEW -->
|
|
<div v-if="viewMode === 'grid'" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
<div v-for="course in courses" :key="course.id" class="flex flex-col rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 overflow-hidden shadow-[0_2px_10px_rgb(0,0,0,0.03)] hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
|
|
<!-- Thumbnail -->
|
|
<div class="relative w-full aspect-[16/10] bg-slate-100 dark:bg-slate-800 overflow-hidden">
|
|
<img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
<div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
|
|
{{ course.category_name }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="p-5 flex flex-col flex-1">
|
|
<h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-2">{{ getLocalizedText(course.title) }}</h3>
|
|
|
|
|
|
|
|
<div class="mt-auto flex items-center justify-between">
|
|
<div class="font-[900] text-[18px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
|
|
{{ course.formatted_price }}
|
|
</div>
|
|
<!-- Eye icon circle button -->
|
|
<button class="w-[38px] h-[38px] rounded-full bg-slate-50 dark:bg-slate-800 text-slate-400 dark:text-slate-500 flex items-center justify-center hover:bg-blue-50 hover:text-blue-600 dark:hover:bg-slate-700 border border-slate-100 dark:border-slate-700 transition-colors shadow-sm outline-none">
|
|
<q-icon name="visibility" size="18px" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LIST VIEW -->
|
|
<div v-else class="flex flex-col gap-5">
|
|
<div v-for="course in courses" :key="course.id" class="flex flex-col sm:flex-row rounded-[1.5rem] bg-white dark:bg-slate-900 border border-slate-100 dark:border-slate-800 p-3 sm:p-4 gap-4 sm:gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="selectCourse(course.id)">
|
|
<div class="relative w-full sm:w-[260px] aspect-[16/10] sm:aspect-auto sm:h-[160px] rounded-[1rem] bg-slate-100 dark:bg-slate-800 overflow-hidden shrink-0">
|
|
<img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
|
<div v-if="course.category_name" class="absolute top-3 left-3 bg-white/95 dark:bg-slate-900/95 backdrop-blur-md text-[#3B6BE8] dark:text-blue-400 font-bold text-[10px] px-3.5 py-1.5 rounded-full shadow-sm" style="border-radius: 9999px; padding: 4px 12px;">
|
|
{{ course.category_name }}
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col flex-1 py-1">
|
|
<div class="flex-1">
|
|
<h3 class="font-bold text-slate-900 dark:text-white text-[16px] md:text-[18px] leading-snug line-clamp-2 md:line-clamp-1 mb-2">{{ getLocalizedText(course.title) }}</h3>
|
|
|
|
</div>
|
|
<div class="mt-4 sm:mt-auto flex items-center justify-between">
|
|
<div class="font-[900] text-[20px]" :class="course.is_free ? 'text-green-500' : 'text-[#2563EB] dark:text-blue-400'">
|
|
{{ course.formatted_price }}
|
|
</div>
|
|
<button class="px-6 py-2 rounded-full bg-slate-50 text-slate-600 dark:bg-slate-800 dark:text-slate-300 font-bold text-[13px] flex items-center gap-2 hover:bg-blue-50 border border-slate-100 dark:border-slate-700 hover:text-blue-600 transition-colors">
|
|
<q-icon name="visibility" size="16px" /> ดูรายละเอียด
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div v-if="totalPages > 1" class="flex justify-center pt-8 pb-4">
|
|
<q-pagination v-model="currentPage" :max="totalPages" :max-pages="6" boundary-numbers direction-links color="primary" flat active-design="unelevated" active-color="primary" @update:model-value="loadCourses"/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else class="flex flex-col items-center justify-center py-20 bg-white dark:bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800">
|
|
<q-icon name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t("discovery.emptyTitle") }}</h3>
|
|
<p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t("discovery.emptyDesc") }}</p>
|
|
<button class="mt-6 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''; activeCategory = 'all';">
|
|
{{ $t("discovery.showAll") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
|
|
<div v-else>
|
|
<button @click="showDetail = false" class="inline-flex items-center gap-2 text-slate-600 dark:text-white hover:text-blue-600 dark:hover:text-blue-300 mb-6 transition-all font-black text-lg md:text-xl group">
|
|
<q-icon name="arrow_back" size="24px" class="transition-transform group-hover:-translate-x-1" />
|
|
{{ $t("discovery.backToCatalog") }}
|
|
</button>
|
|
<div v-if="isLoadingDetail" class="flex justify-center py-20"><q-spinner size="3rem" color="primary" /></div>
|
|
<CourseDetailView v-else-if="selectedCourse" :course="selectedCourse" :user="currentUser" @back="showDetail = false" @enroll="handleEnroll"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Disable default scrollbar for filter container */
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|