246 lines
9.5 KiB
Vue
246 lines
9.5 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')
|
|
|
|
// 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 // No status param = all
|
|
: activeFilter.value === 'completed'
|
|
? 'COMPLETED'
|
|
: 'IN_PROGRESS' // 'progress' -> IN_PROGRESS
|
|
|
|
// Actually, 'all' in UI might mean showing everything locally, OR fetching everything.
|
|
// The API supports status filter. Let's use clean fetching for simplicity and accuracy.
|
|
// Although checking the previous mock, 'all' showed both.
|
|
// If we want 'all' to show everything, we should pass undefined status.
|
|
// If we filter client side, we fetch ALL first.
|
|
|
|
// Strategy: Fetch based on filter.
|
|
// If 'all', do not send status.
|
|
const res = await fetchEnrolledCourses({
|
|
status: activeFilter.value === 'all' ? undefined : (activeFilter.value === 'completed' ? 'COMPLETED' : 'IN_PROGRESS')
|
|
})
|
|
|
|
if (res.success) {
|
|
enrolledCourses.value = (res.data || []).map(item => ({
|
|
id: item.course_id, // CourseCard might expect course id for links, or enrollment id? Usually CourseCard links to course detail.
|
|
// Wait, CourseCard likely needs course ID to link to /classroom/learning/:id
|
|
enrollment_id: item.id,
|
|
title: getLocalizedText(item.course.title),
|
|
progress: item.progress_percentage,
|
|
completed: item.status === 'COMPLETED',
|
|
thumbnail_url: item.course.thumbnail_url // CourseCard might need this
|
|
}))
|
|
}
|
|
isLoading.value = false
|
|
}
|
|
|
|
// Watch filter changes to reload
|
|
watch(activeFilter, () => {
|
|
loadEnrolledCourses()
|
|
})
|
|
|
|
onMounted(() => {
|
|
if (route.query.enrolled) {
|
|
showEnrollModal.value = true
|
|
}
|
|
loadEnrolledCourses()
|
|
})
|
|
|
|
// Mock certificate download action
|
|
const downloadCertificate = () => {
|
|
showCertModal.value = false
|
|
alert('เริ่มดาวน์โหลด PDF...')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- Page Header & Filters -->
|
|
<div class="flex justify-between items-center mb-6 mobile-stack">
|
|
<h1 class="text-[28px] font-bold text-slate-900 dark:text-white">{{ $t('sidebar.myCourses') }}</h1>
|
|
<!-- Filter Tabs -->
|
|
<div class="flex gap-2" style="overflow-x: auto; padding-bottom: 4px; width: 100%; justify-content: flex-start;">
|
|
<button
|
|
:class="activeFilter === 'all' ? 'btn btn-primary' : 'btn btn-secondary'"
|
|
style="white-space: nowrap;"
|
|
@click="activeFilter = 'all'"
|
|
>
|
|
{{ $t('myCourses.filterAll') }}
|
|
</button>
|
|
<button
|
|
:class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'"
|
|
style="white-space: nowrap;"
|
|
@click="activeFilter = 'progress'"
|
|
>
|
|
{{ $t('myCourses.filterProgress') }}
|
|
</button>
|
|
<button
|
|
:class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'"
|
|
style="white-space: nowrap;"
|
|
@click="activeFilter = 'completed'"
|
|
>
|
|
{{ $t('myCourses.filterCompleted') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Courses Grid -->
|
|
<div v-if="isLoading" class="flex justify-center py-20">
|
|
<div class="spinner-border animate-spin inline-block w-8 h-8 border-4 rounded-full" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
</div>
|
|
<div v-else class="my-courses-grid">
|
|
<template v-for="course in enrolledCourses" :key="course.id">
|
|
<!-- In Progress Course Card -->
|
|
<CourseCard
|
|
v-if="!course.completed"
|
|
:title="course.title"
|
|
:progress="course.progress"
|
|
:image="course.thumbnail_url"
|
|
show-continue
|
|
/>
|
|
<!-- Completed Course Card -->
|
|
<CourseCard
|
|
v-else
|
|
:title="course.title"
|
|
:progress="100"
|
|
:image="course.thumbnail_url"
|
|
:completed="true"
|
|
show-certificate
|
|
show-study-again
|
|
@view-certificate="showCertModal = true"
|
|
/>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-if="!isLoading && enrolledCourses.length === 0" class="empty-state">
|
|
<div class="empty-state-icon">📚</div>
|
|
<h3 class="empty-state-title">{{ $t('myCourses.emptyTitle') }}</h3>
|
|
<p class="empty-state-description">{{ $t('myCourses.emptyDesc') }}</p>
|
|
<NuxtLink to="/browse/discovery" class="btn btn-primary">{{ $t('myCourses.goToDiscovery') }}</NuxtLink>
|
|
</div>
|
|
|
|
<!-- MODAL: Enrollment Success -->
|
|
<div
|
|
v-if="showEnrollModal"
|
|
style="display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100; align-items: center; justify-content: center; padding: 20px;"
|
|
>
|
|
<div class="card" style="width: 400px; text-align: center; max-width: 90%;">
|
|
<div style="width: 64px; height: 64px; background: var(--success); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 24px;">
|
|
✓
|
|
</div>
|
|
<h2 class="font-bold mb-2">{{ $t('enrollment.successTitle') }}</h2>
|
|
<p class="text-muted mb-6">{{ $t('enrollment.successDesc') }}</p>
|
|
<div class="flex flex-col gap-2">
|
|
<NuxtLink to="/classroom/learning" class="btn btn-primary w-full">{{ $t('enrollment.startNow') }}</NuxtLink>
|
|
<button class="btn btn-secondary w-full" @click="showEnrollModal = false">{{ $t('enrollment.later') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- MODAL: Certificate Preview -->
|
|
<div
|
|
v-if="showCertModal"
|
|
style="display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; align-items: center; justify-content: center; padding: 20px;"
|
|
>
|
|
<div class="cert-container">
|
|
<!-- Close Button -->
|
|
<button style="position: absolute; top: 15px; right: 20px; border: none; background: none; font-size: 32px; cursor: pointer; color: #1E293B; z-index: 10;" @click="showCertModal = false">×</button>
|
|
|
|
<div class="cert-inner">
|
|
<h1 class="cert-title">{{ $t('certificate.title') }}</h1>
|
|
<div style="width: 100px; height: 2px; background: #D4AF37; margin: 0 auto 24px;"/>
|
|
|
|
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">{{ $t('certificate.presentedTo') }}</p>
|
|
|
|
<h2 class="cert-name">{{ $t('userMenu.home') === 'Home' ? 'Somchai Jaidee' : 'สมชาย ใจดี' }}</h2>
|
|
|
|
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">{{ $t('certificate.completedDesc') }}</p>
|
|
|
|
<h3 style="font-size: 24px; font-weight: 700; color: #3B82F6; margin-bottom: 30px;">HTML5 พื้นฐาน</h3>
|
|
|
|
<!-- Signature Section -->
|
|
<div class="cert-footer">
|
|
<div style="text-align: center;">
|
|
<div style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; font-style: italic; margin-left: auto; margin-right: auto;">Somchai K.</div>
|
|
<div style="font-size: 12px; color: #64748B;">{{ $t('certificate.directorSignature') }}</div>
|
|
</div>
|
|
|
|
<!-- Golden Seal -->
|
|
<div style="width: 80px; height: 80px; background: #D4AF37; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; border: 4px double white; box-shadow: 0 0 0 4px #D4AF37; transform: rotate(-5deg); flex-shrink: 0;">
|
|
<div style="font-size: 10px; font-weight: bold;">Certified</div>
|
|
<div style="font-size: 16px; font-weight: 900;">{{ $t('certificate.passed') }}</div>
|
|
</div>
|
|
|
|
<div style="text-align: center;">
|
|
<div style="width: 150px; border-bottom: 1px solid #1E293B; margin-bottom: 8px; padding-bottom: 8px; margin-left: auto; margin-right: auto;">15/12/2026</div>
|
|
<div style="font-size: 12px; color: #64748B;">{{ $t('certificate.issueDate') }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download Button -->
|
|
<div style="margin-top: 32px; text-align: center;">
|
|
<button class="btn btn-primary" @click="downloadCertificate">
|
|
⬇ {{ $t('certificate.downloadPDF') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.my-courses-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.my-courses-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|