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

feat: Implement the course discovery and catalog page, enabling users to browse, filter, search, and view details of available courses.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-27 09:51:18 +07:00
parent fb1e7671cc
commit bbee6d3934
1 changed files with 17 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -294,30 +294,30 @@ onMounted(() => {
</p> </p>
<!-- Course Syllabus --> <!-- Course Syllabus -->
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-sm border border-slate-100 dark:border-slate-700/50"> <div class="bg-white rounded-3xl p-8 shadow-sm border border-slate-100">
<h3 class="text-xl font-bold mb-6 text-slate-900 dark:text-white flex items-center gap-2"> <h3 class="text-xl font-bold mb-6 text-slate-900 dark:text-black flex items-center gap-2">
<span class="w-1 h-6 bg-blue-500 rounded-full"></span> <span class="w-1 h-6 bg-blue-500 rounded-full"></span>
{{ $t('course.courseContent') }} {{ $t('course.courseContent') }}
</h3> </h3>
<div class="space-y-4"> <div class="space-y-4">
<div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden"> <div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 rounded-xl overflow-hidden">
<div class="bg-slate-50 dark:bg-slate-800/80 p-4 flex justify-between items-center cursor-pointer"> <div class="bg-slate-50 p-4 flex justify-between items-center cursor-pointer">
<div class="font-bold text-slate-800 dark:text-slate-200"> <div class="font-bold text-slate-800">
<span class="opacity-50 mr-2">Chapter {{ Number(index) + 1 }}</span> <span class="opacity-50 mr-2">Chapter {{ Number(index) + 1 }}</span>
{{ getLocalizedText(chapter.title) }} {{ getLocalizedText(chapter.title) }}
</div> </div>
<span class="text-xs font-bold px-3 py-1 bg-white dark:bg-slate-700 rounded-full border border-slate-200 dark:border-slate-600"> <span class="text-xs font-bold px-3 py-1 bg-white rounded-full border border-slate-200">
{{ chapter.lessons ? chapter.lessons.length : 0 }} Lessons {{ chapter.lessons ? chapter.lessons.length : 0 }} Lessons
</span> </span>
</div> </div>
<!-- Lessons --> <!-- Lessons -->
<div class="divide-y divide-slate-100 dark:divide-slate-700/50 bg-white dark:bg-slate-800"> <div class="divide-y divide-slate-100 bg-white">
<div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors"> <div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 transition-colors">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500"> <div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500">
{{ Number(lIndex) + 1 }} {{ Number(lIndex) + 1 }}
</div> </div>
<span class="text-slate-700 dark:text-slate-300 font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span> <span class="text-slate-700 dark:text-black font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span>
</div> </div>
<span class="text-xs text-slate-400">{{ lesson.duration_minutes || 0 }}:00</span> <span class="text-xs text-slate-400">{{ lesson.duration_minutes || 0 }}:00</span>
</div> </div>
@ -329,14 +329,7 @@ onMounted(() => {
<!-- Sidebar (Right Column) --> <!-- Sidebar (Right Column) -->
<div class="lg:col-span-4"> <div class="lg:col-span-4">
<div class="bg-white dark:bg-slate-800 rounded-3xl p-6 shadow-lg border border-slate-100 dark:border-slate-700 sticky top-24"> <div class="bg-white rounded-3xl p-6 shadow-lg border border-slate-100 sticky top-24">
<div class="mb-8 text-center bg-slate-50 dark:bg-slate-900/50 rounded-2xl p-6 border border-slate-100 dark:border-slate-700">
<div class="text-sm text-slate-500 mb-1 font-medium">{{ selectedCourse.price ? 'ราคาคอร์ส' : 'ราคา' }}</div>
<h2 class="text-4xl font-black text-blue-600 dark:text-blue-400">
{{ selectedCourse.price || 'ฟรี' }}
</h2>
</div>
<q-btn <q-btn
@click="handleEnroll(selectedCourse.id)" @click="handleEnroll(selectedCourse.id)"
unetab unetab
@ -351,18 +344,18 @@ onMounted(() => {
</template> </template>
</q-btn> </q-btn>
<div class="text-sm space-y-3 pt-4 border-t border-slate-100 dark:border-slate-700"> <div class="text-sm space-y-3 pt-4 border-t border-slate-100">
<div class="flex justify-between text-slate-600 dark:text-slate-400"> <div class="flex justify-between text-slate-600 dark:text-black">
<span>{{ $t('course.certificate') }}</span> <span>{{ $t('course.certificate') }}</span>
<span class="font-bold text-slate-900 dark:text-white">{{ selectedCourse.have_certificate ? 'มีใบประกาศฯ' : 'ไม่มี' }}</span> <span class="font-bold text-slate-900 dark:text-black">{{ selectedCourse.have_certificate ? 'มีใบประกาศฯ' : 'ไม่มี' }}</span>
</div> </div>
<div v-if="selectedCourse.instructor_name" class="flex justify-between text-slate-600 dark:text-slate-400"> <div v-if="selectedCourse.instructor_name" class="flex justify-between text-slate-600 dark:text-black">
<span>ผู้สอน</span> <span>ผู้สอน</span>
<span class="font-bold text-slate-900 dark:text-white">{{ selectedCourse.instructor_name }}</span> <span class="font-bold text-slate-900 dark:text-black">{{ selectedCourse.instructor_name }}</span>
</div> </div>
<div v-if="selectedCourse.level" class="flex justify-between text-slate-600 dark:text-slate-400"> <div v-if="selectedCourse.level" class="flex justify-between text-slate-600 dark:text-black">
<span>ระดับ</span> <span>ระดับ</span>
<span class="font-bold text-slate-900 dark:text-white">{{ selectedCourse.level }}</span> <span class="font-bold text-slate-900 dark:text-black">{{ selectedCourse.level }}</span>
</div> </div>
</div> </div>
</div> </div>