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

feat: add CourseDetailView component with video preview, curriculum, enrollment logic, and i18n support

Browse source
This commit is contained in:
supalerk-ar66 2026-02-11 13:49:08 +07:00
parent efb50a1ddb
commit 0afbd3f08b
3 changed files with 31 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -48,10 +48,11 @@ const handleEnroll = () => {
<template> <template>
<div class="animate-fade-in-up"> <div class="animate-fade-in-up">
<q-btn <q-btn
flat unelevated
rounded
icon="arrow_back" icon="arrow_back"
:label="$t('common.back')" :label="$t('common.back')"
class="mb-6 font-bold text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition-colors" 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')" @click="emit('back')"
/> />
@ -73,13 +74,17 @@ const handleEnroll = () => {
</template> </template>
<!-- Placeholder if no video --> <!-- Placeholder if no video -->
<template v-else> <template v-else>
<img <div class="w-full h-full bg-gradient-to-br from-slate-200 to-slate-300 dark:from-slate-800 dark:to-slate-900 flex items-center justify-center relative overflow-hidden">
:src="course.cover_image || 'https://placehold.co/800x450?text=No+Preview'" <!-- Subtle background pattern or logo could go here -->
class="w-full h-full object-cover opacity-60" <div class="absolute inset-0 opacity-10 dark:opacity-20">
/> <div class="absolute top-0 left-0 w-full h-full" style="background-image: radial-gradient(circle at 2px 2px, currentColor 1px, transparent 0); background-size: 24px 24px;"></div>
<div class="absolute inset-0 flex items-center justify-center"> </div>
<div class="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center ring-1 ring-white/50">
<q-icon name="play_arrow" size="40px" class="text-white" /> <div class="relative z-10 flex flex-col items-center gap-4">
<div class="w-20 h-20 bg-white/30 dark:bg-white/10 backdrop-blur-md rounded-full flex items-center justify-center ring-1 ring-white/50 shadow-xl transition-transform group-hover:scale-110 duration-500">
<q-icon name="play_arrow" size="48px" class="text-white drop-shadow-md" />
</div>
<span class="text-slate-500 dark:text-slate-400 font-bold tracking-wider uppercase text-xs">{{ $t('course.noVideoPreview') || 'Preview Not Available' }}</span>
</div> </div>
</div> </div>
</template> </template>
@ -92,17 +97,8 @@ const handleEnroll = () => {
</h1> </h1>
<div class="flex flex-wrap items-center gap-4 text-sm text-slate-500 dark:text-slate-400 mb-6"> <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"> <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">
<q-icon name="category" size="16px" class="text-blue-500" />
{{ getLocalizedText(course.category?.name) }} {{ getLocalizedText(course.category?.name) }}
</span> </span>
<span class="flex items-center gap-1">
<q-icon name="schedule" size="16px" />
{{ course.duration_minutes || 60 }} {{ $t('course.minutes') }}
</span>
<span class="flex items-center gap-1">
<q-icon name="person" size="16px" />
{{ course.instructor?.first_name }} {{ course.instructor?.last_name }}
</span>
</div> </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">
@ -111,7 +107,7 @@ const handleEnroll = () => {
</div> </div>
<!-- Curriculum Preview --> <!-- Curriculum Preview -->
<div class="bg-slate-50 dark:bg-white/5 rounded-3xl p-6 md:p-8"> <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">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2"> <h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 flex items-center gap-2">
<q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" /> <q-icon name="list_alt" class="text-blue-600 dark:text-blue-400" />
{{ $t('course.courseContent') }} {{ $t('course.courseContent') }}
@ -136,8 +132,9 @@ const handleEnroll = () => {
</div> </div>
</div> </div>
</div> </div>
<div v-if="!course.chapters || course.chapters.length === 0" class="text-center text-slate-400 dark:text-slate-600 py-8"> <div v-if="!course.chapters || course.chapters.length === 0" class="flex flex-col items-center justify-center py-12 text-slate-400 dark:text-slate-500 bg-white/50 dark:bg-slate-900/50 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800">
{{ $t('course.noContent') }} <q-icon name="menu_book" size="40px" class="mb-2 opacity-50" />
<p class="text-sm font-medium">{{ $t('course.noContent') }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -147,12 +144,17 @@ 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-900 rounded-3xl shadow-xl shadow-slate-200/50 dark:shadow-none p-6 border border-slate-100 dark:border-slate-800 relative overflow-hidden"> <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="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-500/10 to-purple-500/10 rounded-full blur-3xl -mr-16 -mt-16"></div> <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>
<div class="relative"> <div class="relative">
<div class="text-3xl font-black text-slate-900 dark:text-white mb-2 font-display"> <div class="text-3xl font-black mb-2 font-display">
{{ course.price > 0 ? formatPrice(course.price) : $t('course.free') }} <span v-if="course.price > 0" class="text-slate-900 dark:text-white">
{{ formatPrice(course.price) }}
</span>
<span v-else class="text-blue-600 dark:text-blue-400 drop-shadow-sm">
{{ $t('course.free') }}
</span>
</div> </div>
<div v-if="course.price > 0" class="text-sm text-slate-500 dark:text-slate-400 mb-6 line-through"> <div v-if="course.price > 0" class="text-sm text-slate-500 dark:text-slate-400 mb-6 line-through">
{{ formatPrice(Number(course.price) * 2) }} {{ formatPrice(Number(course.price) * 2) }}
@ -169,21 +171,10 @@ const handleEnroll = () => {
@click="handleEnroll" @click="handleEnroll"
/> />
<div class="text-xs text-center text-slate-400 dark:text-slate-500">
{{ $t('course.satisfactionGuarantee') }}
</div>
<hr class="my-6 border-slate-100 dark:border-slate-800"> <hr class="my-6 border-slate-100 dark:border-slate-800">
<div class="space-y-3 block"> <div class="space-y-3 block">
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
<q-icon name="check_circle" class="text-green-500" />
{{ $t('course.lifetimeAccess') }}
</div>
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
<q-icon name="check_circle" class="text-green-500" />
{{ $t('course.unlimitedQuizzes') }}
</div>
<div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400"> <div class="flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400">
<q-icon name="check_circle" class="text-green-500" /> <q-icon name="check_circle" class="text-green-500" />
{{ $t('course.certificate') }} ({{ $t('course.available') }}) {{ $t('course.certificate') }} ({{ $t('course.available') }})

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

@ -47,7 +47,8 @@
"buyNow": "Buy this course", "buyNow": "Buy this course",
"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"
}, },
"sidebar": { "sidebar": {
"overview": "Home", "overview": "Home",

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

@ -47,7 +47,8 @@
"buyNow": "ซื้อคอร์สเรียนนี้", "buyNow": "ซื้อคอร์สเรียนนี้",
"enrollFree": "ลงทะเบียนเรียนฟรี", "enrollFree": "ลงทะเบียนเรียนฟรี",
"loginToEnroll": "เข้าสู่ระบบเพื่อลงทะเบียน", "loginToEnroll": "เข้าสู่ระบบเพื่อลงทะเบียน",
"minutes": "นาที" "minutes": "นาที",
"noVideoPreview": "วิดีโอตัวอย่างยังไม่พร้อมใช้งาน"
}, },
"sidebar": { "sidebar": {
"overview": "หน้าหลัก", "overview": "หน้าหลัก",