213 lines
8.4 KiB
Vue
213 lines
8.4 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
|
|
}
|
|
})
|
|
|
|
// Mock Enrolled Courses Data
|
|
const courses = [
|
|
{
|
|
id: 1,
|
|
title: 'เบื้องต้นการออกแบบ UX/UI',
|
|
progress: 65,
|
|
category: 'progress'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'การเข้าถึงเว็บ (WCAG)',
|
|
progress: 10,
|
|
category: 'progress'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: 'HTML5 พื้นฐาน',
|
|
progress: 100,
|
|
completed: true,
|
|
category: 'completed'
|
|
}
|
|
]
|
|
|
|
// Computed property to filter courses
|
|
const filteredCourses = computed(() => {
|
|
if (activeFilter.value === 'all') return courses
|
|
return courses.filter(c => c.category === activeFilter.value)
|
|
})
|
|
|
|
const filterCourses = (filter: 'all' | 'progress' | 'completed') => {
|
|
activeFilter.value = filter
|
|
}
|
|
|
|
// 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">คอร์สของฉัน</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="filterCourses('all')"
|
|
>
|
|
ทั้งหมด
|
|
</button>
|
|
<button
|
|
:class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'"
|
|
style="white-space: nowrap;"
|
|
@click="filterCourses('progress')"
|
|
>
|
|
กำลังเรียน
|
|
</button>
|
|
<button
|
|
:class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'"
|
|
style="white-space: nowrap;"
|
|
@click="filterCourses('completed')"
|
|
>
|
|
เรียนจบแล้ว
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Courses Grid -->
|
|
<div class="my-courses-grid">
|
|
<template v-for="course in filteredCourses" :key="course.id">
|
|
<!-- In Progress Course Card -->
|
|
<CourseCard
|
|
v-if="!course.completed"
|
|
:title="course.title"
|
|
:progress="course.progress"
|
|
show-continue
|
|
/>
|
|
<!-- Completed Course Card -->
|
|
<CourseCard
|
|
v-else
|
|
:title="course.title"
|
|
:completed="true"
|
|
show-certificate
|
|
show-study-again
|
|
@view-certificate="showCertModal = true"
|
|
/>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-if="filteredCourses.length === 0" class="empty-state">
|
|
<div class="empty-state-icon">📚</div>
|
|
<h3 class="empty-state-title">ยังไม่มีคอร์สในหมวดหมู่นี้</h3>
|
|
<p class="empty-state-description">คุณยังไม่มีคอร์สเรียนในส่วนนี้ ลองเลือกดูคอร์สที่น่าสนใจในระบบของเรา</p>
|
|
<NuxtLink to="/browse/discovery" class="btn btn-primary">ไปที่รายการคอร์ส</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">ลงทะเบียนสำเร็จ!</h2>
|
|
<p class="text-muted mb-6">คุณได้ลงทะเบียนคอร์ส <strong>เบื้องต้นการออกแบบ UX/UI</strong> เรียบร้อยแล้ว</p>
|
|
<div class="flex flex-col gap-2">
|
|
<NuxtLink to="/classroom/learning" class="btn btn-primary w-full">เริ่มเรียนทันที</NuxtLink>
|
|
<button class="btn btn-secondary w-full" @click="showEnrollModal = false">ไว้ทีหลัง</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">ใบประกาศนียบัตรจบหลักสูตร</h1>
|
|
<div style="width: 100px; height: 2px; background: #D4AF37; margin: 0 auto 24px;"/>
|
|
|
|
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ขอมอบใบประกาศนี้เพื่อแสดงว่า</p>
|
|
|
|
<h2 class="cert-name">สมชาย ใจดี</h2>
|
|
|
|
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ได้ผ่านการอบรมและทดสอบความรู้ในหลักสูตร</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;">ลายเซ็นผู้อำนวยการ</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;">ผ่าน</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 ธันวาคม 2024</div>
|
|
<div style="font-size: 12px; color: #64748B;">วันที่ออกใบประกาศ</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download Button -->
|
|
<div style="margin-top: 32px; text-align: center;">
|
|
<button class="btn btn-primary" @click="downloadCertificate">
|
|
⬇ ดาวน์โหลด PDF
|
|
</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>
|