chamomind/elearning
7
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages 3 Wiki Activity Actions

feat: Implement core e-learning platform features including quiz, dashboard, course discovery, and classroom learning with i18n support.
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 35s
Details
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Details
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
Details

Browse source
This commit is contained in:
supalerk-ar66 2026-02-12 12:01:37 +07:00
parent d787412036
commit a0ca6f7e6b
13 changed files with 429 additions and 246 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Frontend-Learner/assets/css/main.css
View file

@ -658,12 +658,12 @@ ul {
.page-container { .page-container {
max-width: 1280px; /* max-7xl equivalent roughly */ max-width: 1280px; /* max-7xl equivalent roughly */
margin: 0 auto; margin: 0 auto;
padding: 2rem 1.5rem; padding: 1rem 1.5rem;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.page-container { .page-container {
padding: 3rem 2rem; padding: 1.5rem 2rem;
} }
} }

89
Frontend-Learner/components/classroom/CurriculumSidebar.vue
View file

@ -29,6 +29,20 @@ const getLocalizedText = (text: any) => {
const currentLocale = locale.value as 'th' | 'en' const currentLocale = locale.value as 'th' | 'en'
return text[currentLocale] || text.th || text.en || '' return text[currentLocale] || text.th || text.en || ''
} }
// Local Progress Calculation
const progressPercentage = computed(() => {
if (!props.courseData || !props.courseData.chapters) return 0
let total = 0
let completed = 0
props.courseData.chapters.forEach((c: any) => {
c.lessons.forEach((l: any) => {
total++
if (l.is_completed || l.progress?.is_completed) completed++
})
})
return total > 0 ? Math.round((completed / total) * 100) : 0
})
</script> </script>
<template> <template>
@ -38,13 +52,29 @@ const getLocalizedText = (text: any) => {
show-if-above show-if-above
bordered bordered
side="left" side="left"
:width="320" :width="280"
:breakpoint="1024" :breakpoint="1024"
class="bg-[var(--bg-surface)]" class="bg-slate-50 dark:bg-slate-900 shadow-xl"
content-class="bg-[var(--bg-surface)]" content-class="flex flex-col h-full"
> >
<div v-if="courseData" class="h-full scroll"> <div v-if="courseData" class="flex flex-col h-full overflow-hidden">
<q-list class="pb-10"> <!-- Course Progress Header -->
<div class="p-5 border-b border-gray-200 dark:border-white/5 bg-white dark:bg-slate-900">
<div class="flex justify-between items-center mb-2">
<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>
<q-linear-progress
:value="progressPercentage / 100"
color="primary"
track-color="blue-1"
class="rounded-full h-2"
rounded
/>
</div>
<div class="flex-grow scroll">
<q-list padding class="py-2">
<template v-for="chapter in courseData.chapters" :key="chapter.id"> <template v-for="chapter in courseData.chapters" :key="chapter.id">
@ -58,8 +88,8 @@ const getLocalizedText = (text: any) => {
clickable clickable
v-ripple v-ripple
:active="currentLessonId === lesson.id" :active="currentLessonId === lesson.id"
active-class="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-200 font-medium" active-class="bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300 active-lesson-indicator"
class="border-b border-gray-50 dark:border-white/5" class="px-5 py-3 transition-all duration-200 group relative border-b border-gray-100/50 dark:border-white/5"
@click="!lesson.is_locked && emit('select-lesson', lesson.id)" @click="!lesson.is_locked && emit('select-lesson', lesson.id)"
:disable="lesson.is_locked" :disable="lesson.is_locked"
> >
@ -68,23 +98,60 @@ const getLocalizedText = (text: any) => {
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label class="text-sm md:text-base line-clamp-2 text-[var(--text-main)]"> <q-item-label
class="text-sm font-bold line-clamp-2 transition-colors"
:class="currentLessonId === lesson.id ? 'text-blue-700 dark:text-blue-300' : 'text-slate-700 dark:text-slate-300'"
>
{{ getLocalizedText(lesson.title) }} {{ getLocalizedText(lesson.title) }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section side>
<q-icon v-if="lesson.is_completed || lesson.progress?.is_completed" name="check_circle" color="positive" size="xs" /> <div class="flex items-center">
<q-icon v-else-if="currentLessonId === lesson.id" name="play_circle" color="primary" size="xs" /> <q-icon v-if="lesson.is_completed || lesson.progress?.is_completed" name="check_circle" color="positive" size="18px" />
<q-icon v-else name="radio_button_unchecked" color="grey-4" size="xs" /> <q-icon v-else-if="currentLessonId === lesson.id" name="play_arrow" color="primary" size="18px" class="animate-pulse" />
<q-icon v-else-if="lesson.is_locked" name="lock" color="grey-4" size="18px" />
<q-icon v-else name="radio_button_unchecked" color="grey-3" size="18px" />
</div>
</q-item-section> </q-item-section>
</q-item> </q-item>
</template> </template>
</q-list> </q-list>
</div> </div>
</div>
<div v-else-if="isLoading" class="p-6 text-center text-slate-500"> <div v-else-if="isLoading" class="p-6 text-center text-slate-500">
<q-spinner color="primary" size="2em" /> <q-spinner color="primary" size="2em" />
<div class="mt-2 text-xs">{{ $t('classroom.loadingCurriculum') }}</div> <div class="mt-2 text-xs">{{ $t('classroom.loadingCurriculum') }}</div>
</div> </div>
</q-drawer> </q-drawer>
</template> </template>
<style scoped>
.active-lesson-indicator {
position: relative;
}
.active-lesson-indicator::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: #2563eb; /* blue-600 */
border-radius: 0 4px 4px 0;
}
.scroll::-webkit-scrollbar {
width: 4px;
}
.scroll::-webkit-scrollbar-track {
background: transparent;
}
.scroll::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
.dark .scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.05);
}
</style>

2
Frontend-Learner/components/classroom/VideoPlayer.vue
View file

@ -6,6 +6,7 @@
const props = defineProps<{ const props = defineProps<{
src: string; src: string;
poster?: string;
initialSeekTime?: number; initialSeekTime?: number;
}>(); }>();
@ -241,6 +242,7 @@ watch([volume, isMuted], () => {
<video <video
ref="videoRef" ref="videoRef"
:src="src" :src="src"
:poster="poster"
class="w-full h-full object-contain" class="w-full h-full object-contain"
@click="togglePlay" @click="togglePlay"
@timeupdate="handleTimeUpdate" @timeupdate="handleTimeUpdate"

2
Frontend-Learner/components/discovery/CategorySidebar.vue
View file

@ -50,7 +50,7 @@ const toggleCategory = (id: number) => {
</div> </div>
<div class="flex-1"> <div class="flex-1">
<div class="text-lg font-black text-slate-900 dark:!text-white leading-none mb-1">{{ $t('discovery.categoryTitle') }}</div> <div class="text-lg font-black text-slate-900 dark:!text-white leading-none mb-1">{{ $t('discovery.categoryTitle') }}</div>
<div class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ modelValue.length }} Selectable</div> <div class="text-[10px] font-black uppercase tracking-widest text-slate-400 dark:text-slate-500">{{ modelValue.length }} {{ $t('discovery.selectable') }}</div>
</div> </div>
</div> </div>
</template> </template>

116
Frontend-Learner/components/discovery/CourseDetailView.vue
View file

@ -47,21 +47,17 @@ const handleEnroll = () => {
<template> <template>
<div class="animate-fade-in-up"> <div class="animate-fade-in-up">
<q-btn <div class="flex items-center gap-2 mb-8 group cursor-pointer" @click="emit('back')">
unelevated <q-icon name="arrow_back" size="20px" class="text-slate-400 group-hover:text-blue-600 transition-colors" />
rounded <span class="text-sm font-bold text-slate-500 group-hover:text-blue-600 transition-colors uppercase tracking-widest">{{ $t('common.back') }}</span>
icon="arrow_back" </div>
:label="$t('common.back')"
class="mb-8 font-bold bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-white/10 dark:text-white dark:hover:bg-white/20 transition-all px-4 shadow-sm"
@click="emit('back')"
/>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left: Content Detail --> <!-- Left: Content Detail -->
<div class="lg:col-span-2 space-y-8"> <div class="lg:col-span-2 space-y-8">
<!-- Video Preview Section --> <!-- Video Preview Section -->
<div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group bg-black"> <div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group cursor-pointer bg-slate-900 border-4 border-white dark:border-slate-800 transition-transform duration-500 hover:scale-[1.01]">
<template v-if="course.media?.video_url"> <template v-if="course.media?.video_url">
<video <video
controls controls
@ -69,27 +65,28 @@ const handleEnroll = () => {
:poster="course.thumbnail_url || course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'" :poster="course.thumbnail_url || course.cover_image || 'https://placehold.co/800x450?text=Course+Preview'"
> >
<source :src="course.media.video_url" type="video/mp4"> <source :src="course.media.video_url" type="video/mp4">
Your browser does not support the video tag. {{ $t('course.videoNotSupported') }}
</video> </video>
<!-- Custom Play Overlay when not playing - simple version is often best -->
</template> </template>
<!-- Beautiful Image Showcase if no video --> <!-- Beautiful Image Showcase if no video -->
<template v-else> <template v-else>
<div class="w-full h-full flex items-center justify-center relative overflow-hidden bg-slate-950"> <div class="w-full h-full flex items-center justify-center relative overflow-hidden bg-slate-950 group">
<!-- Show Thumbnail as Background if exists (Blurred background fill) --> <!-- Blurred background fill -->
<img <img
v-if="course.thumbnail_url || course.cover_image" v-if="course.thumbnail_url || course.cover_image"
:src="course.thumbnail_url || course.cover_image" :src="course.thumbnail_url || course.cover_image"
class="absolute inset-0 w-full h-full object-cover opacity-30 blur-xl scale-110" class="absolute inset-0 w-full h-full object-cover opacity-40 blur-2xl scale-125"
/> />
<!-- Main Sharp Image --> <!-- Main Sharp Image -->
<img <img
v-if="course.thumbnail_url || course.cover_image" v-if="course.thumbnail_url || course.cover_image"
:src="course.thumbnail_url || course.cover_image" :src="course.thumbnail_url || course.cover_image"
class="relative z-10 w-full h-full object-contain shadow-2xl shadow-black/50" class="relative z-10 w-full h-full object-cover shadow-2xl transition-transform duration-700 group-hover:scale-105"
/> />
<div v-else class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center"> <div v-if="!course.thumbnail_url && !course.cover_image" class="absolute inset-0 bg-gradient-to-br from-slate-800 to-slate-900 flex items-center justify-center">
<q-icon name="image" size="80px" class="text-slate-700 opacity-50" /> <q-icon name="image" size="80px" class="text-slate-700 opacity-50" />
</div> </div>
</div> </div>
@ -101,11 +98,6 @@ const handleEnroll = () => {
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-4 leading-tight"> <h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-4 leading-tight">
{{ getLocalizedText(course.title) }} {{ getLocalizedText(course.title) }}
</h1> </h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-6">
<span class="flex items-center gap-1 bg-slate-100 dark:bg-slate-800 px-3 py-1 rounded-full text-slate-700 dark:text-slate-300 font-medium">
{{ getLocalizedText(course.category?.name) }}
</span>
</div>
<div class="prose max-w-none text-slate-600 dark:text-slate-400 leading-relaxed font-light"> <div class="prose max-w-none text-slate-600 dark:text-slate-400 leading-relaxed font-light">
<p>{{ getLocalizedText(course.description) }}</p> <p>{{ getLocalizedText(course.description) }}</p>
@ -113,27 +105,35 @@ const handleEnroll = () => {
</div> </div>
<!-- Curriculum Preview --> <!-- Curriculum Preview -->
<div class="bg-slate-100/50 dark:bg-slate-800/50 rounded-3xl p-6 md:p-8 border border-transparent dark:border-slate-700/50"> <div class="bg-slate-50 dark:bg-slate-900 rounded-3xl p-6 md:p-8 border border-slate-200 dark:border-white/5">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2"> <div class="flex items-center justify-between mb-8">
<q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" /> <div>
<h3 class="text-xl font-black text-slate-900 dark:text-white mb-1 flex items-center gap-2">
{{ $t('course.courseContent') }} {{ $t('course.courseContent') }}
</h3> </h3>
</div>
<q-icon name="keyboard_command_key" class="text-slate-200 dark:text-slate-800" size="32px" />
</div>
<div class="space-y-4"> <div class="space-y-4">
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden"> <div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="group">
<div class="px-6 py-4 bg-slate-100 dark:bg-white/5 font-bold text-slate-800 dark:text-white flex justify-between items-center"> <div class="px-6 py-4 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-white/5 font-black text-slate-800 dark:text-white flex justify-between items-center mb-2 shadow-sm">
<span>{{ Number(idx) + 1 }}. {{ getLocalizedText(chapter.title) }}</span> <span class="flex items-center gap-3">
<span class="text-xs text-slate-500 dark:text-slate-400 font-normal">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span> <span class="w-7 h-7 flex items-center justify-center bg-slate-100 dark:bg-white/10 rounded-lg text-xs font-bold font-mono">{{ Number(idx) + 1 }}</span>
{{ getLocalizedText(chapter.title) }}
</span>
<span class="text-[10px] uppercase font-black tracking-widest text-slate-400 opacity-60">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span>
</div> </div>
<div class="divide-y divide-slate-100 dark:divide-slate-800"> <div class="ml-4 pl-4 border-l-2 border-slate-100 dark:border-slate-800 space-y-1 mt-3">
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-6 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-white/5 transition-colors"> <div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-5 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-white/5 rounded-xl transition-all hover:translate-x-1">
<div class="w-8 h-8 rounded-full flex items-center justify-center" :class="lesson.type === 'VIDEO' ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400' : 'bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-400'">
<q-icon <q-icon
:name="lesson.type === 'VIDEO' ? 'play_circle' : 'article'" :name="lesson.type === 'VIDEO' ? 'play_arrow' : 'article'"
:class="lesson.type === 'VIDEO' ? 'text-blue-500 dark:text-blue-400' : 'text-orange-500 dark:text-orange-400'" size="16px"
size="18px"
/> />
<span class="flex-1">{{ getLocalizedText(lesson.title) }}</span> </div>
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-xs">{{ lesson.duration_minutes }} {{ $t('course.minutes') }}</span> <span class="flex-1 font-bold">{{ getLocalizedText(lesson.title) }}</span>
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-[10px] font-bold">{{ lesson.duration_minutes }} {{ $t('quiz.minutes') }}</span>
<q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300 dark:text-slate-600" /> <q-icon v-if="lesson.is_locked !== false" name="lock" size="14px" class="text-slate-300 dark:text-slate-600" />
</div> </div>
</div> </div>
@ -150,17 +150,18 @@ const handleEnroll = () => {
<!-- Right: Enrollment Card --> <!-- Right: Enrollment Card -->
<div class="lg:col-span-1"> <div class="lg:col-span-1">
<div class="sticky top-24"> <div class="sticky top-24">
<div class="bg-white dark:bg-slate-800/40 dark:backdrop-blur-xl rounded-3xl shadow-xl shadow-slate-200/50 dark:shadow-none p-6 border border-slate-100 dark:border-white/10 relative overflow-hidden"> <div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl shadow-blue-500/10 dark:shadow-none p-8 border border-slate-100 dark:border-white/5 relative overflow-hidden group">
<div class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-full blur-3xl -mr-16 -mt-16"></div> <!-- Decorative background glow -->
<div class="absolute -top-12 -right-12 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-colors"></div>
<div class="relative"> <div class="relative">
<div class="text-3xl font-black mb-2 font-display"> <div v-if="course.price > 0" class="mb-4">
<span v-if="course.price > 0" class="text-slate-900 dark:text-white"> <span class="text-xs font-black uppercase tracking-widest text-slate-400 mb-1 block">{{ $t('course.price', 'ราคาคอร์ส') }}</span>
<div class="text-4xl font-black font-display">
<span class="text-slate-900 dark:text-white">
{{ formatPrice(course.price) }} {{ formatPrice(course.price) }}
</span> </span>
<span v-else class="text-blue-600 dark:text-blue-400 drop-shadow-sm"> </div>
{{ $t('course.free') }}
</span>
</div> </div>
<q-btn <q-btn
@ -168,19 +169,38 @@ const handleEnroll = () => {
rounded rounded
size="lg" size="lg"
color="primary" color="primary"
class="w-full mb-4 shadow-lg shadow-blue-600/30 font-bold" class="w-full h-14 shadow-xl shadow-blue-600/30 font-black tracking-tight"
:label="user ? (course.enrolled ? $t('course.startLearning') : (course.price > 0 ? $t('course.buyNow') : $t('course.enrollFree'))) : $t('course.loginToEnroll')" :label="user ? (course.enrolled ? $t('course.startLearning') : (course.price > 0 ? $t('course.buyNow') : $t('course.enrollFree'))) : $t('course.loginToEnroll')"
:loading="enrollmentLoading" :loading="enrollmentLoading"
@click="handleEnroll" @click="handleEnroll"
/> >
<template v-slot:loading>
<q-spinner-facebook />
</template>
</q-btn>
<div class="mt-6 space-y-4">
<p class="text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 mb-4">{{ $t('course.includes', 'คอร์สนี้รวมอะไรบ้าง') }}</p>
<hr class="my-6 border-slate-100 dark:border-slate-800"> <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
<div class="w-6 h-6 rounded-lg bg-blue-50 dark:bg-blue-500/10 flex items-center justify-center">
<q-icon name="all_inclusive" size="14px" class="text-blue-600 dark:text-blue-400" />
</div>
{{ $t('course.fullLifetimeAccess', 'เข้าเรียนได้ตลอดชีพ') }}
</div>
<div class="space-y-3 block"> <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400"> <div class="w-6 h-6 rounded-lg bg-emerald-50 dark:bg-emerald-500/10 flex items-center justify-center">
<q-icon name="check_circle" class="text-green-500" /> <q-icon name="workspace_premium" size="14px" class="text-emerald-600 dark:text-emerald-400" />
{{ $t('course.certificate') }} ({{ $t('course.available') }}) </div>
{{ $t('course.certificate') }}
</div>
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-300 font-bold">
<div class="w-6 h-6 rounded-lg bg-purple-50 dark:bg-purple-500/10 flex items-center justify-center">
<q-icon name="devices" size="14px" class="text-purple-600 dark:text-purple-400" />
</div>
{{ $t('course.accessOnMobile', 'เข้าเรียนได้ทุกอุปกรณ์') }}
</div> </div>
</div> </div>
</div> </div>

1
Frontend-Learner/composables/useCourse.ts
View file

@ -19,6 +19,7 @@ export interface Course {
approved_by?: number approved_by?: number
rejection_reason?: string rejection_reason?: string
enrolled?: boolean enrolled?: boolean
total_lessons?: number
rating?: string rating?: string

18
Frontend-Learner/i18n/locales/en.json
View file

@ -48,7 +48,8 @@
"enrollFree": "Enroll for free", "enrollFree": "Enroll for free",
"loginToEnroll": "Log in to enroll", "loginToEnroll": "Log in to enroll",
"minutes": "Minutes", "minutes": "Minutes",
"noVideoPreview": "Video preview not available" "noVideoPreview": "Video preview not available",
"videoNotSupported": "Your browser does not support the video tag"
}, },
"sidebar": { "sidebar": {
"overview": "Home", "overview": "Home",
@ -69,7 +70,8 @@
"emptyDesc": "Try different keywords or check spelling", "emptyDesc": "Try different keywords or check spelling",
"showAll": "Show All", "showAll": "Show All",
"loadMore": "Load More", "loadMore": "Load More",
"backToCatalog": "Back to Catalog" "backToCatalog": "Back to Catalog",
"selectable": "Selected"
}, },
"myCourses": { "myCourses": {
"filterAll": "All", "filterAll": "All",
@ -84,7 +86,8 @@
"successDesc": "You have successfully enrolled in this course.", "successDesc": "You have successfully enrolled in this course.",
"startNow": "Start Learning", "startNow": "Start Learning",
"later": "Later", "later": "Later",
"alreadyEnrolledHint": "You have already enrolled in the course {course}." "alreadyEnrolledHint": "You have already enrolled in the course {course}.",
"error": "Failed to enroll"
}, },
"certificate": { "certificate": {
"title": "Certificate of Completion", "title": "Certificate of Completion",
@ -195,7 +198,11 @@
"attachments": "Attachments", "attachments": "Attachments",
"announcements": "Course Announcements", "announcements": "Course Announcements",
"posts": "Posts", "posts": "Posts",
"noAnnouncements": "No announcements yet" "noAnnouncements": "No announcements yet",
"quizRequired": "Please pass the quiz \"{title}\" first",
"lessonRequired": "Please complete the lesson \"{title}\" first",
"notEnrolled": "You are not yet enrolled in this course",
"curriculum": "Course Content"
}, },
"quiz": { "quiz": {
"exitTitle": "Exit Quiz", "exitTitle": "Exit Quiz",
@ -235,6 +242,7 @@
"statusCompleted": "Completed", "statusCompleted": "Completed",
"statusSkipped": "Skipped", "statusSkipped": "Skipped",
"statusNotStarted": "Not Started", "statusNotStarted": "Not Started",
"alertIncomplete": "Please answer all questions" "alertIncomplete": "Please answer all questions",
"yourAnswer": "Your Answer"
} }
} }

18
Frontend-Learner/i18n/locales/th.json
View file

@ -48,7 +48,8 @@
"enrollFree": "ลงทะเบียนเรียนฟรี", "enrollFree": "ลงทะเบียนเรียนฟรี",
"loginToEnroll": "เข้าสู่ระบบเพื่อลงทะเบียน", "loginToEnroll": "เข้าสู่ระบบเพื่อลงทะเบียน",
"minutes": "นาที", "minutes": "นาที",
"noVideoPreview": "วิดีโอตัวอย่างยังไม่พร้อมใช้งาน" "noVideoPreview": "วิดีโอตัวอย่างยังไม่พร้อมใช้งาน",
"videoNotSupported": "เบราว์เซอร์ของคุณไม่รองรับการเล่นวิดีโอ"
}, },
"sidebar": { "sidebar": {
"overview": "หน้าหลัก", "overview": "หน้าหลัก",
@ -69,7 +70,8 @@
"emptyDesc": "ลองใช้คำค้นหาอื่น หรือตรวจดูความถูกต้องของตัวอักษรอีกครั้ง", "emptyDesc": "ลองใช้คำค้นหาอื่น หรือตรวจดูความถูกต้องของตัวอักษรอีกครั้ง",
"showAll": "แสดงทั้งหมด", "showAll": "แสดงทั้งหมด",
"loadMore": "โหลดเพิ่มเติม", "loadMore": "โหลดเพิ่มเติม",
"backToCatalog": "กลับหน้ารายการคอร์ส" "backToCatalog": "กลับหน้ารายการคอร์ส",
"selectable": "รายการที่เลือก"
}, },
"myCourses": { "myCourses": {
"filterAll": "ทั้งหมด", "filterAll": "ทั้งหมด",
@ -84,7 +86,8 @@
"successDesc": "คุณได้ลงทะเบียนคอร์สนี้เรียบร้อยแล้ว", "successDesc": "คุณได้ลงทะเบียนคอร์สนี้เรียบร้อยแล้ว",
"startNow": "เริ่มเรียนทันที", "startNow": "เริ่มเรียนทันที",
"later": "ไว้ทีหลัง", "later": "ไว้ทีหลัง",
"alreadyEnrolledHint": "ท่านเคยลงทะเบียนคอร์ส {course} นี้ไปเรียบร้อยแล้ว" "alreadyEnrolledHint": "ท่านเคยลงทะเบียนคอร์ส {course} นี้ไปเรียบร้อยแล้ว",
"error": "ไม่สามารถลงทะเบียนได้"
}, },
"certificate": { "certificate": {
"title": "ใบประกาศนียบัตรจบหลักสูตร", "title": "ใบประกาศนียบัตรจบหลักสูตร",
@ -195,7 +198,11 @@
"attachments": "เอกสารประกอบ", "attachments": "เอกสารประกอบ",
"announcements": "ประกาศในคอร์ส", "announcements": "ประกาศในคอร์ส",
"posts": "โพสต์", "posts": "โพสต์",
"noAnnouncements": "ยังไม่มีประกาศในขณะนี้" "noAnnouncements": "ยังไม่มีประกาศในขณะนี้",
"quizRequired": "กรุณาทำแบบทดสอบ \"{title}\" ให้ผ่านก่อน",
"lessonRequired": "กรุณาเรียนบทเรียน \"{title}\" ให้จบก่อน",
"notEnrolled": "คุณยังไม่ได้ลงทะเบียนในคอร์สนี้",
"curriculum": "เนื้อหาหลักสูตร"
}, },
"quiz": { "quiz": {
"startTitle": "แบบทดสอบ", "startTitle": "แบบทดสอบ",
@ -235,6 +242,7 @@
"statusCompleted": "ทำแล้ว", "statusCompleted": "ทำแล้ว",
"statusSkipped": "ข้าม", "statusSkipped": "ข้าม",
"statusNotStarted": "ยังไม่ทำ", "statusNotStarted": "ยังไม่ทำ",
"alertIncomplete": "กรุณาเลือกคำตอบให้ครบทุกข้อ" "alertIncomplete": "กรุณาเลือกคำตอบให้ครบทุกข้อ",
"yourAnswer": "คำตอบของคุณ"
} }
} }

61
Frontend-Learner/pages/browse/discovery.vue
View file

@ -112,7 +112,7 @@ const handleEnroll = async (id: number) => {
} else { } else {
$q.notify({ $q.notify({
type: 'negative', type: 'negative',
message: res.error || 'Failed to enroll', message: res.error || t('enrollment.error'),
position: 'top', position: 'top',
timeout: 3000, timeout: 3000,
actions: [{ icon: 'close', color: 'white' }] actions: [{ icon: 'close', color: 'white' }]
@ -127,6 +127,15 @@ watch(selectedCategoryIds, () => {
loadCourses(1); loadCourses(1);
}, { deep: true }); }, { 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(() => { onMounted(() => {
loadCategories(); loadCategories();
loadCourses(); loadCourses();
@ -140,23 +149,23 @@ onMounted(() => {
<div v-if="!showDetail"> <div v-if="!showDetail">
<!-- Top Header Area --> <!-- Top Header Area -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8"> <div class="flex flex-col gap-6 mb-10">
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
<!-- Title --> <!-- Title -->
<h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3"> <h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
<span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span> <span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
{{ $t('discovery.title') }} {{ $t('discovery.title') }}
</h1> </h1>
<!-- Right Side: Search & Sort --> <!-- Right Side: Search -->
<div class="flex items-center gap-3 w-full md:w-auto"> <div class="flex items-center gap-3 w-full md:w-auto">
<!-- Search Input -->
<q-input <q-input
v-model="searchQuery" v-model="searchQuery"
dense dense
outlined outlined
rounded rounded
:placeholder="$t('discovery.searchPlaceholder')" :placeholder="$t('discovery.searchPlaceholder')"
class="w-full md:w-72 search-input" class="w-full md:w-72 search-input shadow-sm"
bg-color="transparent" bg-color="transparent"
> >
<template v-slot:prepend> <template v-slot:prepend>
@ -166,23 +175,35 @@ onMounted(() => {
</div> </div>
</div> </div>
<!-- Main Layout: Sidebar + Grid --> <!-- Unified Filter Section: Categories -->
<div class="flex flex-col lg:flex-row gap-8"> <div class="flex flex-wrap items-center gap-2">
<q-btn
<!-- LEFT SIDEBAR: Category Filter --> flat
<div class="w-full lg:w-64 flex-shrink-0 lg:sticky lg:top-24 z-10"> rounded
<ClientOnly> dense
<CategorySidebar class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
:categories="categories" :class="selectedCategoryIds.length === 0 ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
v-model="selectedCategoryIds" @click="selectedCategoryIds = []"
:label="$t('discovery.showAll')"
/> />
</ClientOnly> <q-btn
v-for="cat in categories"
:key="cat.id"
flat
rounded
dense
class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
:class="selectedCategoryIds.includes(cat.id) ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
@click="toggleCategory(cat.id)"
:label="getLocalizedText(cat.name)"
/>
</div>
</div> </div>
<!-- RIGHT CONTENT: Course Grid --> <!-- Main Layout: Grid Only -->
<div class="flex-1 w-full"> <div class="w-full">
<div v-if="filteredCourses.length > 0" class="flex flex-col gap-12"> <div v-if="filteredCourses.length > 0" class="flex flex-col gap-12">
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
<CourseCard <CourseCard
v-for="course in filteredCourses" v-for="course in filteredCourses"
:key="course.id" :key="course.id"
@ -212,7 +233,7 @@ onMounted(() => {
<!-- Empty State --> <!-- Empty State -->
<div <div
v-else v-else
class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700" 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" /> <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> <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
@ -227,8 +248,6 @@ onMounted(() => {
</div> </div>
</div>
<!-- COURSE DETAIL VIEW: Detailed information about a specific course --> <!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
<div v-else> <div v-else>
<button <button

65
Frontend-Learner/pages/classroom/learning.vue
View file

@ -219,14 +219,14 @@ const loadLesson = async (lessonId: number) => {
msg = accessRes.data.lock_reason msg = accessRes.data.lock_reason
} else if (accessRes.data.required_quiz_pass && !accessRes.data.required_quiz_pass.is_passed) { } else if (accessRes.data.required_quiz_pass && !accessRes.data.required_quiz_pass.is_passed) {
const quizTitle = getLocalizedText(accessRes.data.required_quiz_pass.title) const quizTitle = getLocalizedText(accessRes.data.required_quiz_pass.title)
msg = `กรุณาทำแบบทดสอบ "${quizTitle}" ให้ผ่านก่อน` msg = t('classroom.quizRequired', { title: quizTitle })
} else if (accessRes.data.required_lessons && accessRes.data.required_lessons.length > 0) { } else if (accessRes.data.required_lessons && accessRes.data.required_lessons.length > 0) {
const reqLesson = accessRes.data.required_lessons.find((l: any) => !l.is_completed) const reqLesson = accessRes.data.required_lessons.find((l: any) => !l.is_completed)
if (reqLesson) { if (reqLesson) {
msg = `กรุณาเรียนบทเรียน "${getLocalizedText(reqLesson.title)}" ให้จบก่อน` msg = t('classroom.lessonRequired', { title: getLocalizedText(reqLesson.title) })
} }
} else if (accessRes.data.is_enrolled === false) { } else if (accessRes.data.is_enrolled === false) {
msg = 'คุณยังไม่ได้ลงทะเบียนในคอร์สนี้' msg = t('classroom.notEnrolled')
} }
alert(msg) alert(msg)
@ -516,27 +516,31 @@ onBeforeUnmount(() => {
<!-- Header --> <!-- Header -->
<q-header bordered class="bg-[var(--bg-surface)] border-b border-gray-200 dark:border-white/5 text-[var(--text-main)] h-14"> <q-header bordered class="bg-[var(--bg-surface)] border-b border-gray-200 dark:border-white/5 text-[var(--text-main)] h-14">
<q-toolbar> <q-toolbar>
<q-btn flat round dense icon="menu" class="mr-2 text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" @click="toggleSidebar" /> <!-- Exit/Back Button -->
<!-- Back Button & Branding -->
<div class="flex items-center gap-2 mr-6">
<q-btn <q-btn
flat flat
round rounded
dense no-caps
icon="arrow_back" color="primary"
class="mr-2 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 border border-blue-100 dark:border-blue-800/50 hover:bg-blue-100 dark:hover:bg-blue-800/50 transition-all" class="mr-4 bg-slate-100 dark:bg-slate-800 text-slate-900 dark:text-white font-bold hover:bg-slate-200"
@click="handleExit('/dashboard/my-courses')" @click="handleExit('/dashboard/my-courses')"
> >
<q-icon name="close" size="18px" class="mr-1.5" />
<span class="hidden sm:inline">{{ $t('common.close') }}</span>
<q-tooltip>{{ $t('classroom.backToDashboard') }}</q-tooltip> <q-tooltip>{{ $t('classroom.backToDashboard') }}</q-tooltip>
</q-btn> </q-btn>
<div class="hidden sm:flex items-center gap-2 cursor-pointer group" @click="handleExit('/dashboard')"> <!-- Sidebar Toggle (Clearer for Course Content) -->
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-black shadow-lg shadow-blue-600/30 group-hover:scale-110 transition-transform"> <q-btn
E flat
</div> rounded
</div> no-caps
</div> class="mr-2 text-slate-900 dark:text-white hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors font-bold px-3"
@click="toggleSidebar"
>
<q-icon name="format_list_bulleted" size="18px" class="mr-1.5" />
<span class="hidden md:inline">{{ $t('classroom.curriculum', 'เนื้อหาหลักสูตร') }}</span>
</q-btn>
<q-toolbar-title class="text-base font-bold text-left truncate text-slate-900 dark:text-white"> <q-toolbar-title class="text-base font-bold text-left truncate text-slate-900 dark:text-white">
{{ courseData ? getLocalizedText(courseData.course.title) : $t('classroom.loadingTitle') }} {{ courseData ? getLocalizedText(courseData.course.title) : $t('classroom.loadingTitle') }}
@ -581,6 +585,7 @@ onBeforeUnmount(() => {
v-if="currentLesson && videoSrc && !isLessonLoading" v-if="currentLesson && videoSrc && !isLessonLoading"
ref="videoPlayerComp" ref="videoPlayerComp"
:src="videoSrc" :src="videoSrc"
:poster="courseData?.course?.thumbnail_url"
:initialSeekTime="initialSeekTime" :initialSeekTime="initialSeekTime"
@timeupdate="handleVideoTimeUpdate" @timeupdate="handleVideoTimeUpdate"
@ended="onVideoEnded" @ended="onVideoEnded"
@ -588,11 +593,21 @@ onBeforeUnmount(() => {
/> />
<!-- Skeleton Loader for Video/Content --> <!-- Skeleton Loader for Video/Content -->
<div v-if="isLessonLoading" class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-2xl animate-pulse flex items-center justify-center mb-6 overflow-hidden relative"> <div v-if="isLessonLoading" class="aspect-video bg-slate-200 dark:bg-slate-800 rounded-2xl animate-pulse flex items-center justify-center mb-6 overflow-hidden relative shadow-xl">
<div class="absolute inset-0 bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-700 dark:to-slate-800 opacity-50"></div> <!-- Course Thumbnail as a background during loading -->
<img
v-if="courseData?.course?.thumbnail_url"
:src="courseData.course.thumbnail_url"
class="absolute inset-0 w-full h-full object-cover opacity-20 blur-md"
/>
<div class="absolute inset-0 bg-gradient-to-br from-slate-200/50 to-slate-300/50 dark:from-slate-900/80 dark:to-slate-800/80"></div>
<div class="z-10 flex flex-col items-center"> <div class="z-10 flex flex-col items-center">
<div class="relative">
<q-spinner size="4rem" color="primary" :thickness="4" /> <q-spinner size="4rem" color="primary" :thickness="4" />
<p class="mt-4 text-slate-500 dark:text-slate-400 font-bold animate-bounce">{{ $t('common.loading') }}...</p> <q-icon name="play_circle" size="2rem" color="primary" class="absolute inset-0 m-auto opacity-50" />
</div>
<p class="mt-4 text-slate-600 dark:text-slate-300 font-black text-xs uppercase tracking-[0.2em] animate-pulse">{{ $t('common.loading') }}</p>
</div> </div>
</div> </div>
@ -600,7 +615,7 @@ onBeforeUnmount(() => {
<div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]"> <div v-if="currentLesson" class="bg-[var(--bg-surface)] p-6 md:p-8 rounded-3xl shadow-sm border border-[var(--border-color)]">
<!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) --> <!-- ใช้สีจากตัวแปรกลาง: จะแยกโหมดให้อัตโนมัติ (สว่าง=ดำ / มืด=ขาว) -->
<div class="flex items-start justify-between gap-4 mb-4"> <div class="flex items-start justify-between gap-4 mb-4">
<h1 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white leading-tight font-display">{{ getLocalizedText(currentLesson.title) }}</h1> <h1 class="text-3xl md:text-5xl font-black text-slate-900 dark:text-white leading-tight tracking-tight font-display">{{ getLocalizedText(currentLesson.title) }}</h1>
</div> </div>
<p class="text-slate-600 dark:text-slate-400 text-base md:text-lg leading-relaxed mb-6" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p> <p class="text-slate-600 dark:text-slate-400 text-base md:text-lg leading-relaxed mb-6" v-if="currentLesson.description">{{ getLocalizedText(currentLesson.description) }}</p>
@ -615,10 +630,10 @@ onBeforeUnmount(() => {
<div class="flex justify-center flex-wrap gap-3 text-sm mb-8"> <div class="flex justify-center flex-wrap gap-3 text-sm mb-8">
<span v-if="currentLesson.quiz?.questions?.length" class="px-3 py-1 bg-white dark:bg-white rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5 text-slate-900 font-bold"> <span v-if="currentLesson.quiz?.questions?.length" class="px-3 py-1 bg-white dark:bg-white rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5 text-slate-900 font-bold">
<q-icon name="format_list_numbered" size="14px" class="text-blue-600" /> {{ currentLesson.quiz.questions.length }} ข้อ <q-icon name="format_list_numbered" size="14px" class="text-blue-600" /> {{ currentLesson.quiz.questions.length }} {{ $t('quiz.questions') }}
</span> </span>
<span v-if="currentLesson.quiz?.time_limit" class="px-3 py-1 bg-white dark:bg-white rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5 text-slate-900 font-bold"> <span v-if="currentLesson.quiz?.time_limit" class="px-3 py-1 bg-white dark:bg-white rounded-full border border-gray-200 dark:border-white/10 shadow-sm flex items-center gap-1.5 text-slate-900 font-bold">
<q-icon name="schedule" size="14px" class="text-orange-600" /> {{ currentLesson.quiz.time_limit }} นาที <q-icon name="schedule" size="14px" class="text-orange-600" /> {{ currentLesson.quiz.time_limit }} {{ $t('quiz.minutes') }}
</span> </span>
</div> </div>
@ -627,7 +642,7 @@ onBeforeUnmount(() => {
size="lg" size="lg"
rounded rounded
no-caps no-caps
:label="$t('quiz.startBtn', 'เริ่มทำแบบทดสอบ')" :label="$t('quiz.startBtn')"
icon="play_arrow" icon="play_arrow"
@click="$router.push(`/classroom/quiz?course_id=${courseId}&lesson_id=${currentLesson.id}`)" @click="$router.push(`/classroom/quiz?course_id=${courseId}&lesson_id=${currentLesson.id}`)"
/> />
@ -642,7 +657,7 @@ onBeforeUnmount(() => {
<div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center"> <div class="w-8 h-8 rounded-lg bg-orange-100 dark:bg-orange-900/30 text-orange-600 flex items-center justify-center">
<q-icon name="attach_file" size="18px" /> <q-icon name="attach_file" size="18px" />
</div> </div>
{{ $t('classroom.attachments') || 'เอกสารประกอบการเรียน' }} {{ $t('classroom.attachments') }}
</h3> </h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<a <a

5
Frontend-Learner/pages/classroom/quiz.vue
View file

@ -11,7 +11,7 @@ definePageMeta({
middleware: 'auth' middleware: 'auth'
}) })
const { t } = useI18n() const { locale, t } = useI18n()
const route = useRoute() const route = useRoute()
const router = useRouter() const router = useRouter()
const $q = useQuasar() const $q = useQuasar()
@ -118,7 +118,8 @@ const timerDisplay = computed(() => {
const getLocalizedText = (text: any) => { const getLocalizedText = (text: any) => {
if (!text) return '' if (!text) return ''
if (typeof text === 'string') return text if (typeof text === 'string') return text
return text.th || text.en || '' const currentLocale = locale.value as 'th' | 'en'
return text[currentLocale] || text.th || text.en || ''
} }
const lessonProgress = ref<any>(null) const lessonProgress = ref<any>(null)

46
Frontend-Learner/pages/dashboard/index.vue
View file

@ -53,27 +53,28 @@ onMounted(async () => {
</script> </script>
<template> <template>
<div class="page-container"> <div class="page-container !pt-4">
<!-- Welcome Header Section --> <!-- Welcome Header Section (Minimalist) -->
<div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-8 md:p-12 text-white shadow-xl dark:shadow-2xl dark:shadow-blue-950/40 transition border border-white/5"> <div class="flex items-center gap-6 mb-10 py-2 animate-fade-in">
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8"> <!-- Avatar with premium shadow -->
<div class="text-center md:text-left"> <div class="relative group cursor-pointer" @click="$router.push('/dashboard/profile')">
<ClientOnly> <div class="absolute -inset-1 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
<h1 class="text-4xl md:text-6xl font-black mb-4 slide-up tracking-tight text-white drop-shadow-sm"> <q-avatar size="84px" class="relative shadow-2xl ring-4 ring-white dark:ring-slate-900 transition-all duration-500 overflow-hidden">
<img
:src="currentUser?.photoURL || 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y'"
class="object-cover"
/>
</q-avatar>
</div>
<div class="flex flex-col">
<h1 class="text-2xl md:text-4xl font-black text-slate-900 dark:text-white tracking-tight leading-tight mb-1">
{{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}! {{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!
</h1> </h1>
</ClientOnly> <div class="flex items-center gap-2">
<p class="text-lg md:text-xl slide-up font-medium text-blue-100/90 max-w-xl" style="animation-delay: 0.1s;"> <span class="text-slate-500 dark:text-slate-400 text-sm font-medium">{{ $t('dashboard.welcomeSubtitle') }}</span>
{{ $t('dashboard.welcomeSubtitle') }}
</p>
</div> </div>
<div class="stats-mini flex gap-6 slide-up" style="animation-delay: 0.2s;"/>
</div> </div>
<!-- Decorative Background elements -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 dark:from-[#1e293b] dark:via-[#0f172a] dark:to-[#1e3a8a] -z-0"/>
<div class="absolute -top-20 -right-20 w-80 h-80 bg-white/10 blur-[100px] rounded-full"/>
<div class="absolute -bottom-20 -left-20 w-80 h-80 bg-blue-400/10 blur-[100px] rounded-full"/>
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-[0.03] mix-blend-overlay"></div>
</div> </div>
<!-- Main Content Area --> <!-- Main Content Area -->
@ -104,13 +105,12 @@ onMounted(async () => {
</template> </template>
<style scoped> <style scoped>
@keyframes slide-up { @keyframes fade-in {
from { opacity: 0; transform: translateY(30px); } from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateX(0); }
} }
.slide-up { .animate-fade-in {
animation: slide-up 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; animation: fade-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
opacity: 0;
} }
</style> </style>

70
Frontend-Learner/pages/dashboard/my-courses.vue
View file

@ -18,6 +18,7 @@ useHead({
const route = useRoute() const route = useRoute()
const showEnrollModal = ref(false) const showEnrollModal = ref(false)
const activeFilter = ref<'all' | 'progress' | 'completed'>('all') const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
const searchQuery = ref('')
// Check URL query parameters to show 'Enrollment Success' modal // Check URL query parameters to show 'Enrollment Success' modal
@ -71,6 +72,7 @@ const loadEnrolledCourses = async () => {
enrollment_id: item.id, enrollment_id: item.id,
title: item.course.title, title: item.course.title,
progress: item.progress_percentage || 0, progress: item.progress_percentage || 0,
lessons: item.course.total_lessons || 0,
completed: item.status === 'COMPLETED', completed: item.status === 'COMPLETED',
thumbnail_url: item.course.thumbnail_url thumbnail_url: item.course.thumbnail_url
})) }))
@ -83,6 +85,16 @@ watch(activeFilter, () => {
loadEnrolledCourses() loadEnrolledCourses()
}) })
// 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)
})
})
onMounted(() => { onMounted(() => {
if (route.query.enrolled) { if (route.query.enrolled) {
showEnrollModal.value = true showEnrollModal.value = true
@ -138,21 +150,43 @@ const validCourseId = computed(() => {
<div class="page-container"> <div class="page-container">
<!-- Page Header & Filters --> <!-- Page Header & Filters (Unified Layout) -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-10"> <div class="flex flex-col gap-6 mb-10">
<h1 class="text-3xl font-black text-slate-900 dark:text-white">{{ $t('sidebar.myCourses') }}</h1> <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
<h1 class="text-3xl font-black text-slate-900 dark:text-white flex items-center gap-3">
<span class="w-1.5 h-8 bg-blue-600 rounded-full shadow-sm shadow-blue-500/50"></span>
{{ $t('sidebar.myCourses') }}
</h1>
<!-- Filter Tabs --> <!-- Search Input -->
<div class="flex gap-2"> <div class="flex items-center gap-3 w-full md:w-auto">
<q-input
v-model="searchQuery"
dense
outlined
rounded
:placeholder="$t('discovery.searchPlaceholder')"
class="w-full md:w-72 search-input shadow-sm"
bg-color="transparent"
>
<template v-slot:prepend>
<q-icon name="search" class="text-slate-400" />
</template>
</q-input>
</div>
</div>
<!-- Filter Tabs (Horizontal Bar) -->
<div class="flex flex-wrap items-center gap-2">
<q-btn <q-btn
v-for="filter in ['all', 'progress', 'completed']" v-for="filter in ['all', 'progress', 'completed']"
:key="filter" :key="filter"
@click="activeFilter = filter as any" @click="activeFilter = filter as any"
flat
rounded rounded
unelevated dense
:color="activeFilter === filter ? 'primary' : 'white'" class="px-4 font-bold transition-all text-xs uppercase tracking-widest"
:text-color="activeFilter === filter ? 'white' : 'grey-8'" :class="activeFilter === filter ? 'bg-blue-600 text-white shadow-lg shadow-blue-600/30' : 'bg-white dark:bg-slate-800 text-slate-500 dark:text-slate-400 border border-slate-200 dark:border-white/5'"
class="font-bold px-6"
:label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)" :label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
/> />
</div> </div>
@ -163,7 +197,7 @@ const validCourseId = computed(() => {
<q-spinner size="3rem" color="primary" /> <q-spinner size="3rem" color="primary" />
</div> </div>
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<template v-for="course in enrolledCourses" :key="course.id"> <template v-for="course in filteredEnrolledCourses" :key="course.id">
<!-- In Progress Course Card --> <!-- In Progress Course Card -->
<CourseCard <CourseCard
v-if="!course.completed" v-if="!course.completed"
@ -192,10 +226,18 @@ const validCourseId = computed(() => {
</div> </div>
<!-- Empty State --> <!-- Empty State -->
<div v-if="!isLoading && enrolledCourses.length === 0" class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 mt-4"> <div v-if="!isLoading && filteredEnrolledCourses.length === 0" class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 mt-4">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('myCourses.emptyTitle') }}</h3> <q-icon v-if="searchQuery" name="search_off" size="64px" class="text-slate-300 dark:text-slate-600 mb-4" />
<p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t('myCourses.emptyDesc') }}</p> <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
<NuxtLink 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> {{ 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>
</div> </div>
<!-- MODAL: Enrollment Success --> <!-- MODAL: Enrollment Success -->