feat: Implement initial e-learning platform frontend structure including dashboard, course management, authentication, and common UI components.
This commit is contained in:
supalerk-ar66
parent
aceeb80d9a
commit
ad11c6b7c5
44 changed files with 720 additions and 578 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file CategorySidebar.vue
|
||||
* @description Sidebar for filtering courses by category
|
||||
* @description แถบเมนูด้านข้างสำหรับกรองคอร์สตามหมวดหมู่ (Sidebar for filtering courses by category)
|
||||
*/
|
||||
|
||||
const props = defineProps<{
|
||||
|
|
@ -81,13 +81,13 @@ const toggleCategory = (id: number) => {
|
|||
{{ getLocalizedText(cat.name) }}
|
||||
</span>
|
||||
|
||||
<!-- Active Indicator Dot -->
|
||||
<!-- จุดแสดงสถานะเมื่อถูกเลือก (Active Indicator Dot) -->
|
||||
<div v-if="modelValue.includes(cat.id)" class="ml-auto w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400 shadow-lg shadow-blue-500/50"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Show More/Less Action -->
|
||||
<!-- ปุ่มแสดงเพิ่มเติม/แสดงน้อยลง (Show More/Less Action) -->
|
||||
<div
|
||||
v-if="categories.length > 5"
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file CourseDetailView.vue
|
||||
* @description Quick view of course details including video preview, curriculum, and enroll logic
|
||||
* @description แสดงรายละเอียดคอร์สแบบรวดเร็ว รวมถึงตัวอย่างวิดีโอ, หลักสูตร, และระบบการลงทะเบียน
|
||||
*/
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
|
|
@ -51,9 +51,9 @@ const handleEnroll = () => {
|
|||
if(!props.course) return;
|
||||
enrollmentLoading.value = true;
|
||||
emit('enroll', props.course.id);
|
||||
// Loading state reset depends on parent, but locally we can reset after emit or keep until prop changes
|
||||
// In this pattern, we just emit.
|
||||
setTimeout(() => enrollmentLoading.value = false, 2000); // Safety timeout
|
||||
// สถานะ Loading ถูกจัดการโดยคอมโพเนนต์แม่ แต่ในคอมโพเนนต์นี้เรารีเซ็ตหลังจากส่ง event หรือเก็บไว้จนกว่า prop จะเปลี่ยน
|
||||
// ในรูปแบบนี้ เราแค่ส่ง event ออกไป (just emit)
|
||||
setTimeout(() => enrollmentLoading.value = false, 2000); // ตั้งเวลารีเซ็ตเพื่อความปลอดภัย (Safety timeout)
|
||||
};
|
||||
const instructorData = computed(() => {
|
||||
if (props.course?.instructors && props.course.instructors.length > 0) {
|
||||
|
|
@ -67,10 +67,10 @@ const instructorData = computed(() => {
|
|||
<template>
|
||||
<div class="animate-fade-in-up">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
<!-- Left: Content Detail -->
|
||||
<!-- ด้านซ้าย: รายละเอียดเนื้อหา (Left: Content Detail) -->
|
||||
<div class="lg:col-span-2 space-y-8">
|
||||
|
||||
<!-- Video Preview Section -->
|
||||
<!-- ส่วนแสดงตัวอย่างวิดีโอ (Video Preview Section) -->
|
||||
<div class="relative aspect-video rounded-3xl overflow-hidden shadow-2xl group cursor-pointer bg-slate-900 border-4 border-white dark:border-slate-800 transition-transform duration-500 hover:scale-[1.01]">
|
||||
<template v-if="course.media?.video_url">
|
||||
<video
|
||||
|
|
@ -81,19 +81,19 @@ const instructorData = computed(() => {
|
|||
<source :src="course.media.video_url" type="video/mp4">
|
||||
{{ $t('course.videoNotSupported') }}
|
||||
</video>
|
||||
<!-- Custom Play Overlay when not playing - simple version is often best -->
|
||||
<!-- ปุ่มเล่นวิดีโอแบบปรับแต่งเองตอนยังไม่เล่น (Custom Play Overlay when not playing) -->
|
||||
</template>
|
||||
<!-- Beautiful Image Showcase if no video -->
|
||||
<!-- แสดงรูปภาพสวยๆ กรณีที่ไม่มีวิดีโอ (Beautiful Image Showcase if no video) -->
|
||||
<template v-else>
|
||||
<div class="w-full h-full flex items-center justify-center relative overflow-hidden bg-slate-950 group">
|
||||
<!-- Blurred background fill -->
|
||||
<!-- รูปพื้นหลังเบลอ (Blurred background fill) -->
|
||||
<img
|
||||
v-if="course.thumbnail_url || course.cover_image"
|
||||
:src="course.thumbnail_url || course.cover_image"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-40 blur-2xl scale-125"
|
||||
/>
|
||||
|
||||
<!-- Main Sharp Image -->
|
||||
<!-- รูปหลักแบบคมชัด (Main Sharp Image) -->
|
||||
<img
|
||||
v-if="course.thumbnail_url || course.cover_image"
|
||||
:src="course.thumbnail_url || course.cover_image"
|
||||
|
|
@ -107,7 +107,7 @@ const instructorData = computed(() => {
|
|||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Course Title & Description -->
|
||||
<!-- ชื่อคอร์สและรายละเอียด (Course Title & Description) -->
|
||||
<div>
|
||||
<h1 class="text-3xl md:text-4xl font-extrabold text-slate-900 dark:text-white mb-4 leading-tight">
|
||||
{{ getLocalizedText(course.title) }}
|
||||
|
|
@ -118,10 +118,10 @@ const instructorData = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course Detail - Single Page Layout -->
|
||||
<!-- รายละเอียดคอร์ส - รูแแบบหน้าเดียว (Course Detail - Single Page Layout) -->
|
||||
<div class="space-y-10">
|
||||
|
||||
<!-- Instructor Info -->
|
||||
<!-- ข้อมูลผู้สอน (Instructor Info) -->
|
||||
<div class="flex flex-col sm:flex-row gap-6 items-start sm:items-center pb-8 border-b border-slate-200 dark:border-slate-800">
|
||||
<q-avatar size="64px">
|
||||
<img :src="instructorData?.profile?.avatar_url || 'https://cdn.quasar.dev/img/boy-avatar.png'" />
|
||||
|
|
@ -135,7 +135,7 @@ const instructorData = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Curriculum / Lesson Details -->
|
||||
<!-- รายละเอียดหลักสูตร / บทเรียน (Curriculum / Lesson Details) -->
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white">
|
||||
|
|
@ -148,7 +148,7 @@ const instructorData = computed(() => {
|
|||
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, idx) in course.chapters" :key="chapter.id" class="group">
|
||||
<!-- Chapter Header -->
|
||||
<!-- ส่วนหัวของบท (Chapter Header) -->
|
||||
<div class="px-6 py-4 bg-white dark:bg-slate-800 rounded-2xl border border-slate-200 dark:border-white/5 font-black text-slate-800 dark:text-white flex justify-between items-center mb-2 shadow-sm">
|
||||
<span class="flex items-center gap-3">
|
||||
<span class="w-7 h-7 flex items-center justify-center bg-slate-100 dark:bg-white/10 rounded-lg text-xs font-bold font-mono">{{ Number(idx) + 1 }}</span>
|
||||
|
|
@ -157,7 +157,7 @@ const instructorData = computed(() => {
|
|||
<span class="text-[10px] uppercase font-black tracking-widest text-slate-400 opacity-60">{{ chapter.lessons?.length || 0 }} {{ $t('course.lessonsUnit') }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Lessons List -->
|
||||
<!-- รายการบทเรียน (Lessons List) -->
|
||||
<div class="ml-4 pl-4 border-l-2 border-slate-100 dark:border-slate-800 space-y-1 mt-3">
|
||||
<div v-for="lesson in chapter.lessons" :key="lesson.id" class="px-5 py-3 flex items-center gap-3 text-sm text-slate-600 dark:text-slate-400 hover:bg-white dark:hover:bg-white/5 rounded-xl transition-all hover:translate-x-1">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center shrink-0" :class="lesson.type === 'VIDEO' ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400' : 'bg-orange-50 text-orange-600 dark:bg-orange-500/10 dark:text-orange-400'">
|
||||
|
|
@ -173,7 +173,7 @@ const instructorData = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<!-- กรณีที่ไม่มีข้อมูล (Empty State) -->
|
||||
<div v-if="!course.chapters || course.chapters.length === 0" class="flex flex-col items-center justify-center py-12 text-slate-400 dark:text-slate-500 bg-white/50 dark:bg-slate-900/50 rounded-2xl border-2 border-dashed border-slate-200 dark:border-slate-800">
|
||||
<q-icon name="menu_book" size="40px" class="mb-2 opacity-50" />
|
||||
<p class="text-sm font-medium">{{ $t('course.noContent') }}</p>
|
||||
|
|
@ -185,11 +185,11 @@ const instructorData = computed(() => {
|
|||
|
||||
</div>
|
||||
|
||||
<!-- Right: Enrollment Card -->
|
||||
<!-- ด้านขวา: การ์ดลงทะเบียน (Right: Enrollment Card) -->
|
||||
<div class="lg:col-span-1">
|
||||
<div class="sticky top-24">
|
||||
<div class="bg-white dark:bg-slate-900 rounded-3xl shadow-2xl shadow-blue-500/10 dark:shadow-none p-8 border border-slate-100 dark:border-white/5 relative overflow-hidden group">
|
||||
<!-- Decorative background glow -->
|
||||
<!-- ลูกเล่นแสงพื้นหลังตกแต่ง (Decorative background glow) -->
|
||||
<div class="absolute -top-12 -right-12 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl group-hover:bg-blue-500/20 transition-colors"></div>
|
||||
|
||||
<div class="relative">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue