248 lines
9.1 KiB
Vue
248 lines
9.1 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file my-courses.vue
|
|
* @description My Courses Page.
|
|
* Displays enrolled courses with filters for progress/completed.
|
|
* Handles enrollment success modals and certificate downloads.
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: 'default',
|
|
middleware: 'auth'
|
|
})
|
|
|
|
useHead({
|
|
title: 'คอร์สของฉัน - e-Learning'
|
|
})
|
|
|
|
const route = useRoute()
|
|
const showEnrollModal = ref(false)
|
|
const showCertModal = ref(false)
|
|
const activeFilter = ref<'all' | 'progress' | 'completed'>('all')
|
|
const { currentUser } = useAuth()
|
|
|
|
// Check URL query parameters to show 'Enrollment Success' modal
|
|
onMounted(() => {
|
|
if (route.query.enrolled) {
|
|
showEnrollModal.value = true
|
|
}
|
|
})
|
|
|
|
// Helper to get localized text
|
|
const getLocalizedText = (text: string | { th: string; en: string } | undefined) => {
|
|
if (!text) return ''
|
|
if (typeof text === 'string') return text
|
|
return text.th || text.en || ''
|
|
}
|
|
|
|
// Data Handling
|
|
const { fetchEnrolledCourses } = useCourse()
|
|
const enrolledCourses = ref<any[]>([])
|
|
const isLoading = ref(false)
|
|
|
|
const loadEnrolledCourses = async () => {
|
|
isLoading.value = true
|
|
const apiStatus = activeFilter.value === 'all'
|
|
? undefined
|
|
: activeFilter.value === 'completed'
|
|
? 'COMPLETED'
|
|
: 'IN_PROGRESS'
|
|
|
|
const res = await fetchEnrolledCourses({
|
|
status: apiStatus
|
|
})
|
|
|
|
if (res.success) {
|
|
enrolledCourses.value = (res.data || []).map(item => ({
|
|
id: item.course_id,
|
|
enrollment_id: item.id,
|
|
title: getLocalizedText(item.course.title),
|
|
progress: 0,
|
|
completed: item.status === 'COMPLETED',
|
|
thumbnail_url: item.course.thumbnail_url
|
|
}))
|
|
}
|
|
isLoading.value = false
|
|
}
|
|
|
|
// Watch filter changes to reload
|
|
watch(activeFilter, () => {
|
|
loadEnrolledCourses()
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (route.query.enrolled) {
|
|
showEnrollModal.value = true
|
|
}
|
|
loadEnrolledCourses()
|
|
})
|
|
|
|
// Certificate Handling
|
|
const selectedCertCourse = ref<any>(null)
|
|
|
|
const openCertModal = (course: any) => {
|
|
selectedCertCourse.value = course
|
|
showCertModal.value = true
|
|
}
|
|
|
|
// Mock certificate download action
|
|
const downloadCertificate = () => {
|
|
showCertModal.value = false
|
|
alert(`Start downloading certificate for ${selectedCertCourse.value?.title || 'course'}...`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-8 max-w-6xl mx-auto">
|
|
|
|
|
|
<!-- Page Header & Filters -->
|
|
<div class="flex flex-col items-start mb-12">
|
|
<h1 class="text-3xl font-extrabold text-slate-900 dark:text-white mb-8">{{ $t('sidebar.myCourses') }}</h1>
|
|
|
|
<!-- Filter Tabs -->
|
|
<div class="flex gap-2">
|
|
<q-btn
|
|
v-for="filter in ['all', 'progress', 'completed']"
|
|
:key="filter"
|
|
@click="activeFilter = filter as any"
|
|
rounded
|
|
unelevated
|
|
:color="activeFilter === filter ? 'primary' : 'white'"
|
|
:text-color="activeFilter === filter ? 'white' : 'grey-8'"
|
|
class="font-bold px-6"
|
|
:label="$t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Courses Grid -->
|
|
<div v-if="isLoading" class="flex justify-center py-20">
|
|
<q-spinner size="3rem" color="primary" />
|
|
</div>
|
|
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
<template v-for="course in enrolledCourses" :key="course.id">
|
|
<!-- In Progress Course Card -->
|
|
<CourseCard
|
|
v-if="!course.completed"
|
|
:id="course.id"
|
|
:title="course.title"
|
|
:progress="course.progress"
|
|
:image="course.thumbnail_url"
|
|
show-continue
|
|
/>
|
|
<!-- Completed Course Card -->
|
|
<CourseCard
|
|
v-else
|
|
:id="course.id"
|
|
:title="course.title"
|
|
:progress="100"
|
|
:image="course.thumbnail_url"
|
|
:completed="true"
|
|
show-certificate
|
|
show-study-again
|
|
@view-certificate="openCertModal(course)"
|
|
/>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-if="!isLoading && enrolledCourses.length === 0" class="flex flex-col items-center justify-center py-20 bg-slate-50 dark:bg-slate-800/50 rounded-3xl border-2 border-dashed border-slate-200 dark:border-slate-700 mt-4">
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('myCourses.emptyTitle') }}</h3>
|
|
<p class="text-slate-500 dark:text-slate-400 text-center max-w-md">{{ $t('myCourses.emptyDesc') }}</p>
|
|
<NuxtLink to="/browse/discovery" class="mt-6 px-6 py-2 bg-blue-600 text-white rounded-lg font-bold hover:bg-blue-700 transition-colors">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
|
|
</div>
|
|
|
|
<!-- MODAL: Enrollment Success -->
|
|
<q-dialog v-model="showEnrollModal" backdrop-filter="blur(4px)">
|
|
<q-card class="rounded-[1.5rem] shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden bg-white dark:bg-slate-800">
|
|
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-green-400 to-emerald-600"></div>
|
|
<div class="w-16 h-16 bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400 rounded-full flex items-center justify-center text-3xl mx-auto mb-6">
|
|
✓
|
|
</div>
|
|
<h2 class="text-2xl font-bold mb-2 text-slate-900 dark:text-white">{{ $t('enrollment.successTitle') }}</h2>
|
|
<p class="text-slate-500 dark:text-slate-400 mb-8">{{ $t('enrollment.successDesc') }}</p>
|
|
<div class="flex flex-col gap-3">
|
|
<q-btn
|
|
:to="`/classroom/learning?course_id=${route.query.course_id}`"
|
|
unelevated
|
|
rounded
|
|
color="primary"
|
|
class="w-full py-3 text-lg font-bold shadow-lg"
|
|
:label="$t('enrollment.startNow')"
|
|
/>
|
|
<q-btn
|
|
flat
|
|
rounded
|
|
color="grey-7"
|
|
class="w-full py-3 font-bold"
|
|
:label="$t('enrollment.later')"
|
|
@click="showEnrollModal = false"
|
|
/>
|
|
</div>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<!-- MODAL: Certificate Preview -->
|
|
<q-dialog v-model="showCertModal" backdrop-filter="blur(8px)" full-width full-height>
|
|
<div class="relative bg-white text-slate-900 w-full max-w-5xl aspect-[1.414/1] shadow-2xl rounded-sm p-12 flex flex-col items-center text-center overflow-hidden m-auto">
|
|
<!-- Close Button -->
|
|
<q-btn icon="close" flat round dense class="absolute top-4 right-4 text-slate-400" @click="showCertModal = false" />
|
|
|
|
<!-- Border Decoration -->
|
|
<div class="absolute inset-4 border-4 border-double border-slate-200 pointer-events-none"></div>
|
|
|
|
<div class="relative z-10 w-full h-full flex flex-col justify-center">
|
|
<div class="w-16 h-16 mx-auto mb-6 bg-blue-600 text-white flex items-center justify-center rounded-full font-serif font-bold text-3xl">E</div>
|
|
|
|
<h1 class="text-4xl font-serif font-bold mb-2 uppercase tracking-widest text-slate-800">{{ $t('certificate.title') }}</h1>
|
|
<div class="w-32 h-1 bg-amber-400 mx-auto mb-8"></div>
|
|
|
|
<p class="text-slate-500 mb-4 text-lg italic font-serif">{{ $t('certificate.presentedTo') }}</p>
|
|
|
|
<h2 class="text-5xl font-serif font-bold text-blue-900 mb-6 font-handwriting">{{ currentUser?.firstName }} {{ currentUser?.lastName }}</h2>
|
|
|
|
<p class="text-slate-500 mb-6 text-lg italic font-serif">{{ $t('certificate.completedDesc') }}</p>
|
|
|
|
<h3 class="text-2xl font-bold text-slate-800 mb-12">{{ selectedCertCourse?.title || 'Course Title' }}</h3>
|
|
|
|
<div class="flex justify-between items-end px-12 mt-auto">
|
|
<div class="text-center">
|
|
<div class="w-48 border-b border-slate-800 mb-2 pb-2 italic font-serif text-lg">Course Instructor</div>
|
|
<div class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('certificate.directorSignature') }}</div>
|
|
</div>
|
|
|
|
<div class="w-24 h-24 bg-gradient-to-br from-amber-300 to-amber-600 rounded-full flex flex-col items-center justify-center text-white border-4 border-white shadow-xl rotate-12 -mt-4">
|
|
<span class="text-[10px] uppercase font-bold tracking-widest opacity-80">Certified</span>
|
|
<span class="font-black text-xl">PASS</span>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-48 border-b border-slate-800 mb-2 pb-2">{{ new Date().toLocaleDateString() }}</div>
|
|
<div class="text-xs text-slate-500 uppercase tracking-wider">{{ $t('certificate.issueDate') }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-6 left-0 w-full text-center">
|
|
<q-btn
|
|
unelevated
|
|
rounded
|
|
color="primary"
|
|
icon="download"
|
|
:label="$t('certificate.downloadPDF')"
|
|
class="font-bold px-6"
|
|
@click="downloadCertificate"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Custom Font for Signature/Name if desired */
|
|
.font-handwriting {
|
|
font-family: 'Dancing Script', cursive, serif; /* Fallback */
|
|
}
|
|
</style>
|