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

feat: Implement user dashboard with recommended courses, a 'My Courses' page for enrolled courses, and a reusable CourseCard component.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-11 15:05:19 +07:00
parent 840eae4fad
commit acff387a9b
4 changed files with 9 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

5
Frontend-Learner/components/course/CourseCard.vue
View file

@ -8,12 +8,12 @@
interface CourseCardProps { interface CourseCardProps {
id?: number id?: number
title: string | { th: string; en: string } title: string | { th: string; en: string }
category?: string category?: string | { th: string; en: string }
level?: string level?: string
price?: string price?: string
description?: string | { th: string; en: string } description?: string | { th: string; en: string }
rating?: string rating?: string
lessons?: string lessons?: string | number
duration?: string duration?: string
progress?: number progress?: number
completed?: boolean completed?: boolean
@ -51,6 +51,7 @@ const getLocalizedText = (text: string | { th: string; en: string } | undefined)
const displayTitle = computed(() => getLocalizedText(props.title)) const displayTitle = computed(() => getLocalizedText(props.title))
const displayDescription = computed(() => getLocalizedText(props.description)) const displayDescription = computed(() => getLocalizedText(props.description))
const displayCategory = computed(() => getLocalizedText(props.category))
</script> </script>
<template> <template>

2
Frontend-Learner/components/user/UserMenu.vue
View file

@ -58,7 +58,7 @@ const handleLogout = async () => {
self="top end" self="top end"
:offset="[0, 10]" :offset="[0, 10]"
content-class="bg-white dark:bg-[#0f172a] text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/5" content-class="bg-white dark:bg-[#0f172a] text-slate-900 dark:text-white rounded-2xl shadow-xl border border-slate-200/70 dark:border-white/5"
style="min-width: 240px;" style="width: 240px;"
> >
<q-list class="py-2"> <q-list class="py-2">
<q-item <q-item

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

@ -41,9 +41,9 @@ onMounted(async () => {
if (res.success && res.data?.length) { if (res.success && res.data?.length) {
recommendedCourses.value = res.data.map((c: any) => ({ recommendedCourses.value = res.data.map((c: any) => ({
id: c.id, id: c.id,
title: getLocalizedText(c.title), title: c.title,
category: getLocalizedText(catMap.get(c.category_id)) || 'General', category: catMap.get(c.category_id),
duration: c.lessons ? `${c.lessons} ${t('course.lessonsUnit')}` : '', lessons: c.lessons,
image: c.thumbnail_url || '', image: c.thumbnail_url || '',
badge: '', badge: '',
badgeType: '' badgeType: ''
@ -55,7 +55,7 @@ onMounted(async () => {
<template> <template>
<div class="page-container"> <div class="page-container">
<!-- Welcome Header Section --> <!-- Welcome Header Section -->
<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-all border border-white/5"> <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="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8"> <div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
<div class="text-center md:text-left"> <div class="text-center md:text-left">
<ClientOnly> <ClientOnly>

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

@ -69,7 +69,7 @@ const loadEnrolledCourses = async () => {
enrolledCourses.value = courses.map(item => ({ enrolledCourses.value = courses.map(item => ({
id: item.course_id, id: item.course_id,
enrollment_id: item.id, enrollment_id: item.id,
title: getLocalizedText(item.course.title), title: item.course.title,
progress: item.progress_percentage || 0, progress: item.progress_percentage || 0,
completed: item.status === 'COMPLETED', completed: item.status === 'COMPLETED',
thumbnail_url: item.course.thumbnail_url thumbnail_url: item.course.thumbnail_url