feat: Initialize core frontend application structure, including layouts, authentication pages, and common UI components.
This commit is contained in:
supalerk-ar66
parent
ae84e7e879
commit
69eb60f901
16 changed files with 1178 additions and 1396 deletions
|
|
@ -19,6 +19,7 @@ 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(() => {
|
||||
|
|
@ -42,32 +43,23 @@ const isLoading = ref(false)
|
|||
const loadEnrolledCourses = async () => {
|
||||
isLoading.value = true
|
||||
const apiStatus = activeFilter.value === 'all'
|
||||
? undefined // No status param = all
|
||||
? undefined
|
||||
: activeFilter.value === 'completed'
|
||||
? 'COMPLETED'
|
||||
: 'IN_PROGRESS' // 'progress' -> IN_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
|
||||
id: item.course_id,
|
||||
enrollment_id: item.id,
|
||||
title: getLocalizedText(item.course.title),
|
||||
progress: 0, // item.progress_percentage (Forced to 0 as requested)
|
||||
progress: 0,
|
||||
completed: item.status === 'COMPLETED',
|
||||
thumbnail_url: item.course.thumbnail_url // CourseCard might need this
|
||||
thumbnail_url: item.course.thumbnail_url
|
||||
}))
|
||||
}
|
||||
isLoading.value = false
|
||||
|
|
@ -93,43 +85,36 @@ const downloadCertificate = () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-8 max-w-6xl mx-auto">
|
||||
|
||||
|
||||
<!-- 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 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">
|
||||
<button
|
||||
v-for="filter in ['all', 'progress', 'completed']"
|
||||
:key="filter"
|
||||
@click="activeFilter = filter as any"
|
||||
class="px-8 py-2.5 rounded-full text-base font-bold transition-all"
|
||||
:class="activeFilter === filter
|
||||
? 'bg-blue-600 text-white shadow-lg shadow-blue-500/30'
|
||||
: 'text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white hover:bg-slate-100 dark:hover:bg-slate-800'"
|
||||
>
|
||||
{{ $t(`myCourses.filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`) }}
|
||||
</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">
|
||||
<div class="spinner-border animate-spin inline-block w-8 h-8 border-4 border-blue-500 rounded-full border-t-transparent" role="status">
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="my-courses-grid">
|
||||
<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
|
||||
|
|
@ -156,27 +141,32 @@ const downloadCertificate = () => {
|
|||
</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 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">
|
||||
<div class="text-6xl mb-4">📚</div>
|
||||
<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 -->
|
||||
<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;"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
|
||||
>
|
||||
<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 class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl p-8 max-w-sm w-full text-center relative overflow-hidden">
|
||||
<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="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?course_id=${route.query.course_id}`" class="btn btn-primary w-full">{{ $t('enrollment.startNow') }}</NuxtLink>
|
||||
<button class="btn btn-secondary w-full" @click="showEnrollModal = false">{{ $t('enrollment.later') }}</button>
|
||||
<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">
|
||||
<NuxtLink :to="`/classroom/learning?course_id=${route.query.course_id}`" class="w-full py-3 bg-blue-600 text-white rounded-xl font-bold hover:bg-blue-700 transition-colors shadow-lg shadow-blue-500/30">
|
||||
{{ $t('enrollment.startNow') }}
|
||||
</NuxtLink>
|
||||
<button class="w-full py-3 text-slate-500 font-bold hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-xl transition-colors" @click="showEnrollModal = false">
|
||||
{{ $t('enrollment.later') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -184,49 +174,52 @@ const downloadCertificate = () => {
|
|||
<!-- 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;"
|
||||
class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/80 backdrop-blur-md"
|
||||
>
|
||||
<div class="cert-container">
|
||||
<div class="relative bg-white text-slate-900 w-full max-w-2xl aspect-[1.414/1] shadow-2xl rounded-sm p-12 flex flex-col items-center text-center overflow-hidden">
|
||||
<!-- 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>
|
||||
<button class="absolute top-4 right-4 text-slate-400 hover:text-slate-600 text-3xl leading-none" @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>
|
||||
<!-- Border Decoration -->
|
||||
<div class="absolute inset-4 border-4 border-double border-slate-200 pointer-events-none"></div>
|
||||
|
||||
<!-- 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 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">HTML5 Fundamentals</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">Somchai K.</div>
|
||||
<div class="text-xs text-slate-500 uppercase tracking-wider">{{ $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 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 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 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>
|
||||
|
||||
<!-- Download Button -->
|
||||
<div style="margin-top: 32px; text-align: center;">
|
||||
<button class="btn btn-primary" @click="downloadCertificate">
|
||||
⬇ {{ $t('certificate.downloadPDF') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-6 left-0 w-full text-center">
|
||||
<button class="bg-blue-600 text-white px-6 py-2 rounded-full shadow-lg hover:bg-blue-700 font-bold transition-transform hover:scale-105 active:scale-95 flex items-center gap-2 mx-auto" @click="downloadCertificate">
|
||||
<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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
|
||||
{{ $t('certificate.downloadPDF') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -234,15 +227,8 @@ const downloadCertificate = () => {
|
|||
</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;
|
||||
}
|
||||
/* Custom Font for Signature/Name if desired */
|
||||
.font-handwriting {
|
||||
font-family: 'Dancing Script', cursive, serif; /* Fallback */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue