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

feat: Implement core user profile, dashboard, course browsing pages, common components, and internationalization.

Browse source
This commit is contained in:
supalerk-ar66 2026-01-19 16:43:05 +07:00
parent 01978f9438
commit 11d714c632
10 changed files with 289 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

16
Frontend-Learner/pages/dashboard/index.vue
View file

@ -51,8 +51,8 @@ const recommendedCourses = [
<div class="welcome-section mb-10 overflow-hidden relative rounded-[2.5rem] p-10 md:p-14 text-white shadow-lg dark:shadow-2xl dark:shadow-blue-900/20 transition-all">
<div class="relative z-10 flex flex-col md:flex-row justify-between items-center gap-8">
<div>
<h1 class="text-4xl md:text-5xl font-black mb-3 slide-up tracking-tight text-white dark:text-white">ยินดีต้อนรับกลับ, {{ currentUser?.firstName }}!</h1>
<p class="text-lg slide-up font-medium text-blue-100" style="animation-delay: 0.1s;">วันนี้เป็นวันที่ดีสำหรับการเรียนรู้สิ่งใหม่ๆ มาเก็บความรู้เพิ่มกันเถอะ</p>
<h1 class="text-4xl md:text-5xl font-black mb-3 slide-up tracking-tight text-white dark:text-white">{{ $t('dashboard.welcomeTitle') }}, {{ currentUser?.firstName }}!</h1>
<p class="text-lg slide-up font-medium text-blue-100" style="animation-delay: 0.1s;">{{ $t('dashboard.welcomeSubtitle') }}</p>
</div>
<div class="stats-mini flex gap-6 slide-up" style="animation-delay: 0.2s;"/>
</div>
@ -68,9 +68,9 @@ const recommendedCourses = [
<div class="flex items-center justify-between mb-8">
<h2 class="text-2xl font-black flex items-center gap-3 tracking-tight text-slate-900 dark:text-white">
<span class="w-1.5 h-8 bg-blue-500 rounded-full shadow-[0_0_15px_rgba(59,130,246,0.5)]"/>
เรียนต่อจากเดิม
{{ $t('menu.continueLearning') }}
</h2>
<NuxtLink to="/classroom/learning" class="text-sm font-black text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors uppercase tracking-widest">เข้าสู่บทเรียนเต็มตัว →</NuxtLink>
<NuxtLink to="/classroom/learning" class="text-sm font-black text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors uppercase tracking-widest">{{ $t('menu.goToLesson') }} →</NuxtLink>
</div>
<!-- Featured Current Course Card -->
@ -83,14 +83,14 @@ const recommendedCourses = [
</div>
<!-- Course Details & Progress -->
<div class="p-8 md:p-10 flex-1 flex flex-col justify-center" style="background-color: var(--bg-surface);">
<span class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-700 dark:text-blue-400 mb-3">Currently Learning</span>
<span class="text-[10px] font-black uppercase tracking-[0.2em] text-blue-700 dark:text-blue-400 mb-3">{{ $t('course.currentlyLearning') }}</span>
<h3 class="text-3xl font-black mb-2 leading-tight text-slate-900 dark:text-white group-hover:text-blue-700 dark:group-hover:text-blue-400 transition-colors">{{ recentCourse.title }}</h3>
<p class="text-slate-700 dark:text-slate-400 text-base mb-8 font-medium">{{ recentCourse.lesson }}</p>
<!-- Progress Bar -->
<div class="mt-auto bg-slate-100 dark:bg-slate-900/50 p-6 rounded-3xl border border-slate-200 dark:border-white/5">
<div class="flex justify-between items-center mb-3">
<span class="text-xs font-black text-slate-800 dark:text-slate-500 uppercase tracking-widest">Progress</span>
<span class="text-xs font-black text-slate-800 dark:text-slate-500 uppercase tracking-widest">{{ $t('course.progress') }}</span>
<span class="text-sm font-black text-blue-700 dark:text-blue-400">{{ recentCourse.progress }}%</span>
</div>
<div class="h-2.5 w-full bg-slate-300 dark:bg-slate-700 rounded-full overflow-hidden shadow-inner">
@ -105,7 +105,7 @@ const recommendedCourses = [
<div class="mb-8">
<h2 class="text-2xl font-black flex items-center gap-3 tracking-tight text-slate-900 dark:text-white">
<span class="w-1.5 h-8 bg-emerald-500 rounded-full shadow-[0_0_15px_rgba(16,185,129,0.5)]"/>
คอร์สเรียนแนะนำ
{{ $t('menu.recommendedCourses') }}
</h2>
</div>
@ -125,7 +125,7 @@ const recommendedCourses = [
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-600 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
{{ course.duration }}
</span>
<button class="text-[11px] font-black text-blue-700 dark:text-blue-500 uppercase tracking-widest hover:text-blue-800 dark:hover:text-blue-400 transition-colors">ดูรายละเอียด</button>
<button class="text-[11px] font-black text-blue-700 dark:text-blue-500 uppercase tracking-widest hover:text-blue-800 dark:hover:text-blue-400 transition-colors">{{ $t('menu.viewDetails') }}</button>
</div>
</div>
</div>

40
Frontend-Learner/pages/dashboard/my-courses.vue
View file

@ -71,7 +71,7 @@ const downloadCertificate = () => {
<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>
<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
@ -79,21 +79,21 @@ const downloadCertificate = () => {
style="white-space: nowrap;"
@click="filterCourses('all')"
>
ทั้งหมด
{{ $t('myCourses.filterAll') }}
</button>
<button
:class="activeFilter === 'progress' ? 'btn btn-primary' : 'btn btn-secondary'"
style="white-space: nowrap;"
@click="filterCourses('progress')"
>
กำลังเรียน
{{ $t('myCourses.filterProgress') }}
</button>
<button
:class="activeFilter === 'completed' ? 'btn btn-primary' : 'btn btn-secondary'"
style="white-space: nowrap;"
@click="filterCourses('completed')"
>
เรียนจบแล้ว
{{ $t('myCourses.filterCompleted') }}
</button>
</div>
</div>
@ -123,9 +123,9 @@ const downloadCertificate = () => {
<!-- 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>
<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 -->
@ -137,11 +137,11 @@ const downloadCertificate = () => {
<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>
<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">เริ่มเรียนทันที</NuxtLink>
<button class="btn btn-secondary w-full" @click="showEnrollModal = false">ไว้ทีหลัง</button>
<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>
@ -156,14 +156,14 @@ const downloadCertificate = () => {
<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">&times;</button>
<div class="cert-inner">
<h1 class="cert-title">ใบประกาศนียบัตรจบหลักสูตร</h1>
<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;">ขอมอบใบประกาศนี้เพื่อแสดงว่า</p>
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">{{ $t('certificate.presentedTo') }}</p>
<h2 class="cert-name">สมชาย ใจดี</h2>
<h2 class="cert-name">{{ $t('userMenu.home') === 'Home' ? 'Somchai Jaidee' : 'สมชาย ใจดี' }}</h2>
<p style="color: #64748B; margin-bottom: 16px; font-size: 16px;">ได้ผ่านการอบรมและทดสอบความรู้ในหลักสูตร</p>
<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>
@ -171,25 +171,25 @@ const downloadCertificate = () => {
<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 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;">ผ่าน</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 ธันวาคม 2024</div>
<div style="font-size: 12px; color: #64748B;">วันที่ออกใบประกาศ</div>
<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">
⬇ ดาวน์โหลด PDF
⬇ {{ $t('certificate.downloadPDF') }}
</button>
</div>
</div>

40
Frontend-Learner/pages/dashboard/profile.vue
View file

@ -163,13 +163,13 @@ const saveProfile = async () => {
<div class="profile-page max-w-4xl mx-auto px-4 py-8">
<!-- Header: Title and Edit action -->
<div class="flex items-center justify-between mb-10">
<h1 class="text-3xl font-black text-slate-900 dark:text-white">โปรไฟล์ของฉัน</h1>
<h1 class="text-3xl font-black text-slate-900 dark:text-white">{{ $t('profile.myProfile') }}</h1>
<div class="flex items-center gap-6">
<button v-if="!isEditing" class="btn-premium-edit" @click="toggleEdit(true)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
แก้ไขโปรไฟล์
{{ $t('profile.editProfile') }}
</button>
</div>
</div>
@ -200,15 +200,15 @@ const saveProfile = async () => {
<!-- Info Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="info-group">
<span class="label">อีเมล</span>
<span class="label">{{ $t('profile.email') }}</span>
<p class="value">{{ userData.email }}</p>
</div>
<div class="info-group">
<span class="label">เบอร์โทรศัพท์</span>
<span class="label">{{ $t('profile.phone') }}</span>
<p class="value">{{ userData.phone }}</p>
</div>
<div class="info-group">
<span class="label">สมัครสมาชิกเมื่อ</span>
<span class="label">{{ $t('profile.joinedAt') }}</span>
<p class="value">{{ userData.createdAt }}</p>
</div>
</div>
@ -224,7 +224,7 @@ const saveProfile = async () => {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
</button>
<h2 class="text-2xl font-black text-slate-900 dark:text-white">แก้ไขข้อมูลส่วนตัว</h2>
<h2 class="text-2xl font-black text-slate-900 dark:text-white">{{ $t('profile.editPersonalDesc') }}</h2>
</div>
<!-- Avatar Upload Section -->
@ -246,16 +246,16 @@ const saveProfile = async () => {
<input ref="fileInput" type="file" class="hidden" accept="image/*" @change="handleFileUpload" >
</div>
<div class="text-center md:text-left">
<h3 class="font-black text-slate-900 dark:text-white mb-2">รูปโปรไฟล์ของคุณ</h3>
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">เฉพาะไฟล์ png , jpg</p>
<button class="btn-upload" @click="triggerUpload">อัปโหลดรูปใหม่</button>
<h3 class="font-black text-slate-900 dark:text-white mb-2">{{ $t('profile.yourAvatar') }}</h3>
<p class="text-xs text-slate-500 mb-4 uppercase tracking-widest font-bold">{{ $t('profile.avatarHint') }}</p>
<button class="btn-upload" @click="triggerUpload">{{ $t('profile.uploadNew') }}</button>
</div>
</div>
<!-- Form Inputs -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-10">
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">คำนำหน้า</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.prefix') }}</label>
<select v-model="userData.prefix" class="premium-input w-full">
<option>นาย</option>
<option>นาง</option>
@ -264,7 +264,7 @@ const saveProfile = async () => {
</div>
<div class="grid grid-cols-2 gap-4">
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">ชื่อ</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.firstName') }}</label>
<input
v-model="userData.firstName"
type="text"
@ -275,7 +275,7 @@ const saveProfile = async () => {
<span v-if="errors.firstName" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.firstName }}</span>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">นามสกุล</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.lastName') }}</label>
<input
v-model="userData.lastName"
type="text"
@ -287,7 +287,7 @@ const saveProfile = async () => {
</div>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">อีเมล</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.email') }}</label>
<input
v-model="userData.email"
type="email"
@ -298,7 +298,7 @@ const saveProfile = async () => {
<span v-if="errors.email" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.email }}</span>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">เบอร์โทรศัพท์</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.phone') }}</label>
<input
v-model="userData.phone"
type="text"
@ -312,10 +312,10 @@ const saveProfile = async () => {
<!-- Security Section -->
<div class="border-t border-slate-200 dark:border-white/5 pt-10 mb-10">
<h3 class="text-lg font-black text-slate-900 dark:text-white mb-6">ความปลอดภัย</h3>
<h3 class="text-lg font-black text-slate-900 dark:text-white mb-6">{{ $t('profile.security') }}</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">รหัสผ่านปัจจุบัน</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.currentPassword') }}</label>
<div class="relative">
<input
v-model="passwordForm.currentPassword"
@ -340,7 +340,7 @@ const saveProfile = async () => {
</div>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">รหัสผ่านใหม่</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.newPassword') }}</label>
<div class="relative">
<input
v-model="passwordForm.newPassword"
@ -367,7 +367,7 @@ const saveProfile = async () => {
<span v-if="errors.newPassword" class="text-red-500 text-[10px] mt-1 font-bold">{{ errors.newPassword }}</span>
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">ยืนยันรหัสผ่านใหม่</label>
<label class="text-xs font-black uppercase tracking-widest text-slate-500 dark:text-slate-300">{{ $t('profile.confirmNewPassword') }}</label>
<div class="relative">
<input
v-model="passwordForm.confirmPassword"
@ -398,8 +398,8 @@ const saveProfile = async () => {
<!-- Actions -->
<div class="flex flex-col md:flex-row gap-4 pt-6 border-t border-white/5">
<button class="btn-save-premium flex-1" @click="saveProfile">บันทึกข้อมูล</button>
<button class="btn-cancel-premium md:w-32" @click="toggleEdit(false)">ยกเลิก</button>
<button class="btn-save-premium flex-1" @click="saveProfile">{{ $t('save') }}</button>
<button class="btn-cancel-premium md:w-32" @click="toggleEdit(false)">{{ $t('cancel') }}</button>
</div>
</div>
</div>