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

feat: Implement course management composable with course fetching and enrollment, and create a user dashboard to display enrolled courses.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-09 10:53:42 +07:00
parent eb248f7ca2
commit f736eb7f38
2 changed files with 33 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,8 @@ const { currentUser } = useAuth()
const { fetchCourses } = useCourse() // Import useCourse
const { fetchCategories } = useCategory() // Import useCategory
const { t } = useI18n()
// Helper to get localized text
const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
if (!text) return ''
@ -50,7 +52,7 @@ onMounted(async () => {
id: c.id,
title: getLocalizedText(c.title),
category: getLocalizedText(catMap.get(c.category_id)) || 'General', // Map Category ID to Name
duration: c.lessons ? `${c.lessons} บทเรียน` : 'พร้อมเรียน', // Use lesson count or default
duration: c.lessons ? `${c.lessons} ${t('course.lessonsUnit')}` : '', // Use lesson count or empty
image: c.thumbnail_url || '',
badge: '', // No mock badge
badgeType: ''
@ -96,11 +98,12 @@ onMounted(async () => {
<div class="p-7" style="background-color: var(--bg-surface);">
<div class="text-[10px] font-black text-slate-700 dark:text-slate-500 uppercase tracking-[0.2em] mb-2">{{ course.category }}</div>
<h4 class="font-black text-xl mb-6 text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors line-clamp-2 h-14">{{ course.title }}</h4>
<div class="flex items-center justify-between pt-4 border-t border-slate-50 dark:border-white/5">
<span class="text-xs font-bold text-slate-700 dark:text-slate-400 flex items-center gap-2">
<div class="flex items-center justify-between pt-4 border-t border-slate-50 dark:border-white/5">
<span v-if="course.duration" class="text-xs font-bold text-slate-700 dark:text-slate-400 flex items-center gap-2">
<q-icon name="schedule" size="14px" />
{{ course.duration }}
</span>
<div v-else />
<span class="px-4 py-2 bg-blue-600 text-white text-xs font-bold rounded-lg hover:bg-blue-700 transition-colors shadow-md">{{ $t('menu.viewDetails') }}</span>
</div>
</div>