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

feat: Add useCourse composable for course data management and CourseDetailView component for displaying course details.

Browse source
This commit is contained in:
supalerk-ar66 2026-02-20 16:47:27 +07:00
parent 13ad2097df
commit 096b5bbc52
2 changed files with 36 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -55,6 +55,13 @@ const handleEnroll = () => {
// In this pattern, we just emit.
setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
};
const instructorData = computed(() => {
if (props.course?.instructors && props.course.instructors.length > 0) {
const primary = props.course.instructors.find((i: any) => i.is_primary);
return primary ? primary.user : props.course.instructors[0].user;
}
return props.course?.creator || null;
});
</script>
<template>
@ -122,14 +129,14 @@ const handleEnroll = () => {
<!-- 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'" />
<img :src="instructorData?.profile?.avatar_url || 'https://cdn.quasar.dev/img/boy-avatar.png'" />
</q-avatar>
<div>
<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' }}
{{ instructorData?.profile?.first_name || 'Unknown' }} {{ instructorData?.profile?.last_name || 'Instructor' }}
</div>
<div class="text-slate-500 text-sm mt-1">{{ course.instructor?.email || 'No contact info' }}</div>
<div class="text-slate-500 text-sm mt-1">{{ instructorData?.email || 'No contact info' }}</div>
</div>
</div>