1b9119e606
All checks were successful
Build and Deploy Frontend Learner / Build Frontend Learner Docker Image (push) Successful in 42s
Build and Deploy Frontend Learner / Deploy E-learning Frontend Learner to Dev Server (push) Successful in 3s
Build and Deploy Frontend Learner / Notify Deployment Status (push) Successful in 1s
243 lines
11 KiB
Vue
243 lines
11 KiB
Vue
<script setup lang="ts">
|
|
/**
|
|
* @file index.vue
|
|
* @description Dashboard Home Page matching FutureSkill design
|
|
*/
|
|
|
|
definePageMeta({
|
|
layout: 'default',
|
|
middleware: 'auth'
|
|
})
|
|
|
|
useHead({
|
|
title: 'Dashboard - FutureSkill Clone'
|
|
})
|
|
|
|
const { currentUser } = useAuth()
|
|
const { fetchCourses, fetchEnrolledCourses, getLocalizedText } = useCourse()
|
|
const { fetchCategories } = useCategory()
|
|
const { t } = useI18n()
|
|
|
|
// State
|
|
const enrolledCourses = ref<any[]>([])
|
|
const recommendedCourses = ref<any[]>([])
|
|
const libraryCourses = ref<any[]>([])
|
|
const categories = ref<any[]>([])
|
|
|
|
const isLoading = ref(true)
|
|
|
|
// Initial Data Fetch
|
|
onMounted(async () => {
|
|
isLoading.value = true
|
|
try {
|
|
const [catRes, enrollRes, courseRes] = await Promise.all([
|
|
fetchCategories(),
|
|
fetchEnrolledCourses({ limit: 3, status: 'IN_PROGRESS' }), // Fetch recent enrolled
|
|
fetchCourses({ limit: 3, random: true, forceRefresh: true, is_recommended: true }) // Fetch 3 Recommended Courses
|
|
])
|
|
|
|
if (catRes.success) {
|
|
categories.value = catRes.data || []
|
|
}
|
|
|
|
const catMap = new Map()
|
|
categories.value.forEach((c: any) => catMap.set(c.id, c.name))
|
|
|
|
|
|
// Map Enrolled Courses
|
|
if (enrollRes.success && enrollRes.data) {
|
|
enrolledCourses.value = enrollRes.data.map((item: any) => ({
|
|
id: item.course_id,
|
|
title: item.course.title,
|
|
thumbnail_url: item.course.thumbnail_url,
|
|
progress: item.progress_percentage || 0,
|
|
total_lessons: item.course.total_lessons || 10,
|
|
completed_lessons: Math.floor((item.progress_percentage / 100) * (item.course.total_lessons || 10))
|
|
}))
|
|
}
|
|
|
|
// Map Recommended/Library Courses
|
|
if (courseRes.success && courseRes.data) {
|
|
// Use fetched courses for recommended section
|
|
recommendedCourses.value = courseRes.data.map((c: any) => ({
|
|
id: c.id,
|
|
title: c.title,
|
|
category: catMap.get(c.category_id),
|
|
description: c.description,
|
|
lessons: c.total_lessons || 0,
|
|
image: c.thumbnail_url || '',
|
|
rating: c.rating,
|
|
price: c.price,
|
|
is_free: c.is_free
|
|
}))
|
|
|
|
// Just for demo, use same data for library if needed or fetch separately
|
|
libraryCourses.value = courseRes.data.slice(0, 2)
|
|
}
|
|
|
|
} catch (err) {
|
|
console.error('Failed to load dashboard data', err)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
})
|
|
|
|
// Helper for "Continue Learning" Hero Card
|
|
const heroCourse = computed(() => enrolledCourses.value[0] || null)
|
|
const sideCourses = computed(() => enrolledCourses.value.slice(1, 3))
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bg-[#F8F9FA] min-h-screen font-inter pb-20">
|
|
|
|
<!-- 1. Greeting Section -->
|
|
<section class="bg-white pt-8 pb-10 px-4 md:px-12">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-[#2D2D2D] mb-4 flex items-center gap-3">
|
|
สวัสดี {{ currentUser?.firstName || 'User' }} <span class="text-3xl">😊</span>
|
|
</h1>
|
|
<p class="text-gray-500 text-base md:text-lg font-light max-w-3xl">
|
|
เข้าถึง +490 หลักสูตรออนไลน์สำหรับสมาชิกรายปี เพื่อบรรลุเป้าหมายด้านอาชีพและพัฒนาการเรียนรู้สำหรับคุณ ✨
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="max-w-7xl mx-auto px-4 md:px-12 space-y-16 mt-10">
|
|
|
|
<!-- 2. Continue Learning Section -->
|
|
<section v-if="enrolledCourses.length > 0">
|
|
<div class="flex justify-between items-end mb-6">
|
|
<h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D]">เรียนต่อกับคอร์สของคุณ</h2>
|
|
<NuxtLink to="/dashboard/my-courses" class="text-purple-600 hover:text-purple-700 font-medium text-sm flex items-center gap-1">
|
|
การเรียนของฉัน <q-icon name="arrow_forward" size="16px" />
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- Hero Card (Left) -->
|
|
<div v-if="heroCourse" class="relative group cursor-pointer rounded-2xl overflow-hidden bg-white shadow-sm border border-gray-100 hover:shadow-md transition-all h-[320px]">
|
|
<img :src="heroCourse.thumbnail_url" class="w-full h-full object-cover brightness-75 group-hover:brightness-90 transition-all duration-500" />
|
|
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-8 flex flex-col justify-end">
|
|
<div class="bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded w-fit mb-3">COURSE</div>
|
|
<h3 class="text-white text-2xl font-bold mb-4 line-clamp-2 leading-snug">{{ getLocalizedText(heroCourse.title) }}</h3>
|
|
|
|
<!-- Progress -->
|
|
<div class="w-full">
|
|
<div class="flex justify-between text-gray-300 text-xs mb-2">
|
|
<span>{{ heroCourse.completed_lessons }}/{{ heroCourse.total_lessons }} บทเรียน</span>
|
|
<span>{{ heroCourse.progress }}%</span>
|
|
</div>
|
|
<div class="h-1.5 w-full bg-white/20 rounded-full overflow-hidden">
|
|
<div class="h-full bg-purple-500 rounded-full" :style="{ width: `${heroCourse.progress}%` }"></div>
|
|
</div>
|
|
<div class="mt-4 flex justify-end">
|
|
<span class="text-white font-bold text-sm hover:underline">เรียนต่อ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Side List (Right) -->
|
|
<div class="flex flex-col gap-4 h-[320px]">
|
|
<div v-for="course in sideCourses" :key="course.id" class="flex-1 bg-white rounded-2xl p-4 border border-gray-100 shadow-sm hover:shadow-md transition-all flex gap-4 items-center">
|
|
<div class="w-32 h-20 rounded-xl overflow-hidden flex-shrink-0">
|
|
<img :src="course.thumbnail_url" class="w-full h-full object-cover" />
|
|
</div>
|
|
<div class="flex-grow min-w-0 flex flex-col justify-between h-full py-1">
|
|
<h4 class="text-gray-800 font-bold text-sm line-clamp-2 mb-2">{{ getLocalizedText(course.title) }}</h4>
|
|
|
|
<div class="mt-auto">
|
|
<div class="h-1.5 w-full bg-gray-100 rounded-full overflow-hidden mb-2">
|
|
<div class="h-full bg-purple-600 rounded-full" :style="{ width: `${course.progress}%` }"></div>
|
|
</div>
|
|
<div class="flex justify-between items-center text-xs">
|
|
<span class="text-gray-500">{{ course.completed_lessons }}/{{ course.total_lessons }} บทเรียน</span>
|
|
<span class="text-purple-600 font-bold cursor-pointer hover:underline" @click="navigateTo(`/classroom/learning?course_id=${course.id}`)">เรียนต่อ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Empty State Placeholder if less than 2 side courses -->
|
|
<div v-if="sideCourses.length < 2" class="flex-1 bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-center text-gray-400 text-sm">
|
|
เริ่มเรียนคอร์สใหม่ๆ เพื่อเติมเต็มส่วนนี้
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3. Knowledge Library -->
|
|
<section>
|
|
<div class="mb-6">
|
|
<h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] mb-1">คลังความรู้</h2>
|
|
<p class="text-gray-500 text-sm">คุณสามารถเลือกเรียนคอร์สเรียนที่คุณเป็นเจ้าของ</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Course Cards -->
|
|
<CourseCard
|
|
v-for="course in libraryCourses"
|
|
:key="course.id"
|
|
v-bind="course"
|
|
:image="course.thumbnail_url"
|
|
class="h-full md:col-span-1"
|
|
/>
|
|
|
|
<!-- CTA Card (Large) -->
|
|
<div class="bg-white rounded-3xl border border-gray-100 shadow-sm p-8 flex flex-col items-center justify-center text-center h-full min-h-[300px] hover:shadow-md transition-all group">
|
|
<p class="text-gray-600 font-medium mb-6 mt-4">เลือกเรียนคอร์สในคลังความรู้ของคุณ</p>
|
|
<q-btn
|
|
flat
|
|
rounded
|
|
no-caps
|
|
class="text-purple-600 hover:bg-purple-50 px-6 py-2 font-bold group-hover:scale-105 transition-transform"
|
|
to="/dashboard/my-courses"
|
|
>
|
|
ดูทั้งหมด <q-icon name="arrow_forward" size="18px" class="ml-2" />
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
|
|
<!-- 5. Recommended Courses -->
|
|
<section class="pb-20">
|
|
<div class="mb-6">
|
|
<h2 class="text-xl md:text-2xl font-bold text-[#2D2D2D] text-left">คอร์สแนะนำ</h2>
|
|
</div>
|
|
|
|
<!-- Recommended Grid (3 columns) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in">
|
|
<CourseCard
|
|
v-for="course in recommendedCourses"
|
|
:key="course.id"
|
|
v-bind="course"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="recommendedCourses.length === 0 && !isLoading" class="flex justify-center py-10 opacity-50">
|
|
<div class="text-gray-400">ไม่พบข้อมูลคอร์สแนะนำ</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Scoped specific styles */
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.5s ease-out;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
:deep(.q-btn) {
|
|
text-transform: none; /* Prevent uppercase in Q-Btns */
|
|
}
|
|
</style>
|