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

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

View file

@ -55,6 +55,13 @@ const handleEnroll = () => {
// In this pattern, we just emit. // In this pattern, we just emit.
setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout 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> </script>
<template> <template>
@ -122,14 +129,14 @@ const handleEnroll = () => {
<!-- Instructor Info --> <!-- 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"> <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"> <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> </q-avatar>
<div> <div>
<div class="text-sm text-slate-500 mb-1 font-bold uppercase tracking-wider">{{ $t('course.instructor') }}</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"> <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>
<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>
</div> </div>

View file

@ -37,6 +37,32 @@ export interface Course {
video_url?: string video_url?: string
}[] }[]
}[] }[]
// ข้อมูลผู้สอนและเจ้าของคอร์ส
creator?: {
id: number
username: string
email: string
profile: {
first_name: string
last_name: string
avatar_url: string
}
}
instructors?: {
user_id: number
is_primary: boolean
user: {
id: number
username: string
email: string
profile: {
first_name: string
last_name: string
avatar_url: string
}
}
}[]
} }
interface CourseResponse { interface CourseResponse {