Compare commits
3 commits
learner-de
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
|
9dc8636d31 | ||
|
|
5ad7184e6c | ||
|
|
c697a15525 |
5 changed files with 306 additions and 212 deletions
|
|
@ -1,210 +1,138 @@
|
|||
# 🛠️ Web Development Documentation: e-Learning Platform (Frontend)
|
||||
# Frontend-Learner (Web) — Technical Documentation
|
||||
|
||||
เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และการทำงานของระบบ **Frontend-Learner** (อัปเดตล่าสุด: กุมภาพันธ์ 2026)
|
||||
เอกสารฉบับนี้สรุปรายละเอียดทางเทคนิค โครงสร้างโค้ด และกลไกการทำงานของระบบ **Frontend-Learner (ฝั่งผู้เรียน)**
|
||||
ใช้เป็นคู่มือสำหรับการพัฒนา บำรุงรักษา และขยายระบบต่อไป
|
||||
|
||||
> อัปเดตล่าสุด: ปลายเดือนกุมภาพันธ์ 2026
|
||||
|
||||
---
|
||||
|
||||
## z️ 1. Technical Foundation (รากฐานทางเทคนิค)
|
||||
## Table of Contents
|
||||
|
||||
รวมข้อมูลเครื่องมือ, ระบบความปลอดภัย และประสิทธิภาพการทำงานไว้ด้วยกัน
|
||||
- [1. Technical Foundation](#1-technical-foundation)
|
||||
- [1.1 Tech Stack](#11-tech-stack)
|
||||
- [1.2 Security & Authentication](#12-security--authentication)
|
||||
- [2. Project Architecture](#2-project-architecture)
|
||||
- [2.1 Directory Structure](#21-directory-structure)
|
||||
- [2.2 Shared Infrastructure](#22-shared-infrastructure)
|
||||
- [3. Logic & Data Layer (Composables)](#3-logic--data-layer-composables)
|
||||
- [4. Branding & UI Policy](#4-branding--ui-policy)
|
||||
- [4.1 Theme Strategy](#41-theme-strategy)
|
||||
- [4.2 UI Elements](#42-ui-elements)
|
||||
- [5. Core Feature Highlights](#5-core-feature-highlights)
|
||||
- [6. Maintenance & Performance Guidelines](#6-maintenance--performance-guidelines)
|
||||
|
||||
---
|
||||
|
||||
## 1. Technical Foundation
|
||||
|
||||
รากฐานทางเทคนิคที่ขับเคลื่อนระบบ เพื่อให้ได้ประสิทธิภาพและความเสถียรสูงสุด
|
||||
|
||||
### 1.1 Tech Stack
|
||||
|
||||
- **Core:** [Nuxt 3](https://nuxt.com) (v`^3.11.2`), TypeScript `^5.4.5`
|
||||
- **UI Framework:** Quasar Framework `^2.15.2` (via `nuxt-quasar-ui ^3.0.0`)
|
||||
- **Styling:** Tailwind CSS `^6.12.0` (Utility) + Vanilla CSS Variables (Theming/Dark Mode)
|
||||
- **State Management:** `ref`/`reactive` (Local) + `useState` (Global/Shared State)
|
||||
- **Localization:** `@nuxtjs/i18n` (Supports JSON locales in `i18n/locales/`)
|
||||
- **Media Control:** `useMediaPrefs` (Command Pattern for global volume/mute state)
|
||||
- **Framework:** Nuxt 3 (Vue 3, Vite, SSR/SPA Hybrid)
|
||||
- **UI System:** Quasar Framework + Tailwind CSS (Utility-first)
|
||||
- **Typography:** Google Fonts (**Prompt** เป็น Font หลักเพื่อความทันสมัยและอ่านง่าย)
|
||||
- **Multilingual:** `@nuxtjs/i18n` (รองรับ JSON-based locales ภาษาไทยและอังกฤษ)
|
||||
- **Programming:** TypeScript (Strict Type Checking)
|
||||
|
||||
### 1.2 Core Systems & Security
|
||||
### 1.2 Security & Authentication
|
||||
|
||||
- **Authentication:**
|
||||
- ใช้ **JWT** (Access Token 1 วัน, Refresh Token 7 วัน)
|
||||
- เก็บ Token ใน `useCookie` (Secure, SameSite)
|
||||
- Middleware (`middleware/auth.ts`) ป้องกัน Route ตามสถานะ
|
||||
- **Remember Me:** ระบบจดจำอีเมลลงใน `localStorage` (จำแยกจาก session, ไม่ถูกลบเมื่อ Logout)
|
||||
- **API Handling:**
|
||||
- ใช้ `runtimeConfig.public.apiBase` เชื่องโยง Backend
|
||||
- Auto-attach Bearer Token ใน `useAuth` และ `useCourse`
|
||||
- **Performance:**
|
||||
- **Hybrid Progress Saving:** บันทึกเวลาเรียนลง LocalStorage (ถี่) และ Server (Throttle 15s) เพื่อความแม่นยำสูงสุด
|
||||
- **Caching:** ใช้ `useState` จำข้อมูล Profile และ Categories ลด request
|
||||
- **Code Quality:** ลบ Log, Dead logic และ Redundant comments ทั่วทั้งโปรเจกต์ (Clean Code Phase)
|
||||
- **Token Management:** ใช้ JWT (Access & Refresh Tokens) จัดเก็บผ่าน `useCookie`
|
||||
โดยตั้งค่าความปลอดภัยระดับ **HTTP-only** และ **SameSite**
|
||||
- **Middleware:** `auth.ts` ตรวจสอบสิทธิ์การเข้าถึงหน้า Dashboard และ Classroom แบบ Real-time
|
||||
- **Persistence:** ระบบ Remember Me (จดจำอีเมล) ใช้ `localStorage` แยกส่วนจาก Session
|
||||
เพื่อความปลอดภัยและสะดวกสำหรับผู้ใช้
|
||||
|
||||
---
|
||||
|
||||
## 📂 2. Frontend Structure (โครงสร้างหน้าเว็บและ UI)
|
||||
## 2. Project Architecture
|
||||
|
||||
### 2.1 Application Routes (`pages/`)
|
||||
โครงสร้างโฟลเดอร์ที่จัดระเบียบตามหลัก Clean Architecture เพื่อความคล่องตัวในการขยายระบบ
|
||||
|
||||
| Module | ไฟล์ | Path | หน้าที่ |
|
||||
| :---------- | :------------------------- | :---------------------- | :-------------------------------------------- |
|
||||
| **Public** | `index.vue` | `/` | หน้าแรก Landing Page (**Forced Light Mode**) |
|
||||
| | `browse/discovery.vue` | `/browse/discovery` | **ระบบค้นหาและ Filter คอร์ส** (Catalog) |
|
||||
| | `course/[id].vue` | `/course/:id` | **หน้ารายละเอียดคอร์ส** (Course Detail) |
|
||||
| **Auth** | `auth/login.vue` | `/auth/login` | เข้าสู่ระบบ (**Remember Me**, **Light Mode**) |
|
||||
| | `auth/register.vue` | `/auth/register` | สมัครสมาชิกผู้เรียน (**Light Mode**) |
|
||||
| | `auth/forgot-password.vue` | `/auth/forgot-password` | กู้คืนรหัสผ่าน (**Light Mode**) |
|
||||
| **Student** | `dashboard/index.vue` | `/dashboard` | แดชบอร์ดภาพรวมผู้เรียน |
|
||||
| | `dashboard/my-courses.vue` | `/dashboard/my-courses` | **คอร์สของฉัน** และดาวน์โหลดใบประกาศฯ |
|
||||
| | `dashboard/profile.vue` | `/dashboard/profile` | จัดการโปรไฟล์, รูปภาพ, เปลี่ยนรหัสผ่าน |
|
||||
| | `classroom/learning.vue` | `/classroom/learning` | **ห้องเรียน (Video Player)** & Announcements |
|
||||
| | `classroom/quiz.vue` | `/classroom/quiz` | การสอบวัดผล (**API-Driven Logic**) |
|
||||
### 2.1 Directory Structure
|
||||
|
||||
### 2.2 Key Components (`components/`)
|
||||
- `pages/` : ระบบ Routing ทั้งหมด (Landing, Auth, Dashboard, Classroom)
|
||||
- `components/` : UI Components แยกตามความรับผิดชอบ (Common, Layout, Course, Classroom, Profile)
|
||||
- `composables/` : Business Logic ทั้งหมด (Auth, Course, Theme, Quiz, Navigation)
|
||||
- `types/` : ศูนย์รวม Interface และ Type definitions ของทั้งระบบ
|
||||
- `constants/` : แหล่งเก็บข้อมูล Static (เช่น Category cards, Why choose us) เพื่อลดความซ้อนในไฟล์ Vue
|
||||
- `assets/css/` : `main.css` ที่เป็น Single Source of Truth สำหรับสไตล์และ CSS Variables
|
||||
- `layouts/` : Master templates (Default, Auth, Dashboard)
|
||||
- `middleware/` : ตัวกรองความปลอดภัยก่อนเข้าถึงแต่ละหน้า
|
||||
|
||||
- **Common (`components/common/`):**
|
||||
- `GlobalLoader.vue`: Loading indicator ทั่วทั้งแอป
|
||||
- `LanguageSwitcher.vue`: ปุ่มเปลี่ยนภาษา (TH/EN)
|
||||
- `AppHeader.vue`, `MobileNav.vue`: Navigation หลัก (ใช้ร่วมกับ AppSidebar)
|
||||
- `FormInput.vue`: Input field มาตรฐาน
|
||||
- **Layout (`components/layout/`):**
|
||||
- `AppSidebar.vue`: Sidebar หลักสำหรับ Dashboard (Collapsible)
|
||||
- `LandingHeader.vue`: Header เฉพาะสำหรับหน้า Landing Page
|
||||
- **Course (`components/course/`):**
|
||||
- `CourseCard.vue`: การ์ดแสดงผลคอร์ส รองรับ Progress และ **Glassmorphism** ในโหมดมืด
|
||||
- **Discovery (`components/discovery/`):**
|
||||
- `CategorySidebar.vue`: Sidebar ตัวกรองหมวดหมู่แบบย่อ/ขยายได้
|
||||
- `CourseDetailView.vue`: หน้ารายละเอียดคอร์สขนาดใหญ่ (Video Preview + Syllabus)
|
||||
- **Classroom (`components/classroom/`):**
|
||||
- `CurriculumSidebar.vue`: Sidebar บทเรียนและสถานะการเรียน
|
||||
- `AnnouncementModal.vue`: Modal แสดงประกาศของคอร์ส
|
||||
- `VideoPlayer.vue`: Video Player พร้อม Custom Controls และ YouTube Support
|
||||
- **User / Profile (`components/user/`, `components/profile/`):**
|
||||
- `UserAvatar.vue`: แสดงรูปโปรไฟล์ (รองรับ Fallback)
|
||||
- `ProfileEditForm.vue`: ฟอร์มแก้ไขข้อมูลส่วนตัว
|
||||
- `PasswordChangeForm.vue`: ฟอร์มเปลี่ยนรหัสผ่าน
|
||||
### 2.2 Shared Infrastructure
|
||||
|
||||
### 2.3 Shared Infrastructure (`types/`, `constants/`)
|
||||
|
||||
- **Types (`types/`):** หัวใจของ Type Safety ทั่วทั้งแอป
|
||||
- `auth.ts`, `course.ts`: จัดเก็บ Interface หลักที่ใช้ร่วมกันระหว่าง Composable และ Components
|
||||
- `index.ts`: Central export สำหรับรวบรวมทุก Type ให้เรียกใช้ได้ง่ายผ่าน `@/types`
|
||||
- **Constants (`constants/`):** แหล่งเก็บข้อมูล Static
|
||||
- `landing.ts`: จัดเก็บข้อมูลการตลาดและเนื้อหาคงที่ของหน้าแรก (Landing Page) เพื่อลดขนาดไฟล์ `.vue`
|
||||
- **Types Architecture:** การสกัด Types จาก Composable ออกมาไว้ที่ `@/types`
|
||||
ช่วยลดความซ้ำซ้อนและป้องกัน Error จากการเปลี่ยนโครงสร้างข้อมูล API
|
||||
- **Constants System:** การใช้ `@/constants` ช่วยให้การแก้ไขคำโฆษณาหรือข้อมูลหน้าแรกทำได้จากจุดเดียว
|
||||
โดยไม่ต้องแก้โค้ด HTML
|
||||
|
||||
---
|
||||
|
||||
## 🧠 3. Logic & Data Layer (Composables)
|
||||
## 3. Logic & Data Layer (Composables)
|
||||
|
||||
รวบรวม Logic หลักแยกส่วนตามหน้าที่ (Separation of Concerns)
|
||||
การแยก Logic ออกจาก UI เพื่อความสะอาดและ Testable
|
||||
|
||||
### 3.1 `useAuth.ts` (Authentication & User)
|
||||
- `useAuth`
|
||||
จัดการสถานะ Login, การดึงโปรไฟล์ล่วงหน้า (Pre-fetching), และระบบ Token Refresh
|
||||
|
||||
จัดการสถานะผู้ใช้, ล็อกอิน, และความปลอดภัย
|
||||
- `useCourse`
|
||||
หัวใจของระบบ จัดการตั้งแต่ Catalog, การสมัครเรียน (Enroll), ไปจนถึงการส่งผลการเรียน (Progress)
|
||||
|
||||
- **Key Functions:** `login`, `register`, `fetchUserProfile`, `uploadAvatar`, `sendVerifyEmail`
|
||||
- **Features:** Refresh Token อัตโนมัติ, ตรวจสอบ Role, **Logout Logic ที่ไม่ลบข้อมูลจดจำผู้ใช้**
|
||||
- `useThemeMode`
|
||||
ระบบจัดการธีมกลางที่เชื่อมต่อกับ `localStorage` และ CSS Variables อย่างเป็นระบบ
|
||||
|
||||
### 3.2 `useCourse.ts` (Course & Classroom)
|
||||
- `useQuizRunner`
|
||||
จัดการสถานะการสอบ เปลี่ยนข้อสอบ และส่งคะแนนไปยัง Backend โดยตรง
|
||||
|
||||
หัวใจหลักของการเรียนการสอน
|
||||
|
||||
- **Catalog:** `fetchCourses`, `fetchCourseById`, `enrollCourse`
|
||||
- **Classroom:**
|
||||
- `fetchCourseLearningInfo`: โครงสร้างบทเรียน (Chapters/Lessons)
|
||||
- `fetchLessonContent`: เนื้อหาวิดีโอ/Quiz/Attachments
|
||||
- `fetchCourseAnnouncements`: ดึงข้อมูลประกาศของคอร์ส
|
||||
- `saveVideoProgress`: บันทึกเวลาเรียน (Sync Server)
|
||||
- **i18n Support:** `getLocalizedText` ตัวช่วยในการเลือกแสดงผลภาษา (TH/EN) ตาม Locale ปัจจุบันที่ผู้ใช้เลือก อัตโนมัติทั่วทั้งแอป
|
||||
|
||||
### 3.3 `useQuizRunner.ts` (Quiz System)
|
||||
|
||||
จัดการ Logic การทำข้อสอบ (Production-Ready)
|
||||
|
||||
- **Logic:** ควบคุมการเปลี่ยนข้อ, การส่งคำตอบ, และการรับผลลัพธ์จาก API
|
||||
- **Cleanup:** ลบ Mock delays และ Simulation logic ออกทั้งหมดเพื่อให้ทำงานร่วมกับ API จริงได้ทันที
|
||||
- **Type Safety:** ทุก Composable เรียกใช้ Interface จาก `@/types` เพื่อความสอดคล้องของข้อมูล
|
||||
- `useNavItems`
|
||||
Single Source of Truth สำหรับเมนูทั้งหมด (Sidebar, Mobile Drawer, User Menu)
|
||||
|
||||
---
|
||||
|
||||
## 🎨 4. Design System & Theming
|
||||
## 4. Branding & UI Policy
|
||||
|
||||
มาตรฐานการออกแบบที่เน้นความ Premium และ Consistent
|
||||
|
||||
### 4.1 Theme Strategy
|
||||
|
||||
- **Framework:** Tailwind CSS + Quasar UI
|
||||
- **Light/Dark Mode Policy:**
|
||||
- **Public Pages:** บังคับ **Light Mode** (Landing, Course Detail, Auth) เพื่อภาพลักษณ์แบรนด์ที่สะอาดตา
|
||||
- **Dashboard/Learning:** รองรับ **Dark Mode** เต็มรูปแบบ (Oceanic Theme)
|
||||
- **Aesthetics:** ปรับปรุงความชัดเจนของ Badge, Icon และสถานะต่างๆ ในหน้าสอบ (Quiz) สำหรับโหมดมืดโดยเฉพาะ ให้มี Contrast สูงและดู Premium
|
||||
- **Visual Fixes:** แก้ไขปัญหา "Dark Frame" ในหน้า Auth โดยการบังคับสไตล์ระดับ HTML/Body
|
||||
- **Public Pages (Landing, Auth, Detail):** บังคับ **Forced Light Mode**
|
||||
เพื่อภาพลักษณ์แบรนด์ที่สะอาดและน่าเชื่อถือ
|
||||
- **Internal Pages (Dashboard, Learning):** รองรับ **Dark Mode (Oceanic Theme)**
|
||||
ลดการเมื่อยล้าของสายตาขณะเรียนเป็นเวลานาน
|
||||
- **Transitions:** ใช้ GlobalLoader และ Smooth transitions ทั่วทั้งแอปเพื่อประสบการณ์ที่ลื่นไหล
|
||||
|
||||
### 4.2 UI Elements
|
||||
|
||||
- **Image 2 Style Categories:** การ์ดหมวดหมู่แบบแนวนอนที่เป็นระเบียบ (Minimalist)
|
||||
- **Glassmorphism:** พื้นผิวโปร่งแสงใน Dashboard และ Classroom ช่วยให้แอปดูมีมิติ
|
||||
- **Standardized Icons:** ใช้ Material Icons ผ่าน Quasar ระบบเดียวทั้งหมด
|
||||
|
||||
---
|
||||
|
||||
## 📊 5. Dependency Map (ความสัมพันธ์ไฟล์)
|
||||
## 5. Core Feature Highlights
|
||||
|
||||
| หน้าเว็บ (Page) | Components หลัก | Composables หลัก |
|
||||
| :----------------------- | :--------------------------- | :----------------------------------------------------- |
|
||||
| **Login / Register** | `FormInput` | `useAuth` (Remember Me), `useFormValidation` |
|
||||
| **Discovery (Browse)** | `CourseCard` | `useCourse` (Search/Filter), `useCategory` |
|
||||
| **My Courses** | `CourseCard` (with Progress) | `useCourse` (Certificates) |
|
||||
| **Classroom (Learning)** | Video Player, Sidebar | `useCourse` (Progress, Announcements), `useMediaPrefs` |
|
||||
| **Quiz** | `QuizHeader`, `QuizContent` | `useQuizRunner` (Real API Integration) |
|
||||
| **Profile** | `UserAvatar`, `FormInput` | `useAuth` (Upload Avatar, Verify Email) |
|
||||
| **Global Context** | `GlobalLoader` | `useThemeMode` (Theme Standard), `useAuth` (Root Init) |
|
||||
ฟีเจอร์เด่นที่ถูกพัฒนาขึ้นเพื่อผู้เรียนโดยเฉพาะ
|
||||
|
||||
### 5.1 Shared Resource Architecture
|
||||
|
||||
- **Data Flow:** `API` -> `Composable` (**with Types**) -> `Page/Component` (**with Constants**)
|
||||
- **State Persistence:** `useCookie` (Auth) + `localStorage` (Theme, Forget Me, Unread Badges)
|
||||
- **SPA Learning Journey:** การสลับบทเรียนในห้องเรียนเป็นแบบ Single Page App (ไม่มีการ Re-load หน้า)
|
||||
ทำให้การเรียนต่อเนื่อง
|
||||
- **Hybrid Progress Tracking:** บันทึกเวลาเรียนลง `localStorage` แบบ Real-time และ Sync ขึ้น Server เป็นระยะ
|
||||
เพื่อป้องกันข้อมูลหาย
|
||||
- **Announcement System:** ระบบแจ้งเตือนในคอร์สพร้อมตัวระบุ "ยังไม่ได้อ่าน" (Unread Badge)
|
||||
ที่จำสถานะตามผู้ใช้งาน
|
||||
- **Interactive Quizzes:** ระบบสอบที่สลับคำถามอัตโนมัติ พร้อมโหมดเฉลย (Answer Review) ที่ชัดเจน
|
||||
- **Certificate Automation:** ระบบตรวจสอบสิทธิ์ความสำเร็จและออกใบประกาศนียบัตรได้ทันที
|
||||
|
||||
---
|
||||
|
||||
## ✅ 6. Project Status (สถานะล่าสุด)
|
||||
## 6. Maintenance & Performance Guidelines
|
||||
|
||||
### ✨ Recent Updates (กุมภาพันธ์ 2026)
|
||||
แนวทางสำหรับการพัฒนาต่อยอด
|
||||
|
||||
1. **System-Wide Code Cleanup (Phase Final):**
|
||||
- **Refactoring:** ปัดกวาดโค้ดในหน้า `learning`, `quiz`, `discovery`, `dashboard` และ `profile`
|
||||
- **Logging:** ลบ `console.log` มหาศาล และ logic ซ้ำซ้อนที่ตกค้างจากการพัฒนา
|
||||
- **Structure:** จัดกลุ่มสไตล์และฟังก์ชันให้เป็นระเบียบ อ่านง่ายขึ้นตามมาตรฐาน Clean Code
|
||||
- **Clean Code:** หลีกเลี่ยงการใช้ `console.log` ในโค้ด Final และลบ Dead Logic ทิ้งทันที
|
||||
- **Standard Fonts:** ใช้ชุด Font Prompt ผ่านตัวแปร `--font-main` เสมอ
|
||||
- **API Integrity:** ตรวจสอบข้อมูลผ่าน Interface ใน `@/types` ก่อนการใช้งานทุกครั้ง
|
||||
- **Mobile First:** ทุก Component ต้องรองรับระบบ Master Drawer บนมือถืออย่างสมบูรณ์
|
||||
|
||||
2. **Authentication & Security Polish:**
|
||||
- **Remember Me:** พัฒนาระบบจดจำอีเมลในหน้า Login ให้เสถียร (ใช้ `localStorage`)
|
||||
- **Smart Logout:** ปรับปรุง `useAuth.logout` ให้ลบข้อมูล Session แต่เก็บข้อมูลที่ผู้ใช้สั่งจำไว้ (อีเมล)
|
||||
|
||||
3. **UI & Aesthetics (Premium Fixes):**
|
||||
- **Theme Enforcement:** บังคับหน้าสาธารณะ (Landing/Auth) ให้เป็น Light Mode 100% พร้อมแก้ปัญหากรอบมืด (Dark Frame) ตกค้าง
|
||||
- **Dark Mode Optimization:** ปรับปรุงสีและ Contrast ในหน้า Dashboard และ Profile ให้สวยงามและอ่านง่ายขึ้นในโหมมืด
|
||||
|
||||
4. **Quiz System Productionization:**
|
||||
- **useQuizRunner:** แปลงร่างจาก Mock system เป็น API-Ready system (ลบ simulation logic ทั้งหมด)
|
||||
- **Quiz UI:** ปรับปรุงการนำทางและสถานะการทำข้อสอบให้ลื่นไหล
|
||||
|
||||
5. **Smooth Navigation & Quiz Experience:**
|
||||
- **SPA Navigation:** เปลี่ยนการสไลด์บทเรียนจาก Hard Reload เป็น SPA Navigation (`router.push`) ทำให้เรียนได้ต่อเนื่อง ไม่ต้องรอโหลดหน้าใหม่
|
||||
- **Smart Lesson Loading:** ปรับปรุง Error ที่หน้าเว็บชอบเด้งกลับไปบทเรียนที่ 1 เสมอ โดยเปลี่ยนให้ความสำคัญกับ `lesson_id` จาก URL ก่อน
|
||||
- **UI Simplification:** ลบทิ้ง "Legend/คำอธิบายสถานะ" ในหน้าสอบเพื่อความสะอาดตา (Minimal UI)
|
||||
- **Sidebar visibility:** ช่วยให้ผู้ใช้เปิด-ปิด Sidebar บน Desktop ได้อย่างอิสระผ่านปุ่ม Hamburger
|
||||
|
||||
6. **Internationalization (i18n) Improvements:**
|
||||
- **Localized Text Logic:** แก้ไขฟังก์ชัน `getLocalizedText` ให้แสดงภาษาตามที่ผู้ใช้สลับจริง (แก้ปัญหาหน้าเว็บเป็นอังกฤษแต่ชื่อวิชาเป็นไทย)
|
||||
- **Hardcoded Removal:** ทยอยลบข้อความภาษาไทยที่พิมพ์ค้างไว้ในโค้ด (เช่น ใน Sidebar หมวดหมู่) และแทนที่ด้วย i18n keys
|
||||
- **Boot Sequence Fix:** แก้ไขปัญหาเว็บค้าง (Error 500) ที่เกิดจากการเรียกใช้ภาษาเร็วเกินไปก่อนที่ระบบจะพร้อม (`initialization error`)
|
||||
|
||||
7. **Classroom & UX Optimization (Mid-February 2026):**
|
||||
- **SPA Navigation for Learning:** เปลี่ยนระบบเลือกบทเรียนจากการ Reload หน้าเป็น SPA Navigation ทำให้เปลี่ยนวิดีโอ/บทเรียนได้ทันทีโดยไม่ต้อง Refresh หน้าจอ
|
||||
- **Announcement Persistence:** เพิ่มระบบเช็กสถานะการอ่านประกาศ (Unread Badge) โดยบันทึกสถานะล่าสุดลง LocalStorage แยกตามผู้ใช้และคอร์ส
|
||||
- **YouTube Resume:** รองรับการเรียนต่อจากจุดเดิมสำหรับวิดีโอ YouTube (Time Seeking via URL parameter)
|
||||
|
||||
8. **Quiz System Enhancements:**
|
||||
- **Answer Review Mode:** เพิ่มโหมดเฉลยข้อสอบหลังทำเสร็จ พร้อมการไฮไลท์สีที่ชัดเจน (เขียว = ถูก, แดง = ตอบผิด)
|
||||
- **Shuffle Logic:** เพิ่มการสลับคำถามและตัวเลือก (Shuffle) เพื่อความโปร่งใสในการสอบ
|
||||
- **Enhanced Feedback:** ปรับปรุง UI ผลลัพธ์การสอบให้มีความ Premium และเข้าใจง่ายขึ้น
|
||||
|
||||
9. **Security & Registration Polish:**
|
||||
- **Phone Validation:** เพิ่มระบบตรวจสอบเบอร์โทรศัพท์ในหน้าสมัครสมาชิก (ต้องเป็นตัวเลขและยาวไม่เกิน 10 หลัก)
|
||||
- **Enrollment Alert Logic:** ปรับปรุง Logic การสมัครเรียนให้ตรวจสอบสถานะ Enrollment เดิมก่อน เพื่อป้องกัน API Error และการเรียก request ซ้ำซ้อน
|
||||
|
||||
10. **Profile & Certificates:**
|
||||
- **Verification Badge:** เพิ่มการแสดงผลสถานะการยืนยันอีเมลในหน้าโปรไฟล์ พร้อมปุ่มส่งอีเมลยืนยันหากยังไม่ได้ทำ
|
||||
- **Certificate Flow:** ปรับปรุงระบบดาวน์โหลดใบประกาศนียบัตรให้รองรับทั้งการดึงไฟล์เดิมและสั่ง Generate ใหม่หากยังไม่มี
|
||||
|
||||
11. **Refactoring & UI System Overhaul (Late February 2026):**
|
||||
- **Centralized Types System:** ย้าย Interface และ Type definitions ทั้งหมดออกจากไฟล์ Composable (เช่น `useAuth`, `useCourse`) ไปไว้ในโฟลเดอร์ `@/types/` เพื่อลดขนาดไฟล์ Logic และเพิ่มความสามารถในการนำมาใช้ซ้ำ (Reusability)
|
||||
- **Constants Extraction:** แยกข้อมูล Static (เช่น รายชื่อหมวดหมู่, ข้อความหน้า Landing) ไปไว้ใน `@/constants/landing.ts` เพื่อให้โค้ดส่วน UI สะอาดและจัดการข้อมูลได้จากจุดเดียว
|
||||
- **Mobile Master Drawer:** รวบรวมเมนู Navigation, Profile, Tools (เปลี่ยนภาษา/Dark Mode) และ Logout เข้ามาไว้ใน Drawer เดียวกันบนมือถือ เพื่อความสะดวกในการใช้งานแบบ Single-Hand
|
||||
- **Landing Page Redesign:** ปรับโฉมส่วน "หมวดหมู่ที่น่าสนใจ" (Image 2 Style) เป็นแบบการ์ดแนวนอน (Horizontal) ที่เรียบง่าย ตัดลูกศรและคำอธิบายที่ไม่จำเป็นออกเพื่อให้ดู Minimal และ Premium มากขึ้น
|
||||
- **Theming Standardization:** ปรับปรุง `app.vue` ให้ใช้ Composable `useThemeMode` ในการควบคุมธีมทั้งหมดแทนการเขียน Logic แยกต่างหาก ทำให้การสลับโหมดเสถียรและแม่นยำขึ้น
|
||||
- **Authentication UI Polish:** เพิ่มกล่อง "Test Credentials" ในหน้า Login เพื่ออำนวยความสะดวกในการทดสอบระบบ และปรับเปลี่ยนหน้ายืนยันอีเมลให้เป็นแบบ Standalone UI (auth layout)
|
||||
---
|
||||
|
|
|
|||
|
|
@ -31,33 +31,48 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<!-- Search & View Toggle -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
|
||||
<q-input
|
||||
v-model="searchQuery"
|
||||
placeholder="ค้นหาชื่อคอร์ส, ผู้สอน..."
|
||||
outlined
|
||||
dense
|
||||
bg-color="grey-1"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
<template v-slot:append v-if="searchQuery">
|
||||
<q-icon name="close" class="cursor-pointer" @click="searchQuery = ''" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
<div class="flex gap-4 items-center">
|
||||
<div class="flex-1">
|
||||
<q-input
|
||||
v-model="searchQuery"
|
||||
placeholder="ค้นหาชื่อคอร์ส, ผู้สอน..."
|
||||
outlined
|
||||
dense
|
||||
bg-color="grey-1"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
<template v-slot:append v-if="searchQuery">
|
||||
<q-icon name="close" class="cursor-pointer" @click="searchQuery = ''" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mb-6">
|
||||
<q-btn-toggle
|
||||
<q-btn-toggle
|
||||
v-model="viewMode"
|
||||
toggle-color="primary"
|
||||
:options="[
|
||||
{ label: 'การ์ด', value: 'card' },
|
||||
{ label: 'ตาราง', value: 'table' }
|
||||
{ value: 'card', slot: 'card' },
|
||||
{ value: 'table', slot: 'table' }
|
||||
]"
|
||||
/>
|
||||
dense
|
||||
rounded
|
||||
unelevated
|
||||
class="border"
|
||||
>
|
||||
<template v-slot:card>
|
||||
<q-icon name="view_stream" size="20px" />
|
||||
<q-tooltip>มุมมองการ์ด</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:table>
|
||||
<q-icon name="view_list" size="20px" />
|
||||
<q-tooltip>มุมมองตาราง</q-tooltip>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pending Courses List -->
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { adminService, type AdminUserResponse } from '~/services/admin.service';
|
||||
import { adminService, type AdminUserResponse, type RoleResponse } from '~/services/admin.service';
|
||||
import { useAuthStore } from '~/stores/auth';
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -228,6 +228,7 @@ const $q = useQuasar();
|
|||
|
||||
// Data
|
||||
const users = ref<AdminUserResponse[]>([]);
|
||||
const roles = ref<RoleResponse[]>([]);
|
||||
const loading = ref(true);
|
||||
const searchQuery = ref('');
|
||||
const filterRole = ref<string | null>(null);
|
||||
|
|
@ -286,6 +287,14 @@ const filteredUsers = computed(() => {
|
|||
});
|
||||
|
||||
// Methods
|
||||
const fetchRoles = async () => {
|
||||
try {
|
||||
roles.value = await adminService.getRoles();
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch roles:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchUsers = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
|
|
@ -328,24 +337,32 @@ const viewUser = (user: AdminUserResponse) => {
|
|||
showViewModal.value = true;
|
||||
};
|
||||
|
||||
const changeRole = (user: AdminUserResponse) => {
|
||||
const roleIds: Record<string, number> = {
|
||||
INSTRUCTOR: 1,
|
||||
STUDENT: 2,
|
||||
ADMIN: 3
|
||||
const getRoleLabel = (code: string): string => {
|
||||
const labels: Record<string, string> = {
|
||||
INSTRUCTOR: 'Instructor',
|
||||
STUDENT: 'Student',
|
||||
ADMIN: 'Admin'
|
||||
};
|
||||
return labels[code] || code;
|
||||
};
|
||||
|
||||
const changeRole = (user: AdminUserResponse) => {
|
||||
// Find current role ID from fetched roles
|
||||
const currentRole = roles.value.find(r => r.code === user.role.code);
|
||||
|
||||
// Build items from API roles
|
||||
const roleItems = roles.value.map(r => ({
|
||||
label: getRoleLabel(r.code),
|
||||
value: r.id
|
||||
}));
|
||||
|
||||
$q.dialog({
|
||||
title: 'เปลี่ยน Role',
|
||||
message: `เลือก Role ใหม่สำหรับ ${user.profile.first_name}`,
|
||||
options: {
|
||||
type: 'radio',
|
||||
model: roleIds[user.role.code] as any,
|
||||
items: [
|
||||
{ label: 'Instructor', value: 1 },
|
||||
{ label: 'Student', value: 2 },
|
||||
{ label: 'Admin', value: 3 }
|
||||
]
|
||||
model: (currentRole?.id ?? 0) as any,
|
||||
items: roleItems
|
||||
},
|
||||
cancel: true,
|
||||
persistent: true
|
||||
|
|
@ -415,6 +432,7 @@ const exportExcel = () => {
|
|||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
fetchRoles();
|
||||
fetchUsers();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -39,8 +39,8 @@
|
|||
|
||||
<!-- Filter Bar -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="md:col-span-2">
|
||||
<div class="flex gap-4 items-center">
|
||||
<div class="flex-1">
|
||||
<q-input
|
||||
v-model="searchQuery"
|
||||
placeholder="ค้นหาหลักสูตร..."
|
||||
|
|
@ -62,15 +62,39 @@
|
|||
dense
|
||||
emit-value
|
||||
map-options
|
||||
style="min-width: 160px"
|
||||
/>
|
||||
|
||||
<q-btn-toggle
|
||||
v-model="viewMode"
|
||||
toggle-color="primary"
|
||||
:options="[
|
||||
{ value: 'card', slot: 'card' },
|
||||
{ value: 'table', slot: 'table' }
|
||||
]"
|
||||
dense
|
||||
rounded
|
||||
unelevated
|
||||
class="border"
|
||||
>
|
||||
<template v-slot:card>
|
||||
<q-icon name="grid_view" size="20px" />
|
||||
<q-tooltip>มุมมองการ์ด</q-tooltip>
|
||||
</template>
|
||||
<template v-slot:table>
|
||||
<q-icon name="view_list" size="20px" />
|
||||
<q-tooltip>มุมมองตาราง</q-tooltip>
|
||||
</template>
|
||||
</q-btn-toggle>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Courses Grid -->
|
||||
<!-- Loading -->
|
||||
<div v-if="loading" class="flex justify-center py-10">
|
||||
<q-spinner-dots size="50px" color="primary" />
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div v-else-if="filteredCourses.length === 0" class="bg-white rounded-xl shadow-sm p-10 text-center">
|
||||
<q-icon name="school" size="60px" color="grey-5" class="mb-4" />
|
||||
<p class="text-gray-500 text-lg">ยังไม่มีหลักสูตร</p>
|
||||
|
|
@ -82,7 +106,8 @@
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Card View -->
|
||||
<div v-else-if="viewMode === 'card'" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
|
|
@ -134,15 +159,6 @@
|
|||
>
|
||||
<q-tooltip>ดูรายละเอียด</q-tooltip>
|
||||
</q-btn>
|
||||
<!-- <q-btn
|
||||
flat
|
||||
dense
|
||||
icon="edit"
|
||||
color="primary"
|
||||
@click="navigateTo(`/instructor/courses/${course.id}/edit`)"
|
||||
>
|
||||
<q-tooltip>แก้ไข</q-tooltip>
|
||||
</q-btn> -->
|
||||
<q-space />
|
||||
<q-btn flat round dense icon="more_vert">
|
||||
<q-menu>
|
||||
|
|
@ -167,6 +183,94 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table View -->
|
||||
<div v-else class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<q-table
|
||||
:rows="filteredCourses"
|
||||
:columns="tableColumns"
|
||||
row-key="id"
|
||||
flat
|
||||
:pagination="tablePagination"
|
||||
:rows-per-page-options="[10, 20, 50, 0]"
|
||||
@update:pagination="tablePagination = $event"
|
||||
>
|
||||
<!-- Thumbnail + Title -->
|
||||
<template v-slot:body-cell-title="props">
|
||||
<q-td :props="props">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-16 h-10 rounded overflow-hidden flex-shrink-0 bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center">
|
||||
<img
|
||||
v-if="props.row.thumbnail_url"
|
||||
:src="props.row.thumbnail_url"
|
||||
:alt="props.row.title.th"
|
||||
class="w-full h-full object-cover"
|
||||
@error="($event.target as HTMLImageElement).style.display = 'none'"
|
||||
/>
|
||||
<q-icon v-else name="school" size="20px" color="white" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<div class="font-medium text-gray-900 truncate">{{ props.row.title.th }}</div>
|
||||
<div class="text-xs text-gray-400 truncate">{{ props.row.title.en }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<template v-slot:body-cell-status="props">
|
||||
<q-td :props="props">
|
||||
<q-badge :color="getStatusColor(props.row.status)">
|
||||
{{ getStatusLabel(props.row.status) }}
|
||||
</q-badge>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Price -->
|
||||
<template v-slot:body-cell-price="props">
|
||||
<q-td :props="props">
|
||||
<span class="font-medium" :class="props.row.is_free ? 'text-green-600' : 'text-primary-600'">
|
||||
{{ props.row.is_free ? 'ฟรี' : `฿${parseFloat(props.row.price).toLocaleString()}` }}
|
||||
</span>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Date -->
|
||||
<template v-slot:body-cell-created_at="props">
|
||||
<q-td :props="props">
|
||||
{{ formatDate(props.row.created_at) }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template v-slot:body-cell-actions="props">
|
||||
<q-td :props="props">
|
||||
<q-btn flat round dense icon="visibility" color="grey" size="sm" @click="handleViewDetails(props.row)">
|
||||
<q-tooltip>ดูรายละเอียด</q-tooltip>
|
||||
</q-btn>
|
||||
<q-btn flat round dense icon="more_vert" size="sm">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item clickable v-close-popup @click="duplicateCourse(props.row)">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="content_copy" />
|
||||
</q-item-section>
|
||||
<q-item-section>ทำสำเนา</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item clickable v-close-popup @click="confirmDelete(props.row)">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="delete" color="negative" />
|
||||
</q-item-section>
|
||||
<q-item-section class="text-negative">ลบ</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
|
||||
<!-- Rejection Details Dialog -->
|
||||
<q-dialog v-model="rejectionDialog">
|
||||
<q-card style="min-width: 400px">
|
||||
|
|
@ -256,6 +360,17 @@ const courses = ref<CourseResponse[]>([]);
|
|||
const loading = ref(true);
|
||||
const searchQuery = ref('');
|
||||
const filterStatus = ref<string | null>(null);
|
||||
const viewMode = ref<'card' | 'table'>('card');
|
||||
|
||||
// Table config
|
||||
const tablePagination = ref({ page: 1, rowsPerPage: 10 });
|
||||
const tableColumns = [
|
||||
{ name: 'title', label: 'หลักสูตร', field: 'title', align: 'left' as const, sortable: true },
|
||||
{ name: 'status', label: 'สถานะ', field: 'status', align: 'center' as const, sortable: true },
|
||||
{ name: 'price', label: 'ราคา', field: 'price', align: 'center' as const, sortable: true },
|
||||
{ name: 'created_at', label: 'วันที่สร้าง', field: 'created_at', align: 'center' as const, sortable: true },
|
||||
{ name: 'actions', label: 'จัดการ', field: 'actions', align: 'center' as const }
|
||||
];
|
||||
|
||||
// Status options
|
||||
const statusOptions = [
|
||||
|
|
|
|||
|
|
@ -320,7 +320,25 @@ const getAuthToken = (): string => {
|
|||
return tokenCookie.value || '';
|
||||
};
|
||||
|
||||
// Role interface
|
||||
export interface RoleResponse {
|
||||
id: number;
|
||||
code: string;
|
||||
}
|
||||
|
||||
export const adminService = {
|
||||
async getRoles(): Promise<RoleResponse[]> {
|
||||
const config = useRuntimeConfig();
|
||||
const token = getAuthToken();
|
||||
const response = await $fetch<{ roles: RoleResponse[] }>('/api/user/roles', {
|
||||
baseURL: config.public.apiBaseUrl as string,
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
return response.roles;
|
||||
},
|
||||
|
||||
async getUsers(): Promise<AdminUserResponse[]> {
|
||||
const config = useRuntimeConfig();
|
||||
const token = getAuthToken();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue