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

feat: Introduce useCourse and useAuth composables, and add new pages for user registration and dynamic course details.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-22 11:04:57 +07:00
parent ffd2d55e33
commit 7b22699b13
4 changed files with 7 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

13
Frontend-Learner/pages/course/[id].vue
View file

@ -14,14 +14,12 @@ const route = useRoute()
const courseId = computed(() => parseInt(route.params.id as string))
const { fetchCourseById, enrollCourse } = useCourse()
// Fetch course data
const { data: courseData, error, refresh } = await useAsyncData(`course-${courseId.value}`, () => fetchCourseById(courseId.value))
const course = computed(() => {
return courseData.value?.success ? courseData.value.data : null
})
// Enroll State
const isEnrolling = ref(false)
const handleEnroll = async () => {
@ -43,7 +41,6 @@ const handleEnroll = async () => {
}
// Helper for localization
const getLocalizedText = (text: string | { th: string; en: string } | undefined | null) => {
if (!text) return ''
if (typeof text === 'string') return text
@ -60,7 +57,6 @@ useHead({
<template>
<div class="container mx-auto max-w-7xl px-4 py-8">
<!-- Back Button -->
<NuxtLink to="/browse/discovery" class="inline-flex items-center gap-2 text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white mb-6 transition-colors font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
@ -70,9 +66,7 @@ useHead({
<div v-if="course" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Main Content (Left Column) -->
<div class="lg:col-span-8">
<!-- Hero Video Placeholder / Thumbnail -->
<div class="relative aspect-video bg-slate-900 rounded-2xl overflow-hidden shadow-lg mb-8 group cursor-pointer border border-slate-200 dark:border-slate-700">
<div v-if="course.thumbnail_url" class="absolute inset-0">
<img :src="course.thumbnail_url" class="w-full h-full object-cover opacity-90 group-hover:opacity-75 transition-opacity" />
@ -93,7 +87,6 @@ useHead({
<p class="text-lg leading-relaxed">{{ getLocalizedText(course.description) }}</p>
</div>
<!-- Course Syllabus (Dynamic) -->
<div class="bg-white dark:bg-slate-800 rounded-3xl p-6 md:p-8 shadow-sm border border-slate-100 dark:border-slate-700/50">
<h3 class="font-bold text-xl text-slate-900 dark:text-white mb-6 flex items-center gap-2">
<span class="w-1 h-6 bg-blue-500 rounded-full"></span>
@ -129,7 +122,6 @@ useHead({
</div>
</div>
<!-- Sidebar (Right Column): Sticky CTA -->
<div class="lg:col-span-4">
<div class="sticky top-24 bg-white dark:bg-slate-800 rounded-3xl p-6 md:p-8 shadow-lg border border-slate-100 dark:border-slate-700/50">
<div class="mb-8">
@ -139,7 +131,6 @@ useHead({
</div>
</div>
<!-- Enroll Button -->
<button
@click="handleEnroll"
:disabled="isEnrolling"
@ -164,10 +155,6 @@ useHead({
</div>
</div>
<!-- Share / Wishlist placeholder -->
<!-- <div class="mt-6 flex gap-3">
<button class="flex-1 py-2 rounded-lg border border-slate-200 dark:border-slate-600 text-slate-600 dark:text-slate-400 font-bold hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">แชร์</button>
</div> -->
</div>
</div>