feat: Implement initial e-learning platform frontend including landing page, course discovery, dashboard, and foundational UI components with i18n.
This commit is contained in:
supalerk-ar66
parent
5b9cf72046
commit
3a9da1007b
17 changed files with 1631 additions and 1524 deletions
|
|
@ -113,9 +113,9 @@ body {
|
|||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
a {
|
||||
/* a {
|
||||
text-decoration: none;
|
||||
color: #3b82f6;
|
||||
color: #2563eb;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +129,7 @@ a:hover {
|
|||
|
||||
.dark a:hover {
|
||||
color: #93c5fd;
|
||||
}
|
||||
} */
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
|
|
@ -645,9 +645,9 @@ ul {
|
|||
.rounded {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.border-b {
|
||||
/* .border-b {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
} */
|
||||
.load-more-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -102,20 +102,20 @@ watch(() => props.courseData, (newData) => {
|
|||
side="right"
|
||||
:width="300"
|
||||
:breakpoint="1024"
|
||||
class="bg-slate-50 dark:bg-slate-900 shadow-xl"
|
||||
class="bg-slate-50 dark:!bg-slate-900 shadow-xl"
|
||||
>
|
||||
<!-- Main Container: Enforce Column Layout and Full Width -->
|
||||
<div v-if="courseData" class="flex flex-col w-full h-full overflow-hidden text-slate-900 dark:text-white relative">
|
||||
<div v-if="courseData" class="flex flex-col w-full h-full overflow-hidden text-slate-900 dark:!text-white relative bg-slate-50 dark:!bg-slate-900">
|
||||
|
||||
<!-- 1. Header Section (Fixed at Top) -->
|
||||
<div class="flex-none p-5 border-b border-slate-200 dark:border-white/10 bg-white dark:bg-slate-900 z-10 w-full">
|
||||
<h2 class="text-sm font-bold mb-4 line-clamp-2 leading-snug block w-full">{{ getLocalizedText(courseData.course.title) }}</h2>
|
||||
<div class="flex-none p-5 border-b border-slate-200 dark:border-white/10 bg-white dark:!bg-slate-900 z-10 w-full">
|
||||
<h2 class="text-sm font-bold mb-4 line-clamp-2 leading-snug block w-full text-slate-900 dark:!text-white">{{ getLocalizedText(courseData.course.title) }}</h2>
|
||||
|
||||
<div class="flex justify-between items-center mb-2 w-full">
|
||||
<span class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ $t('course.progress') }}</span>
|
||||
<span class="text-sm font-black text-blue-600 dark:text-blue-400">{{ progressPercentage }}%</span>
|
||||
<span class="text-xs font-black uppercase tracking-widest text-slate-500 dark:!text-slate-400">{{ $t('course.progress') }}</span>
|
||||
<span class="text-sm font-black text-blue-600 dark:!text-blue-400">{{ progressPercentage }}%</span>
|
||||
</div>
|
||||
<div class="h-2 w-full bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
|
||||
<div class="h-2 w-full bg-slate-100 dark:!bg-slate-800 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-blue-600 dark:bg-blue-500 rounded-full transition-all duration-700 ease-out"
|
||||
:style="{ width: `${progressPercentage}%` }"
|
||||
|
|
@ -124,24 +124,24 @@ watch(() => props.courseData, (newData) => {
|
|||
</div>
|
||||
|
||||
<!-- 2. Curriculum List (Scrollable Area) -->
|
||||
<div class="flex-1 overflow-y-auto bg-slate-50 dark:bg-[#0f1219] w-full p-4 space-y-3">
|
||||
<div class="flex-1 overflow-y-auto bg-slate-50 dark:!bg-slate-900 w-full p-4 space-y-3">
|
||||
<q-list class="block w-full">
|
||||
<div v-for="(chapter, idx) in courseData.chapters" :key="chapter.id" class="block w-full mb-3">
|
||||
<!-- Chapter Accordion -->
|
||||
<q-expansion-item
|
||||
v-model="chapterOpenState[chapter.id]"
|
||||
class="bg-white dark:bg-[#1a1e29] rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-800 w-full"
|
||||
header-class="rounded-t-xl w-full"
|
||||
expand-icon-class="text-slate-400"
|
||||
class="bg-white dark:!bg-slate-800 rounded-xl overflow-hidden shadow-sm border border-slate-200 dark:border-slate-700 w-full"
|
||||
header-class="rounded-t-xl w-full text-slate-900 dark:!text-white"
|
||||
expand-icon-class="text-slate-400 dark:!text-slate-300"
|
||||
>
|
||||
<template v-slot:header>
|
||||
<div class="flex items-center w-full py-3 text-slate-900 dark:text-white">
|
||||
<div class="flex items-center w-full py-3 text-slate-900 dark:!text-white">
|
||||
<div class="mr-3 flex-shrink-0">
|
||||
<!-- Chapter Indicator (Check or Number) -->
|
||||
<div class="w-7 h-7 rounded-full border-2 flex items-center justify-center transition-colors font-bold"
|
||||
:class="chapterCompletionStatus[chapter.id]
|
||||
? 'border-green-500 text-green-500 bg-green-50 dark:bg-green-500/10'
|
||||
: 'border-slate-300 dark:border-slate-600 text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-800'">
|
||||
? 'border-green-500 text-green-500 bg-green-50 dark:!bg-green-500/10'
|
||||
: 'border-slate-300 dark:!border-slate-600 text-slate-500 dark:!text-slate-400 bg-slate-100 dark:!bg-slate-700'">
|
||||
<q-icon v-if="chapterCompletionStatus[chapter.id]" name="check" size="14px" class="font-bold" />
|
||||
<span v-else class="text-[10px]">{{ Number(idx) + 1 }}</span>
|
||||
</div>
|
||||
|
|
@ -149,7 +149,7 @@ watch(() => props.courseData, (newData) => {
|
|||
<!-- Explicitly handle text overflow -->
|
||||
<div class="flex-1 min-w-0 pr-2 overflow-hidden">
|
||||
<div class="font-bold text-sm leading-tight mb-0.5 truncate block w-full">{{ getLocalizedText(chapter.title) }}</div>
|
||||
<div class="text-[10px] text-slate-500 dark:text-slate-400 font-normal truncate block w-full">
|
||||
<div class="text-[10px] text-slate-500 dark:!text-slate-400 font-normal truncate block w-full">
|
||||
{{ chapter.lessons.length }} {{ $t('course.lessonsUnit') }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -157,13 +157,13 @@ watch(() => props.courseData, (newData) => {
|
|||
</template>
|
||||
|
||||
<!-- Lessons List -->
|
||||
<div class="bg-slate-50 dark:bg-[#0f1219]/50 border-t border-slate-100 dark:border-slate-800 w-full">
|
||||
<div class="bg-slate-50 dark:!bg-slate-800/50 border-t border-slate-100 dark:border-slate-700 w-full">
|
||||
<div
|
||||
v-for="(lesson, lIdx) in chapter.lessons"
|
||||
:key="lesson.id"
|
||||
class="flex items-center px-4 py-3 cursor-pointer transition-all border-l-4 hover:bg-slate-100 dark:hover:bg-slate-800/50 w-full"
|
||||
class="flex items-center px-4 py-3 cursor-pointer transition-all border-l-4 hover:bg-slate-100 dark:hover:!bg-slate-700/50 w-full"
|
||||
:class="currentLessonId === lesson.id
|
||||
? 'border-blue-600 bg-blue-50 dark:bg-blue-900/10'
|
||||
? 'border-blue-600 bg-blue-50 dark:!bg-blue-900/40'
|
||||
: 'border-transparent'"
|
||||
@click="!lesson.is_locked && emit('select-lesson', lesson.id)"
|
||||
>
|
||||
|
|
@ -178,13 +178,13 @@ watch(() => props.courseData, (newData) => {
|
|||
<!-- Active/Playing (If not completed) -->
|
||||
<q-icon v-else-if="currentLessonId === lesson.id"
|
||||
name="play_circle_filled"
|
||||
class="text-blue-600 dark:text-blue-400 animate-pulse"
|
||||
class="text-blue-600 dark:!text-blue-400 animate-pulse"
|
||||
size="20px"
|
||||
/>
|
||||
<!-- Locked -->
|
||||
<q-icon v-else-if="lesson.is_locked"
|
||||
name="lock"
|
||||
class="text-slate-400 opacity-70"
|
||||
class="text-slate-400 dark:!text-slate-500 opacity-70"
|
||||
size="18px"
|
||||
/>
|
||||
<!-- Not Started -->
|
||||
|
|
@ -193,7 +193,7 @@ watch(() => props.courseData, (newData) => {
|
|||
|
||||
<div class="flex-1 min-w-0 overflow-hidden">
|
||||
<div class="text-xs font-bold truncate leading-snug block w-full"
|
||||
:class="currentLessonId === lesson.id ? 'text-blue-700 dark:text-blue-300' : 'text-slate-600 dark:text-slate-300'"
|
||||
:class="currentLessonId === lesson.id ? 'text-blue-700 dark:!text-blue-300' : 'text-slate-600 dark:!text-slate-300'"
|
||||
>
|
||||
{{ getLocalizedText(lesson.title) }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -66,11 +66,6 @@ const instructorData = computed(() => {
|
|||
|
||||
<template>
|
||||
<div class="animate-fade-in-up">
|
||||
<div class="flex items-center gap-2 mb-8 group cursor-pointer" @click="emit('back')">
|
||||
<q-icon name="arrow_back" size="20px" class="text-slate-400 group-hover:text-blue-600 transition-colors" />
|
||||
<span class="text-sm font-bold text-slate-500 group-hover:text-blue-600 transition-colors uppercase tracking-widest">{{ $t('common.back') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Left: Content Detail -->
|
||||
<div class="lg:col-span-2 space-y-8">
|
||||
|
|
|
|||
|
|
@ -1,168 +1,116 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file AppHeader.vue
|
||||
* @description The main header for the authenticated application dashboard.
|
||||
* Uses Quasar QToolbar.
|
||||
* @description The main header for the EduLearn application dashboard.
|
||||
*/
|
||||
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
/** Controls visibility of the sidebar toggle button */
|
||||
showSidebarToggle?: boolean;
|
||||
/** Type of navigation links to display */
|
||||
navType?: "public" | "learner";
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
/** Emitted when the hamburger menu is clicked */
|
||||
toggleSidebar: [];
|
||||
/** Emitted when the mobile menu toggle is clicked */
|
||||
toggleRightDrawer: [];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const route = useRoute();
|
||||
|
||||
// Automatically determine navType based on route if not explicitly passed
|
||||
const navTypeComputed = computed(() => {
|
||||
if (props.navType) return props.navType;
|
||||
// Show learner nav for dashboard, browse, classroom, and course details
|
||||
const learnerRoutes = ["/dashboard", "/browse", "/classroom", "/course"];
|
||||
return learnerRoutes.some((r) => route.path.startsWith(r))
|
||||
? "learner"
|
||||
: "public";
|
||||
});
|
||||
const { currentUser } = useAuth();
|
||||
const { locale, setLocale } = useI18n();
|
||||
const { isDark, set: setTheme } = useThemeMode();
|
||||
|
||||
const toggleLanguage = () => {
|
||||
setLocale(locale.value === 'th' ? 'en' : 'th');
|
||||
};
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(!isDark.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-toolbar class="bg-white dark:!bg-[#0f172a] text-slate-900 dark:!text-white h-16 border-none p-0 overflow-visible">
|
||||
<div class="w-full px-4 md:px-12 flex items-center h-full no-wrap relative">
|
||||
<q-toolbar class="bg-white dark:!bg-[#020617] text-slate-900 dark:!text-white h-20 border-b border-slate-50 dark:border-slate-800/50 px-6">
|
||||
|
||||
<!-- Left: Hamburger Toggle -->
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
class="text-slate-400 hover:text-blue-600 transition-colors"
|
||||
size="16px"
|
||||
@click="$emit('toggleSidebar')"
|
||||
/>
|
||||
|
||||
<q-space />
|
||||
|
||||
<!-- Right Section -->
|
||||
<div class="flex items-center gap-2 sm:gap-4 md:gap-6 no-wrap">
|
||||
|
||||
<!-- Mobile Sidebar Toggle (For non-learner routes) -->
|
||||
<!-- Theme Toggle -->
|
||||
<q-btn
|
||||
v-if="showSidebarToggle !== false && navTypeComputed !== 'learner' && $q.screen.lt.md"
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
class="mr-2 text-gray-500"
|
||||
@click="$emit('toggleSidebar')"
|
||||
/>
|
||||
|
||||
<!-- Branding: Logo + Name -->
|
||||
<div
|
||||
class="flex items-center gap-3 cursor-pointer group flex-shrink-0"
|
||||
@click="navigateTo('/dashboard')"
|
||||
:icon="isDark ? 'dark_mode' : 'light_mode'"
|
||||
:class="isDark ? 'text-blue-400' : 'text-amber-500'"
|
||||
class="transition-all active:scale-90"
|
||||
size="12px"
|
||||
@click="toggleTheme"
|
||||
>
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform flex-shrink-0">
|
||||
E
|
||||
<q-tooltip>{{ isDark ? 'โหมดกลางคืน' : 'โหมดกลางวัน' }}</q-tooltip>
|
||||
</q-btn>
|
||||
|
||||
<!-- Language Switcher (Pill Style) -->
|
||||
<div
|
||||
@click="toggleLanguage"
|
||||
class="flex items-center bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 rounded-xl p-0.5 sm:p-1 cursor-pointer hover:bg-slate-100 transition-all font-bold text-[11px] sm:text-[13px] select-none"
|
||||
>
|
||||
<div :class="locale === 'th' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">TH</div>
|
||||
<div class="w-[1px] h-3 bg-slate-200 dark:bg-slate-700 mx-0.5"></div>
|
||||
<div :class="locale === 'en' ? 'bg-white dark:bg-slate-700 shadow-sm text-blue-600' : 'text-slate-400'" class="px-2 sm:px-3 py-1 rounded-lg transition-all">EN</div>
|
||||
</div>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="hidden sm:block w-[1px] h-8 bg-slate-100 dark:bg-slate-800"></div>
|
||||
|
||||
<!-- ส่วนข้อมูลผู้ใช้งาน (User Profile) -->
|
||||
<div class="flex items-center gap-3 cursor-pointer group" @click="navigateTo('/dashboard/profile')">
|
||||
<!-- ชื่อและบทบาท (แสดงเฉพาะบนจอที่ใหญ่กว่า 600px) -->
|
||||
<div class="user-info-text flex flex-col items-end text-right">
|
||||
<span class="text-[15px] font-bold text-slate-900 dark:text-white leading-tight">
|
||||
{{ currentUser?.firstName || 'User' }} {{ currentUser?.lastName || '' }}
|
||||
</span>
|
||||
<span class="text-[11px] text-slate-500 font-medium">{{ $t('common.student') }}</span>
|
||||
</div>
|
||||
<div class="flex flex-col text-left">
|
||||
<span class="font-black text-[15px] md:text-lg leading-none tracking-tight text-slate-900 dark:text-white group-hover:text-blue-600 transition-colors">E-Learning</span>
|
||||
<span class="text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
|
||||
|
||||
<!-- รูปโปรไฟล์พร้อมวงแหวน Gradient นุ่มนวล -->
|
||||
<div class="relative p-[3px] rounded-full bg-gradient-to-tr from-[#FFD1D1] via-[#E2E8FF] to-[#D1F7FF] dark:from-slate-800 dark:to-slate-700 transition-transform group-hover:scale-105">
|
||||
<div class="bg-white dark:bg-[#020617] p-[1.5px] rounded-full shadow-sm">
|
||||
<UserAvatar
|
||||
:photoURL="currentUser?.photoURL"
|
||||
:firstName="currentUser?.firstName"
|
||||
:lastName="currentUser?.lastName"
|
||||
size="40"
|
||||
class="w-[40px] h-[40px]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="header-desktop items-center gap-6 lg:gap-8 text-[14px] font-bold ml-12 flex-shrink-0 h-full">
|
||||
<NuxtLink to="/dashboard" class="nav-link" exact-active-class="active">{{ $t("sidebar.overview") }}</NuxtLink>
|
||||
<NuxtLink to="/browse/discovery" class="nav-link" active-class="active">{{ $t("landing.allCourses") }}</NuxtLink>
|
||||
<NuxtLink to="/dashboard/my-courses" class="nav-link" exact-active-class="active">{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }}</NuxtLink>
|
||||
</nav>
|
||||
|
||||
<q-space />
|
||||
|
||||
<!-- Right Section: Tools -->
|
||||
<div class="flex items-center gap-2 flex-shrink-0 no-wrap">
|
||||
|
||||
<!-- Desktop Only Tools -->
|
||||
<div class="header-desktop items-center gap-4 flex-shrink-0">
|
||||
<LanguageSwitcher />
|
||||
<UserMenu />
|
||||
</div>
|
||||
|
||||
<!-- Mobile/Tablet Tools Hidden (Moved to Drawer) -->
|
||||
<!-- Just keep space between logo and hamburger -->
|
||||
|
||||
<!-- Mobile/Tablet Hamburger -->
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
class="header-mobile text-slate-700 dark:text-white bg-slate-100 dark:bg-slate-800 flex-shrink-0"
|
||||
style="width: 40px; height: 40px; min-width: 40px;"
|
||||
@click="$emit('toggleRightDrawer')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* High Priority Visibility Logic */
|
||||
@media (max-width: 1023px) {
|
||||
.header-desktop {
|
||||
/* Ensure toolbar height is consistent */
|
||||
:deep(.q-toolbar) {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* Hide user name only on small mobile screens */
|
||||
@media (max-width: 600px) {
|
||||
.user-info-text {
|
||||
display: none !important;
|
||||
}
|
||||
.header-mobile {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.header-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
.header-desktop {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: #64748b; /* slate-500 */
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: #2563eb; /* blue-600 */
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: #2563eb; /* blue-600 */
|
||||
}
|
||||
|
||||
.nav-link::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
background-color: #2563eb;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.router-link-active {
|
||||
color: #2563eb !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,79 +1,145 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file AppSidebar.vue
|
||||
* @description Sidebar navigation for the authenticated dashboard.
|
||||
* Uses Quasar QList for structure.
|
||||
* @description เมนูด้านข้างสำหรับการนำทาง (Sidebar Navigation)
|
||||
*/
|
||||
|
||||
const { sidebarItems } = useNavItems()
|
||||
// 1. นำเข้า Composables และไลบรารี
|
||||
import { useQuasar } from 'quasar'
|
||||
const { t } = useI18n()
|
||||
const navItems = sidebarItems
|
||||
const route = useRoute()
|
||||
const $q = useQuasar()
|
||||
const { logout } = useAuth()
|
||||
const { isDark } = useThemeMode()
|
||||
|
||||
// 2. กำหนดข้อมูลเมนูหลัก (Main Navigation)
|
||||
const menuItems = computed(() => [
|
||||
{ to: '/dashboard', icon: 'grid_view', label: t('sidebar.overview') },
|
||||
{ to: '/dashboard/my-courses', icon: 'book', label: t('sidebar.myCourses') }
|
||||
])
|
||||
|
||||
const handleNavigate = (path: string) => {
|
||||
if (import.meta.client) {
|
||||
window.location.href = path
|
||||
}
|
||||
// 3. กำหนดข้อมูลเมนูบัญชี (Account Navigation)
|
||||
const accountItems = computed(() => [
|
||||
{ to: '/dashboard/profile', icon: 'settings', label: t('userMenu.settings') }
|
||||
])
|
||||
|
||||
// 4. ฟังก์ชันการออกจากระบบ (Logout Function)
|
||||
const handleLogout = () => {
|
||||
$q.dialog({
|
||||
title: t('auth.logoutConfirmTitle'),
|
||||
message: t('auth.logoutConfirmMessage'),
|
||||
cancel: {
|
||||
flat: true,
|
||||
color: isDark.value ? 'grey-4' : 'grey-7',
|
||||
label: t('common.cancel')
|
||||
},
|
||||
ok: {
|
||||
flat: false,
|
||||
color: 'red-500',
|
||||
label: t('auth.logout'),
|
||||
unelevated: true
|
||||
},
|
||||
dark: isDark.value,
|
||||
class: 'p-4 rounded-2xl text-slate-900 dark:text-white',
|
||||
persistent: true
|
||||
}).onOk(async () => {
|
||||
await logout()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col h-full bg-transparent border-r border-slate-200 dark:border-slate-800">
|
||||
<div class="flex flex-col h-full bg-white dark:!bg-[#04091a] px-4 py-6 border-r border-slate-100 dark:border-slate-800">
|
||||
|
||||
<!-- Logo Section -->
|
||||
<div class="flex items-center gap-3 px-2 mb-10 transition-transform active:scale-95 cursor-pointer" @click="navigateTo('/dashboard')">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-lg shadow-blue-500/20">
|
||||
<q-icon name="school" color="white" size="24px" />
|
||||
</div>
|
||||
<span class="text-[22px] font-black tracking-tight text-slate-800 dark:text-white">EduLearn</span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Items -->
|
||||
<q-list padding class="text-slate-600 dark:text-slate-400 flex-grow px-3 pt-6">
|
||||
<q-item
|
||||
v-for="item in navItems"
|
||||
<!-- Main Navigation -->
|
||||
<div class="space-y-1 mb-8">
|
||||
<NuxtLink
|
||||
v-for="item in menuItems"
|
||||
:key="item.to"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="handleNavigate(item.to)"
|
||||
class="rounded-xl mb-1 text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-white/5"
|
||||
:class="{ 'sidebar-item--active': $route.path === item.to || ($route.path === '/dashboard' && item.to === '/dashboard') }"
|
||||
:to="item.to"
|
||||
class="flex items-center gap-4 px-4 py-3 rounded-2xl transition-all group relative nav-item"
|
||||
:class="route.path === item.to ? 'active' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-200'"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="item.icon" size="22px" />
|
||||
</q-item-section>
|
||||
<q-icon :name="item.icon" size="24px" class="transition-colors" />
|
||||
<span class="font-bold text-[15px]">{{ item.label }}</span>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label class="font-bold text-sm">{{ $t(item.labelKey) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
<!-- Active Indicator -->
|
||||
<div v-if="route.path === item.to" class="absolute left-0 top-1/2 -translate-y-1/2 w-1.5 h-6 bg-blue-600 rounded-r-full shadow-[2px_0_8px_rgba(37,99,235,0.4)]"></div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Account Section -->
|
||||
<div class="px-4 mb-4">
|
||||
<span class="text-[12px] font-bold text-slate-400 uppercase tracking-widest">{{ $t('sidebar.accountGroup') }}</span>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<NuxtLink
|
||||
v-for="item in accountItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="flex items-center gap-4 px-4 py-3 rounded-2xl transition-all group nav-item"
|
||||
:class="route.path === item.to ? 'active' : 'text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-200'"
|
||||
>
|
||||
<q-icon :name="item.icon" size="24px" />
|
||||
<span class="font-bold text-[15px]">{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Logout Button -->
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="w-full flex items-center gap-4 px-4 py-3 rounded-2xl transition-all text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 font-bold text-[15px] group"
|
||||
>
|
||||
<q-icon name="logout" size="24px" class="group-hover:translate-x-1 transition-transform" />
|
||||
<span>{{ $t('userMenu.logout') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
||||
<!-- Promo Card -->
|
||||
<div class="mt-auto p-5 rounded-[2rem] bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 relative overflow-hidden group">
|
||||
<div class="relative z-10">
|
||||
<h4 class="font-black text-slate-800 dark:text-white text-sm mb-1">{{ $t('sidebar.promoTitle') }}</h4>
|
||||
<p class="text-[11px] text-slate-500 dark:text-slate-400 mb-4">{{ $t('sidebar.promoSubtitle') }}</p>
|
||||
<q-btn
|
||||
unelevated
|
||||
class="full-width rounded-xl bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 no-caps transition-all active:scale-95 text-xs shadow-md shadow-blue-500/20"
|
||||
@click="navigateTo('/browse/discovery')"
|
||||
>
|
||||
{{ $t('sidebar.learnMore') }}
|
||||
</q-btn>
|
||||
</div>
|
||||
|
||||
<!-- Subtle background decoration -->
|
||||
<div class="absolute -right-2 -bottom-2 w-16 h-16 bg-blue-500/5 rounded-full blur-xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-item--active {
|
||||
background: #eff6ff !important; /* blue-50 */
|
||||
color: #1d4ed8 !important; /* blue-700 */
|
||||
position: relative;
|
||||
.nav-item.active {
|
||||
background: #EFF6FF;
|
||||
color: #2563EB;
|
||||
}
|
||||
|
||||
.sidebar-item--active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 15%;
|
||||
height: 70%;
|
||||
width: 4px;
|
||||
background: #2563eb;
|
||||
border-radius: 0 4px 4px 0;
|
||||
.dark .nav-item.active {
|
||||
background: rgba(37,99,235,0.1);
|
||||
color: #60A5FA;
|
||||
}
|
||||
|
||||
/* Dark Mode Active State Enhancement */
|
||||
.dark .sidebar-item--active {
|
||||
background: rgba(59, 130, 246, 0.12) !important;
|
||||
color: #60a5fa !important; /* blue-400 */
|
||||
.nav-item.active .q-icon {
|
||||
color: #2563EB;
|
||||
}
|
||||
|
||||
.dark .sidebar-item--active .q-icon {
|
||||
color: #60a5fa !important; /* blue-400 */
|
||||
}
|
||||
|
||||
.dark .sidebar-item--active::before {
|
||||
background: #3b82f6;
|
||||
.dark .nav-item.active .q-icon {
|
||||
color: #60A5FA;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,30 +6,34 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="bg-slate-50 pt-16 pb-8 border-t border-slate-200">
|
||||
<footer class="bg-white pt-16 pb-8 border-t border-slate-200">
|
||||
<div class="container mx-auto px-6 md:px-12">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12 text-left">
|
||||
<!-- Brand -->
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 shrink-0">
|
||||
E
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-black text-lg leading-none tracking-tight text-slate-900">E-Learning</span>
|
||||
<span class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 text-slate-500">Platform</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-slate-500 text-sm leading-relaxed max-w-xs">
|
||||
แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
|
||||
</p>
|
||||
<NuxtLink to="/" class="flex items-center gap-3 group">
|
||||
<div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<q-icon name="o_school" size="24px" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-bold text-lg leading-none tracking-tight transition-colors text-slate-900">
|
||||
EduLearn
|
||||
</span>
|
||||
<span class="text-[10px] text-slate-500 font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors">
|
||||
Platform
|
||||
</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<p class="text-slate-500 text-sm leading-relaxed max-w-xs">
|
||||
แพลตฟอร์มการเรียนรู้ออนไลน์ที่มุ่งเน้นการพัฒนาทักษะดิจิทัลสำหรับคนรุ่นใหม่ เรียนรู้ได้ทุกที่ ทุกเวลา กับผู้เชี่ยวชาญตัวจริง
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="lg:pl-8">
|
||||
<h4 class="font-bold text-slate-900 mb-6 text-base">คอร์สเรียน</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-500">
|
||||
<li><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
|
||||
<h4 class="font-bold text-slate-900 mb-6 text-base tracking-tight">คอร์สเรียน</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
|
||||
<li class=""><NuxtLink to="/browse" class="hover:text-blue-600 transition-colors inline-block">คอร์สทั้งหมด</NuxtLink></li>
|
||||
<li><NuxtLink to="/browse/recommended" class="hover:text-blue-600 transition-colors inline-block">คอร์สแนะนำ</NuxtLink></li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">โปรโมชั่น</a></li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">สำหรับองค์กร</a></li>
|
||||
|
|
@ -39,7 +43,7 @@
|
|||
<!-- Support -->
|
||||
<div>
|
||||
<h4 class="font-bold text-slate-900 mb-6 text-base">ช่วยเหลือ</h4>
|
||||
<ul class="space-y-3 text-sm text-slate-500">
|
||||
<ul class="space-y-3 text-sm text-slate-500 flex flex-col gap-2">
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">คำถามที่พบบ่อย (FAQ)</a></li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">วิธีการใช้งาน</a></li>
|
||||
<li><a href="#" class="hover:text-blue-600 transition-colors inline-block">เงื่อนไขการใช้งาน</a></li>
|
||||
|
|
@ -53,11 +57,9 @@
|
|||
<div class="flex flex-col gap-5">
|
||||
<!-- Location -->
|
||||
<div class="flex flex-row items-start gap-4 flex-nowrap">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
|
||||
<q-icon name="location_on" size="20px" />
|
||||
</div>
|
||||
<q-icon name="o_location_on" size="20px" color="slate-800" />
|
||||
<div class="flex flex-col gap-1 min-w-0">
|
||||
<span class="font-bold text-slate-900 text-sm leading-tight pt-1">Bronco Hourse</span>
|
||||
<span class="font-semibold text-slate-800 text-sm leading-tight">Bronco Hourse</span>
|
||||
<p class="text-slate-500 text-[11px] leading-relaxed">
|
||||
74/2 Wiang Kaew Road, Tambon Si Phum, Amphoe Mueang Chiang Mai, Chang Wat Chiang Mai 50200
|
||||
</p>
|
||||
|
|
@ -66,20 +68,16 @@
|
|||
|
||||
<!-- Phone -->
|
||||
<div class="flex flex-row items-center gap-4 flex-nowrap">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
|
||||
<q-icon name="phone" size="18px" />
|
||||
</div>
|
||||
<a href="tel:052-076-025" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
<q-icon name="o_phone" size="18px" color="slate-800" />
|
||||
<a href="tel:052-076-025" class="font-semibold text-slate-800 text-sm hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
052-076-025
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="flex flex-row items-center gap-4 flex-nowrap">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center shrink-0 text-blue-600 shadow-sm">
|
||||
<q-icon name="email" size="18px" />
|
||||
</div>
|
||||
<a href="mailto:info@chamomind.com" class="text-slate-600 hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
<q-icon name="o_email" size="18px" color="slate-800" />
|
||||
<a href="mailto:info@chamomind.com" class="font-semibold text-slate-800 text-sm hover:text-blue-600 font-semibold text-sm transition-colors truncate">
|
||||
info@chamomind.com
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
* Features a transparent background that becomes solid/glass upon scrolling.
|
||||
* Responsive: Collapses into a drawer on mobile (md breakpoint).
|
||||
*/
|
||||
const text = ref('');
|
||||
|
||||
// Track scrolling state to adjust header styling
|
||||
const isScrolled = ref(false)
|
||||
|
|
@ -41,24 +42,24 @@ onUnmounted(() => {
|
|||
- Transitions between transparent and glass effect based on scroll.
|
||||
-->
|
||||
<header
|
||||
class="fixed top-0 left-0 right-0 z-[100] transition-all duration-300"
|
||||
:class="[isScrolled ? 'h-16 glass-nav shadow-lg' : 'h-24 bg-transparent']"
|
||||
class="fixed top-0 left-0 right-0 z-[100] transition-all"
|
||||
:class="[isScrolled ? 'h-20 glass-nav shadow-lg' : 'h-20 bg-transparent duration-300 border-b border-b-grey-7 ']"
|
||||
>
|
||||
<div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-start">
|
||||
<div class="container mx-auto px-6 md:px-12 h-full flex items-center justify-between">
|
||||
<!-- Left Section: Logo -->
|
||||
<NuxtLink to="/" class="flex items-center gap-3 group">
|
||||
<div class="bg-blue-600 text-white font-black rounded-xl w-10 h-10 flex items-center justify-center shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform">
|
||||
E
|
||||
<div class="bg-blue-600 text-white font-black rounded-full px-6 w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<q-icon name="o_school" size="24px" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
class="font-black text-lg leading-none tracking-tight transition-colors"
|
||||
class="font-bold text-lg leading-none tracking-tight transition-colors"
|
||||
:class="[isScrolled ? 'text-white' : 'text-slate-900 group-hover:text-blue-600']"
|
||||
>
|
||||
E-Learning
|
||||
EduLearn
|
||||
</span>
|
||||
<span
|
||||
class="text-[10px] font-bold uppercase tracking-[0.2em] leading-none mt-1 transition-colors"
|
||||
class="text-[10px] font-semibold uppercase tracking-[0.4em] leading-none mt-0.5 transition-colors"
|
||||
:class="[isScrolled ? 'text-slate-400' : 'text-slate-500']"
|
||||
>
|
||||
Platform
|
||||
|
|
@ -67,11 +68,11 @@ onUnmounted(() => {
|
|||
</NuxtLink>
|
||||
|
||||
<!-- Desktop Navigation (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
|
||||
<nav class="flex desktop-nav items-center gap-8 text-sm font-bold ml-12">
|
||||
<!-- <nav class="flex desktop-nav items-center gap-8 text-[16px] font-medium">
|
||||
<NuxtLink
|
||||
to="/browse"
|
||||
class="transition-colors relative group py-2"
|
||||
:class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
|
||||
:class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 hover:text-blue-600']"
|
||||
>
|
||||
{{ $t('sidebar.onlineCourses') }}
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
|
||||
|
|
@ -79,21 +80,32 @@ onUnmounted(() => {
|
|||
<NuxtLink
|
||||
to="/browse/recommended"
|
||||
class="transition-colors relative group py-2"
|
||||
:class="[isScrolled ? 'text-slate-300 hover:text-white' : 'text-slate-600 hover:text-blue-600']"
|
||||
:class="[isScrolled ? 'text-white hover:text-white' : 'text-grey-8 hover:text-blue-600']"
|
||||
>
|
||||
{{ $t('sidebar.recommendedCourses') }}
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-blue-600 transition-all group-hover:w-full"/>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</nav> -->
|
||||
|
||||
|
||||
|
||||
<!-- Desktop Action Buttons (Visible by default, hidden on mobile via CSS 'desktop-nav') -->
|
||||
<div class="flex desktop-nav items-center gap-4 ml-auto">
|
||||
<div class="flex desktop-nav items-center gap-4">
|
||||
<q-input v-model="text" label="ค้นหาคอร์สเรียน..." rounded
|
||||
standout="bg-black text-white"
|
||||
:dark="isScrolled ? true : false"
|
||||
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" class="pl-3" color="grey-6"/>
|
||||
</template>
|
||||
</q-input>
|
||||
<template v-if="!isAuthenticated">
|
||||
<!-- Login Button -->
|
||||
<NuxtLink
|
||||
to="/auth/login"
|
||||
class="px-6 py-2.5 rounded-xl font-bold text-sm border-2 transition-all hover:-translate-y-0.5"
|
||||
:class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-blue-100 text-blue-600 bg-blue-50 hover:bg-blue-100 hover:border-blue-200']"
|
||||
class="px-5 py-4 rounded-full text-slate-700 font-semibold text-sm transition-all hover:-translate-y-0.5"
|
||||
:class="[isScrolled ? 'border-white/20 text-white hover:bg-white/10' : 'border-white text-grey-9 bg-white hover:bg-blue-100 hover:border-blue-200']"
|
||||
>
|
||||
{{ $t('auth.login') }}
|
||||
</NuxtLink>
|
||||
|
|
@ -101,7 +113,7 @@ onUnmounted(() => {
|
|||
<!-- Register Button -->
|
||||
<NuxtLink
|
||||
to="/auth/register"
|
||||
class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
|
||||
class="px-5 py-4 rounded-full bg-blue-600 text-white font-semibold text-sm hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
|
||||
>
|
||||
{{ $t('auth.getStarted') }}
|
||||
</NuxtLink>
|
||||
|
|
@ -110,7 +122,7 @@ onUnmounted(() => {
|
|||
<template v-else>
|
||||
<NuxtLink
|
||||
to="/dashboard"
|
||||
class="px-6 py-2.5 rounded-xl font-bold text-sm text-white bg-gradient-to-br from-blue-600 to-indigo-600 shadow-lg shadow-blue-600/20 hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
|
||||
class="bg-blue-600 text-white font-semibold text-sm px-5 py-4 rounded-full hover:shadow-blue-600/40 hover:-translate-y-0.5 transition-all"
|
||||
>
|
||||
{{ $t('landing.goToDashboard') }}
|
||||
</NuxtLink>
|
||||
|
|
|
|||
|
|
@ -7,26 +7,20 @@ export const CATEGORY_CARDS = [
|
|||
{
|
||||
title: 'โปรแกรมมิ่ง',
|
||||
desc: 'เชี่ยวชาญการเขียนโค้ดและพัฒนาซอฟต์แวร์',
|
||||
icon: 'code',
|
||||
icon: 'o_code',
|
||||
slug: 'programming',
|
||||
iconColor: 'text-blue-600',
|
||||
iconBg: 'bg-blue-600/5'
|
||||
},
|
||||
{
|
||||
title: 'การออกแบบ',
|
||||
desc: 'ทักษะ UI/UX และการออกแบบระดับมือโปร',
|
||||
icon: 'palette',
|
||||
icon: 'o_palette',
|
||||
slug: 'design',
|
||||
iconColor: 'text-indigo-600',
|
||||
iconBg: 'bg-indigo-600/5'
|
||||
},
|
||||
{
|
||||
title: 'ธุรกิจ',
|
||||
desc: 'ทักษะการจัดการและความเป็นผู้นำสากล',
|
||||
icon: 'business_center',
|
||||
icon: 'o_business_center',
|
||||
slug: 'business',
|
||||
iconColor: 'text-blue-700',
|
||||
iconBg: 'bg-blue-700/5'
|
||||
}
|
||||
]
|
||||
|
||||
|
|
@ -34,22 +28,16 @@ export const WHY_CHOOSE_US = [
|
|||
{
|
||||
title: 'ผู้สอนเชี่ยวชาญ',
|
||||
desc: 'เรียนรู้จากผู้นำในอุตสาหกรรมที่มีประสบการณ์การทำงานหลายปีในบริษัทเทคโนโลยีชั้นนำระดับโลก',
|
||||
icon: 'groups',
|
||||
iconBg: 'bg-blue-600/10',
|
||||
iconColor: 'text-blue-600'
|
||||
icon: 'o_groups',
|
||||
},
|
||||
{
|
||||
title: 'การเรียนรู้ที่ยืดหยุ่น',
|
||||
desc: 'เรียนตามจังหวะของคุณเอง ได้ทุกที่ทุกเวลา เข้าถึงเนื้อหาคอร์สที่สมัครเรียนได้ตลอดชีพ',
|
||||
icon: 'schedule',
|
||||
iconBg: 'bg-indigo-600/10',
|
||||
iconColor: 'text-indigo-600'
|
||||
icon: 'o_schedule',
|
||||
},
|
||||
{
|
||||
title: 'ประกาศนียบัตรเมื่อเรียนจบ',
|
||||
desc: 'รับวุฒิบัตรที่เป็นที่ยอมรับเพื่อเสริมพอร์ตโฟลิโอระดับมืออาชีพของคุณและแชร์ลง LinkedIn ได้โดยตรง',
|
||||
icon: 'verified',
|
||||
iconBg: 'bg-blue-600/10',
|
||||
iconColor: 'text-blue-600'
|
||||
icon: 'o_verified',
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@
|
|||
"emptyLibraryDesc": "Start learning new things today. Browse interesting courses to develop your skills.",
|
||||
"viewAllCourses": "View All Courses",
|
||||
"recommendedCourses": "Recommended Courses",
|
||||
"noRecommended": "No recommended courses found"
|
||||
"noRecommended": "No recommended courses found",
|
||||
"moreCourses": "More Courses"
|
||||
},
|
||||
"menu": {
|
||||
"continueLearning": "Continue Learning",
|
||||
|
|
@ -90,7 +91,11 @@
|
|||
"onlineCourses": "All Courses",
|
||||
"recommendedCourses": "Recommended Courses",
|
||||
"announcements": "Announcements",
|
||||
"profile": "My Profile"
|
||||
"profile": "My Profile",
|
||||
"accountGroup": "Account",
|
||||
"promoTitle": "Find the right course",
|
||||
"promoSubtitle": "Level up your skills",
|
||||
"learnMore": "Learn More"
|
||||
},
|
||||
"discovery": {
|
||||
"title": "All Courses",
|
||||
|
|
@ -98,6 +103,9 @@
|
|||
"sortRecent": "Sort by: Recent",
|
||||
"sortPopular": "Popular",
|
||||
"categoryTitle": "Categories",
|
||||
"design": "Design",
|
||||
"programming": "Programming",
|
||||
"business": "Business",
|
||||
"showMore": "Show More",
|
||||
"showLess": "Show Less",
|
||||
"emptyTitle": "No courses found",
|
||||
|
|
@ -120,7 +128,9 @@
|
|||
"filterCompleted": "Completed",
|
||||
"emptyTitle": "No courses in this category",
|
||||
"emptyDesc": "You don't have any courses here yet. Browse our catalog to find interesting courses.",
|
||||
"goToDiscovery": "Go to Courses"
|
||||
"goToDiscovery": "Go to Courses",
|
||||
"searchNoResult": "No matching courses found",
|
||||
"searchNoResultDesc": "Try changing category or your search term"
|
||||
},
|
||||
"enrollment": {
|
||||
"successTitle": "Enrollment Successful!",
|
||||
|
|
@ -149,7 +159,7 @@
|
|||
"accountDetails": "Account Details",
|
||||
"editPersonalDesc": "Edit Personal Information",
|
||||
"yourAvatar": "Your Profile Photo",
|
||||
"avatarHint": "PNG, JPG only",
|
||||
"avatarHint": "Only JPG, PNG",
|
||||
"uploadNew": "Upload New Photo",
|
||||
"changeAvatar": "Change Profile Photo",
|
||||
"removeAvatar": "Remove Profile Photo",
|
||||
|
|
@ -180,7 +190,15 @@
|
|||
"emailVerified": "Email Verified",
|
||||
"myCertificates": "My Certificates",
|
||||
"viewCertificate": "View Certificate",
|
||||
"issuedAt": "Issued at"
|
||||
"issuedAt": "Issued at",
|
||||
"publicInfo": "Information visible to the public on the platform",
|
||||
"uploading": "Uploading...",
|
||||
"selectPrefix": "Select Prefix",
|
||||
"verifyNow": "Click to verify email",
|
||||
"verifying": "Sending...",
|
||||
"saving": "Saving...",
|
||||
"securitySubtitle": "Manage password and account access",
|
||||
"password": "Password"
|
||||
},
|
||||
"userMenu": {
|
||||
"home": "Home",
|
||||
|
|
@ -203,7 +221,9 @@
|
|||
"emailVerifiedDesc": "Your account has been successfully verified.",
|
||||
"invalidToken": "Invalid verification token",
|
||||
"tokenExpired": "Token expired or invalid",
|
||||
"logout": "Log Out"
|
||||
"logout": "Log Out",
|
||||
"logoutConfirmTitle": "Confirm Logout",
|
||||
"logoutConfirmMessage": "Are you sure you want to log out of the system?"
|
||||
},
|
||||
"language": {
|
||||
"label": "Language / ภาษา",
|
||||
|
|
@ -214,6 +234,7 @@
|
|||
"newBadge": "New",
|
||||
"popularBadge": "Popular",
|
||||
"save": "Save",
|
||||
"saveChanges": "Save Changes",
|
||||
"ok": "OK",
|
||||
"close": "Close",
|
||||
"cancel": "Cancel",
|
||||
|
|
@ -227,7 +248,9 @@
|
|||
"backToHome": "Back to Home",
|
||||
"error": "Error",
|
||||
"loading": "Loading",
|
||||
"items": "Items"
|
||||
"items": "Items",
|
||||
"student": "Student",
|
||||
"latest": "Latest"
|
||||
},
|
||||
"classroom": {
|
||||
"backToDashboard": "Back to My Courses",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@
|
|||
"emptyLibraryDesc": "เริ่มเรียนรู้สิ่งใหม่ๆ วันนี้ เลือกดูคอร์สเรียนที่น่าสนใจเพื่อพัฒนาทักษะของคุณ",
|
||||
"viewAllCourses": "ดูคอร์สเรียนทั้งหมด",
|
||||
"recommendedCourses": "คอร์สแนะนำ",
|
||||
"noRecommended": "ไม่พบข้อมูลคอร์สแนะนำ"
|
||||
"noRecommended": "ไม่พบข้อมูลคอร์สแนะนำ",
|
||||
"moreCourses": "คอร์สเพิ่มเติม"
|
||||
},
|
||||
"menu": {
|
||||
"continueLearning": "เรียนต่อจากเดิม",
|
||||
|
|
@ -90,7 +91,11 @@
|
|||
"onlineCourses": "คอร์สเรียนทั้งหมด",
|
||||
"recommendedCourses": "คอร์สเรียนแนะนำ",
|
||||
"announcements": "ข่าวประกาศ",
|
||||
"profile": "บัญชีผู้ใช้"
|
||||
"profile": "บัญชีผู้ใช้",
|
||||
"accountGroup": "บัญชี",
|
||||
"promoTitle": "ค้นหาคอร์สที่ใช่",
|
||||
"promoSubtitle": "ยกระดับทักษะของคุณ",
|
||||
"learnMore": "เรียนรู้เพิ่มเติม"
|
||||
},
|
||||
"discovery": {
|
||||
"title": "รายการคอร์สทั้งหมด",
|
||||
|
|
@ -98,6 +103,9 @@
|
|||
"sortRecent": "เรียงตาม: ล่าสุด",
|
||||
"sortPopular": "ยอดนิยม",
|
||||
"categoryTitle": "หมวดหมู่",
|
||||
"design": "การออกแบบ",
|
||||
"programming": "การเขียนโปรแกรม",
|
||||
"business": "ธุรกิจ",
|
||||
"showMore": "แสดงเพิ่มเติม",
|
||||
"showLess": "แสดงน้อยลง",
|
||||
"emptyTitle": "ไม่พบผลการค้นหา",
|
||||
|
|
@ -120,7 +128,9 @@
|
|||
"filterCompleted": "เรียนจบแล้ว",
|
||||
"emptyTitle": "ยังไม่มีคอร์สในหมวดหมู่นี้",
|
||||
"emptyDesc": "คุณยังไม่มีคอร์สเรียนในส่วนนี้ ลองเลือกดูคอร์สที่น่าสนใจในระบบของเรา",
|
||||
"goToDiscovery": "ไปที่รายการคอร์ส"
|
||||
"goToDiscovery": "ไปที่รายการคอร์ส",
|
||||
"searchNoResult": "ไม่พบคอร์สที่สอดคล้อง",
|
||||
"searchNoResultDesc": "ลองเปลี่ยนหมวดหมู่หรือคำค้นหาของคุณ"
|
||||
},
|
||||
"enrollment": {
|
||||
"successTitle": "ลงทะเบียนสำเร็จ!",
|
||||
|
|
@ -149,7 +159,7 @@
|
|||
"accountDetails": "รายละเอียดบัญชี",
|
||||
"editPersonalDesc": "แก้ไขข้อมูลส่วนตัว",
|
||||
"yourAvatar": "รูปโปรไฟล์ของคุณ",
|
||||
"avatarHint": "เฉพาะไฟล์ png , jpg",
|
||||
"avatarHint": "เฉพาะไฟล์ JPG, PNG",
|
||||
"uploadNew": "อัพโหลดรูปโปรไฟล์",
|
||||
"changeAvatar": "เปลี่ยนรูปโปรไฟล์",
|
||||
"removeAvatar": "ลบรูปโปรไฟล์",
|
||||
|
|
@ -180,7 +190,15 @@
|
|||
"emailVerified": "ยืนยันอีเมลเสร็จสิ้น",
|
||||
"myCertificates": "ประกาศนียบัตรของฉัน",
|
||||
"viewCertificate": "ดูประกาศนียบัตร",
|
||||
"issuedAt": "ออกเมื่อ"
|
||||
"issuedAt": "ออกเมื่อ",
|
||||
"publicInfo": "ข้อมูลที่แสดงต่อสาธารณะบนแพลตฟอร์ม",
|
||||
"uploading": "กำลังอัปโหลด...",
|
||||
"selectPrefix": "เลือกคำนำหน้า",
|
||||
"verifyNow": "คลิกเพื่อยืนยันอีเมล",
|
||||
"verifying": "กำลังส่ง...",
|
||||
"saving": "กำลังบันทึก...",
|
||||
"securitySubtitle": "จัดการรหัสผ่านและการเข้าถึงบัญชี",
|
||||
"password": "รหัสผ่าน"
|
||||
},
|
||||
"userMenu": {
|
||||
"home": "หน้าหลัก",
|
||||
|
|
@ -203,7 +221,9 @@
|
|||
"emailVerifiedDesc": "บัญชีของคุณได้รับการยืนยันเรียบร้อยแล้ว",
|
||||
"invalidToken": "Token ยืนยันตัวตนไม่ถูกต้อง",
|
||||
"tokenExpired": "Token หมดอายุหรือล้มเหลว",
|
||||
"logout": "ออกจากระบบ"
|
||||
"logout": "ออกจากระบบ",
|
||||
"logoutConfirmTitle": "ยืนยันการออกจากระบบ",
|
||||
"logoutConfirmMessage": "คุณแน่ใจหรือไม่ว่าต้องการออกจากระบบ?"
|
||||
},
|
||||
"language": {
|
||||
"label": "ภาษา / Language",
|
||||
|
|
@ -214,6 +234,7 @@
|
|||
"newBadge": "ใหม่",
|
||||
"popularBadge": "ยอดนิยม",
|
||||
"save": "บันทึก",
|
||||
"saveChanges": "บันทึกการเปลี่ยนแปลง",
|
||||
"ok": "ตกลง",
|
||||
"close": "ปิด",
|
||||
"cancel": "ยกเลิก",
|
||||
|
|
@ -227,7 +248,9 @@
|
|||
"backToHome": "กลับสู่หน้าหลัก",
|
||||
"error": "เกิดข้อผิดพลาด",
|
||||
"loading": "กำลังโหลด",
|
||||
"items": "รายการ"
|
||||
"items": "รายการ",
|
||||
"student": "นักเรียน",
|
||||
"latest": "ล่าสุด"
|
||||
},
|
||||
"classroom": {
|
||||
"backToDashboard": "กลับไปคอร์สของฉัน",
|
||||
|
|
|
|||
|
|
@ -1,178 +1,65 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file default.vue
|
||||
* @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
|
||||
* Uses Quasar QLayout for responsive structure.
|
||||
* @description Master layout for the EduLearn platform.
|
||||
*/
|
||||
|
||||
// Initialize global theme management
|
||||
useThemeMode()
|
||||
|
||||
const { currentUser, logout } = useAuth()
|
||||
const { isDark, set: setTheme } = useThemeMode()
|
||||
const leftDrawerOpen = ref(false)
|
||||
const rightDrawerOpen = ref(false)
|
||||
const leftDrawerOpen = ref(true)
|
||||
|
||||
const toggleLeftDrawer = () => {
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value
|
||||
}
|
||||
|
||||
const toggleRightDrawer = () => {
|
||||
rightDrawerOpen.value = !rightDrawerOpen.value
|
||||
}
|
||||
|
||||
const route = useRoute()
|
||||
// Automatically hide sidebar for learner routes
|
||||
const shouldHideSidebar = computed(() => {
|
||||
const silentRoutes = ['/dashboard', '/browse', '/classroom', '/course']
|
||||
return silentRoutes.some(r => route.path.startsWith(r))
|
||||
// Show sidebar for these routes
|
||||
const isDashboardRoute = computed(() => {
|
||||
const routes = ['/dashboard', '/browse', '/classroom', '/course']
|
||||
return routes.some(r => route.path.startsWith(r))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="hHh LpR lFf" class="bg-slate-50 dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
|
||||
<q-layout view="lHh Lpr lFf" class="bg-[#F8FAFC] dark:!bg-[#020617] text-slate-900 dark:!text-slate-50">
|
||||
|
||||
<!-- Header -->
|
||||
<q-header
|
||||
class="bg-white/80 dark:!bg-[#0f172a]/80 backdrop-blur-md text-slate-900 dark:!text-white border-none shadow-none"
|
||||
class="bg-transparent text-slate-900 dark:!text-white border-none shadow-none"
|
||||
>
|
||||
<AppHeader
|
||||
@toggleSidebar="toggleLeftDrawer"
|
||||
@toggleRightDrawer="toggleRightDrawer"
|
||||
:showSidebarToggle="!shouldHideSidebar"
|
||||
/>
|
||||
<AppHeader @toggleSidebar="toggleLeftDrawer" />
|
||||
</q-header>
|
||||
|
||||
<!-- Sidebar (Drawer - Desktop Left) -->
|
||||
<!-- Navigation Sidebar -->
|
||||
<q-drawer
|
||||
v-if="!shouldHideSidebar"
|
||||
v-model="leftDrawerOpen"
|
||||
show-if-above
|
||||
:width="280"
|
||||
class="bg-white dark:!bg-[#0f172a]"
|
||||
side="left"
|
||||
bordered
|
||||
class="bg-white dark:!bg-[#0f172a] border-none"
|
||||
>
|
||||
<AppSidebar />
|
||||
</q-drawer>
|
||||
|
||||
<!-- Master Mobile Drawer (The Everything Hub) -->
|
||||
<q-drawer
|
||||
v-model="rightDrawerOpen"
|
||||
side="right"
|
||||
overlay
|
||||
class="bg-white dark:!bg-[#0f172a]"
|
||||
:width="300"
|
||||
>
|
||||
<div class="flex flex-col h-full bg-white dark:!bg-[#0f172a] text-slate-900 dark:!text-slate-100">
|
||||
<!-- 1. Account Section -->
|
||||
<div class="p-6 bg-slate-50/50 dark:!bg-slate-800/20">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-black">E</div>
|
||||
<span class="font-black text-lg text-slate-900 dark:text-white">E-Learning</span>
|
||||
</div>
|
||||
<q-btn flat round dense icon="close" class="text-slate-400" @click="rightDrawerOpen = false" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4 py-2">
|
||||
<q-avatar size="64px" class="shadow-lg border-2 border-white dark:border-slate-700">
|
||||
<img :src="currentUser?.photoURL || 'https://cdn.quasar.dev/img/avatar.png'" />
|
||||
</q-avatar>
|
||||
<div class="overflow-hidden">
|
||||
<p class="font-bold text-slate-900 dark:!text-white mb-0 truncate text-lg">
|
||||
{{ currentUser?.firstName || 'Guest' }} {{ currentUser?.lastName || '' }}
|
||||
</p>
|
||||
<p class="text-xs text-slate-500 dark:!text-slate-400 truncate">{{ currentUser?.email || 'e-learning@platform.com' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Integrated Content Hub -->
|
||||
<div class="flex-grow overflow-y-auto pt-4">
|
||||
<q-list padding class="text-slate-600 dark:!text-slate-300">
|
||||
<!-- Navigation -->
|
||||
<q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2">เมนูหลัก</q-item-label>
|
||||
|
||||
<q-item to="/dashboard" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:!bg-blue-900/30 dark:!text-blue-400 font-bold" @click="rightDrawerOpen = false">
|
||||
<q-item-section avatar><q-icon name="dashboard" size="24px" /></q-item-section>
|
||||
<q-item-section><span class="text-[15px] font-bold">{{ $t("sidebar.overview") }}</span></q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item to="/browse/discovery" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:!bg-blue-900/30 dark:!text-blue-400 font-bold" @click="rightDrawerOpen = false">
|
||||
<q-item-section avatar><q-icon name="explore" size="24px" /></q-item-section>
|
||||
<q-item-section><span class="text-[15px] font-bold">{{ $t("landing.allCourses") }}</span></q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item to="/dashboard/my-courses" clickable v-ripple class="px-6 py-4" active-class="bg-blue-50 text-blue-600 dark:!bg-blue-900/30 dark:!text-blue-400 font-bold" @click="rightDrawerOpen = false">
|
||||
<q-item-section avatar><q-icon name="school" size="24px" /></q-item-section>
|
||||
<q-item-section><span class="text-[15px] font-bold">{{ $t("sidebar.myCourses") || 'คอร์สเรียนของฉัน' }}</span></q-item-section>
|
||||
</q-item>
|
||||
|
||||
<!-- Tools & Settings -->
|
||||
<q-item-label header class="text-[11px] font-black tracking-[0.2em] text-slate-400 uppercase px-6 pb-2 mt-4">เครื่องมือและการตั้งค่า</q-item-label>
|
||||
|
||||
<!-- Language Selection -->
|
||||
<q-item class="px-6 py-2">
|
||||
<q-item-section avatar><q-icon name="language" size="22px" /></q-item-section>
|
||||
<q-item-section>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold text-[14px]">ภาษา</span>
|
||||
<LanguageSwitcher dense />
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<!-- Dark Mode Toggle -->
|
||||
<q-item class="px-6 py-2">
|
||||
<q-item-section avatar><q-icon :name="isDark ? 'dark_mode' : 'light_mode'" size="22px" /></q-item-section>
|
||||
<q-item-section>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold text-[14px]">โหมดกลางคืน</span>
|
||||
<q-toggle
|
||||
:model-value="isDark"
|
||||
@update:model-value="setTheme"
|
||||
color="blue"
|
||||
/>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item clickable v-ripple @click="navigateTo('/dashboard/profile'); rightDrawerOpen = false" class="px-6 py-4">
|
||||
<q-item-section avatar><q-icon name="person_outline" size="24px" /></q-item-section>
|
||||
<q-item-section><span class="font-bold text-[15px] dark:!text-slate-300">จัดการโปรไฟล์</span></q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
|
||||
<!-- 3. Bottom Actions -->
|
||||
<div class="p-6 mt-auto border-t border-slate-100 dark:!border-white/10">
|
||||
<q-btn
|
||||
unelevated
|
||||
class="full-width rounded-xl bg-red-50 text-red-600 dark:!bg-red-900/20 dark:!text-red-400 font-bold py-3 no-caps transition-all active:scale-95"
|
||||
@click="logout"
|
||||
>
|
||||
<q-icon name="logout" size="20px" class="mr-2" />
|
||||
ออกจากระบบ
|
||||
</q-btn>
|
||||
<div class="text-center mt-6">
|
||||
<span class="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-300 dark:text-slate-600">E-Learning Platform v1.0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-drawer>
|
||||
|
||||
<!-- Main Content -->
|
||||
<!-- Main Content Area -->
|
||||
<q-page-container>
|
||||
<q-page class="relative">
|
||||
<slot />
|
||||
<q-page class="px-3 py-6 md:p-8">
|
||||
<div class="max-w-[1600px] mx-auto">
|
||||
<slot />
|
||||
</div>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
|
||||
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Ensure fonts are applied */
|
||||
.font-inter {
|
||||
font-family: var(--font-main);
|
||||
/* Global Layout Adjustments */
|
||||
.q-drawer--bordered {
|
||||
border-right: 1px solid rgba(0,0,0,0.05) !important;
|
||||
}
|
||||
.dark .q-drawer--bordered {
|
||||
border-right: 1px solid rgba(255,255,255,0.05) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -33,8 +33,11 @@ export default defineNuxtConfig({
|
|||
|
||||
// การตั้งค่า Quasar Framework
|
||||
quasar: {
|
||||
iconSet: 'material-icons-outlined',
|
||||
extras: {
|
||||
fontIcons: ["material-icons"],
|
||||
fontIcons: [
|
||||
"material-icons",
|
||||
"material-icons-outlined"] // ใช้ไอคอน Material Icons, material-icons-outlined
|
||||
},
|
||||
plugins: ["Notify", "Dialog"], // เปิดใช้ Plugin Notify และ Dialog
|
||||
config: {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
<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.
|
||||
* @description Course Discovery / Catalog Page matching Figma Desktop Layout.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -15,11 +13,19 @@ useHead({
|
|||
title: "รายการคอร์ส - e-Learning",
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// 1. State Management
|
||||
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 selectedCategoryIds = ref<number[]>([]);
|
||||
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);
|
||||
|
|
@ -28,47 +34,43 @@ const isLoading = ref(false);
|
|||
const isLoadingDetail = ref(false);
|
||||
const isEnrolling = ref(false);
|
||||
|
||||
// Pagination State
|
||||
const currentPage = ref(1);
|
||||
const totalPages = ref(1);
|
||||
const itemsPerPage = 12;
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const { currentUser } = useAuth();
|
||||
const $q = useQuasar();
|
||||
const { fetchCategories } = useCategory();
|
||||
const { fetchCourses, fetchCourseById, enrollCourse, getLocalizedText } =
|
||||
useCourse();
|
||||
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'
|
||||
}
|
||||
|
||||
// 2. Computed Properties
|
||||
const sortOption = ref(t("discovery.sortRecent"));
|
||||
const sortOptions = computed(() => [t("discovery.sortRecent")]);
|
||||
const formatPrice = (course: any) => {
|
||||
if (course.is_free) return 'ฟรี';
|
||||
if (!course.price) return 'ฟรี';
|
||||
return `฿${parseFloat(course.price).toLocaleString()}`;
|
||||
};
|
||||
|
||||
const filteredCourses = computed(() => {
|
||||
let result = courses.value;
|
||||
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 || 'ผู้สอน';
|
||||
};
|
||||
|
||||
// If more than 1 category is selected, we still do client-side filtering
|
||||
// because the API currently only supports one category_id at a time.
|
||||
if (selectedCategoryIds.value.length > 1) {
|
||||
result = result.filter((c) =>
|
||||
selectedCategoryIds.value.includes(c.category_id),
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
});
|
||||
|
||||
// 3. Helper Functions
|
||||
|
||||
// 4. API Actions
|
||||
const loadCategories = async () => {
|
||||
const res = await fetchCategories();
|
||||
if (res.success) categories.value = res.data || [];
|
||||
|
|
@ -76,12 +78,7 @@ const loadCategories = async () => {
|
|||
|
||||
const loadCourses = async (page = 1) => {
|
||||
isLoading.value = true;
|
||||
|
||||
// Use server-side filtering if exactly one category is selected
|
||||
const categoryId =
|
||||
selectedCategoryIds.value.length === 1
|
||||
? selectedCategoryIds.value[0]
|
||||
: undefined;
|
||||
const categoryId = activeCategory.value === 'all' ? undefined : activeCategory.value as number;
|
||||
|
||||
const res = await fetchCourses({
|
||||
category_id: categoryId,
|
||||
|
|
@ -92,7 +89,17 @@ const loadCourses = async (page = 1) => {
|
|||
});
|
||||
|
||||
if (res.success) {
|
||||
courses.value = res.data || [];
|
||||
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;
|
||||
}
|
||||
|
|
@ -126,230 +133,175 @@ const handleEnroll = async (id: number) => {
|
|||
isEnrolling.value = false;
|
||||
};
|
||||
|
||||
// Watch for category selection changes to reload courses
|
||||
watch(
|
||||
selectedCategoryIds,
|
||||
activeCategory,
|
||||
() => {
|
||||
currentPage.value = 1;
|
||||
loadCourses(1);
|
||||
},
|
||||
{ deep: true },
|
||||
}
|
||||
);
|
||||
|
||||
const toggleCategory = (id: number) => {
|
||||
const index = selectedCategoryIds.value.indexOf(id);
|
||||
if (index === -1) {
|
||||
selectedCategoryIds.value.push(id);
|
||||
} else {
|
||||
selectedCategoryIds.value.splice(index, 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);
|
||||
|
||||
onMounted(() => {
|
||||
loadCategories();
|
||||
loadCourses();
|
||||
if (route.query.course_id) {
|
||||
selectCourse(Number(route.query.course_id));
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<!-- CATALOG VIEW: Browse courses -->
|
||||
<div v-if="!showDetail">
|
||||
<!-- Top Header Area -->
|
||||
<!-- New Enhanced Search Section (Image 1 Style) -->
|
||||
<div class="bg-blue-50/50 dark:bg-blue-900/10 rounded-[2.5rem] p-8 md:p-10 mb-8 border border-blue-100/50 dark:border-blue-500/10 transition-colors duration-300">
|
||||
<div class="flex items-center gap-4 mb-2">
|
||||
<h1 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white">
|
||||
{{ $t("discovery.title") }}
|
||||
</h1>
|
||||
</div>
|
||||
<p class="text-slate-500 dark:text-slate-400 font-medium mb-8">
|
||||
{{ $t("discovery.subtitle") }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<!-- Search Input -->
|
||||
<div class="relative flex-1 group">
|
||||
<div class="absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-600 transition-colors">
|
||||
<q-icon name="search" size="24px" />
|
||||
<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>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
:placeholder="$t('discovery.searchPlaceholder') || 'ค้นหาคอร์สที่น่าสนใจที่นี่...'"
|
||||
class="w-full pl-14 pr-6 py-3.5 bg-white dark:!bg-slate-900/80 border-2 border-transparent dark:border-white/5 rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
|
||||
@keyup.enter="loadCourses(1)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Search Button -->
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
class="px-8 h-[52px] rounded-2xl font-black shadow-lg shadow-blue-600/20 hover:scale-[1.02] transition-transform"
|
||||
no-caps
|
||||
@click="loadCourses(1)"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<q-icon name="search" size="20px" />
|
||||
<span class="text-base">{{ $t("discovery.searchBtn") }}</span>
|
||||
|
||||
<!-- 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>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-8 px-2">
|
||||
<div class="text-slate-500 dark:text-slate-400 text-sm font-bold uppercase tracking-wider">
|
||||
{{ $t("discovery.foundTotal") }} <span class="text-blue-600">{{ filteredCourses.length }}</span> {{ $t("discovery.items") }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- Loader -->
|
||||
<div v-if="isLoading" class="flex justify-center py-24">
|
||||
<q-spinner size="3rem" color="primary" />
|
||||
</div>
|
||||
|
||||
<!-- Unified Filter Section: Categories -->
|
||||
<div
|
||||
class="bg-white dark:!bg-slate-900/50 p-2 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex flex-wrap items-center gap-1.5 shadow-sm mb-12"
|
||||
>
|
||||
<q-btn
|
||||
flat
|
||||
rounded
|
||||
dense
|
||||
class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
|
||||
:class="
|
||||
selectedCategoryIds.length === 0
|
||||
? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50'
|
||||
"
|
||||
@click="selectedCategoryIds = []"
|
||||
:label="$t('discovery.showAll')"
|
||||
/>
|
||||
<q-btn
|
||||
v-for="cat in categories"
|
||||
:key="cat.id"
|
||||
flat
|
||||
rounded
|
||||
dense
|
||||
class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
|
||||
:class="
|
||||
selectedCategoryIds.includes(cat.id)
|
||||
? 'bg-blue-600 text-white shadow-md shadow-blue-600/20'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50'
|
||||
"
|
||||
@click="toggleCategory(cat.id)"
|
||||
:label="getLocalizedText(cat.name)"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<!-- Main Layout: Grid Only -->
|
||||
<div class="w-full">
|
||||
<div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8"
|
||||
>
|
||||
<CourseCard
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
v-bind="{ ...course, image: course.thumbnail_url }"
|
||||
show-view-details
|
||||
@view-details="selectCourse(course.id)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div v-if="totalPages > 1" class="flex justify-center pb-10">
|
||||
<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-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 shadow-sm"
|
||||
>
|
||||
<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 dark:hover:text-blue-400 transition-colors"
|
||||
@click="
|
||||
searchQuery = '';
|
||||
selectedCategoryIds = [];
|
||||
"
|
||||
>
|
||||
{{ $t("discovery.showAll") }}
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Standard overrides for Quasar inputs to match Tailwind theme */
|
||||
.search-input :deep(.q-field__control) {
|
||||
border-radius: 9999px; /* Full rounded pill */
|
||||
background-color: white !important;
|
||||
transition: all 0.3s ease;
|
||||
/* Disable default scrollbar for filter container */
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dark .search-input :deep(.q-field__control) {
|
||||
background-color: #1e293b !important; /* slate-800: Inner card depth */
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.search-input :deep(.q-field__native) {
|
||||
color: #0f172a !important; /* slate-900: Dark text for light mode */
|
||||
}
|
||||
|
||||
.dark .search-input :deep(.q-field__native) {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.search-input :deep(.q-field__shadow) {
|
||||
box-shadow: none !important;
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,44 +1,46 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file index.vue
|
||||
* @description Dashboard Home Page matching FutureSkill design
|
||||
* @description หน้าหลักแดชบอร์ด (Dashboard Home)
|
||||
*/
|
||||
|
||||
// 1. นำเข้าระบบและกำหนด MetaData
|
||||
definePageMeta({
|
||||
layout: "default",
|
||||
middleware: "auth",
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: "Dashboard - FutureSkill Clone",
|
||||
title: "Dashboard - e-Learning Platform",
|
||||
});
|
||||
|
||||
// 2. เรียกใช้งาน Composables
|
||||
const { currentUser } = useAuth();
|
||||
const { fetchCourses, fetchEnrolledCourses, getLocalizedText } = useCourse();
|
||||
const { fetchCategories } = useCategory();
|
||||
const { t } = useI18n();
|
||||
|
||||
// State
|
||||
// 3. กำหนดสถานะ (State)
|
||||
const enrolledCourses = ref<any[]>([]);
|
||||
const recommendedCourses = ref<any[]>([]);
|
||||
const libraryCourses = ref<any[]>([]);
|
||||
const categories = ref<any[]>([]);
|
||||
|
||||
const isLoading = ref(true);
|
||||
|
||||
// Initial Data Fetch
|
||||
// 4. การจัดการโหลดข้อมูล (Data Initialization)
|
||||
onMounted(async () => {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const [catRes, enrollRes, courseRes] = await Promise.all([
|
||||
const [catRes, enrollRes, courseRes, allCoursesRes] = await Promise.all([
|
||||
fetchCategories(),
|
||||
fetchEnrolledCourses({ limit: 10 }), // Fetch more enrolled courses for library section
|
||||
fetchEnrolledCourses({ limit: 10 }), // ดึงข้อมูลคอร์สที่ลงทะเบียนไว้
|
||||
fetchCourses({
|
||||
limit: 3,
|
||||
random: true,
|
||||
forceRefresh: true,
|
||||
is_recommended: true,
|
||||
}), // Fetch 3 Recommended Courses
|
||||
}), // ดึงข้อมูลคอร์สแนะนำ
|
||||
fetchCourses({ limit: 1000 }) // สำหรับแมปหมวดหมู่
|
||||
]);
|
||||
|
||||
if (catRes.success) {
|
||||
|
|
@ -48,36 +50,44 @@ onMounted(async () => {
|
|||
const catMap = new Map();
|
||||
categories.value.forEach((c: any) => catMap.set(c.id, c.name));
|
||||
|
||||
// Map Enrolled Courses
|
||||
const catIdMap = new Map();
|
||||
if (allCoursesRes && allCoursesRes.success && allCoursesRes.data) {
|
||||
allCoursesRes.data.forEach((c: any) => catIdMap.set(c.id, c.category_id));
|
||||
}
|
||||
|
||||
// จัดการข้อมูลคอร์สที่ลงทะเบียน (Mapping Enrolled Courses)
|
||||
if (enrollRes.success && enrollRes.data) {
|
||||
// Sort by last_accessed_at descending (Newest first)
|
||||
const sortedEnrollments = [...enrollRes.data].sort((a, b) => {
|
||||
const dateA = new Date(a.last_accessed_at || a.enrolled_at).getTime();
|
||||
const dateB = new Date(b.last_accessed_at || b.enrolled_at).getTime();
|
||||
return dateB - dateA;
|
||||
});
|
||||
|
||||
enrolledCourses.value = sortedEnrollments.map((item: any) => ({
|
||||
id: item.course_id,
|
||||
title: item.course.title,
|
||||
thumbnail_url: item.course.thumbnail_url,
|
||||
progress: item.progress_percentage || 0,
|
||||
total_lessons: item.course.total_lessons || 10,
|
||||
completed_lessons: Math.floor(
|
||||
(item.progress_percentage / 100) * (item.course.total_lessons || 10),
|
||||
),
|
||||
// For CourseCard compatibility in library section
|
||||
category: catMap.get(item.course.category_id),
|
||||
lessons: item.course.total_lessons || 0,
|
||||
image: item.course.thumbnail_url,
|
||||
enrolled: true,
|
||||
}));
|
||||
enrolledCourses.value = sortedEnrollments.map((item: any) => {
|
||||
const mappedCategoryId = catIdMap.get(item.course.id) || item.course.category_id;
|
||||
|
||||
return {
|
||||
id: item.course_id,
|
||||
title: item.course.title,
|
||||
thumbnail_url: item.course.thumbnail_url,
|
||||
progress: item.progress_percentage || 0,
|
||||
total_lessons: item.course.total_lessons || 0,
|
||||
completed_lessons: Math.floor(
|
||||
(item.progress_percentage / 100) * (item.course.total_lessons || 0),
|
||||
),
|
||||
category: catMap.get(mappedCategoryId),
|
||||
lessons: item.course.total_lessons || 0,
|
||||
image: item.course.thumbnail_url,
|
||||
enrolled: true,
|
||||
instructor: item.course.creator || item.course.instructor,
|
||||
last_accessed: item.last_accessed_at || item.enrolled_at
|
||||
};
|
||||
});
|
||||
|
||||
// Update libraryCourses with only 2 courses
|
||||
libraryCourses.value = enrolledCourses.value.slice(0, 2);
|
||||
}
|
||||
|
||||
// Map Recommended Courses
|
||||
// จัดการข้อมูลคอร์สแนะนำ (Mapping Recommended Courses)
|
||||
if (courseRes.success && courseRes.data) {
|
||||
recommendedCourses.value = courseRes.data.map((c: any) => ({
|
||||
id: c.id,
|
||||
|
|
@ -98,326 +108,215 @@ onMounted(async () => {
|
|||
}
|
||||
});
|
||||
|
||||
// Helper for "Continue Learning" Hero Card
|
||||
// 5. ตัวแปร Computed และฟังก์ชันเสริม
|
||||
const heroCourse = computed(() => enrolledCourses.value[0] || null);
|
||||
const sideCourses = computed(() => enrolledCourses.value.slice(1, 3));
|
||||
|
||||
const navigateToCategory = (catName: string) => {
|
||||
const cat = categories.value.find(c => getLocalizedText(c.name) === catName);
|
||||
if (cat) {
|
||||
navigateTo(`/browse/discovery?category_id=${cat.id}`);
|
||||
} else {
|
||||
navigateTo(`/browse/discovery`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen font-inter pb-20 transition-colors duration-300">
|
||||
<div class="container mx-auto px-6 md:px-12 space-y-16 mt-10">
|
||||
<!-- 1. Dashboard Hero Banner (Refined) -->
|
||||
<section
|
||||
class="relative overflow-hidden bg-gradient-to-br from-white to-slate-50 dark:from-slate-900 dark:to-slate-950 rounded-[2rem] py-10 md:py-14 px-8 md:px-12 shadow-sm border border-slate-100 dark:border-slate-800 flex flex-col items-center text-center transition-colors duration-300"
|
||||
>
|
||||
<!-- Subtle Decorative Elements -->
|
||||
<div
|
||||
class="absolute top-[-20%] left-[-10%] w-[300px] h-[300px] bg-blue-500/5 dark:bg-blue-500/10 rounded-full blur-3xl -z-10"
|
||||
/>
|
||||
<div
|
||||
class="absolute bottom-[-20%] right-[-10%] w-[300px] h-[300px] bg-indigo-500/5 dark:bg-indigo-500/10 rounded-full blur-3xl -z-10"
|
||||
/>
|
||||
<div class="bg-[#F8F9FA] dark:bg-[#020617] min-h-screen font-inter p-4 md:p-8 transition-colors duration-300">
|
||||
<div class="max-w-[1400px] mx-auto grid grid-cols-1 xl:grid-cols-3 gap-8">
|
||||
|
||||
<!-- Left Column (Main Content) -->
|
||||
<div class="xl:col-span-2 space-y-6">
|
||||
|
||||
<!-- ป้ายต้อนรับ (Welcome Banner) -->
|
||||
<div class="bg-[#3B6BE8] rounded-[2rem] p-6 md:p-10 relative overflow-hidden text-white shadow-[0_8px_30px_rgb(59,107,232,0.2)]">
|
||||
<!-- ลวดลายพื้นหลังและดาวตกแต่ง -->
|
||||
<div class="absolute inset-0 bg-grid-pattern opacity-10 md:opacity-20 pointer-events-none"></div>
|
||||
<div class="absolute right-5 md:right-10 top-1/2 -translate-y-1/2 w-20 h-20 md:w-28 md:h-28 border border-white/20 rounded-[1.5rem] md:rounded-[2rem] flex items-center justify-center rotate-12 bg-white/5 backdrop-blur-sm opacity-30 md:opacity-100">
|
||||
<q-icon name="auto_awesome" size="32px" md-size="48px" class="text-white" />
|
||||
</div>
|
||||
|
||||
<div class="max-w-2xl space-y-6 relative z-10">
|
||||
<h1
|
||||
class="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-white leading-[1.5] tracking-tight"
|
||||
>
|
||||
{{ $t("dashboard.heroTitle") }}
|
||||
<span class="inline-block text-blue-600 dark:text-blue-400 mt-1 md:mt-2">{{
|
||||
$t("dashboard.heroSubtitle")
|
||||
}}</span>
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="text-slate-500 dark:text-slate-400 font-medium text-base md:text-lg max-w-xl mx-auto leading-relaxed"
|
||||
>
|
||||
{{ $t("dashboard.heroDesc") }}
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-4 pt-4">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
:label="$t('dashboard.goToMyCourses')"
|
||||
class="px-8 h-[48px] font-bold no-caps shadow-lg shadow-blue-500/10 hover:-translate-y-0.5 transition-all text-sm"
|
||||
to="/dashboard/my-courses"
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
rounded
|
||||
color="primary"
|
||||
:label="$t('dashboard.searchNewCourses')"
|
||||
class="px-8 h-[48px] font-bold no-caps hover:bg-white dark:hover:bg-slate-800 transition-all border-1 text-sm dark:text-white dark:border-slate-600"
|
||||
style="border-width: 1.5px"
|
||||
to="/browse/discovery"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 2. Continue Learning Section -->
|
||||
<section v-if="enrolledCourses.length > 0">
|
||||
<div class="flex justify-between items-end mb-6">
|
||||
<h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] dark:text-white transition-colors">
|
||||
{{ $t("dashboard.continueLearningTitle") }}
|
||||
</h2>
|
||||
<NuxtLink
|
||||
to="/dashboard/my-courses"
|
||||
class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 font-medium text-sm flex items-center gap-1 transition-colors"
|
||||
>
|
||||
{{ $t("dashboard.myCourses") }}
|
||||
<q-icon name="arrow_forward" size="16px" />
|
||||
</NuxtLink>
|
||||
<div class="relative z-10 max-w-lg">
|
||||
<h1 class="text-2xl md:text-4xl font-bold mb-2 md:mb-3 tracking-tight">{{ $t('dashboard.welcomeTitle') }} {{ currentUser?.firstName || 'User' }} !</h1>
|
||||
<p class="text-blue-100/90 text-[13px] md:text-[15px] leading-relaxed mb-6 md:mb-8 font-medium">
|
||||
{{ $t('dashboard.welcomeSubtitle') }}
|
||||
</p>
|
||||
<button @click="navigateTo('/browse/discovery')" class="bg-white text-[#3B6BE8] font-bold px-5 py-2.5 md:px-6 md:py-3 rounded-full text-xs md:text-sm flex items-center gap-2 hover:bg-slate-50 hover:scale-105 shadow-md transition-all">
|
||||
{{ $t('dashboard.moreCourses') }} <q-icon name="chevron_right" size="16px" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
|
||||
<!-- Hero Card (Left) -->
|
||||
<div
|
||||
v-if="heroCourse"
|
||||
class="relative group cursor-pointer rounded-2xl overflow-hidden bg-white dark:bg-[#1e293b] shadow-sm border border-gray-100 dark:border-slate-700 hover:shadow-md transition-all h-[260px] md:h-[320px]"
|
||||
@click="
|
||||
navigateTo(`/classroom/learning?course_id=${heroCourse.id}`)
|
||||
"
|
||||
>
|
||||
<img
|
||||
:src="heroCourse.thumbnail_url"
|
||||
class="w-full h-full object-cover brightness-75 group-hover:brightness-90 transition-all duration-500"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-8 flex flex-col justify-end"
|
||||
>
|
||||
<h3
|
||||
class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug shadow-black/50 drop-shadow-sm"
|
||||
>
|
||||
{{ getLocalizedText(heroCourse.title) }}
|
||||
</h3>
|
||||
|
||||
<!-- Progress -->
|
||||
<div class="w-full">
|
||||
<div class="flex justify-end text-gray-300 text-xs mb-2">
|
||||
<span>{{ heroCourse.progress }}%</span>
|
||||
</div>
|
||||
<div
|
||||
class="h-1.5 w-full bg-white/20 rounded-full overflow-hidden"
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-full transition-all duration-500"
|
||||
:class="
|
||||
heroCourse.progress === 100
|
||||
? 'bg-emerald-500'
|
||||
: 'bg-blue-500'
|
||||
"
|
||||
:style="{ width: `${heroCourse.progress}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end">
|
||||
<span
|
||||
class="font-bold text-sm hover:underline transition-colors"
|
||||
:class="
|
||||
heroCourse.progress === 100
|
||||
? 'text-emerald-400'
|
||||
: 'text-white'
|
||||
"
|
||||
>
|
||||
{{
|
||||
heroCourse.progress === 100
|
||||
? $t("dashboard.studyAgain")
|
||||
: $t("dashboard.continue")
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- การ์ดหมวดหมู่ด่วน (3 Stats Cards) -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<!-- การออกแบบ -->
|
||||
<div @click="navigateToCategory('การออกแบบ')" class="bg-white dark:!bg-slate-900 rounded-[1.5rem] p-5 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-800 transition-all hover:scale-105 hover:shadow-md cursor-pointer">
|
||||
<div class="w-12 h-12 rounded-2xl bg-[#E9EFFD] dark:bg-blue-900/30 text-[#3B6BE8] flex items-center justify-center shrink-0">
|
||||
<q-icon name="palette" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm">{{ $t('discovery.design') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- การเขียนโปรแกรม -->
|
||||
<div @click="navigateToCategory('การเขียนโปรแกรม')" class="bg-white dark:!bg-slate-900 rounded-[1.5rem] p-5 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-800 transition-all hover:scale-105 hover:shadow-md cursor-pointer">
|
||||
<div class="w-12 h-12 rounded-2xl bg-[#FFF3EB] dark:bg-orange-900/30 text-[#FF8A4C] flex items-center justify-center shrink-0">
|
||||
<q-icon name="code" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm">{{ $t('discovery.programming') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ธุรกิจ -->
|
||||
<div @click="navigateToCategory('ธุรกิจ')" class="bg-white dark:!bg-slate-900 rounded-[1.5rem] p-5 flex items-center gap-4 shadow-sm border border-slate-100 dark:border-slate-800 transition-all hover:scale-105 hover:shadow-md cursor-pointer">
|
||||
<div class="w-12 h-12 rounded-2xl bg-[#EBFAF6] dark:bg-emerald-900/30 text-[#10B981] flex items-center justify-center shrink-0">
|
||||
<q-icon name="work_outline" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-800 dark:text-slate-200 text-sm">{{ $t('discovery.business') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Side List (Right) -->
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-for="course in sideCourses"
|
||||
:key="course.id"
|
||||
class="flex-1 bg-white dark:!bg-slate-900/40 rounded-2xl p-4 border border-slate-100 dark:border-white/5 shadow-sm hover:shadow-md transition-all flex gap-4 items-center"
|
||||
>
|
||||
<div class="w-32 h-20 rounded-xl overflow-hidden flex-shrink-0">
|
||||
<img
|
||||
:src="course.thumbnail_url"
|
||||
class="w-full h-full object-cover"
|
||||
<!-- Continue Learning (เรียนต่อจากครั้งก่อน) -->
|
||||
<div class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 md:p-8 shadow-sm border border-slate-100 dark:border-slate-800 transition-colors">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('dashboard.continueLearningTitle') }}</h2>
|
||||
<NuxtLink to="/dashboard/my-courses" class="text-[#3B6BE8] font-bold text-sm flex items-center gap-1 hover:underline">
|
||||
{{ $t('dashboard.viewAll') }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div v-if="heroCourse" class="bg-[#F8F9FA] dark:bg-slate-800/50 rounded-3xl p-4 md:p-6 flex flex-col md:flex-row gap-6 md:gap-8 items-center border border-slate-100 dark:border-slate-800">
|
||||
<div class="w-full md:w-[35%] aspect-[4/3] rounded-[1.5rem] overflow-hidden flex-shrink-0 bg-slate-200">
|
||||
<img :src="heroCourse.thumbnail_url" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
|
||||
<div class="flex-1 w-full flex flex-col">
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<!-- Category Badge -->
|
||||
<div v-if="heroCourse.category">
|
||||
<span class="bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] dark:text-blue-400 px-3 py-1 rounded-full text-[11px] font-bold tracking-wide">{{ getLocalizedText(heroCourse.category) }}</span>
|
||||
</div>
|
||||
<div v-else></div>
|
||||
<span class="text-slate-400 dark:text-slate-400 text-xs flex items-center gap-1.5 font-medium" v-if="heroCourse.last_accessed">
|
||||
<q-icon name="schedule" size="14px" /> {{ $t('common.latest') }} {{ new Date(heroCourse.last_accessed).toLocaleDateString('th-TH', { day: 'numeric', month: 'short' }) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-2 leading-snug line-clamp-2">
|
||||
{{ getLocalizedText(heroCourse.title) || 'Advanced UI/UX Design มาสเตอร์คลาส' }}
|
||||
</h3>
|
||||
<!-- Removed Lesson Title/Number as per request -->
|
||||
|
||||
<div class="mb-6 mt-4">
|
||||
<div class="flex justify-between text-[13px] font-bold mb-2">
|
||||
<span class="text-[#3B6BE8] dark:text-blue-400">{{ $t('course.progress') }}: {{ heroCourse.progress || 0 }}%</span>
|
||||
</div>
|
||||
<div class="h-2.5 w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-[#3B6BE8] rounded-full transition-all duration-500" :style="{ width: `${heroCourse.progress || 0}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<div class="flex items-center gap-3" v-if="heroCourse.instructor">
|
||||
<div class="w-10 h-10 rounded-full bg-orange-100 overflow-hidden shrink-0 border border-slate-200 dark:border-slate-700">
|
||||
<img :src="heroCourse.instructor.profile_image_url || heroCourse.instructor.photoURL || `https://api.dicebear.com/7.x/avataaars/svg?seed=${heroCourse.instructor.username || 'Inst'}`" class="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-slate-900 dark:text-white text-[13px] leading-tight mb-0.5">
|
||||
{{ heroCourse.instructor.firstName || heroCourse.instructor.first_name ? `${heroCourse.instructor.firstName || heroCourse.instructor.first_name} ${heroCourse.instructor.lastName || heroCourse.instructor.last_name || ''}` : heroCourse.instructor.username || 'ผู้สอน' }}
|
||||
</p>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-[11px] font-medium line-clamp-1">{{ heroCourse.instructor.bio || heroCourse.instructor.role?.name?.th || 'Instructor' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex items-center gap-3"></div>
|
||||
<button @click="navigateTo(`/classroom/learning?course_id=${heroCourse.id}`)" class="bg-[#3B6BE8] hover:bg-blue-700 text-white px-5 py-2.5 rounded-full font-bold text-sm flex items-center gap-2 shadow-lg shadow-blue-500/20 transition-all hover:scale-105 shrink-0">
|
||||
<q-icon name="play_circle" size="18px" /> {{ $t('course.continueLearning') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="bg-[#F8F9FA] dark:bg-slate-800/50 rounded-3xl p-10 flex items-center justify-center text-slate-400 border border-dashed border-slate-200 dark:border-slate-700">
|
||||
ไม่มีคอร์สเรียนปัจจุบัน
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column (Sidebar/Profile Content) -->
|
||||
<div class="xl:col-span-1 space-y-6">
|
||||
<!-- Profile Widget -->
|
||||
<div class="bg-white dark:!bg-slate-900 rounded-[2rem] p-8 shadow-sm border border-slate-100 dark:border-slate-800 text-center flex flex-col items-center relative overflow-hidden transition-colors">
|
||||
<!-- decorative bg -->
|
||||
<div class="absolute top-0 left-0 right-0 h-24 bg-gradient-to-b from-[#F8FAFC] to-white dark:from-slate-800 dark:to-slate-900"></div>
|
||||
|
||||
<div class="relative z-10 w-24 h-24 rounded-full bg-white dark:bg-slate-800 mb-4 shadow-md flex items-center justify-center">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="currentUser?.photoURL"
|
||||
:first-name="currentUser?.firstName || 'ผู้ใช้งาน'"
|
||||
:last-name="currentUser?.lastName"
|
||||
size="88"
|
||||
class="rounded-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="flex-grow min-w-0 flex flex-col justify-between h-full py-1"
|
||||
>
|
||||
<h4 class="text-gray-800 dark:text-slate-200 font-bold text-sm line-clamp-2 mb-2 transition-colors">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
</h4>
|
||||
|
||||
<div class="mt-auto">
|
||||
<div
|
||||
class="h-1.5 w-full bg-gray-100 dark:bg-slate-700 rounded-full overflow-hidden mb-2"
|
||||
>
|
||||
<div
|
||||
class="h-full rounded-full transition-all duration-500"
|
||||
:class="
|
||||
course.progress === 100
|
||||
? 'bg-emerald-500'
|
||||
: 'bg-blue-600'
|
||||
"
|
||||
:style="{ width: `${course.progress}%` }"
|
||||
></div>
|
||||
</div>
|
||||
<div class="flex justify-end items-center text-xs">
|
||||
<span
|
||||
class="font-bold cursor-pointer hover:underline transition-colors"
|
||||
:class="
|
||||
course.progress === 100
|
||||
? 'text-emerald-600 dark:text-emerald-400'
|
||||
: 'text-blue-600 dark:text-blue-400'
|
||||
"
|
||||
@click="
|
||||
navigateTo(`/classroom/learning?course_id=${course.id}`)
|
||||
"
|
||||
>
|
||||
{{
|
||||
course.progress === 100
|
||||
? $t("dashboard.studyAgain")
|
||||
: $t("dashboard.continue")
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-bold text-slate-900 dark:text-white relative z-10 tracking-tight">
|
||||
{{ currentUser?.firstName ? `${currentUser.firstName} ${currentUser.lastName || ''}` : 'ผู้ใช้งาน' }}
|
||||
</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-xs mt-1 relative z-10 font-medium tracking-wide">{{ $t('common.student') }}</p>
|
||||
|
||||
<div class="flex w-full gap-3 mt-7 relative z-10 px-2">
|
||||
<div class="flex-1 bg-[#F8FAFC] dark:bg-slate-800 rounded-2xl p-3.5 flex flex-col items-center justify-center transition-colors shadow-sm">
|
||||
<span class="text-[1.35rem] font-black text-[#3B6BE8] dark:text-blue-400 mb-1 leading-none">{{ String(enrolledCourses.length || 0).padStart(2, '0') }}</span>
|
||||
<span class="text-slate-400 text-[10px] font-bold tracking-wider">{{ $t('myCourses.filterProgress') }}</span>
|
||||
</div>
|
||||
<div class="flex-1 bg-[#F8FAFC] dark:bg-slate-800 rounded-2xl p-3.5 flex flex-col items-center justify-center transition-colors shadow-sm">
|
||||
<span class="text-[1.35rem] font-black text-[#10B981] dark:text-emerald-400 mb-1 leading-none z-10">{{ String(enrolledCourses.filter(c => c.progress >= 100).length || 0).padStart(2, '0') }}</span>
|
||||
<span class="text-slate-400 text-[10px] font-bold tracking-wider z-10">{{ $t('myCourses.filterCompleted') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State Placeholder if less than 2 side courses -->
|
||||
<div
|
||||
v-if="sideCourses.length < 2"
|
||||
class="flex-1 bg-slate-50 dark:!bg-slate-900/30 rounded-2xl border border-dashed border-slate-200 dark:border-slate-800 flex items-center justify-center text-slate-400 dark:text-slate-600 text-sm transition-colors"
|
||||
>
|
||||
{{ $t("dashboard.startNewCourse") }}
|
||||
</div>
|
||||
|
||||
<!-- Recommended Courses Widget -->
|
||||
<div v-if="recommendedCourses.length > 0" class="bg-white dark:!bg-slate-900 rounded-[2rem] p-6 shadow-sm border border-slate-100 dark:border-slate-800 transition-colors">
|
||||
<h2 class="text-[1.1rem] font-bold text-slate-900 dark:text-white mb-5 tracking-tight flex items-center justify-between">
|
||||
{{ $t('dashboard.recommendedCourses') }}
|
||||
</h2>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div v-for="course in recommendedCourses.slice(0, 3)" :key="course.id" class="flex gap-4 group cursor-pointer transition-all" @click="navigateTo(`/browse/discovery?course_id=${course.id}`)">
|
||||
<!-- Thumbnail -->
|
||||
<div class="w-24 h-[68px] rounded-xl overflow-hidden bg-slate-100 shrink-0 relative shadow-sm">
|
||||
<img :src="course.image" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
|
||||
</div>
|
||||
<!-- Info -->
|
||||
<div class="flex-1 flex flex-col justify-center min-w-0">
|
||||
<h3 class="font-bold text-[13px] text-slate-900 dark:text-white leading-snug line-clamp-2 mb-1.5 group-hover:text-[#3B6BE8] transition-colors pr-1">{{ getLocalizedText(course.title) }}</h3>
|
||||
<div class="flex items-center justify-between mt-auto">
|
||||
<span class="text-slate-500 dark:text-slate-400 text-[11px] font-medium bg-slate-100 dark:bg-slate-800 px-2 py-0.5 rounded text-ellipsis overflow-hidden whitespace-nowrap max-w-[80px]">{{ getLocalizedText(course.category) || 'อื่นๆ' }}</span>
|
||||
<span v-if="course.is_free" class="text-[#10B981] font-bold text-[12px]">ฟรี</span>
|
||||
<span v-else class="text-[#3B6BE8] font-bold text-[12px]">฿{{ Number(course.price).toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 3. Knowledge Library -->
|
||||
<section>
|
||||
<div class="mb-6">
|
||||
<h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] dark:text-white mb-1 transition-colors">
|
||||
{{ $t("dashboard.knowledgeLibrary") }}
|
||||
</h2>
|
||||
<p class="text-gray-500 dark:text-slate-400 text-sm transition-colors">
|
||||
{{ $t("dashboard.libraryDesc") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Content when courses exist -->
|
||||
<div
|
||||
v-if="libraryCourses.length > 0"
|
||||
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"
|
||||
>
|
||||
<!-- Course Cards -->
|
||||
<CourseCard
|
||||
v-for="course in libraryCourses"
|
||||
:key="course.id"
|
||||
v-bind="course"
|
||||
:image="course.thumbnail_url"
|
||||
hide-progress
|
||||
hide-actions
|
||||
class="h-full md:col-span-1"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="bg-white dark:!bg-slate-900/40 rounded-3xl border border-slate-100 dark:border-white/5 shadow-sm p-8 flex flex-col items-center justify-center text-center h-full min-h-[300px] hover:shadow-md transition-all group"
|
||||
>
|
||||
<p class="text-gray-600 dark:text-slate-300 font-medium mb-6 mt-4 transition-colors">
|
||||
{{ $t("dashboard.chooseLibrary") }}
|
||||
</p>
|
||||
<q-btn
|
||||
flat
|
||||
rounded
|
||||
no-caps
|
||||
class="text-blue-600 hover:bg-blue-50 dark:text-blue-400 dark:hover:bg-blue-900/30 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
|
||||
to="/dashboard/my-courses"
|
||||
>
|
||||
{{ $t("dashboard.viewAll") }}
|
||||
<q-icon name="arrow_forward" size="18px" class="ml-2" />
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="bg-white dark:!bg-slate-900/40 rounded-3xl border border-dashed border-slate-200 dark:border-slate-800 p-12 flex flex-col items-center justify-center text-center min-h-[300px] transition-colors"
|
||||
>
|
||||
<div class="bg-blue-50 dark:bg-blue-900/20 p-6 rounded-full mb-6 transition-colors">
|
||||
<q-icon name="school" size="48px" class="text-blue-200 dark:text-blue-400" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-800 dark:text-white mb-2 transition-colors">
|
||||
{{ $t("dashboard.emptyLibraryTitle") }}
|
||||
</h3>
|
||||
<p class="text-gray-500 dark:text-slate-400 mb-8 max-w-md transition-colors">
|
||||
{{ $t("dashboard.emptyLibraryDesc") }}
|
||||
</p>
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
no-caps
|
||||
class="bg-blue-600 text-white px-8 py-3 font-bold hover:bg-blue-700 shadow-lg shadow-blue-500/20 transition-all hover:scale-105"
|
||||
to="/browse/discovery"
|
||||
>
|
||||
{{ $t("dashboard.viewAllCourses") }}
|
||||
</q-btn>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 5. Recommended Courses -->
|
||||
<section class="pb-20">
|
||||
<div class="mb-6">
|
||||
<h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] dark:text-white text-left transition-colors">
|
||||
{{ $t("dashboard.recommendedCourses") }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Recommended Grid (3 columns) -->
|
||||
<div
|
||||
class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in"
|
||||
>
|
||||
<CourseCard
|
||||
v-for="course in recommendedCourses"
|
||||
:key="course.id"
|
||||
v-bind="course"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div
|
||||
v-if="recommendedCourses.length === 0 && !isLoading"
|
||||
class="flex justify-center py-10 opacity-50"
|
||||
>
|
||||
<div class="text-gray-400 dark:text-slate-500">{{ $t("dashboard.noRecommended") }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button @click="navigateTo('/browse/discovery')" class="w-full mt-6 py-2.5 rounded-xl text-[13px] font-bold text-[#3B6BE8] dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50 transition-colors">
|
||||
{{ $t('dashboard.viewAllCourses') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Scoped specific styles */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.q-btn) {
|
||||
text-transform: none; /* Prevent uppercase in Q-Btns */
|
||||
.bg-grid-pattern {
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255,255,255,0.08) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255,255,255,0.08) 1px, transparent 1px);
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,304 +1,369 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file my-courses.vue
|
||||
* @description My Courses Page.
|
||||
* Displays enrolled courses with filters for progress/completed.
|
||||
* Handles enrollment success modals and certificate downloads.
|
||||
* @description หน้าคอร์สของฉัน (My Enrolled Courses)
|
||||
*/
|
||||
|
||||
// 1. นำเข้าระบบและกำหนด MetaData
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
const { t, locale } = useI18n()
|
||||
|
||||
useHead({
|
||||
title: `${t('sidebar.myCourses')} - e-Learning`
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const showEnrollModal = ref(false)
|
||||
const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
|
||||
const quasar = useQuasar()
|
||||
useHead({ title: `${t('sidebar.myCourses') || 'My Courses'} - e-Learning Platform` })
|
||||
|
||||
// 2. เรียกใช้งาน Composables
|
||||
const { fetchEnrolledCourses, getCertificate, generateCertificate, fetchCourses } = useCourse()
|
||||
const { fetchCategories } = useCategory()
|
||||
|
||||
// 3. กำหนดสถานะ (State)
|
||||
const enrolledCourses = ref<any[]>([])
|
||||
const allCategories = ref<any[]>([])
|
||||
const isLoading = ref(false)
|
||||
const searchQuery = ref('')
|
||||
const activeCategory = ref<number | 'all'>('all')
|
||||
const viewMode = ref<'grid' | 'list'>('grid')
|
||||
const showEnrollModal = ref(false)
|
||||
|
||||
|
||||
// Check URL query parameters to show 'Enrollment Success' modal
|
||||
onMounted(() => {
|
||||
if (route.query.enrolled) {
|
||||
showEnrollModal.value = true
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// Helper to get localized text
|
||||
const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
|
||||
// 4. ฟังก์ชันเสริม (Helper Functions)
|
||||
const getLocalizedText = (text: any) => {
|
||||
if (!text) return ''
|
||||
if (typeof text === 'string') return text
|
||||
|
||||
const currentLocale = locale.value as 'th' | 'en'
|
||||
return text[currentLocale] || text.th || text.en || ''
|
||||
}
|
||||
|
||||
// Data Handling
|
||||
const { fetchEnrolledCourses, getCertificate, generateCertificate } = useCourse()
|
||||
const enrolledCourses = ref<any[]>([])
|
||||
const isLoading = ref(false)
|
||||
const isDownloadingCert = ref(false)
|
||||
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 loadEnrolledCourses = async () => {
|
||||
isLoading.value = true
|
||||
// FIX: For 'progress' tab, we want both ENROLLED and IN_PROGRESS.
|
||||
// Since API takes single status, we fetch ALL and filter locally for 'progress'.
|
||||
const apiStatus = activeFilter.value === 'completed'
|
||||
? 'COMPLETED'
|
||||
: undefined // 'all' or 'progress' -> fetch all
|
||||
// 5. การจัดการโหลดข้อมูล (Data Loading)
|
||||
const loadData = async () => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const [catRes, courseRes, allCoursesRes] = await Promise.all([
|
||||
fetchCategories(),
|
||||
fetchEnrolledCourses({}),
|
||||
fetchCourses({ limit: 1000 })
|
||||
])
|
||||
|
||||
const res = await fetchEnrolledCourses({
|
||||
status: apiStatus
|
||||
})
|
||||
if (catRes.success) allCategories.value = catRes.data || []
|
||||
const catMap = new Map()
|
||||
allCategories.value.forEach(c => catMap.set(c.id, c))
|
||||
|
||||
const catIdMap = new Map()
|
||||
if (allCoursesRes && allCoursesRes.success && allCoursesRes.data) {
|
||||
allCoursesRes.data.forEach((c: any) => catIdMap.set(c.id, c.category_id))
|
||||
}
|
||||
|
||||
if (res.success) {
|
||||
let courses = (res.data || [])
|
||||
if (courseRes.success && courseRes.data) {
|
||||
enrolledCourses.value = courseRes.data.map(item => {
|
||||
const mappedCategoryId = catIdMap.get(item.course.id) || item.course.category_id
|
||||
const cat = catMap.get(mappedCategoryId)
|
||||
|
||||
// ตรรกะการหาชื่อผู้สอน (Instructor Name Logic)
|
||||
let instName = t('course.instructor')
|
||||
let user = null;
|
||||
if (item.course.instructors && item.course.instructors.length > 0) {
|
||||
const primary = item.course.instructors.find((i: any) => i.is_primary);
|
||||
user = primary ? primary.user : item.course.instructors[0].user;
|
||||
} else {
|
||||
user = item.course.creator || (item.course as any).instructor;
|
||||
}
|
||||
|
||||
if (user?.profile?.first_name) {
|
||||
instName = `${user.profile.first_name} ${user.profile.last_name || ''}`.trim();
|
||||
} else if (user?.first_name) {
|
||||
instName = `${user.first_name} ${user.last_name || ''}`.trim();
|
||||
} else if (user?.username) {
|
||||
instName = user.username;
|
||||
}
|
||||
|
||||
// Local filter to ensure UI consistency regardless of backend filtering
|
||||
if (activeFilter.value === 'progress') {
|
||||
courses = courses.filter(c => c.status !== 'COMPLETED')
|
||||
} else if (activeFilter.value === 'completed') {
|
||||
courses = courses.filter(c => c.status === 'COMPLETED')
|
||||
return {
|
||||
id: item.course_id,
|
||||
enrollment_id: item.id,
|
||||
title: item.course.title,
|
||||
progress: item.progress_percentage || 0,
|
||||
lessons: item.course.total_lessons || 10,
|
||||
completed: item.status === 'COMPLETED',
|
||||
thumbnail_url: item.course.thumbnail_url,
|
||||
category_id: mappedCategoryId,
|
||||
category_name: cat ? getLocalizedText(cat.name) : '',
|
||||
instructor_name: instName
|
||||
}
|
||||
})
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to load enrolled courses", err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
enrolledCourses.value = courses.map(item => ({
|
||||
id: item.course_id,
|
||||
enrollment_id: item.id,
|
||||
title: item.course.title,
|
||||
progress: item.progress_percentage || 0,
|
||||
lessons: item.course.total_lessons || 0,
|
||||
completed: item.status === 'COMPLETED',
|
||||
thumbnail_url: item.course.thumbnail_url
|
||||
}))
|
||||
}
|
||||
isLoading.value = false
|
||||
}
|
||||
|
||||
// Watch filter changes to reload
|
||||
watch(activeFilter, () => {
|
||||
loadEnrolledCourses()
|
||||
// 6. ตัวแปร Computed (Computed Properties)
|
||||
const uniqueCategories = computed(() => {
|
||||
const ids = Array.from(new Set(enrolledCourses.value.map(c => c.category_id)))
|
||||
return allCategories.value.filter(c => ids.includes(c.id))
|
||||
})
|
||||
|
||||
const inProgressCourses = computed(() => {
|
||||
return enrolledCourses.value.filter(c => !c.completed && c.progress >= 0 && c.progress < 100).reverse()
|
||||
})
|
||||
|
||||
// Client-side Search Filtering
|
||||
const filteredEnrolledCourses = computed(() => {
|
||||
if (!searchQuery.value) return enrolledCourses.value
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return enrolledCourses.value.filter(c => {
|
||||
const title = getLocalizedText(c.title).toLowerCase()
|
||||
return title.includes(query)
|
||||
})
|
||||
let result = enrolledCourses.value
|
||||
if (activeCategory.value !== 'all') {
|
||||
result = result.filter(c => c.category_id === activeCategory.value)
|
||||
}
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
result = result.filter(c => getLocalizedText(c.title).toLowerCase().includes(query))
|
||||
}
|
||||
return result
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (route.query.enrolled) {
|
||||
showEnrollModal.value = true
|
||||
}
|
||||
loadEnrolledCourses()
|
||||
})
|
||||
|
||||
// Certificate Handling
|
||||
const downloadingCourseId = ref<number | null>(null)
|
||||
// Certificate Handling
|
||||
|
||||
const downloadCertificate = async (course: any) => {
|
||||
if (!course) return
|
||||
downloadingCourseId.value = course.id
|
||||
|
||||
try {
|
||||
// 1. Try to GET existing certificate
|
||||
let res = await getCertificate(course.id)
|
||||
|
||||
// 2. If not found (or error), try to GENERATE new one
|
||||
if (!res.success) {
|
||||
res = await generateCertificate(course.id)
|
||||
}
|
||||
|
||||
// 3. Handle Result
|
||||
if (res.success && res.data) {
|
||||
const cert = res.data
|
||||
if (cert.download_url) {
|
||||
window.open(cert.download_url, '_blank')
|
||||
} else {
|
||||
// Fallback if no URL but success (maybe show message)
|
||||
console.warn('Certificate ready but no URL')
|
||||
}
|
||||
} else {
|
||||
// Silent fail or minimal log, or maybe use a toast if available, but avoid $q if undefined
|
||||
console.error(res.error || 'Failed to get certificate')
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
} finally {
|
||||
downloadingCourseId.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const validCourseId = computed(() => {
|
||||
const cid = route.query.course_id
|
||||
if (!cid || cid === 'undefined' || cid === 'null' || cid === 'NaN') return null
|
||||
return cid
|
||||
})
|
||||
|
||||
// 7. ฟังก์ชันการทำงาน (Actions)
|
||||
const handleDownloadCertificate = async (courseId: number) => {
|
||||
try {
|
||||
quasar.notify({ message: t('common.loading') + '...', color: 'info' })
|
||||
const genRes = await generateCertificate(courseId)
|
||||
if (genRes.success && genRes.data?.download_url) {
|
||||
window.open(genRes.data.download_url, '_blank')
|
||||
} else {
|
||||
throw new Error(genRes.error || t('common.error'))
|
||||
}
|
||||
} catch (err: any) {
|
||||
quasar.notify({ message: err.message || t('common.error'), color: 'negative' })
|
||||
}
|
||||
}
|
||||
|
||||
// 8. Lifecycle Hooks
|
||||
onMounted(() => {
|
||||
if (route.query.enrolled) showEnrollModal.value = true
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container">
|
||||
|
||||
|
||||
<!-- Page Header & Filters (Unified Layout) -->
|
||||
<!-- New Enhanced Search Section (Image 2 Style) -->
|
||||
<div class="bg-blue-50/50 dark:bg-blue-900/10 rounded-[2.5rem] p-8 md:p-10 mb-6 border border-blue-100/50 dark:border-blue-500/10">
|
||||
<h2 class="text-2xl md:text-3xl font-black text-slate-900 dark:text-white mb-2">{{ $t('myCourses.title') }}</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400 font-medium mb-8">{{ $t('myCourses.subtitle') }}</p>
|
||||
<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">
|
||||
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<!-- Search Input -->
|
||||
<div class="relative flex-1 group">
|
||||
<div class="absolute left-5 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-blue-600 transition-colors">
|
||||
<q-icon name="search" size="24px" />
|
||||
</div>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
:placeholder="$t('myCourses.searchPlaceholder')"
|
||||
class="w-full pl-14 pr-6 py-3.5 bg-white dark:!bg-slate-900/80 border-2 border-transparent dark:border-white/5 rounded-2xl text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-blue-500/20 focus:ring-4 focus:ring-blue-500/5 transition-all text-base font-medium shadow-sm"
|
||||
/>
|
||||
<!-- Section 1: เรียนต่อจากครั้งก่อน (Continue Learning) -->
|
||||
<div v-if="inProgressCourses.length > 0 && !searchQuery" 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 mb-8 transition-all">
|
||||
<div class="flex items-center gap-2.5 mb-6">
|
||||
<q-icon name="play_circle_outline" size="26px" class="text-[#3B6BE8]" />
|
||||
<h2 class="text-[1.35rem] font-bold text-slate-900 dark:text-white tracking-tight">{{ $t('dashboard.continueLearningTitle') }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Search Button -->
|
||||
<q-btn
|
||||
unelevated
|
||||
color="primary"
|
||||
class="px-8 h-[52px] rounded-2xl font-black shadow-lg shadow-blue-600/20 hover:scale-[1.02] transition-transform"
|
||||
no-caps
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<q-icon name="search" size="20px" />
|
||||
<span class="text-base">{{ $t("discovery.searchBtn") }}</span>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div v-for="course in inProgressCourses.slice(0, 2)" :key="course.id" class="border border-slate-100 dark:border-slate-800 rounded-3xl p-4 flex flex-col sm:flex-row gap-5 items-center bg-[#F8FAFC] dark:bg-slate-800/50 hover:border-blue-100 dark:hover:border-blue-900/50 transition-colors">
|
||||
<!-- Image -->
|
||||
<div class="w-full sm:w-[160px] h-[120px] rounded-[1.25rem] overflow-hidden bg-slate-200 shrink-0 relative group">
|
||||
<img :src="course.thumbnail_url" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"/>
|
||||
<!-- Quick play overlay -->
|
||||
<div @click="navigateTo(`/classroom/learning?course_id=${course.id}`)" class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center cursor-pointer">
|
||||
<div class="bg-white/30 backdrop-blur-md rounded-full w-10 h-10 flex flex-col items-center justify-center">
|
||||
<q-icon name="play_arrow" color="white" size="20px" class="ml-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Info -->
|
||||
<div class="flex-1 flex flex-col justify-center min-w-0 py-1 w-full">
|
||||
<div class="mb-2" v-if="course.category_name">
|
||||
<span class="bg-[#E9EFFD] dark:bg-blue-900/40 text-[#3B6BE8] dark:text-blue-400 px-3.5 py-1.5 rounded-full text-[10px] font-bold tracking-wide">{{ course.category_name }}</span>
|
||||
</div>
|
||||
<h3 class="font-bold text-slate-900 dark:text-white text-[14px] leading-snug line-clamp-2 mb-4 pr-2">{{ getLocalizedText(course.title) }}</h3>
|
||||
|
||||
<div class="flex items-center justify-between gap-4 mt-auto">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-1.5 tracking-wide">
|
||||
{{ $t('course.progress') }}: {{ course.progress }}%
|
||||
</div>
|
||||
<div class="h-[6px] w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
|
||||
<div class="h-full bg-[#3B6BE8] rounded-full transition-all duration-500" :style="{ width: `${course.progress}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="navigateTo(`/classroom/learning?course_id=${course.id}`)" class="bg-[#3B6BE8] hover:bg-blue-700 text-white rounded-full px-5 py-2 text-[12px] font-bold shrink-0 shadow-md shadow-blue-500/20 transition-transform hover:scale-105 outline-none">{{ $t('dashboard.continue') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-12">
|
||||
<!-- Filter Tabs (Horizontal Bar) -->
|
||||
<div class="bg-white dark:!bg-slate-900/50 p-1.5 rounded-2xl border border-slate-100 dark:border-white/5 inline-flex items-center gap-1 shadow-sm">
|
||||
<q-btn
|
||||
v-for="filter in ['all', 'progress', 'completed']"
|
||||
:key="filter"
|
||||
@click="activeFilter = filter as any"
|
||||
flat
|
||||
rounded
|
||||
dense
|
||||
class="px-5 py-2 font-bold transition-all text-[11px] uppercase tracking-wider"
|
||||
:class="activeFilter === filter ? 'bg-blue-600 text-white shadow-md shadow-blue-600/20' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:!hover:bg-slate-800/50'"
|
||||
:label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ส่วนที่ 2: คอร์สของฉัน (My Courses) -->
|
||||
<div 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">{{ $t('myCourses.title') }}</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" 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="$t('myCourses.searchPlaceholder')" />
|
||||
</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>
|
||||
|
||||
<!-- Courses Grid -->
|
||||
<div v-if="isLoading" class="flex justify-center py-20">
|
||||
<q-spinner size="3rem" color="primary" />
|
||||
</div>
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<template v-for="course in filteredEnrolledCourses" :key="course.id">
|
||||
<!-- In Progress Course Card -->
|
||||
<CourseCard
|
||||
v-if="!course.completed"
|
||||
:id="course.id"
|
||||
:title="course.title"
|
||||
:progress="course.progress"
|
||||
:image="course.thumbnail_url"
|
||||
show-continue
|
||||
:show-view-details="false"
|
||||
/>
|
||||
<!-- Completed Course Card -->
|
||||
<CourseCard
|
||||
v-else
|
||||
:id="course.id"
|
||||
:title="course.title"
|
||||
:progress="100"
|
||||
:image="course.thumbnail_url"
|
||||
:completed="true"
|
||||
show-certificate
|
||||
show-study-again
|
||||
:show-view-details="false"
|
||||
:loading="downloadingCourseId === course.id"
|
||||
@view-certificate="downloadCertificate(course)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<!-- ตัวกรองหมวดหมู่ (แบบเลื่อนแนวนอนบนมือถือ) -->
|
||||
<div class="mb-8 w-full overflow-hidden">
|
||||
<div class="flex flex-nowrap items-center gap-3 overflow-x-auto scrollbar-hide pb-2 -mx-1 px-1">
|
||||
<button
|
||||
@click="activeCategory = 'all'"
|
||||
:class="activeCategory === 'all' ? 'bg-[#3B6BE8] text-white border-transparent' : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:border-slate-300'"
|
||||
class="px-5 py-2.5 rounded-xl border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none whitespace-nowrap font-bold shadow-sm">
|
||||
<q-icon name="apps" size="18px" /> {{ $t('myCourses.filterAll') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-for="cat in uniqueCategories" :key="cat.id"
|
||||
@click="activeCategory = cat.id"
|
||||
:class="activeCategory === cat.id ? 'bg-[#3B6BE8] text-white border-transparent' : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:border-slate-300'"
|
||||
class="px-5 py-2.5 rounded-xl border text-[13px] sm:text-[14px] flex items-center justify-center gap-2 transition-all outline-none whitespace-nowrap font-bold shadow-sm">
|
||||
<q-icon :name="getCategoryIcon(cat.name)" size="18px" />
|
||||
{{ getLocalizedText(cat.name) }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-if="!isLoading && enrolledCourses.length === 0" 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-white/5 mt-4">
|
||||
<q-icon v-if="searchQuery" 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">
|
||||
{{ searchQuery ? $t('discovery.emptyTitle') : $t('myCourses.emptyTitle') }}
|
||||
</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
|
||||
{{ searchQuery ? $t('discovery.emptyDesc') : $t('myCourses.emptyDesc') }}
|
||||
</p>
|
||||
<NuxtLink v-if="!searchQuery" to="/browse/discovery" class="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-colors">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
|
||||
<button v-else class="mt-4 font-bold text-blue-600 hover:text-blue-700 transition-colors" @click="searchQuery = ''">
|
||||
{{ $t('discovery.showAll') }}
|
||||
</button>
|
||||
<!-- Active View -->
|
||||
<div v-if="isLoading" class="flex justify-center py-24">
|
||||
<q-spinner size="3rem" color="primary" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="filteredEnrolledCourses.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 filteredEnrolledCourses" :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-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 group cursor-pointer" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">
|
||||
<!-- Thumbnail -->
|
||||
<div class="relative w-full aspect-[4/3] 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" />
|
||||
<!-- Badge inside Image Map Top Left -->
|
||||
<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">
|
||||
{{ course.category_name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card Body -->
|
||||
<div class="p-5 flex flex-col flex-1">
|
||||
<h3 class="font-bold text-slate-900 dark:text-white text-[14px] leading-snug line-clamp-2 mb-3">{{ getLocalizedText(course.title) }}</h3>
|
||||
|
||||
|
||||
|
||||
<div class="mt-auto flex items-center justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<div class="text-[10px] font-bold text-slate-700 dark:text-slate-300 mb-1.5 tracking-wide">{{ $t('course.progress') }}: {{ course.progress }}%</div>
|
||||
<div class="h-[6px] w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
|
||||
<div class="h-full rounded-full transition-all duration-500" :class="course.completed ? 'bg-green-500' : 'bg-[#3B6BE8] dark:bg-blue-400'" :style="{ width: `${course.progress}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-3 sm:mt-0">
|
||||
<!-- Certificate Button -->
|
||||
<button v-if="course.completed" @click.stop="handleDownloadCertificate(course.id)" class="border border-green-100 bg-green-50 text-green-600 dark:border-green-900/50 dark:bg-green-900/30 dark:text-green-400 rounded-full px-3 py-1.5 text-[11px] font-bold hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors shrink-0 flex items-center justify-center gap-1">
|
||||
<q-icon name="workspace_premium" size="14px" /> {{ $t('course.certificate') }}
|
||||
</button>
|
||||
<!-- Continue/Replay Button -->
|
||||
<button class="bg-[#3B6BE8] text-white border-transparent hover:bg-blue-700 shadow-sm rounded-full px-5 py-1.5 text-[11px] font-bold transition-colors shrink-0 text-center cursor-pointer">
|
||||
{{ course.completed ? $t('course.studyAgain') : $t('dashboard.continue') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- LIST VIEW -->
|
||||
<div v-else class="flex flex-col gap-4">
|
||||
<div v-for="course in filteredEnrolledCourses" :key="course.id" class="flex flex-col sm:flex-row items-center rounded-[1.5rem] bg-white dark:!bg-slate-900 border border-slate-100 dark:border-slate-800 p-4 gap-6 shadow-sm hover:shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition-all duration-300 cursor-pointer group" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">
|
||||
|
||||
<!-- Thumbnail Left -->
|
||||
<div class="relative w-full sm:w-[240px] aspect-[16/10] sm:aspect-auto sm:h-[130px] rounded-2xl 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" />
|
||||
<!-- Badge inside Image -->
|
||||
<div v-if="course.category_name" class="absolute top-2.5 left-2.5 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">
|
||||
{{ course.category_name }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Right -->
|
||||
<div class="flex-1 w-full flex flex-col md:flex-row gap-6 md:items-center">
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="font-bold text-slate-900 dark:text-white text-[15px] leading-snug line-clamp-2 mb-3 pr-4">{{ getLocalizedText(course.title) }}</h3>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Progress and Button Zone -->
|
||||
<div class="flex md:flex-col items-center md:items-end justify-between md:justify-center gap-4 shrink-0 md:w-[200px]">
|
||||
<div class="w-full max-w-[140px] md:max-w-full">
|
||||
<div class="flex justify-between items-center text-[11px] font-bold text-slate-700 dark:text-slate-300 mb-2 tracking-wide">
|
||||
<span>{{ $t('course.progress') }}:</span>
|
||||
<span>{{ course.progress }}%</span>
|
||||
</div>
|
||||
<div class="h-[6px] w-full bg-slate-200 dark:bg-slate-700 rounded-full overflow-hidden">
|
||||
<div class="h-full rounded-full transition-all duration-500" :class="course.completed ? 'bg-green-500' : 'bg-[#3B6BE8] dark:bg-blue-400'" :style="{ width: `${course.progress}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-stretch md:items-end gap-2 mt-3 sm:mt-0 w-full sm:w-auto">
|
||||
<!-- Certificate Button -->
|
||||
<button v-if="course.completed" @click.stop="handleDownloadCertificate(course.id)" class="border border-green-100 bg-green-50 text-green-600 dark:border-green-900/50 dark:bg-green-900/30 dark:text-green-400 rounded-full px-4 py-2 text-[12px] font-bold hover:bg-green-100 dark:hover:bg-green-900/50 transition-colors shrink-0 flex items-center justify-center gap-1 w-full sm:w-auto">
|
||||
<q-icon name="workspace_premium" size="16px" /> {{ $t('course.downloadCertificate') }}
|
||||
</button>
|
||||
<!-- Continue/Replay Button -->
|
||||
<button class="bg-[#3B6BE8] text-white border-transparent hover:bg-blue-700 shadow-sm rounded-full px-6 py-2 text-[12px] font-bold transition-colors shrink-0 text-center w-full sm:w-auto cursor-pointer">
|
||||
{{ course.completed ? $t('course.studyAgain') : $t('dashboard.continue') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Empty filter state -->
|
||||
<div v-else class="flex flex-col items-center justify-center py-20">
|
||||
<q-icon name="search_off" size="48px" class="text-slate-300 dark:text-slate-600 mb-4" />
|
||||
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">{{ $t('myCourses.searchNoResult') }}</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm">{{ $t('myCourses.searchNoResultDesc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- MODAL: Enrollment Success -->
|
||||
<q-dialog v-model="showEnrollModal" backdrop-filter="blur(4px)">
|
||||
<q-card class="rounded-[1.5rem] shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden bg-white dark:bg-slate-800">
|
||||
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-green-400 to-emerald-600"></div>
|
||||
<div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
|
||||
✓
|
||||
</div>
|
||||
<div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">✓</div>
|
||||
<h2 class="text-2xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('enrollment.successTitle') }}</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400 mb-8">{{ $t('enrollment.successDesc') }}</p>
|
||||
<div class="flex flex-col gap-3">
|
||||
<q-btn
|
||||
v-if="validCourseId"
|
||||
:to="`/classroom/learning?course_id=${validCourseId}`"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full py-3 text-lg font-bold shadow-lg"
|
||||
:label="$t('enrollment.startNow')"
|
||||
/>
|
||||
<q-btn
|
||||
v-else
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full py-3 text-lg font-bold shadow-lg"
|
||||
:label="$t('common.close')"
|
||||
@click="showEnrollModal = false"
|
||||
/>
|
||||
<q-btn
|
||||
v-if="validCourseId"
|
||||
flat
|
||||
rounded
|
||||
color="grey-7"
|
||||
class="w-full py-3 font-bold"
|
||||
:label="$t('enrollment.later')"
|
||||
@click="showEnrollModal = false"
|
||||
/>
|
||||
<q-btn v-if="validCourseId" :to="`/classroom/learning?course_id=${validCourseId}`" unelevated rounded color="primary" class="w-full py-3 text-lg font-bold shadow-lg" :label="$t('enrollment.startNow')" />
|
||||
<q-btn v-else unelevated rounded color="primary" class="w-full py-3 text-lg font-bold shadow-lg" :label="$t('common.close')" @click="showEnrollModal = false" />
|
||||
<q-btn v-if="validCourseId" flat rounded color="grey-7" class="w-full py-3 font-bold" :label="$t('enrollment.later')" @click="showEnrollModal = false" />
|
||||
</div>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Custom Font for Signature/Name if desired */
|
||||
.font-handwriting {
|
||||
font-family: 'Dancing Script', cursive, serif; /* Fallback */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,15 @@ definePageMeta({
|
|||
middleware: 'auth'
|
||||
})
|
||||
|
||||
useHead({
|
||||
title: 'ตั้งค่าบัญชี - e-Learning'
|
||||
})
|
||||
|
||||
const { locale, t } = useI18n()
|
||||
const { currentUser, updateUserProfile, changePassword, uploadAvatar, sendVerifyEmail, fetchUserProfile } = useAuth()
|
||||
const { getLocalizedText } = useCourse()
|
||||
const { locale, t } = useI18n()
|
||||
import { useQuasar } from 'quasar'
|
||||
const $q = useQuasar()
|
||||
|
||||
useHead({
|
||||
title: `${t('userMenu.settings')} - e-Learning`
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
|
@ -57,6 +59,13 @@ const passwordForm = reactive({
|
|||
confirmPassword: ''
|
||||
})
|
||||
|
||||
const showPasswordModal = ref(false)
|
||||
const showPassword = reactive({
|
||||
current: false,
|
||||
new: false,
|
||||
confirm: false
|
||||
})
|
||||
|
||||
|
||||
// Rules have been moved to components
|
||||
|
||||
|
|
@ -95,9 +104,10 @@ const handleFileUpload = async (fileOrEvent: File | Event) => {
|
|||
|
||||
if (result.success && result.data?.avatar_url) {
|
||||
userData.value.photoURL = result.data.avatar_url
|
||||
$q.notify({ type: 'positive', message: 'อัปเดตรูปโปรไฟล์สำเร็จ', position: 'top' })
|
||||
} else {
|
||||
console.error('Upload failed:', result.error)
|
||||
alert(result.error || t('profile.updateError'))
|
||||
$q.notify({ type: 'negative', message: result.error || t('profile.updateError') || 'อัปเดตรูปโปรไฟล์ไม่สำเร็จ', position: 'top' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -131,9 +141,9 @@ const handleUpdateProfile = async () => {
|
|||
const result = await updateUserProfile(payload)
|
||||
|
||||
if (result?.success) {
|
||||
// success logic
|
||||
$q.notify({ type: 'positive', message: t('profile.updateSuccess'), position: 'top' })
|
||||
} else {
|
||||
alert(result?.error || t('profile.updateError'))
|
||||
$q.notify({ type: 'negative', message: result?.error || t('profile.updateError'), position: 'top' })
|
||||
}
|
||||
|
||||
isProfileSaving.value = false
|
||||
|
|
@ -145,19 +155,19 @@ const handleSendVerifyEmail = async () => {
|
|||
isSendingVerify.value = false
|
||||
|
||||
if (result.success) {
|
||||
alert(result.message || t('profile.verifyEmailSuccess') || 'ส่งอีเมลยืนยันสำเร็จ')
|
||||
$q.notify({ type: 'positive', message: result.message || t('profile.verifyEmailSuccess') || 'ส่งอีเมลยืนยันสำเร็จ', position: 'top' })
|
||||
} else {
|
||||
if (result.code === 400) {
|
||||
alert(t('profile.emailAlreadyVerified') || 'อีเมลของคุณได้รับการยืนยันแล้ว')
|
||||
$q.notify({ type: 'warning', message: t('profile.emailAlreadyVerified') || 'อีเมลของคุณได้รับการยืนยันแล้ว', position: 'top' })
|
||||
} else {
|
||||
alert(result.error || t('profile.verifyEmailError') || 'ส่งอีเมลไม่สำเร็จ')
|
||||
$q.notify({ type: 'negative', message: result.error || t('profile.verifyEmailError') || 'ส่งอีเมลไม่สำเร็จ', position: 'top' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleUpdatePassword = async () => {
|
||||
if (passwordForm.newPassword !== passwordForm.confirmPassword) {
|
||||
alert('รหัสผ่านใหม่ไม่ตรงกัน')
|
||||
$q.notify({ type: 'negative', message: 'รหัสผ่านใหม่ไม่ตรงกัน', position: 'top' })
|
||||
return
|
||||
}
|
||||
|
||||
|
|
@ -169,12 +179,13 @@ const handleUpdatePassword = async () => {
|
|||
})
|
||||
|
||||
if (result.success) {
|
||||
alert(t('profile.passwordSuccess'))
|
||||
$q.notify({ type: 'positive', message: t('profile.passwordSuccess') || 'เปลี่ยนรหัสผ่านสำเร็จ', position: 'top' })
|
||||
passwordForm.currentPassword = ''
|
||||
passwordForm.newPassword = ''
|
||||
passwordForm.confirmPassword = ''
|
||||
showPasswordModal.value = false
|
||||
} else {
|
||||
alert(result.error || t('profile.passwordError'))
|
||||
$q.notify({ type: 'negative', message: result.error || t('profile.passwordError') || 'เปลี่ยนรหัสผ่านไม่สำเร็จ', position: 'top' })
|
||||
}
|
||||
|
||||
isPasswordSaving.value = false
|
||||
|
|
@ -203,169 +214,216 @@ onMounted(async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-container bg-[#F8F9FA] dark:bg-[#020617] min-h-screen transition-colors duration-300">
|
||||
<div class="page-container bg-[#F8F9FA] dark:bg-[#020617] transition-colors duration-300 min-h-screen">
|
||||
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div class="flex items-center gap-4">
|
||||
<q-btn
|
||||
v-if="isHydrated && isEditing"
|
||||
flat
|
||||
round
|
||||
icon="arrow_back"
|
||||
class="text-slate-600 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800"
|
||||
@click="toggleEdit(false)"
|
||||
/>
|
||||
<div class="flex items-start gap-4">
|
||||
<div>
|
||||
<h1 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white leading-tight">
|
||||
{{ (isHydrated && isEditing) ? $t('profile.editProfile') : $t('profile.myProfile') }}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-h-9 flex items-center">
|
||||
<q-btn
|
||||
v-if="isHydrated && !isEditing"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="font-bold shadow-lg shadow-blue-500/20"
|
||||
icon="edit"
|
||||
:label="$t('profile.editProfile')"
|
||||
@click="toggleEdit(true)"
|
||||
/>
|
||||
<div
|
||||
v-else-if="!isHydrated"
|
||||
class="h-9 w-24 rounded-md bg-slate-200 dark:bg-slate-700 animate-pulse"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!isHydrated" class="flex justify-center py-20">
|
||||
<q-spinner size="3rem" color="primary" />
|
||||
</div>
|
||||
|
||||
<div v-else class="max-w-4xl mx-auto pb-20">
|
||||
<!-- MAIN PROFILE SETTINGS -->
|
||||
<div v-else class="max-w-5xl mx-auto pb-20 fade-in pt-4">
|
||||
|
||||
<!-- VIEW MODE: Premium Card with Banner -->
|
||||
<div v-if="!isEditing" class="bg-white dark:!bg-slate-900/50 border border-slate-200 dark:border-white/5 rounded-3xl shadow-xl dark:shadow-none overflow-hidden fade-in min-h-[500px] flex flex-col transition-colors duration-300">
|
||||
|
||||
<!-- Identity Header (Banner & Avatar) -->
|
||||
<div class="relative">
|
||||
<div class="h-40 bg-gradient-to-r from-blue-700 via-blue-600 to-indigo-700 relative overflow-hidden">
|
||||
<!-- Abstract Patterns -->
|
||||
<div class="absolute inset-0 opacity-10">
|
||||
<div class="absolute -top-10 -right-10 w-64 h-64 rounded-full bg-white blur-3xl"></div>
|
||||
<div class="absolute -bottom-10 -left-10 w-48 h-48 rounded-full bg-indigo-300 blur-3xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-8 md:px-12 flex flex-col md:flex-row items-center md:items-end gap-8 md:gap-12 -mt-12 pb-8 relative z-10">
|
||||
<div class="relative group flex-shrink-0">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="userData.photoURL"
|
||||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="140"
|
||||
class="border-[6px] border-white dark:border-slate-900 shadow-2xl rounded-[2.5rem] bg-white dark:bg-slate-800 transition-colors duration-300"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-center md:text-left pt-4 md:pt-0 flex-grow min-w-0">
|
||||
<h2 class="text-3xl md:text-4xl font-black text-slate-900 dark:text-white mb-2 leading-tight tracking-tight break-words">
|
||||
{{ userData.firstName }} {{ userData.lastName }}
|
||||
</h2>
|
||||
<div class="flex flex-wrap items-center justify-center md:justify-start gap-4">
|
||||
<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-900/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-white/5">
|
||||
<q-icon name="alternate_email" size="xs" class="text-blue-500" />
|
||||
<span class="text-sm">{{ userData.email }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-slate-500 dark:text-slate-400 font-bold bg-slate-50 dark:bg-slate-900/50 px-3 py-1.5 rounded-xl border border-slate-100 dark:border-white/5">
|
||||
<q-icon name="verified_user" size="xs" :class="userData.emailVerifiedAt ? 'text-green-500' : 'text-amber-500'" />
|
||||
<span class="text-sm">{{ userData.emailVerifiedAt ? $t('profile.emailVerified') : $t('profile.verifyEmail') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- บัตรข้อมูลโปรไฟล์ (Profile Card) -->
|
||||
<div class="bg-white dark:!bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm mb-6 overflow-hidden">
|
||||
<div class="p-8 border-b border-slate-200 dark:border-slate-800">
|
||||
<h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ $t('profile.myProfile') }}</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">{{ $t('profile.publicInfo') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- View Details Content -->
|
||||
<div class="p-8 md:p-12 flex-grow">
|
||||
<div class="max-w-3xl mx-auto h-full fade-in">
|
||||
<h3 class="text-sm font-black text-slate-700 dark:text-slate-300 uppercase tracking-widest flex items-center gap-2 mb-8">
|
||||
<span class="w-2 h-2 bg-blue-600 rounded-full"></span> {{ $t('profile.accountDetails') }}
|
||||
</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:scale-110 transition-transform">
|
||||
<q-icon name="smartphone" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-0.5">{{ $t('profile.phone') }}</div>
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ userData.phone || '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 group">
|
||||
<div class="w-12 h-12 rounded-2xl bg-indigo-50 dark:bg-indigo-900/20 flex items-center justify-center text-indigo-600 dark:text-indigo-400 group-hover:scale-110 transition-transform">
|
||||
<q-icon name="calendar_today" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-[10px] font-black text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-0.5">{{ $t('profile.joinedAt') }}</div>
|
||||
<div class="text-lg font-bold text-slate-900 dark:text-white tracking-tight">{{ formatDate(userData.createdAt) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-8">
|
||||
<!-- ส่วนอัปโหลดรูปโปรไฟล์ -->
|
||||
<div class="flex flex-col sm:flex-row items-center sm:items-center gap-6 mb-10 text-center sm:text-left">
|
||||
<div class="relative cursor-pointer" @click="triggerUpload">
|
||||
<UserAvatar
|
||||
:photo-u-r-l="userData.photoURL"
|
||||
:first-name="userData.firstName"
|
||||
:last-name="userData.lastName"
|
||||
size="100"
|
||||
class="rounded-full bg-slate-100 dark:bg-slate-800 object-cover border-4 border-slate-50 dark:border-slate-800"
|
||||
/>
|
||||
<div class="absolute bottom-0 right-0 bg-[#3B6BE8] text-white p-1.5 rounded-full border-2 border-white dark:border-slate-900 hover:bg-blue-700 transition flex items-center justify-center">
|
||||
<q-icon name="edit" size="14px" />
|
||||
</div>
|
||||
<input type="file" ref="fileInput" class="hidden" accept="image/jpeg, image/png, image/gif" @change="handleFileUpload" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center sm:items-start">
|
||||
<button @click="triggerUpload" class="bg-[#3B6BE8] hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg text-sm font-bold transition mb-2 shadow-sm whitespace-nowrap">
|
||||
<span v-if="isProfileSaving"><q-spinner size="18px" /> {{ $t('profile.uploading') }}</span>
|
||||
<span v-else>{{ $t('profile.changeAvatar') }}</span>
|
||||
</button>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-xs mt-1">{{ $t('profile.avatarHint') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Inputs (2 Column Grid) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6 mb-4">
|
||||
<div class="md:col-span-2 relative">
|
||||
<label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-2">{{ $t('profile.prefix') }}</label>
|
||||
<select v-model="userData.prefix" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none focus:border-[#3B6BE8] transition text-sm font-medium text-slate-900 dark:text-white appearance-none cursor-pointer">
|
||||
<option value="" disabled>{{ $t('profile.selectPrefix') }}</option>
|
||||
<option value="นาย">{{ $t('profile.mr') }}</option>
|
||||
<option value="นาง">{{ $t('profile.mrs') }}</option>
|
||||
<option value="นางสาว">{{ $t('profile.miss') }}</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute bottom-0 right-0 flex items-center px-4 h-11 text-slate-500">
|
||||
<q-icon name="arrow_drop_down" size="24px" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-2">{{ $t('profile.firstName') }}-{{ $t('profile.lastName') }}</label>
|
||||
<div class="flex gap-3">
|
||||
<input type="text" v-model="userData.firstName" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none focus:border-[#3B6BE8] transition text-sm font-medium text-slate-900 dark:text-white" :placeholder="$t('profile.firstName')" />
|
||||
<input type="text" v-model="userData.lastName" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none focus:border-[#3B6BE8] transition text-sm font-medium text-slate-900 dark:text-white" :placeholder="$t('profile.lastName')" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300">{{ $t('profile.email') }}</label>
|
||||
<div v-if="userData.emailVerifiedAt" class="flex items-center gap-1 text-green-500 text-xs font-bold">
|
||||
<q-icon name="verified_user" size="14px" /> {{ $t('profile.emailVerified') }}
|
||||
</div>
|
||||
<button v-else @click="handleSendVerifyEmail" :disabled="isSendingVerify" class="flex items-center gap-1 text-amber-500 hover:text-amber-600 text-xs font-bold transition">
|
||||
<q-icon name="warning" size="14px" /> <span v-if="isSendingVerify"><q-spinner size="xs" /> {{ $t('profile.verifying') }}</span><span v-else class="underline">{{ $t('profile.verifyNow') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<input type="email" v-model="userData.email" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none transition text-sm font-medium text-slate-500 dark:text-slate-400" disabled />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-2">{{ $t('profile.phone') }}</label>
|
||||
<input type="tel" v-model="userData.phone" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none focus:border-[#3B6BE8] transition text-sm font-medium text-slate-900 dark:text-white" placeholder="08x-xxx-xxxx" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-2">{{ $t('profile.joinedAt') }}</label>
|
||||
<input type="text" :value="formatDate(userData.createdAt)" class="w-full bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 px-4 py-3 rounded-lg focus:outline-none transition text-sm font-medium text-slate-500 dark:text-slate-400" disabled />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer Buttons -->
|
||||
<div class="px-6 sm:px-8 py-5 border-t border-slate-200 dark:border-slate-800 flex flex-col sm:flex-row justify-center sm:justify-end gap-3 items-center bg-white dark:!bg-slate-900">
|
||||
<button class="w-full sm:w-auto text-[13px] font-bold text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white px-4 py-2 transition order-2 sm:order-1" @click="fetchUserProfile(true)">{{ $t('common.cancel') }}</button>
|
||||
<button @click="handleUpdateProfile" :disabled="isProfileSaving" class="w-full sm:w-auto bg-[#3B6BE8] hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg text-[13px] font-bold transition shadow-sm disabled:opacity-50 order-1 sm:order-2">
|
||||
<span v-if="isProfileSaving"><q-spinner size="18px" color="white" class="mr-1" /> {{ $t('profile.saving') }}</span>
|
||||
<span v-else>{{ $t('common.saveChanges') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- EDIT MODE: Tabs and Forms (Clean Layout) -->
|
||||
<div v-else class="fade-in">
|
||||
<!-- Tab Selector -->
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="bg-white dark:!bg-slate-900/50 p-1.5 rounded-2xl flex items-center gap-1 border border-slate-200 dark:border-white/5 shadow-sm">
|
||||
<button
|
||||
@click="activeTab = 'general'"
|
||||
class="px-6 md:px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
|
||||
:class="activeTab === 'general' ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 shadow-sm scale-100' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 scale-95 opacity-70'"
|
||||
>
|
||||
<q-icon name="person_outline" size="18px" /> {{ $t('profile.generalInfo') }}
|
||||
</button>
|
||||
<button
|
||||
@click="activeTab = 'security'"
|
||||
class="px-6 md:px-8 py-3 rounded-xl font-black text-xs uppercase tracking-widest transition-all flex items-center gap-2"
|
||||
:class="activeTab === 'security' ? 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 shadow-sm scale-100' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 scale-95 opacity-70'"
|
||||
>
|
||||
<q-icon name="lock_open" size="18px" /> {{ $t('profile.security') }}
|
||||
</button>
|
||||
<!-- Security Card -->
|
||||
<div class="bg-white dark:!bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl shadow-sm overflow-hidden">
|
||||
<div class="p-8 border-b border-slate-200 dark:border-slate-800">
|
||||
<h2 class="text-xl font-bold text-slate-900 dark:text-white">{{ $t('profile.security') }}</h2>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">{{ $t('profile.securitySubtitle') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="px-6 sm:px-8 py-8 sm:py-10">
|
||||
<div class="p-5 sm:p-6 rounded-2xl bg-slate-50 dark:bg-slate-800/50 border border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row items-center sm:items-center justify-between gap-6 text-center sm:text-left">
|
||||
<div class="flex flex-col sm:flex-row items-center gap-4">
|
||||
<div class="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 flex items-center justify-center shrink-0">
|
||||
<q-icon name="key" size="24px" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-bold text-slate-900 dark:text-white text-[15px] sm:text-[16px]">{{ $t('profile.password') }}</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-xs mt-0.5 sm:mt-1">{{ $t('profile.securitySubtitle') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="showPasswordModal = true" class="w-full sm:w-auto bg-[#3B6BE8] hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg text-sm font-bold transition shadow-sm shadow-blue-500/10">
|
||||
{{ $t('profile.changePasswordBtn') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Edit Content -->
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div v-if="activeTab === 'general'" class="bg-white dark:!bg-slate-900/50 border border-slate-200 dark:border-white/5 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
|
||||
<ProfileEditForm
|
||||
v-model="userData"
|
||||
:loading="isProfileSaving"
|
||||
:verifying="isSendingVerify"
|
||||
@submit="handleUpdateProfile"
|
||||
@upload="handleFileUpload"
|
||||
@verify="handleSendVerifyEmail"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="bg-white dark:!bg-slate-900/50 border border-slate-200 dark:border-white/5 rounded-3xl shadow-xl dark:shadow-none p-6 md:p-10">
|
||||
<PasswordChangeForm
|
||||
v-model="passwordForm"
|
||||
:loading="isPasswordSaving"
|
||||
@submit="handleUpdatePassword"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Password Modal -->
|
||||
<q-dialog v-model="showPasswordModal">
|
||||
<q-card class="w-full max-w-md rounded-2xl p-2 dark:bg-slate-900 shadow-xl">
|
||||
<q-form @submit="handleUpdatePassword">
|
||||
<q-card-section class="flex items-center justify-between pb-2">
|
||||
<div class="text-xl font-bold text-slate-900 dark:text-white">{{ $t('profile.changePasswordBtn') }}</div>
|
||||
<q-btn icon="close" flat round dense v-close-popup class="text-slate-500" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section class="pt-2">
|
||||
<div class="space-y-1">
|
||||
<div>
|
||||
<label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-1">{{ $t('profile.currentPassword') }}</label>
|
||||
<q-input
|
||||
v-model="passwordForm.currentPassword"
|
||||
:type="showPassword.current ? 'text' : 'password'"
|
||||
outlined
|
||||
dense
|
||||
class="custom-pwd-input"
|
||||
:rules="[val => !!val || $t('common.required')]"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showPassword.current ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showPassword.current = !showPassword.current"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-1">{{ $t('profile.newPassword') }}</label>
|
||||
<q-input
|
||||
v-model="passwordForm.newPassword"
|
||||
:type="showPassword.new ? 'text' : 'password'"
|
||||
outlined
|
||||
dense
|
||||
class="custom-pwd-input"
|
||||
:rules="[
|
||||
val => !!val || $t('common.required'),
|
||||
val => val.length >= 6 || $t('profile.newPasswordHint')
|
||||
]"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showPassword.new ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showPassword.new = !showPassword.new"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-[13px] font-bold text-slate-700 dark:text-slate-300 mb-1">{{ $t('profile.confirmNewPassword') }}</label>
|
||||
<q-input
|
||||
v-model="passwordForm.confirmPassword"
|
||||
:type="showPassword.confirm ? 'text' : 'password'"
|
||||
outlined
|
||||
dense
|
||||
class="custom-pwd-input"
|
||||
:rules="[
|
||||
val => !!val || $t('common.required'),
|
||||
val => val === passwordForm.newPassword || $t('common.passwordsDoNotMatch')
|
||||
]"
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showPassword.confirm ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400"
|
||||
@click="showPassword.confirm = !showPassword.confirm"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right" class="pt-2 pb-2 px-4">
|
||||
<q-btn flat :label="$t('common.cancel')" color="grey-7" v-close-popup class="font-bold text-[13px]" />
|
||||
<q-btn type="submit" unelevated color="primary" :label="$t('common.save')" :loading="isPasswordSaving" class="font-bold rounded-lg px-4 text-[13px]" />
|
||||
</q-card-actions>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -374,7 +432,13 @@ onMounted(async () => {
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* Removed card-premium and dark mode overrides as we used utility classes */
|
||||
.custom-pwd-input :deep(.q-field__control) {
|
||||
border-radius: 8px;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
.dark .custom-pwd-input :deep(.q-field__control) {
|
||||
background-color: #1e293b;
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
|
|
|
|||
|
|
@ -22,15 +22,20 @@ const { user } = useAuth()
|
|||
const categoryCards = CATEGORY_CARDS
|
||||
const whyChooseUs = WHY_CHOOSE_US
|
||||
|
||||
//ระดับความยาก
|
||||
const levelModel = ref('ระดับทั้งหมด')
|
||||
const levelOptions = ['ระดับทั้งหมด','ระดับเริ่มต้น', 'ระดับกลาง', 'ระดับสูง']
|
||||
|
||||
const categories = ref<any[]>([])
|
||||
const topCourses = ref<any[]>([])
|
||||
const selectedCategory = ref('all')
|
||||
const isLoading = ref(false)
|
||||
const currentSlide = ref(0)
|
||||
|
||||
const courseChunks = computed(() => {
|
||||
const chunkSize = 4
|
||||
const chunks = []
|
||||
if (!topCourses.value) return []
|
||||
if (!topCourses.value || topCourses.value.length === 0) return []
|
||||
for (let i = 0; i < topCourses.value.length; i += chunkSize) {
|
||||
chunks.push(topCourses.value.slice(i, i + chunkSize))
|
||||
}
|
||||
|
|
@ -42,7 +47,7 @@ const loadData = async () => {
|
|||
try {
|
||||
const [catRes, courseRes] = await Promise.all([
|
||||
fetchCategories(),
|
||||
fetchCourses({ limit: 8, forceRefresh: true })
|
||||
fetchCourses({ limit: 12, forceRefresh: true })
|
||||
])
|
||||
|
||||
if (catRes.success) categories.value = catRes.data || []
|
||||
|
|
@ -61,7 +66,7 @@ const goBrowse = (slug: string) => {
|
|||
watch(selectedCategory, async (newVal) => {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const params: any = { limit: 8 }
|
||||
const params: any = { limit: 12 }
|
||||
if (newVal !== 'all') {
|
||||
const category = categories.value.find(c => c.slug === newVal)
|
||||
if (category) {
|
||||
|
|
@ -87,41 +92,49 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<div class="landing-page bg-white min-h-screen">
|
||||
<!-- Hero Section -->
|
||||
<header class="relative pt-32 pb-16 md:pt-40 md:pb-20 overflow-hidden bg-white">
|
||||
<!-- Decorative Background -->
|
||||
<div class="absolute top-0 right-0 w-[45%] h-[105%] bg-blue-50/50 rounded-bl-[12rem] -z-10 animate-fade-in"/>
|
||||
|
||||
<div class="container mx-auto px-6 md:px-12 grid grid-cols-1 md:grid-cols-2 items-center gap-16">
|
||||
<div class="hero-left slide-up">
|
||||
<div class="flex items-center gap-3 mb-8 text-blue-600">
|
||||
<q-icon name="stars" size="28px" />
|
||||
<span class="text-sm font-black tracking-widest uppercase">E-Learning Platform</span>
|
||||
<!-- Section 1: Hero Section -->
|
||||
<section class="container mx-auto py-24 md:py-24 lg:py-28 px-6 lg:px-12 pb-16">
|
||||
<div class="flex flex-col lg:flex-row items-center gap-10 lg:gap-10 justify-between animate-fade-in">
|
||||
<!-- Left Content -->
|
||||
<div class="flex flex-col items-start gap-6 flex-1 max-w-2xl ">
|
||||
<!-- Badge -->
|
||||
<div class="flex items-center gap-2 bg-[#E9EFFD] px-3 py-1.5 rounded-full slide-up">
|
||||
<span class="w-2 h-2 rounded-full bg-blue-600 block" />
|
||||
<span class="text-blue-600 font-bold text-xs uppercase tracking-wide">
|
||||
มีคอร์สเรียนใหม่
|
||||
</span>
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl lg:text-7xl font-bold text-slate-900 leading-[1.2] mb-8 tracking-normal">
|
||||
คอร์สเรียนออนไลน์<br><span class="text-blue-600">เพิ่มทักษะ</span>ยุคดิจิทัล
|
||||
|
||||
<!-- Heading -->
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-[55px] font-bold leading-tight lg:leading-[66px] slide-up" style="animation-delay: 0.2s;">
|
||||
<span class="text-slate-900">ขยายขอบเขตความรู้ของคุณ</span><br>
|
||||
<span class="text-blue-600">ด้วยการเรียนรู้ออนไลน์</span>
|
||||
</h1>
|
||||
<p class="text-slate-500 text-lg md:text-xl font-medium mb-12 leading-relaxed max-w-xl slide-up" style="animation-delay: 0.1s;">
|
||||
แหล่งรวมคอร์สออนไลน์คุณภาพสูงที่จะช่วยอัปสกิลให้คุณทำงานเก่งขึ้น พัฒนาทักษะที่ตลาดต้องการ พร้อมให้คุณก้าวไปข้างหน้าได้อย่างมั่นใจ!
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-slate-500 text-lg sm:text-xl leading-relaxed slide-up" style="animation-delay: 0.3s;">
|
||||
จุดประกายความรู้ของคุณ และเริ่มต้นอัปสกิลกับผู้เชี่ยวชาญ
|
||||
ในอุตสาหกรรมที่มีความรู้รอบด้านหลากหลายในหลายสาขา
|
||||
เรียนได้ทุกที่ ทุกเวลา
|
||||
</p>
|
||||
|
||||
<!-- Search Bar Pill -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 mb-10 slide-up" style="animation-delay: 0.2s;">
|
||||
<!-- Buttons -->
|
||||
<div class=" w-full flex flex-col sm:flex-row items-center gap-4 pt-5 slide-up" style="animation-delay: 0.4s;">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
label="ดูคอร์สเรียนทั้งหมด"
|
||||
class="px-10 h-16 font-black text-white text-xl shadow-xl shadow-blue-600/20 hover:scale-105 transition-transform"
|
||||
color="blue-600"
|
||||
label="ดูคอร์สเรียน"
|
||||
class="px-10 py-4 w-full sm:w-auto rounded-3xl font-semibold text-white text-lg shadow-xl shadow-blue-600/20 transition-transform"
|
||||
no-caps
|
||||
to="/browse"
|
||||
/>
|
||||
<q-btn
|
||||
outline
|
||||
rounded
|
||||
color="primary"
|
||||
label="สมัครสมาชิกฟรี"
|
||||
class="px-10 h-16 font-black text-xl border-2 hover:bg-blue-50"
|
||||
color="grey-8"
|
||||
class="px-10 py-4 w-full sm:w-auto btn-user rounded-3xl font-semibold text-lg hover:bg-blue-50 "
|
||||
no-caps
|
||||
to="/auth/register"
|
||||
v-if="!user"
|
||||
|
|
@ -129,53 +142,65 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hero Visual Showcase -->
|
||||
<div class="hero-right flex justify-center md:justify-end items-center slide-up" style="animation-delay: 0.2s;">
|
||||
<div class="relative w-full max-w-xl">
|
||||
<!-- Main Illustration -->
|
||||
<div class="relative z-10 animate-float">
|
||||
<img
|
||||
src="/img/elearning.png"
|
||||
alt="E-Learning Illustration"
|
||||
class="w-full h-auto drop-shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
<!-- Right - Hero Image -->
|
||||
<div class="flex-1 w-full max-w-lg md:max-w-md lg:max-w-xl pl-0 py-10">
|
||||
<div class="relative rounded-2xl overflow-hidden shadow-[0_25px_50px_-12px_rgba(0,0,0,0.25)] aspect-square">
|
||||
<img
|
||||
src="https://api.builder.io/api/v1/image/assets/TEMP/11ba9b46c799fac950967377f8158fa942c1a6b8?width=1184"
|
||||
alt="Students collaborating"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent" />
|
||||
|
||||
<!-- Decorative shapes behind the image -->
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] bg-blue-50/50 rounded-full blur-3xl -z-10" />
|
||||
<div class="absolute -top-10 -left-10 w-32 h-32 bg-amber-100 rounded-[3rem] -z-10 animate-pulse" />
|
||||
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-blue-100 rounded-full -z-10 animate-pulse" style="animation-delay: -2s;" />
|
||||
<!-- Course Card Overlay -->
|
||||
<!-- <div class="absolute bottom-5 left-5 right-5">
|
||||
<div class="bg-white/85 backdrop-blur-sm border border-white/20 rounded-3xl px-6 py-5">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-2xl bg-blue-600/20">
|
||||
<q-icon name="o_play_circle" size="25px" class="text-blue-600" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-slate-900 font-bold text-sm leading-5">
|
||||
เรียนรู้การออกแบบ UI/UX
|
||||
</span>
|
||||
<span class="text-slate-500 text-xs leading-4 mt-0.5">
|
||||
คอร์สวิดีโอ • 12 บทเรียน
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us Section -->
|
||||
<section class="pt-20 pb-12 bg-white relative">
|
||||
<!-- Section 2: ทำไมต้องเลือกแพลตฟอร์มของเรา -->
|
||||
<section class="pt-20 pb-14 bg-white relative flex-col">
|
||||
<div class="container mx-auto px-6 lg:px-12">
|
||||
<!-- Heading -->
|
||||
<div class="text-center mb-16 slide-up">
|
||||
<h2 class="text-3xl md:text-5xl font-black text-slate-900 mb-6">
|
||||
<h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-6">
|
||||
ทำไมต้องเลือกแพลตฟอร์มของเรา?
|
||||
</h2>
|
||||
<p class="text-slate-500 text-lg md:text-xl font-medium max-w-3xl mx-auto leading-relaxed">
|
||||
<p class="text-slate-500 text-base font-normal md:text-xl max-w-3xl mx-auto leading-relaxed">
|
||||
เรามีเครื่องมือและความเชี่ยวชาญที่จะช่วยให้คุณประสบความสำเร็จในการเปลี่ยนสายอาชีพและการสร้างทักษะระดับมืออาชีพ
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Horizontal Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div v-for="(item, i) in whyChooseUs" :key="i"
|
||||
class="slide-up p-10 rounded-[2.5rem] bg-slate-50/50 border border-slate-100 hover:bg-white hover:shadow-2xl hover:shadow-blue-600/5 transition-all duration-500 group"
|
||||
class="slide-up p-10 rounded-2xl bg-[#F8FAFC] border border-[#f1f2f9] hover:border-[#2463eb61] hover:bg-white transition-all duration-500 group"
|
||||
:style="`animation-delay: ${i * 0.1}s`"
|
||||
>
|
||||
<div class="w-16 h-16 rounded-3xl flex items-center justify-center mb-8 transition-transform group-hover:scale-110 duration-500"
|
||||
:class="item.iconBg"
|
||||
>
|
||||
<q-icon :name="item.icon" size="32px" :class="item.iconColor" />
|
||||
<div class="w-14 h-14 rounded-full bg-[#E3EBFA] flex items-center justify-center mb-5 transition-transform group-hover:scale-110 duration-500">
|
||||
<q-icon :name="item.icon" size="28px" class="text-blue-600" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-black text-slate-900 mb-4 group-hover:text-blue-600 transition-colors">
|
||||
<h3 class="text-[1.3rem] font-bold text-slate-900 group-hover:text-blue-600 transition-colors">
|
||||
{{ item.title }}
|
||||
</h3>
|
||||
<p class="text-slate-500 text-lg leading-relaxed font-medium">
|
||||
<p class="text-slate-500 text-lg leading-relaxed ">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -183,38 +208,39 @@ onMounted(() => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="pt-16 pb-12 md:pt-24 md:pb-20 bg-white">
|
||||
<!-- Section 3: เลือกเรียนตามเรื่องที่คุณสนใจ -->
|
||||
<section class="py-20 md:py-24 bg-white">
|
||||
<div class="container mx-auto px-6 lg:px-12">
|
||||
<!-- Heading -->
|
||||
<div class="mb-12 slide-up">
|
||||
<h2 class="text-3xl md:text-4xl font-black text-slate-900 px-4">
|
||||
<h2 class="text-[1.4rem] text-3xl md:text-4xl font-semibold text-slate-900 px-4">
|
||||
เลือกเรียนตามเรื่องที่คุณสนใจ
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Horizontal Cards (New Layout - Image 2) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 px-4">
|
||||
<!-- Horizontal Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 justify-center gap-6 px-4">
|
||||
<div v-for="(card, i) in categoryCards" :key="i"
|
||||
class="group cursor-pointer bg-white rounded-[2rem] p-6 border border-slate-100/80 shadow-sm hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 transition-all duration-500 relative flex items-center gap-5"
|
||||
class="cursor-pointer bg-white rounded-3xl p-6 border border-slate-200/80 shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:shadow-2xl hover:shadow-blue-600/5 hover:-translate-y-1 hover:border-[#2463eb61] transition-all duration-500 flex items-center gap-5"
|
||||
@click="goBrowse(card.slug)"
|
||||
>
|
||||
<!-- Icon Box -->
|
||||
<div class="flex-shrink-0 w-16 h-16 rounded-[1.5rem] flex items-center justify-center bg-blue-50/50 group-hover:scale-110 transition-transform duration-500"
|
||||
>
|
||||
<q-icon :name="card.icon" size="28px" class="text-blue-600" />
|
||||
<div class="flex-shrink-0 w-16 h-16 rounded-2xl flex items-center justify-center bg-slate-50 group-hover:scale-110 transition-transform duration-500">
|
||||
<q-icon :name="card.icon" size="35px" class="text-blue-600" />
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-grow pr-2">
|
||||
<h3 class="text-lg md:text-xl font-black text-slate-900 mb-1 group-hover:text-blue-600 transition-colors leading-tight">
|
||||
<h3 class="text-lg md:text-xl font-bold text-slate-900 mb-1 group-hover:text-blue-600 transition-colors leading-tight">
|
||||
{{ card.title }}
|
||||
</h3>
|
||||
<p class="text-slate-500 text-xs md:text-sm font-medium leading-relaxed opacity-70">
|
||||
<p class="text-slate-600 text-xs md:text-sm leading-relaxed opacity-70">
|
||||
{{ card.desc }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Arrow -->
|
||||
<div class="flex-shrink-0 text-slate-300 group-hover:text-blue-600 transition-colors transform group-hover:translate-x-1 duration-300">
|
||||
<div class="gt-xs flex-shrink-0 text-slate-300 group-hover:text-blue-600 transition-colors transform group-hover:translate-x-1 duration-300">
|
||||
<q-icon name="chevron_right" size="24px" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -222,45 +248,65 @@ onMounted(() => {
|
|||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Section 4: "คอร์สออนไลน์" -->
|
||||
<section class="pt-12 pb-24 md:pt-20 md:pb-40 bg-slate-50/50">
|
||||
<section class="py-12 md:py-24 bg-slate-50">
|
||||
<div class="container mx-auto px-6 lg:px-12">
|
||||
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 gap-8">
|
||||
<!-- Heading -->
|
||||
<div class="flex flex-col md:flex-row items-start md:items-end justify-between mb-5 gap-8">
|
||||
<div class="slide-up">
|
||||
<h2 class="text-3xl md:text-5xl font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
|
||||
<p class="text-slate-500 font-bold text-lg">เริ่มต้นเรียนรู้ทักษะใหม่ด้วยคอร์สคุณภาพจากผู้เชี่ยวชาญ</p>
|
||||
<h2 class="text-4xl md:text-[2.4rem] font-bold text-slate-900 mb-4">คอร์สออนไลน์</h2>
|
||||
</div>
|
||||
<NuxtLink to="/browse" class="flex items-center gap-3 px-8 py-3 rounded-full border-2 border-blue-600 text-blue-700 font-bold hover:bg-blue-600 hover:text-white transition-all slide-up">
|
||||
คอร์สออนไลน์ทั้งหมด <q-icon name="arrow_forward" size="20px" />
|
||||
<NuxtLink to="/browse" class="flex items-center py-3 text-lg rounded-full font-bold ">
|
||||
<span class="text-blue-600 hover:text-blue-500 ">ดูคอร์สทั้งหมด</span>
|
||||
<q-icon name="arrow_forward" size="15px" class="text-blue-600 ml-2" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Filter Tabs / Pills -->
|
||||
<div class="flex items-center gap-4 mb-8 overflow-x-auto pb-6 no-scrollbar slide-up">
|
||||
<button
|
||||
class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
|
||||
:class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
|
||||
@click="selectedCategory = 'all'"
|
||||
>
|
||||
ทั้งหมด
|
||||
</button>
|
||||
<button
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
class="px-8 py-3 rounded-full font-black text-base transition-all whitespace-nowrap border-2"
|
||||
:class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 shadow-lg shadow-blue-600/30' : 'bg-white border-slate-100 text-slate-500 hover:border-slate-300'"
|
||||
@click="selectedCategory = category.slug"
|
||||
>
|
||||
{{ getLocalizedText(category.name) }}
|
||||
</button>
|
||||
<!-- Filters Row -->
|
||||
<div class="flex items-center gap-2 mb-8 overflow-x-auto no-scrollbar slide-up justify-between">
|
||||
<!-- Category Filters -->
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-2"
|
||||
:class="selectedCategory === 'all' ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-100 text-slate-700 hover:border-slate-300'"
|
||||
@click="selectedCategory = 'all'"
|
||||
>
|
||||
<q-icon name="o_check_circle" size="20px" class="mr-1" />
|
||||
ทั้งหมด
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-for="category in categories"
|
||||
:key="category.id"
|
||||
class="py-2 px-5 rounded-full font-medium text-lg transition-all whitespace-nowrap border-[1.5px]"
|
||||
:class="selectedCategory === category.slug ? 'bg-blue-600 text-white border-blue-600 font-semibold' : 'bg-white border-slate-200 text-slate-700 hover:border-slate-300'"
|
||||
@click="selectedCategory = category.slug"
|
||||
>
|
||||
<q-icon :name="category.icon || 'o_label'" size="20px" class="mr-1" />
|
||||
{{ getLocalizedText(category.name) }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Level Dropdown -->
|
||||
<!-- <div class="flex items-center gap-2 font-medium">
|
||||
<q-select
|
||||
borderless
|
||||
v-model="levelModel"
|
||||
:options="levelOptions"
|
||||
dropdown-icon="o_keyboard_arrow_down"
|
||||
class="text-lg"
|
||||
popup-content-class="rounded-lg text-lg shadow-sm text-slate-700"
|
||||
>
|
||||
<template v-slot:before>
|
||||
<div class="text-slate-700 text-lg">ระดับความยาก:</div>
|
||||
</template>
|
||||
</q-select>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<!-- Courses Carousel -->
|
||||
<div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||||
<div v-for="i in 4" :key="i" class="bg-white rounded-[3rem] h-[480px] animate-pulse" />
|
||||
<div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div v-for="i in 4" :key="i" class="bg-white rounded-2xl h-[450px] animate-pulse" />
|
||||
</div>
|
||||
|
||||
<div v-else class="relative group/carousel slide-up">
|
||||
|
|
@ -279,14 +325,63 @@ onMounted(() => {
|
|||
v-for="(chunk, pageIndex) in courseChunks"
|
||||
:key="pageIndex"
|
||||
:name="pageIndex"
|
||||
class="p-4"
|
||||
class="p-0"
|
||||
>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
|
||||
<CourseCard
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div
|
||||
v-for="course in chunk"
|
||||
:key="course.id"
|
||||
v-bind="{ ...course, image: course.thumbnail_url }"
|
||||
/>
|
||||
class="flex flex-col flex-1 min-w-0 rounded-2xl border border-slate-100 bg-white shadow-sm overflow-hidden hover:shadow-lg hover:-translate-y-1 transition-all duration-300 cursor-pointer"
|
||||
@click="navigateTo(`/course/${course.id}`)"
|
||||
>
|
||||
<!-- Image-->
|
||||
<div class="relative flex-shrink-0">
|
||||
<img
|
||||
v-if="course.thumbnail_url"
|
||||
:src="course.thumbnail_url"
|
||||
:alt="getLocalizedText(course.title)"
|
||||
class="w-full h-[150px] sm:h-[180px] lg:h-[200px] object-cover"
|
||||
/>
|
||||
<div v-else class="w-full h-[150px] sm:h-[180px] lg:h-[200px] bg-slate-100 flex items-center justify-center">
|
||||
<q-icon name="o_image" size="40px" class="text-slate-300" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex flex-col flex-1 p-6">
|
||||
|
||||
|
||||
<!-- Title -->
|
||||
<h3 class="text-[#0F172A] font-semibold text-lg leading-snug mb-2 line-clamp-2">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
</h3>
|
||||
|
||||
<!-- Description -->
|
||||
<p class="text-slate-500 text-sm leading-relaxed mb-4 flex-1 line-clamp-2">
|
||||
{{ getLocalizedText(course.description) }}
|
||||
</p>
|
||||
|
||||
|
||||
|
||||
<!-- Price + Button -->
|
||||
<div class="flex items-center justify-between pt-6 border-t border-slate-100 gap-2">
|
||||
<div class="flex flex-col">
|
||||
<span v-if="course.price > 0" class="text-[#0F172A] font-bold text-xl">
|
||||
{{ course.price.toLocaleString() }}.-
|
||||
</span>
|
||||
<span v-else class="text-green-600 font-bold text-xl">
|
||||
ฟรี
|
||||
</span>
|
||||
</div>
|
||||
<button class="flex items-center gap-2 px-4 py-2 rounded-full bg-[#2463EB]/10 hover:bg-[#2463EB]/20 transition-colors">
|
||||
<q-icon name="o_remove_red_eye" size="18px" class="text-[#2463EB]" />
|
||||
<span class="text-[#2463EB] font-medium text-sm">
|
||||
รายละเอียด
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
|
|
@ -313,11 +408,55 @@ onMounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 5: "พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง" -->
|
||||
<section class="py-16 md:py-24 bg-white">
|
||||
<div class="max-w-7xl mx-auto px-6 lg:px-12">
|
||||
<div class="bg-blue-600 rounded-3xl px-8 py-20 md:px-18 text-center relative overflow-hidden">
|
||||
<div class="gradient-background">
|
||||
<div class="gradient-sphere sphere-1"></div>
|
||||
<div class="gradient-sphere sphere-2"></div>
|
||||
<div class="gradient-sphere sphere-3"></div>
|
||||
</div>
|
||||
<div class="grid-overlay"></div>
|
||||
<div class="relative z-10">
|
||||
<h2 class="text-3xl sm:text-4xl font-bold text-white mb-4">
|
||||
พร้อมเริ่มต้นการเรียนรู้แล้วหรือยัง?
|
||||
</h2>
|
||||
<p class="text-blue-100 text-lg mb-8 max-w-xl mx-auto">
|
||||
อัปสกิลและรับทักษะที่คุณต้องการเพื่อก้าวหน้าในระดับมืออาชีพ
|
||||
เปิดประสบการณ์การเรียนรู้รูปแบบใหม่ สมัครเลยวันนี้เพื่อเริ่มต้นเข้าสู่บทเรียน
|
||||
</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<q-btn
|
||||
unelevated
|
||||
rounded
|
||||
class="px-8 py-4 bg-white font-bold rounded-3xl hover:bg-slate-50 transition-colors"
|
||||
no-caps
|
||||
size="18px"
|
||||
to="/browse"
|
||||
>
|
||||
<div class="text-blue-600">สำรวจคอร์สเรียน</div>
|
||||
</q-btn>
|
||||
<q-btn
|
||||
outline
|
||||
rounded
|
||||
label="สมัครฟรีวันนี้"
|
||||
color="white"
|
||||
class="px-8 py-4 font-bold rounded-3xl hover:bg-white/10 transition-colors"
|
||||
no-caps
|
||||
size="18px"
|
||||
to="/auth/register"
|
||||
v-if="!user"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.landing-page {
|
||||
font-family: var(--font-main);
|
||||
|
|
@ -342,15 +481,6 @@ onMounted(() => {
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0) rotate(0); }
|
||||
50% { transform: translateY(-20px) rotate(5deg); }
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
|
|
@ -360,26 +490,80 @@ onMounted(() => {
|
|||
animation: fade-in 1s ease-out forwards;
|
||||
}
|
||||
|
||||
/* Typography Overrides */
|
||||
h1, h2, h3 {
|
||||
letter-spacing: normal;
|
||||
/* Hero Right Hover State */
|
||||
.hero-right:hover .relative {
|
||||
transform: translateY(-10px);
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
.hero-right:hover .animate-float {
|
||||
animation-play-state: paused;
|
||||
.gradient-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Responsive Grid Adjustments */
|
||||
@media (max-width: 1200px) {
|
||||
.career-cards-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
.gradient-sphere {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.career-cards-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.sphere-1 {
|
||||
width: 30vw;
|
||||
height: 30vw;
|
||||
background: linear-gradient(40deg, rgba(255, 255, 255, 0.41), rgba(255, 255, 255, 0.164));
|
||||
top: 10%;
|
||||
left: -30%;
|
||||
animation: float-1 15s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.sphere-2 {
|
||||
width: 45vw;
|
||||
height: 45vw;
|
||||
background: linear-gradient(240deg, rgba(16, 33, 121, 0.245), rgba(155, 169, 239, 0.263));
|
||||
bottom: -20%;
|
||||
right: -35%;
|
||||
animation: float-2 18s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.sphere-3 {
|
||||
width: 30vw;
|
||||
height: 30vw;
|
||||
background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3));
|
||||
top: 60%;
|
||||
left: 20%;
|
||||
animation: float-3 20s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes float-1 {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
100% { transform: translate(10%, 10%) scale(1.1); }
|
||||
}
|
||||
|
||||
@keyframes float-2 {
|
||||
0% { transform: translate(0, 0) scale(1); }
|
||||
100% { transform: translate(-10%, -5%) scale(1.15); }
|
||||
}
|
||||
|
||||
@keyframes float-3 {
|
||||
0% { transform: translate(0, 0) scale(1); opacity: 0.3; }
|
||||
100% { transform: translate(-5%, 10%) scale(1.05); opacity: 0.6; }
|
||||
}
|
||||
|
||||
.grid-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 40px 40px;
|
||||
background-image:
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue