feat: Add initial pages and components for user dashboard, profile, 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 47s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 47s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 4s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
This commit is contained in:
supalerk-ar66
parent
f26a94076c
commit
e3873f616e
11 changed files with 1046 additions and 685 deletions
|
|
@ -33,6 +33,19 @@ const formatPrice = (price: number) => {
|
|||
}
|
||||
|
||||
const enrollmentLoading = ref(false);
|
||||
const activeTab = ref('curriculum');
|
||||
|
||||
const totalLessons = computed(() => {
|
||||
if (!props.course?.chapters) return 0;
|
||||
return props.course.chapters.reduce((acc: number, chapter: any) => acc + (chapter.lessons?.length || 0), 0);
|
||||
});
|
||||
|
||||
const totalDuration = computed(() => {
|
||||
if (!props.course?.chapters) return 0;
|
||||
return props.course.chapters.reduce((acc: number, chapter: any) => {
|
||||
return acc + (chapter.lessons?.reduce((lAcc: number, lesson: any) => lAcc + (lesson.duration_minutes || 0), 0) || 0);
|
||||
}, 0);
|
||||
});
|
||||
|
||||
const handleEnroll = () => {
|
||||
if(!props.course) return;
|
||||
|
|
@ -42,7 +55,6 @@ const handleEnroll = () => {
|
|||
// In this pattern, we just emit.
|
||||
setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -104,45 +116,69 @@ const handleEnroll = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Curriculum Preview -->
|
||||
<div class="bg-slate-50 dark:bg-slate-900 rounded-3xl p-6 md:p-8 border border-slate-200 dark:border-white/5">
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<!-- Course Detail - Single Page Layout -->
|
||||
<div class="space-y-10">
|
||||
|
||||
<!-- Instructor Info -->
|
||||
<div class="flex flex-col sm:flex-row gap-6 items-start sm:items-center pb-8 border-b border-slate-200 dark:border-slate-800">
|
||||
<q-avatar size="64px">
|
||||
<img :src="course.instructor?.profile?.avatar_url || 'https://cdn.quasar.dev/img/boy-avatar.png'" />
|
||||
</q-avatar>
|
||||
<div>
|
||||
<h3 class="text-xl font-black text-slate-900 dark:text-white mb-1 flex items-center gap-2">
|
||||
<div class="text-sm text-slate-500 mb-1 font-bold uppercase tracking-wider">{{ $t('course.instructor') }}</div>
|
||||
<div class="font-bold text-xl text-slate-800 dark:text-white">
|
||||
{{ course.instructor?.profile?.first_name || 'Unknown' }} {{ course.instructor?.profile?.last_name || 'Instructor' }}
|
||||
</div>
|
||||
<div class="text-slate-500 text-sm mt-1">{{ course.instructor?.email || 'No contact info' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Curriculum / Lesson Details -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white">
|
||||
{{ $t('course.courseContent') }}
|
||||
</h3>
|
||||
<div class="text-sm font-bold text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-white/5 px-4 py-2 rounded-full">
|
||||
{{ totalLessons }} {{ $t('course.lessons') }} • {{ totalDuration }} {{ $t('quiz.minutes') }}
|
||||
</div>
|
||||
</div>
|
||||
<q-icon name="keyboard_command_key" class="text-slate-200 dark:text-slate-800" size="32px" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="group">
|
||||
<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 class="flex items-center gap-3">
|
||||
<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 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-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
|
||||
:name="lesson.type === 'VIDEO' ? 'play_arrow' : 'article'"
|
||||
size="16px"
|
||||
/>
|
||||
</div>
|
||||
<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" />
|
||||
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="group">
|
||||
<!-- Chapter Header -->
|
||||
<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 class="flex items-center gap-3">
|
||||
<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>
|
||||
<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">
|
||||
<q-icon name="menu_book" size="40px" class="mb-2 opacity-50" />
|
||||
<p class="text-sm font-medium">{{ $t('course.noContent') }}</p>
|
||||
|
||||
<!-- Lessons List -->
|
||||
<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-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 shrink-0" :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
|
||||
:name="lesson.type === 'VIDEO' ? 'play_arrow' : 'article'"
|
||||
size="16px"
|
||||
/>
|
||||
</div>
|
||||
<span class="flex-1 font-bold truncate">{{ getLocalizedText(lesson.title) }}</span>
|
||||
<span v-if="lesson.duration_minutes" class="text-slate-400 dark:text-slate-500 text-[10px] font-bold shrink-0">{{ 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 shrink-0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<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">
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue