feat: Add useCourse composable for course data management and CourseDetailView component for displaying course details.
This commit is contained in:
parent
13ad2097df
commit
096b5bbc52
2 changed files with 36 additions and 3 deletions
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue