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
|
|
@ -2,7 +2,7 @@
|
|||
/**
|
||||
* @file AppHeader.vue
|
||||
* @description The main header for the authenticated application dashboard.
|
||||
* Includes sidebar toggle, branding, search functionality, and user menu.
|
||||
* Uses Quasar QToolbar.
|
||||
*/
|
||||
|
||||
defineProps<{
|
||||
|
|
@ -14,35 +14,68 @@ const emit = defineEmits<{
|
|||
/** Emitted when the hamburger menu is clicked */
|
||||
toggleSidebar: []
|
||||
}>()
|
||||
|
||||
const searchText = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="app-header transition-colors" style="background-color: var(--bg-surface); border-bottom: 1px solid var(--border-color);">
|
||||
<!-- Branding & Toggle -->
|
||||
<div class="flex items-center gap-2">
|
||||
<NuxtLink to="/dashboard" style="font-weight: 800; color: var(--primary); font-size: 20px;">
|
||||
e-Learning
|
||||
</NuxtLink>
|
||||
<q-toolbar class="bg-white text-slate-800 border-b border-gray-100 h-16 px-4">
|
||||
<!-- Mobile Menu Toggle -->
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="menu"
|
||||
@click="emit('toggleSidebar')"
|
||||
class="md:hidden mr-2"
|
||||
aria-label="Menu"
|
||||
/>
|
||||
|
||||
<!-- Branding -->
|
||||
<div class="flex items-center gap-2 cursor-pointer" @click="navigateTo('/dashboard')">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-600 flex items-center justify-center text-white font-bold">
|
||||
E
|
||||
</div>
|
||||
<span class="font-bold text-xl text-blue-600 hidden xs:block">e-Learning</span>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
||||
<!-- Center Search (Optional) -->
|
||||
<div v-if="showSearch !== false" class="hidden md:block w-1/3 max-w-md mx-4">
|
||||
<q-input
|
||||
dense
|
||||
outlined
|
||||
rounded
|
||||
v-model="searchText"
|
||||
:placeholder="$t('menu.searchCourses')"
|
||||
class="bg-slate-50 search-input"
|
||||
bg-color="slate-50"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" class="text-slate-400" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<q-space />
|
||||
|
||||
<!-- Right Actions -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Search Bar (Optional) -->
|
||||
<div v-if="showSearch !== false" class="relative hidden-mobile" style="width: 300px;">
|
||||
<input
|
||||
type="text"
|
||||
class="input-field"
|
||||
:placeholder="$t('menu.searchCourses')"
|
||||
style="padding-left: 36px;"
|
||||
>
|
||||
<span style="position: absolute; left: 12px; top: 10px; color: var(--text-secondary);">🔍</span>
|
||||
</div>
|
||||
|
||||
<!-- Language Switcher (Left of Avatar) -->
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Language Switcher -->
|
||||
<LanguageSwitcher />
|
||||
|
||||
<!-- User Profile Dropdown -->
|
||||
<UserMenu />
|
||||
</div>
|
||||
</header>
|
||||
</q-toolbar>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-input :deep(.q-field__control) {
|
||||
border-radius: 9999px; /* Full rounded */
|
||||
}
|
||||
.search-input :deep(.q-field__control:before) {
|
||||
border-color: #e2e8f0; /* slate-200 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,107 +2,79 @@
|
|||
/**
|
||||
* @file AppSidebar.vue
|
||||
* @description Sidebar navigation for the authenticated dashboard.
|
||||
* Includes navigation links and responsive behaviors.
|
||||
* Uses Quasar QList for structure.
|
||||
*/
|
||||
|
||||
const route = useRoute();
|
||||
const { isAuthenticated } = useAuth(); // Optional if you need auth state
|
||||
const isSidebarOpen = defineModel<boolean>("open"); // Controlled by layout
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const navItems = computed(() => [
|
||||
{
|
||||
to: "/dashboard",
|
||||
label: t('sidebar.overview'),
|
||||
icon: "M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z",
|
||||
icon: "dashboard", // Using Material Icons names where possible or SVG paths
|
||||
isSvg: false
|
||||
},
|
||||
{
|
||||
to: "/dashboard/my-courses",
|
||||
label: t('sidebar.myCourses'),
|
||||
icon: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253",
|
||||
icon: "school",
|
||||
isSvg: false
|
||||
},
|
||||
{
|
||||
to: "/browse/discovery",
|
||||
label: t('sidebar.browseCourses'),
|
||||
icon: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z",
|
||||
icon: "explore",
|
||||
isSvg: false
|
||||
},
|
||||
{
|
||||
to: "/dashboard/announcements",
|
||||
label: t('sidebar.announcements'),
|
||||
icon: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9",
|
||||
icon: "campaign",
|
||||
isSvg: false
|
||||
},
|
||||
{
|
||||
to: "/dashboard/profile",
|
||||
label: t('sidebar.profile'),
|
||||
icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
|
||||
icon: "person",
|
||||
isSvg: false
|
||||
},
|
||||
]);
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path === "/dashboard") return route.path === "/dashboard";
|
||||
return route.path.startsWith(path);
|
||||
};
|
||||
|
||||
const closeSidebar = () => {
|
||||
isSidebarOpen.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Desktop & Mobile Sidebar -->
|
||||
<aside
|
||||
class="app-sidebar transition-all duration-300"
|
||||
:class="{ open: isSidebarOpen }"
|
||||
>
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Menu Items -->
|
||||
<div class="px-2 py-4 space-y-1">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="nav-item"
|
||||
:class="{ active: isActive(item.to) }"
|
||||
@click="closeSidebar"
|
||||
>
|
||||
<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="item.icon"
|
||||
/>
|
||||
</svg>
|
||||
<span>{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="flex flex-col h-full bg-white">
|
||||
<!-- Branding Area (Optional if not in Header) -->
|
||||
|
||||
<q-list padding class="text-slate-600 flex-grow">
|
||||
|
||||
<!-- Footer / Version -->
|
||||
<div class="mt-auto p-4 text-xs text-center opacity-50">
|
||||
<p>e-Learning v0.1.0</p>
|
||||
<p>© 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<q-item
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
clickable
|
||||
v-ripple
|
||||
active-class="text-primary bg-blue-50 font-bold"
|
||||
class="rounded-r-full mr-2"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon :name="item.icon" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>{{ item.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
|
||||
<!-- Mobile Overlay -->
|
||||
<div
|
||||
class="sidebar-overlay"
|
||||
:class="{ show: isSidebarOpen }"
|
||||
@click="closeSidebar"
|
||||
/>
|
||||
<!-- Footer / Version -->
|
||||
<div class="mt-auto p-4 text-xs text-center opacity-50 pb-8">
|
||||
<p>e-Learning v0.1.0</p>
|
||||
<p>© 2026</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Sidebar styles are mainly handled by global main.css (.app-sidebar) */
|
||||
/* This component structure ensures it hooks into the .app-shell grid correctly */
|
||||
/* Custom styles if needed */
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,198 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file LandingFooter.vue
|
||||
* @description The main footer for the public landing pages.
|
||||
* Contains site links, social media icons, and app download buttons.
|
||||
*/
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="landing-footer">
|
||||
<div class="container">
|
||||
<!-- Main Footer Grid -->
|
||||
<div class="footer-grid">
|
||||
|
||||
<!-- Column 1: Brand & Social Media -->
|
||||
<div class="footer-brand">
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<div class="logo-box">E</div>
|
||||
<span class="font-bold text-xl" style="color: white;">E-Learning System</span>
|
||||
</div>
|
||||
<p class="text-sm text-slate-400 mb-6">แพลตฟอร์มการเรียนออนไลน์สำหรับทักษแห่งอนาคต</p>
|
||||
<div class="flex gap-4 social-icons">
|
||||
<!-- Placeholder icons -->
|
||||
<a href="#" class="social-icon">f</a>
|
||||
<a href="#" class="social-icon">IG</a>
|
||||
<a href="#" class="social-icon">Y</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Column 2: Services Links -->
|
||||
<div class="footer-column">
|
||||
<h4 class="font-bold mb-4" style="color: white;">บริการทั้งหมด</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">คอร์สเรียนออนไลน์</a></li>
|
||||
<li><a href="#">หลักสูตร Onsite</a></li>
|
||||
<li><a href="#">หลักสูตร Class</a></li>
|
||||
<li><a href="#">สำหรับองค์กร</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 3: About Links -->
|
||||
<div class="footer-column">
|
||||
<h4 class="font-bold mb-4" style="color: white;">เกี่ยวกับเรา</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">แพ็กเกจรายปี</a></li>
|
||||
<li><a href="#">เส้นทางการเรียน</a></li>
|
||||
<li><a href="#">วัดระดับทักษะ <span class="badge-beta">Beta</span></a></li>
|
||||
<li><a href="#">บทความ</a></li>
|
||||
<li><a href="#">คำถามที่พบบ่อย</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 4: Join Us Links -->
|
||||
<div class="footer-column">
|
||||
<h4 class="font-bold mb-4" style="color: white;">ร่วมงานกับเรา</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">สมัครงาน</a></li>
|
||||
<li><a href="#">สมัครเป็น Affiliate</a></li>
|
||||
<li><a href="#">สมัครเป็นผู้สอน</a></li>
|
||||
<li><a href="#">เกี่ยวกับเรา</a></li>
|
||||
<li><a href="#">ติดต่อเรา</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Column 5: App Download & Contact -->
|
||||
<div class="footer-column">
|
||||
<h4 class="font-bold mb-4" style="color: white;">ดาวน์โหลดแอปพลิเคชัน</h4>
|
||||
<div class="flex flex-col gap-2">
|
||||
<button class="app-btn">
|
||||
<span>🍎</span> App Store
|
||||
</button>
|
||||
<button class="app-btn">
|
||||
<span>▶️</span> Google Play
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h4 class="font-bold mt-6 mb-4" style="color: white;">ปรึกษาการเรียน</h4>
|
||||
<button class="btn btn-success w-full">
|
||||
<span>💬</span> เพิ่มเพื่อน
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Bottom: Copyright & Legal -->
|
||||
<div class="footer-bottom">
|
||||
<p class="text-xs text-slate-400">© Copyright 2019-2026 LIKE ME X CO.,LTD All rights reserved.</p>
|
||||
<div class="flex gap-4 text-xs text-slate-400">
|
||||
<a href="#">ข้อตกลงการใช้บริการ</a>
|
||||
<span>|</span>
|
||||
<a href="#">นโยบายความเป็นส่วนตัว</a>
|
||||
<span>|</span>
|
||||
<a href="#">นโยบายการคืนเงิน</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Main Footer Structure */
|
||||
.landing-footer {
|
||||
background-color: #080b14; /* Deep Navy Background */
|
||||
padding: 60px 0 20px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05); /* Subtle border */
|
||||
margin-top: auto;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
/* 5-Column Grid Layout */
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr 1fr; /* First column is wider for branding */
|
||||
gap: 40px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.logo-box {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: #eff6ff;
|
||||
color: #3b82f6;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.footer-links li {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.badge-beta {
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.app-btn {
|
||||
background: #000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* Responsive Breakpoints */
|
||||
@media (max-width: 1024px) {
|
||||
.footer-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.footer-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 32px;
|
||||
}
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -82,13 +82,11 @@ onMounted(() => {
|
|||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Fixed header to stay on top */
|
||||
/* Header content */
|
||||
.landing-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Glassmorphism Effect for Scrolled Header */
|
||||
|
|
|
|||
|
|
@ -1,29 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
|
||||
const navItems = [
|
||||
{ to: '/dashboard', icon: '🏠', label: 'หน้าหลัก' },
|
||||
{ to: '/browse/discovery', icon: '🔍', label: 'รายการคอร์ส' },
|
||||
{ to: '/dashboard/my-courses', icon: '📚', label: 'คอร์สของฉัน' }
|
||||
{ to: '/dashboard', icon: 'dashboard', label: 'หน้าหลัก' },
|
||||
{ to: '/browse/discovery', icon: 'explore', label: 'รายการคอร์ส' },
|
||||
{ to: '/dashboard/my-courses', icon: 'school', label: 'คอร์สของฉัน' }
|
||||
]
|
||||
|
||||
const isActive = (path: string) => {
|
||||
if (path === '/') return route.path === '/'
|
||||
return route.path.startsWith(path)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="mobile-nav">
|
||||
<NuxtLink
|
||||
<q-tabs
|
||||
indicator-color="primary"
|
||||
active-color="primary"
|
||||
class="bg-white text-slate-500 shadow-up-1"
|
||||
align="justify"
|
||||
dense
|
||||
>
|
||||
<q-route-tab
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="mobile-nav-item"
|
||||
:class="{ active: isActive(item.to) }"
|
||||
>
|
||||
<span>{{ item.icon }}</span>
|
||||
<span>{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
:icon="item.icon"
|
||||
:label="item.label"
|
||||
no-caps
|
||||
class="py-2"
|
||||
/>
|
||||
</q-tabs>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Optional shadow for better separation */
|
||||
.shadow-up-1 {
|
||||
box-shadow: 0 -1px 3px rgba(0,0,0,0.05);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,47 @@
|
|||
<script setup lang="ts">
|
||||
/**
|
||||
* @file UserMenu.vue
|
||||
* @description User profile dropdown menu component.
|
||||
* Features:
|
||||
* - Displays user initials and info
|
||||
* - Navigation links
|
||||
* - Dark mode toggle
|
||||
* - Logout functionality
|
||||
* - Responsive positioning using Teleport
|
||||
* @description User profile dropdown menu component using Quasar.
|
||||
*/
|
||||
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { ref, computed, onMounted, watch } from 'vue'
|
||||
import { useAuth } from '~/composables/useAuth'
|
||||
|
||||
const { currentUser, logout } = useAuth()
|
||||
const { t } = useI18n()
|
||||
const isOpen = ref(false)
|
||||
const isDarkMode = ref(false)
|
||||
const menuRef = ref<HTMLDivElement | null>(null)
|
||||
|
||||
// Sync Dark Mode state on mount
|
||||
// Sync Dark Mode state
|
||||
onMounted(() => {
|
||||
// Should default to light, so we ensure state matches.
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
isDarkMode.value = true
|
||||
}
|
||||
})
|
||||
// Position calculation for the dropdown
|
||||
const menuPosition = ref({ top: '0px', right: '0px' })
|
||||
|
||||
// Computed property to display user initials (e.g. "JD" for John Doe)
|
||||
// Watch for dark mode changes
|
||||
watch(isDarkMode, (val) => {
|
||||
if (val) {
|
||||
document.documentElement.classList.add('dark')
|
||||
localStorage.setItem('theme', 'dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.setItem('theme', 'light')
|
||||
}
|
||||
})
|
||||
|
||||
// User Initials
|
||||
const userInitials = computed(() => {
|
||||
if (!currentUser.value) return ''
|
||||
const f = currentUser.value.firstName?.charAt(0).toUpperCase() || ''
|
||||
const f = currentUser.value.firstName?.charAt(0).toUpperCase() || 'U'
|
||||
const l = currentUser.value.lastName?.charAt(0).toUpperCase() || ''
|
||||
return f + l
|
||||
})
|
||||
|
||||
const userName = computed(() => {
|
||||
if (!currentUser.value) return ''
|
||||
if (!currentUser.value) return 'User'
|
||||
return `${currentUser.value.firstName} ${currentUser.value.lastName}`
|
||||
})
|
||||
|
||||
// Navigation menu definition
|
||||
// Navigation menu definition
|
||||
const menuItems = computed(() => [
|
||||
{ label: t('userMenu.home'), to: '/dashboard' },
|
||||
{ label: t('userMenu.courseList'), to: '/browse/discovery' },
|
||||
|
|
@ -51,166 +49,74 @@ const menuItems = computed(() => [
|
|||
{ label: t('userMenu.settings'), to: '/dashboard/profile' }
|
||||
])
|
||||
|
||||
const handleNavigate = (path: string) => {
|
||||
navigateTo(path)
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
const handleLogout = async () => {
|
||||
await logout()
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggles dark mode on the document element.
|
||||
*/
|
||||
const toggleDarkMode = () => {
|
||||
isDarkMode.value = !isDarkMode.value
|
||||
if (isDarkMode.value) {
|
||||
document.documentElement.classList.add('dark')
|
||||
localStorage.setItem('theme', 'dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.setItem('theme', 'light')
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates and updates the menu position relative to the button.
|
||||
*/
|
||||
const updateMenuPosition = () => {
|
||||
if (menuRef.value) {
|
||||
const rect = menuRef.value.getBoundingClientRect()
|
||||
menuPosition.value = {
|
||||
top: `${rect.bottom + 8}px`,
|
||||
right: `${window.innerWidth - rect.right}px`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const toggleMenu = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
if (isOpen.value) {
|
||||
updateMenuPosition()
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners for closing menu on click outside and resizing
|
||||
onMounted(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (isOpen.value && menuRef.value && !menuRef.value.contains(e.target as Node)) {
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
return () => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
const handleResize = () => {
|
||||
if (isOpen.value) {
|
||||
updateMenuPosition()
|
||||
}
|
||||
}
|
||||
window.addEventListener('resize', handleResize)
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="menuRef" class="relative">
|
||||
<!-- Avatar Button -->
|
||||
<button
|
||||
class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white font-bold text-sm hover:bg-blue-600 transition-colors cursor-pointer ring-2 ring-blue-500/30"
|
||||
:title="userName"
|
||||
@click="toggleMenu"
|
||||
>
|
||||
{{ userInitials }}
|
||||
</button>
|
||||
|
||||
<!-- Dropdown Menu - Teleport to body to avoid overflow-hidden -->
|
||||
<Teleport to="body">
|
||||
<Transition
|
||||
enter-active-class="transition ease-out duration-100"
|
||||
enter-from-class="transform opacity-0 scale-95"
|
||||
enter-to-class="transform opacity-100 scale-100"
|
||||
leave-active-class="transition ease-in duration-75"
|
||||
leave-from-class="transform opacity-100 scale-100"
|
||||
leave-to-class="transform opacity-0 scale-95"
|
||||
<div class="q-pa-md">
|
||||
<q-btn round flat class="text-slate-700 dark:text-white">
|
||||
<q-avatar color="primary" text-color="white" size="40px" font-size="14px" class="font-bold shadow-md">
|
||||
{{ userInitials }}
|
||||
</q-avatar>
|
||||
|
||||
<q-menu
|
||||
anchor="bottom end"
|
||||
self="top end"
|
||||
class="rounded-2xl shadow-xl overflow-hidden border border-slate-100 dark:border-slate-700"
|
||||
:offset="[0, 10]"
|
||||
style="min-width: 240px; background-color: var(--bg-surface);"
|
||||
>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="fixed rounded-2xl shadow-lg dark:shadow-2xl z-50 w-64 border overflow-hidden transition-colors"
|
||||
style="background-color: var(--bg-surface); border-color: rgba(255,255,255,0.1);"
|
||||
:style="{
|
||||
top: menuPosition.top,
|
||||
right: menuPosition.right
|
||||
}"
|
||||
<div class="bg-[#1e293b] text-white">
|
||||
<!-- Optional header if needed, but per design keeping it simple list -->
|
||||
</div>
|
||||
|
||||
<q-list class="bg-[#1e293b] text-white py-2">
|
||||
<q-item
|
||||
v-for="item in menuItems"
|
||||
:key="item.label"
|
||||
clickable
|
||||
v-close-popup
|
||||
@click="navigateTo(item.to)"
|
||||
class="hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<q-item-section>
|
||||
<q-item-label class="font-bold text-sm">{{ item.label }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item class="hover:bg-white/10 transition-colors">
|
||||
<q-item-section>
|
||||
<q-item-label class="font-bold text-sm">{{ $t('userMenu.darkMode') }}</q-item-label>
|
||||
</q-item-section>
|
||||
<q-item-section side>
|
||||
<q-toggle
|
||||
v-model="isDarkMode"
|
||||
color="blue"
|
||||
keep-color
|
||||
/>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<!-- Menu Items -->
|
||||
<nav class="py-2">
|
||||
<button
|
||||
v-for="item in menuItems"
|
||||
:key="item.label"
|
||||
class="w-full px-6 py-3 text-left transition-colors text-sm font-medium hover:bg-slate-100 dark:hover:bg-white/10 text-slate-800 dark:text-white"
|
||||
@click="handleNavigate(item.to)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</button>
|
||||
</nav>
|
||||
<q-separator class="bg-white/10 my-1" />
|
||||
|
||||
<!-- Dark Mode Toggle -->
|
||||
<div class="px-6 py-3 border-slate-200 dark:border-slate-700">
|
||||
<button
|
||||
class="w-full flex items-center justify-between py-2"
|
||||
@click="toggleDarkMode"
|
||||
>
|
||||
<span class="text-sm font-medium text-slate-800 dark:text-white">{{ $t('userMenu.darkMode') }}</span>
|
||||
<div
|
||||
:class="[
|
||||
'relative inline-flex h-6 w-11 items-center rounded-full transition-colors',
|
||||
isDarkMode ? 'bg-blue-600' : 'bg-slate-300'
|
||||
]"
|
||||
>
|
||||
<span
|
||||
:class="[
|
||||
'inline-block h-4 w-4 transform rounded-full bg-white transition-transform',
|
||||
isDarkMode ? 'translate-x-6' : 'translate-x-1'
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Logout Button -->
|
||||
<div class="px-6 py-3 border-t border-slate-200 dark:border-slate-700">
|
||||
<button
|
||||
class="w-full px-4 py-2 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/40 rounded-lg font-medium transition-colors text-sm"
|
||||
<div class="p-4">
|
||||
<q-btn
|
||||
unelevated
|
||||
class="w-full bg-red-500/10 text-red-400 hover:bg-red-500/20 font-bold rounded-lg"
|
||||
no-caps
|
||||
@click="handleLogout"
|
||||
>
|
||||
{{ $t('userMenu.logout') }}
|
||||
</button>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
<!-- Backdrop to close menu -->
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="fixed inset-0 z-40"
|
||||
@click="isOpen = false"
|
||||
/>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
button {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
/* Override Quasar generic styles if necessary */
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,50 @@
|
|||
/**
|
||||
* @file default.vue
|
||||
* @description Layout หลักสำหรับหน้าเว็บของผู้ใช้ (Authenticated Users)
|
||||
* ประกอบด้วย Header (Navbar) และ Mobile Navigation
|
||||
* Uses Quasar QLayout for responsive structure.
|
||||
*/
|
||||
|
||||
const leftDrawerOpen = ref(false)
|
||||
|
||||
const toggleLeftDrawer = () => {
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- App Shell: คอนเทนเนอร์หลักของแอปพลิเคชัน -->
|
||||
<div class="app-shell min-h-screen transition-colors duration-200">
|
||||
<!-- Header: แถบเมนูด้านบน -->
|
||||
<AppHeader />
|
||||
<q-layout view="hHh lpr lFf" class="bg-slate-50 font-inter">
|
||||
<!-- Header -->
|
||||
<q-header bordered class="bg-white text-slate-800">
|
||||
<AppHeader @toggle-sidebar="toggleLeftDrawer" />
|
||||
</q-header>
|
||||
|
||||
<!-- Main Content Area: ส่วนแสดงเนื้อหาหลัก -->
|
||||
<main class="app-main">
|
||||
<slot />
|
||||
</main>
|
||||
<!-- Sidebar (Drawer) -->
|
||||
<q-drawer
|
||||
v-model="leftDrawerOpen"
|
||||
bordered
|
||||
class="bg-white"
|
||||
:width="260"
|
||||
>
|
||||
<AppSidebar />
|
||||
</q-drawer>
|
||||
|
||||
<!-- Mobile Bottom Navigation: แถบเมนูด้านล่าง (แสดงเฉพาะมือถือ) -->
|
||||
<MobileNav />
|
||||
</div>
|
||||
<!-- Main Content -->
|
||||
<q-page-container>
|
||||
<q-page class="relative">
|
||||
<slot />
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
|
||||
<!-- Mobile Bottom Nav -->
|
||||
<q-footer v-if="$q.screen.lt.md" bordered class="bg-white text-primary">
|
||||
<MobileNav />
|
||||
</q-footer>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* Ensure fonts are applied */
|
||||
.font-inter {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,39 +2,32 @@
|
|||
/**
|
||||
* @file landing.vue
|
||||
* @description Layout for the landing page (public facing).
|
||||
* Applies a dark theme by default and includes the public header and footer.
|
||||
* Uses Quasar QLayout with overlay header.
|
||||
*/
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Landing Layout Container: Forces Dark Theme -->
|
||||
<div class="landing-layout dark">
|
||||
<LandingHeader />
|
||||
<q-layout view="lHh LpR lFf" class="bg-slate-900 text-slate-100 font-inter">
|
||||
|
||||
<!-- Main Content Area: Grows to fill available space -->
|
||||
<main class="flex-grow">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<LandingFooter />
|
||||
</div>
|
||||
<!-- Header (Transparent & Overlay) -->
|
||||
<q-header class="bg-transparent" style="height: auto;">
|
||||
<LandingHeader />
|
||||
</q-header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<!-- padding-top: 0 forces content to go under the header (Hero effect) -->
|
||||
<q-page-container style="padding-top: 0 !important;">
|
||||
<q-page>
|
||||
<slot />
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
|
||||
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/*
|
||||
Layout Styling:
|
||||
- Flexbox column layout to stick footer to bottom.
|
||||
- Dark background base.
|
||||
*/
|
||||
.landing-layout {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #0f172a; /* Slate 900 */
|
||||
color: #f1f5f9; /* Slate 100 */
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
.font-inter {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
10
Frontend-Learner/package-lock.json
generated
10
Frontend-Learner/package-lock.json
generated
|
|
@ -8,6 +8,7 @@
|
|||
"name": "learner-ui",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"@nuxtjs/tailwindcss": "^6.12.0",
|
||||
"nuxt": "^3.11.2",
|
||||
"nuxt-quasar-ui": "^3.0.0",
|
||||
|
|
@ -1378,6 +1379,15 @@
|
|||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@heroicons/vue": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.2.0.tgz",
|
||||
"integrity": "sha512-G3dbSxoeEKqbi/DFalhRxJU4mTXJn7GwZ7ae8NuEQzd1bqdd0jAbdaBZlHPcvPD2xI1iGzNVB4k20Un2AguYPw==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vue": ">= 3"
|
||||
}
|
||||
},
|
||||
"node_modules/@humanfs/core": {
|
||||
"version": "0.19.1",
|
||||
"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
"lint": "eslint ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"@nuxtjs/tailwindcss": "^6.12.0",
|
||||
"nuxt": "^3.11.2",
|
||||
"nuxt-quasar-ui": "^3.0.0",
|
||||
|
|
|
|||
|
|
@ -34,9 +34,10 @@ const forgotRules = {
|
|||
}
|
||||
}
|
||||
|
||||
const handleInput = (val: string) => {
|
||||
forgotForm.email = val
|
||||
if (/[\u0E00-\u0E7F]/.test(val)) {
|
||||
const handleInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
forgotForm.email = value
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value.email = 'ห้ามใส่ภาษาไทย'
|
||||
} else {
|
||||
if (errors.value.email === 'ห้ามใส่ภาษาไทย') {
|
||||
|
|
@ -59,58 +60,115 @@ const sendResetLink = async () => {
|
|||
if (result.success) {
|
||||
forgotStep.value = 'success'
|
||||
} else {
|
||||
// Basic alert for now, could be improved with q-notify later
|
||||
alert(result.error || 'ไม่สามารถส่งลิงก์รีเซ็ตได้ กรุณาลองใหม่')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="width: 100%; max-width: 440px;">
|
||||
<!-- Loading Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
<div class="flex items-center justify-center min-h-screen bg-slate-900 font-inter p-4 relative overflow-hidden">
|
||||
|
||||
<!-- Logo area -->
|
||||
<div class="flex flex-col items-center mb-6">
|
||||
<div
|
||||
style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
|
||||
>
|
||||
E
|
||||
</div>
|
||||
<h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
|
||||
<p class="text-slate-700 dark:text-slate-400 text-sm">รีเซ็ตรหัณผ่านของคุณ</p>
|
||||
</div>
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div>
|
||||
<!-- Step 1: Request Email Form -->
|
||||
<form v-if="forgotStep === 'initial'" @submit.prevent="sendResetLink">
|
||||
<p class="text-slate-700 dark:text-slate-400 text-sm mb-6">กรุณากรอกอีเมลเพื่อรับลิงก์รีเซ็ตรหัณผ่าน</p>
|
||||
<FormInput
|
||||
:model-value="forgotForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
@update:model-value="handleInput"
|
||||
/>
|
||||
<button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>ส่งลิงก์รีเซ็ต</span>
|
||||
</button>
|
||||
</form>
|
||||
<!-- Navigation Links -->
|
||||
<div class="text-center mt-6">
|
||||
<NuxtLink to="/auth/login" class="text-sm font-bold text-slate-500 hover:text-slate-800 transition-colors">
|
||||
← กลับไปหน้าเข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
<q-card class="w-full max-w-[480px] shadow-2xl rounded-2xl bg-slate-800 text-white border border-slate-700 relative z-10 q-pa-xl">
|
||||
|
||||
<!-- Logo area -->
|
||||
<div class="flex flex-col items-center mb-10">
|
||||
<div class="w-14 h-14 bg-white text-blue-600 rounded-2xl flex items-center justify-center font-extrabold text-3xl mb-6 shadow-lg shadow-white/10">
|
||||
E
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
|
||||
<p class="text-slate-400 text-base">รีเซ็ตรหัสผ่านของคุณ</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN CONTENT -->
|
||||
<div>
|
||||
<!-- Step 1: Request Email Form -->
|
||||
<form v-if="forgotStep === 'initial'" @submit.prevent="sendResetLink" class="flex flex-col gap-5">
|
||||
|
||||
<p class="text-slate-400 text-base mb-2 text-center">กรุณากรอกอีเมลเพื่อรับลิงก์รีเซ็ตรหัสผ่าน</p>
|
||||
|
||||
<!-- Email Input -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="forgotForm.email"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder="student@example.com"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.email"
|
||||
:error-message="errors.email"
|
||||
@update:model-value="handleInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full h-12 text-lg font-bold shadow-lg shadow-blue-500/20 bg-blue-600 hover:bg-blue-500 mt-4"
|
||||
:loading="isLoading"
|
||||
>
|
||||
ส่งลิงก์รีเซ็ต
|
||||
<template v-slot:loading>
|
||||
<q-spinner-dots color="white" />
|
||||
</template>
|
||||
</q-btn>
|
||||
</form>
|
||||
|
||||
<!-- Success Message -->
|
||||
<div v-else class="text-center animate-fade-in">
|
||||
<div class="mb-6 flex justify-center">
|
||||
<div class="w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center text-green-500 mb-4">
|
||||
<q-icon name="check_circle" size="32px" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-2">ส่งลิงก์เรียบร้อยแล้ว!</h3>
|
||||
<p class="text-slate-400 mb-6">กรุณาตรวจสอบอีเมลของคุณเพื่อดำเนินการต่อ</p>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="text-center pt-6 border-t border-slate-700 mt-6">
|
||||
<NuxtLink to="/auth/login" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-slate-400 text-base font-bold hover:text-white hover:bg-slate-700 transition-all duration-300 group">
|
||||
<q-icon name="arrow_back" class="text-lg transform group-hover:-translate-x-1 transition-transform" />
|
||||
กลับไปหน้าเข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
box-shadow: var(--shadow-md);
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
}
|
||||
|
||||
/* Custom dark input styling */
|
||||
.custom-dark-input :deep(.q-field__control) {
|
||||
background: #334155 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field__control:before) {
|
||||
border-color: #475569;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.5s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @file login.vue
|
||||
* @description หน้าเข้าสู่ระบบ (Login Page)
|
||||
* รองรับการเข้าสู่ระบบด้วย Email/Password
|
||||
* NOTE: ไม่เปลี่ยนสี และไม่เปลี่ยนการเรียก API login
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -19,6 +20,8 @@ const { login, user } = useAuth()
|
|||
const { errors, validate, clearFieldError } = useFormValidation()
|
||||
|
||||
const isLoading = ref(false)
|
||||
const rememberMe = ref(false)
|
||||
const showPassword = ref(false)
|
||||
|
||||
// Form data model
|
||||
const loginForm = reactive({
|
||||
|
|
@ -26,162 +29,218 @@ const loginForm = reactive({
|
|||
password: ''
|
||||
})
|
||||
|
||||
type LoginField = keyof typeof loginForm
|
||||
|
||||
// Validation rules definition
|
||||
// กำหนดกฎการตรวจสอบข้อมูล (Validation Rules)
|
||||
const loginRules = {
|
||||
email: {
|
||||
rules: {
|
||||
required: true,
|
||||
email: {
|
||||
rules: {
|
||||
required: true,
|
||||
email: true,
|
||||
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
||||
},
|
||||
custom: (val: string) => (/[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null)
|
||||
},
|
||||
label: 'อีเมล',
|
||||
messages: {
|
||||
required: 'กรุณากรอกอีเมลของคุณ',
|
||||
email: 'กรุณากรอกอีเมลให้ถูกต้อง (you@example.com)'
|
||||
}
|
||||
},
|
||||
password: {
|
||||
rules: {
|
||||
required: true,
|
||||
password: {
|
||||
rules: {
|
||||
required: true,
|
||||
minLength: 8,
|
||||
custom: (val: string) => /[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null
|
||||
},
|
||||
custom: (val: string) => (/[\u0E00-\u0E7F]/.test(val) ? 'ห้ามใส่ภาษาไทย' : null)
|
||||
},
|
||||
label: 'รหัสผ่าน',
|
||||
messages: {
|
||||
required: 'กรุณากรอกรหัสผ่าน',
|
||||
minLength: 'กรุณากรอกรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)'
|
||||
}
|
||||
}
|
||||
}
|
||||
} as const
|
||||
|
||||
/**
|
||||
* ฟังก์ชันตรวจสอบความถูกต้องของฟอร์มและเรียก API login
|
||||
*/
|
||||
/**
|
||||
* จัดการเมื่อมีการพิมพ์ข้อมูล (Input Handler)
|
||||
* - ลบ error เมื่อเริ่มพิมพ์ใหม่
|
||||
* - ตรวจสอบภาษาไทยแบบ real-time
|
||||
*/
|
||||
const handleInput = (field: keyof typeof loginForm, value: string) => {
|
||||
const handleInput = (field: LoginField, value: string) => {
|
||||
loginForm[field] = value
|
||||
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value[field] = 'ห้ามใส่ภาษาไทย'
|
||||
} else {
|
||||
if (errors.value[field] === 'ห้ามใส่ภาษาไทย') {
|
||||
clearFieldError(field)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (errors.value[field] === 'ห้ามใส่ภาษาไทย') {
|
||||
clearFieldError(field)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* ฟังก์ชันตรวจสอบความถูกต้องของฟอร์มและเรียก API login
|
||||
*/
|
||||
const handleLogin = async () => {
|
||||
if (!validate(loginForm, loginRules)) return
|
||||
|
||||
|
||||
isLoading.value = true
|
||||
|
||||
|
||||
// ✅ ไม่เปลี่ยน API: ยังคงเรียก login({ email, password }) ตามเดิม
|
||||
const result = await login({
|
||||
email: loginForm.email,
|
||||
password: loginForm.password
|
||||
})
|
||||
|
||||
|
||||
isLoading.value = false
|
||||
|
||||
if (result.success) {
|
||||
router.push('/dashboard')
|
||||
} else {
|
||||
// Show error on specific fields
|
||||
if (result.error === 'ไม่พบอีเมลในระบบ') {
|
||||
errors.value.email = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
||||
errors.value.password = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
||||
} else if (result.error === 'Email ไม่ถูกต้อง') {
|
||||
errors.value.email = result.error
|
||||
} else {
|
||||
errors.value.password = 'กรอกรหัสผ่านไม่ถูกต้อง'
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Show error on specific fields
|
||||
if (result.error === 'ไม่พบอีเมลในระบบ') {
|
||||
errors.value.email = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
||||
errors.value.password = 'กรุณาเช็ค Email หรือ รหัสผ่านใหม่อีกครั้ง'
|
||||
} else if (result.error === 'Email ไม่ถูกต้อง') {
|
||||
errors.value.email = result.error
|
||||
} else {
|
||||
errors.value.password = 'กรอกรหัสผ่านไม่ถูกต้อง'
|
||||
}
|
||||
}
|
||||
|
||||
// optional: social login placeholder (ไม่แตะ API เดิม)
|
||||
const handleGoogleLogin = () => {
|
||||
// TODO: implement when backend ready
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card" style="width: 100%; max-width: 440px;">
|
||||
<!-- Loading Screen Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
|
||||
<!-- Header / Logo Section -->
|
||||
<div class="flex flex-col items-center mb-6">
|
||||
<div
|
||||
style="width: 48px; height: 48px; background: #eff6ff; color: #3b82f6; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 24px; margin-bottom: 16px;"
|
||||
>
|
||||
E
|
||||
<!-- Background Decoration (Optional Subtle Glows to match cool dark feel) -->
|
||||
<div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<q-card
|
||||
class="w-full max-w-[480px] shadow-2xl rounded-2xl bg-slate-800 text-white border border-slate-700 relative z-10 q-pa-xl"
|
||||
>
|
||||
|
||||
<!-- Header / Logo Section -->
|
||||
<div class="flex flex-col items-center mb-10">
|
||||
<div class="w-14 h-14 bg-white text-blue-600 rounded-2xl flex items-center justify-center font-extrabold text-3xl mb-6 shadow-lg shadow-white/10">
|
||||
E
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
|
||||
<p class="text-slate-400 text-base">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
|
||||
</div>
|
||||
<h1 style="font-size: 24px; margin-bottom: 8px;">e-Learning Platform</h1>
|
||||
<p class="text-muted text-sm">ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ</p>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form @submit.prevent="handleLogin" novalidate>
|
||||
<!-- Email Input -->
|
||||
<FormInput
|
||||
:model-value="loginForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
@update:model-value="val => handleInput('email', val)"
|
||||
/>
|
||||
<!-- Password Input -->
|
||||
<FormInput
|
||||
:model-value="loginForm.password"
|
||||
label="รหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
:error="errors.password"
|
||||
required
|
||||
@update:model-value="val => handleInput('password', val)"
|
||||
/>
|
||||
|
||||
<!-- Helpers: Remember Me & Forgot Password -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<label class="flex items-center gap-2 text-sm text-muted">
|
||||
<input type="checkbox"> จดจำฉัน
|
||||
</label>
|
||||
<NuxtLink to="/auth/forgot-password" class="text-sm" style="color: var(--primary); font-weight: 500;">ลืมรหัสผ่าน?</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<button type="submit" class="btn btn-primary w-full mb-4" :disabled="isLoading">
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>เข้าสู่ระบบ</span>
|
||||
</button>
|
||||
<!-- Login Form -->
|
||||
<form @submit.prevent="handleLogin" class="flex flex-col gap-5">
|
||||
|
||||
<!-- Email Input -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="loginForm.email"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder="student@example.com"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.email"
|
||||
:error-message="errors.email"
|
||||
@update:model-value="(val: string | number | null) => handleInput('email', val as string)"
|
||||
hide-bottom-space
|
||||
>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Password Input -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">รหัสผ่าน <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="loginForm.password"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
placeholder="••••••••"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.password"
|
||||
:error-message="errors.password"
|
||||
@update:model-value="(val: string | number | null) => handleInput('password', val as string)"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400 hover:text-white transition-colors"
|
||||
@click="showPassword = !showPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Helpers: Remember Me & Forgot Password -->
|
||||
<div class="flex justify-between items-center text-sm">
|
||||
<q-checkbox
|
||||
v-model="rememberMe"
|
||||
label="จดจำฉัน"
|
||||
size="sm"
|
||||
dense
|
||||
dark
|
||||
color="white"
|
||||
class="text-slate-300"
|
||||
/>
|
||||
<NuxtLink to="/auth/forgot-password" class="font-medium text-blue-400 hover:text-blue-300 transition-colors">
|
||||
ลืมรหัสผ่าน?
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full h-12 text-lg font-bold shadow-lg shadow-blue-500/20 bg-blue-600 hover:bg-blue-500"
|
||||
:loading="isLoading"
|
||||
>
|
||||
เข้าสู่ระบบ
|
||||
<template v-slot:loading>
|
||||
<q-spinner-dots color="white" />
|
||||
</template>
|
||||
</q-btn>
|
||||
|
||||
<!-- Social Login (Google) -->
|
||||
<button type="button" class="btn-google w-full mb-6 flex items-center justify-center gap-3">
|
||||
<svg width="18" height="18" viewBox="0 0 18 18">
|
||||
<path d="M17.64 9.2c0-.637-.057-1.251-.164-1.84H9v3.481h4.844c-.209 1.125-.843 2.078-1.796 2.717v2.258h2.908c1.702-1.567 2.684-3.874 2.684-6.615z" fill="#4285F4"/>
|
||||
<path d="M9 18c2.43 0 4.467-.806 5.956-2.184l-2.908-2.258c-.806.54-1.834.859-3.048.859-2.344 0-4.328-1.584-5.036-3.711H.957v2.332A8.997 8.997 0 0 0 9 18z" fill="#34A853"/>
|
||||
<path d="M3.964 10.706c-.18-.54-.282-1.117-.282-1.706 0-.589.102-1.166.282-1.706V4.962H.957A8.996 8.996 0 0 0 0 9c0 1.452.348 2.827.957 4.038l3.007-2.332z" fill="#FBBC05"/>
|
||||
<path d="M9 3.58c1.321 0 2.508.454 3.44 1.345l2.582-2.58C13.463.891 11.426 0 9 0A8.997 8.997 0 0 0 .957 4.962l3.007 2.332c.708-2.127 2.692-3.711 5.036-3.711z" fill="#EA4335"/>
|
||||
</svg>
|
||||
<span>เข้าสู่ระบบด้วย Google</span>
|
||||
</button>
|
||||
<!-- Back to Landing Page -->
|
||||
<div class="text-center pt-6 border-t border-slate-700 mt-2">
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl text-slate-400 text-base font-bold hover:text-white hover:bg-slate-700 transition-all duration-300 group">
|
||||
<q-icon name="arrow_back" class="text-lg transform group-hover:-translate-x-1 transition-transform" />
|
||||
กลับไปหน้าแรก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Back to Landing Page -->
|
||||
<div class="text-center pt-6 border-t border-gray-100">
|
||||
<NuxtLink to="/" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl border border-gray-200 text-sm font-bold text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-blue-600 transition-all duration-300 group">
|
||||
<span class="transform group-hover:-translate-x-1 transition-transform">←</span>
|
||||
กลับไปหน้าแรก
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
box-shadow: var(--shadow-md);
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
}
|
||||
|
||||
/* Custom dark input styling to match screenshot: Dark background, light border */
|
||||
.custom-dark-input :deep(.q-field__control) {
|
||||
background: #334155 !important; /* Slate 700ish */
|
||||
border-radius: 8px;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field__control:before) {
|
||||
border-color: #475569; /* Slate 600 */
|
||||
}
|
||||
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
|
||||
border-color: #3b82f6; /* Blue 500 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @file register.vue
|
||||
* @description User Registration Page.
|
||||
* Features a multi-step style form (though currently single view) for creating a new account.
|
||||
* Updated to match the Dark Theme design.
|
||||
*/
|
||||
|
||||
definePageMeta({
|
||||
|
|
@ -15,11 +16,12 @@ useHead({
|
|||
});
|
||||
|
||||
const router = useRouter();
|
||||
const { register } = useAuth(); // Import register from useAuth
|
||||
const { register } = useAuth();
|
||||
const { errors, validate, clearFieldError } = useFormValidation();
|
||||
|
||||
const isLoading = ref(false);
|
||||
|
||||
const showPassword = ref(false);
|
||||
const showConfirmPassword = ref(false);
|
||||
|
||||
const registerForm = reactive({
|
||||
prefix: "นาย",
|
||||
|
|
@ -32,7 +34,6 @@ const registerForm = reactive({
|
|||
confirmPassword: "",
|
||||
});
|
||||
|
||||
|
||||
const registerRules = {
|
||||
username: {
|
||||
rules: {
|
||||
|
|
@ -88,58 +89,63 @@ const registerRules = {
|
|||
},
|
||||
};
|
||||
|
||||
const onUsernameInput = (val: string) => {
|
||||
registerForm.username = val;
|
||||
if (/[\u0E00-\u0E7F]/.test(val)) {
|
||||
const prefixOptions = ['นาย', 'นาง', 'นางสาว']
|
||||
|
||||
// handlers
|
||||
const onUsernameInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.username = value;
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value.username = 'ห้ามใส่ภาษาไทย';
|
||||
} else {
|
||||
// Only clear if the error is specifically about Thai chars,
|
||||
// otherwise we might clear minLength errors undesirably
|
||||
if (errors.value.username === 'ห้ามใส่ภาษาไทย') {
|
||||
clearFieldError('username');
|
||||
}
|
||||
if (errors.value.username === 'ห้ามใส่ภาษาไทย') clearFieldError('username');
|
||||
}
|
||||
};
|
||||
|
||||
const onPhoneInput = (val: string) => {
|
||||
registerForm.phone = val;
|
||||
if (/\D/.test(val)) {
|
||||
const onPhoneInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.phone = value;
|
||||
if (/\D/.test(value)) {
|
||||
errors.value.phone = 'กรุณากรอกเฉพาะตัวเลข';
|
||||
} else {
|
||||
if (errors.value.phone === 'กรุณากรอกเฉพาะตัวเลข') clearFieldError('phone');
|
||||
}
|
||||
};
|
||||
|
||||
const onEmailInput = (val: string) => {
|
||||
registerForm.email = val;
|
||||
if (/[\u0E00-\u0E7F]/.test(val)) {
|
||||
const onEmailInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.email = value;
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value.email = 'ห้ามใส่ภาษาไทย';
|
||||
} else {
|
||||
if (errors.value.email === 'ห้ามใส่ภาษาไทย') clearFieldError('email');
|
||||
}
|
||||
};
|
||||
|
||||
const onPasswordInput = (val: string) => {
|
||||
registerForm.password = val;
|
||||
if (/[\u0E00-\u0E7F]/.test(val)) {
|
||||
const onPasswordInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.password = value;
|
||||
if (/[\u0E00-\u0E7F]/.test(value)) {
|
||||
errors.value.password = 'ห้ามใส่ภาษาไทย';
|
||||
} else {
|
||||
if (errors.value.password === 'ห้ามใส่ภาษาไทย') clearFieldError('password');
|
||||
}
|
||||
};
|
||||
|
||||
const onFirstNameInput = (val: string) => {
|
||||
registerForm.firstName = val;
|
||||
if (/\d/.test(val)) {
|
||||
const onFirstNameInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.firstName = value;
|
||||
if (/\d/.test(value)) {
|
||||
errors.value.firstName = 'ห้ามใส่ตัวเลข';
|
||||
} else {
|
||||
if (errors.value.firstName === 'ห้ามใส่ตัวเลข') clearFieldError('firstName');
|
||||
}
|
||||
};
|
||||
|
||||
const onLastNameInput = (val: string) => {
|
||||
registerForm.lastName = val;
|
||||
if (/\d/.test(val)) {
|
||||
const onLastNameInput = (val: string | number | null) => {
|
||||
const value = String(val || '')
|
||||
registerForm.lastName = value;
|
||||
if (/\d/.test(value)) {
|
||||
errors.value.lastName = 'ห้ามใส่ตัวเลข';
|
||||
} else {
|
||||
if (errors.value.lastName === 'ห้ามใส่ตัวเลข') clearFieldError('lastName');
|
||||
|
|
@ -151,7 +157,6 @@ const handleRegister = async () => {
|
|||
|
||||
isLoading.value = true;
|
||||
|
||||
// Map prefix to { th, en }
|
||||
const prefixMap: Record<string, string> = {
|
||||
'นาย': 'Mr.',
|
||||
'นาง': 'Mrs.',
|
||||
|
|
@ -185,183 +190,235 @@ const handleRegister = async () => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card auth-card" style="width: 100%; max-width: 480px">
|
||||
<!-- Loading Overlay -->
|
||||
<LoadingSpinner v-if="isLoading" full-page text="กำลังดำเนินการ..." />
|
||||
<div class="flex items-center justify-center min-h-screen bg-slate-900 font-inter p-4 relative overflow-hidden">
|
||||
|
||||
<!-- Background Decoration -->
|
||||
<div class="absolute top-[-20%] left-[-10%] w-[600px] h-[600px] bg-blue-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
<div class="absolute bottom-[-20%] right-[-10%] w-[600px] h-[600px] bg-indigo-600/5 rounded-full blur-[120px] pointer-events-none"></div>
|
||||
|
||||
<!-- Title Area -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-3xl font-bold text-white mb-2">e-Learning Platform</h1>
|
||||
<p class="text-gray-400 text-sm">
|
||||
ยินดีต้อนรับกลับ! กรุณากรอกข้อมูลของคุณ
|
||||
</p>
|
||||
</div>
|
||||
<q-card class="w-full max-w-[740px] shadow-2xl rounded-2xl bg-slate-800 text-white border border-slate-700 relative z-10 q-pa-xl">
|
||||
|
||||
<form @submit.prevent="handleRegister">
|
||||
<FormInput
|
||||
:model-value="registerForm.username"
|
||||
label="ชื่อผู้ใช้"
|
||||
placeholder="username"
|
||||
:error="errors.username"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onUsernameInput"
|
||||
/>
|
||||
<FormInput
|
||||
:model-value="registerForm.email"
|
||||
label="อีเมล"
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
:error="errors.email"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onEmailInput"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
:model-value="registerForm.password"
|
||||
label="รหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
|
||||
:error="errors.password"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onPasswordInput"
|
||||
/>
|
||||
|
||||
<FormInput
|
||||
v-model="registerForm.confirmPassword"
|
||||
label="ยืนยันรหัสผ่าน"
|
||||
type="password"
|
||||
placeholder="ยืนยันรหัสผ่านอีกครั้ง"
|
||||
:error="errors.confirmPassword"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="clearFieldError('confirmPassword')"
|
||||
/>
|
||||
|
||||
<div class="grid-12" style="gap: 16px; margin-bottom: 0">
|
||||
<div class="col-span-4">
|
||||
<label class="input-label text-gray-300">คำนำหน้า</label>
|
||||
<select
|
||||
v-model="registerForm.prefix"
|
||||
class="input-field dark-input"
|
||||
style="height: 42px"
|
||||
>
|
||||
<option value="นาย">นาย</option>
|
||||
<option value="นาง">นาง</option>
|
||||
<option value="นางสาว">นางสาว</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-8">
|
||||
<FormInput
|
||||
:model-value="registerForm.firstName"
|
||||
label="ชื่อ"
|
||||
placeholder=""
|
||||
:error="errors.firstName"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onFirstNameInput"
|
||||
/>
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col items-center mb-10">
|
||||
<div class="w-14 h-14 bg-white text-blue-600 rounded-2xl flex items-center justify-center font-extrabold text-3xl mb-6 shadow-lg shadow-white/10">
|
||||
E
|
||||
</div>
|
||||
<h1 class="text-3xl font-bold text-white mb-3">e-Learning Platform</h1>
|
||||
<p class="text-slate-400 text-base">สร้างบัญชีผู้ใช้งานใหม่</p>
|
||||
</div>
|
||||
|
||||
<FormInput
|
||||
:model-value="registerForm.lastName"
|
||||
label="นามสกุล"
|
||||
placeholder=""
|
||||
:error="errors.lastName"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onLastNameInput"
|
||||
/>
|
||||
<form @submit.prevent="handleRegister" class="flex flex-col gap-5">
|
||||
|
||||
<!-- Username -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">ชื่อผู้ใช้ <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.username"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder="username"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.username"
|
||||
:error-message="errors.username"
|
||||
@update:model-value="onUsernameInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormInput
|
||||
:model-value="registerForm.phone"
|
||||
label="เบอร์โทรศัพท์"
|
||||
type="tel"
|
||||
placeholder=""
|
||||
:error="errors.phone"
|
||||
required
|
||||
class="dark-form-input"
|
||||
@update:model-value="onPhoneInput"
|
||||
/>
|
||||
<!-- Email -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">อีเมล <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.email"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
type="email"
|
||||
placeholder="student@example.com"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.email"
|
||||
:error-message="errors.email"
|
||||
@update:model-value="onEmailInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary w-full mb-4 mt-2"
|
||||
:disabled="isLoading"
|
||||
style="height: 44px; font-size: 16px"
|
||||
>
|
||||
<LoadingSpinner v-if="isLoading" size="sm" />
|
||||
<span v-else>สร้างบัญชี</span>
|
||||
</button>
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">รหัสผ่าน <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.password"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
placeholder="สร้างรหัสผ่าน (อย่างน้อย 8 ตัวอักษร)"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.password"
|
||||
:error-message="errors.password"
|
||||
@update:model-value="onPasswordInput"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400 hover:text-white transition-colors"
|
||||
@click="showPassword = !showPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-6 text-sm">
|
||||
<span class="text-muted">มีบัญชีอยู่แล้ว? </span>
|
||||
<NuxtLink to="/auth/login" class="font-bold text-primary hover:underline">เข้าสู่ระบบ</NuxtLink>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Confirm Password -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">ยืนยันรหัสผ่าน <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
v-model="registerForm.confirmPassword"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
:type="showConfirmPassword ? 'text' : 'password'"
|
||||
placeholder="ยืนยันรหัสผ่านอีกครั้ง"
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.confirmPassword"
|
||||
:error-message="errors.confirmPassword"
|
||||
@update:model-value="clearFieldError('confirmPassword')"
|
||||
hide-bottom-space
|
||||
>
|
||||
<template v-slot:append>
|
||||
<q-icon
|
||||
:name="showConfirmPassword ? 'visibility_off' : 'visibility'"
|
||||
class="cursor-pointer text-slate-400 hover:text-white transition-colors"
|
||||
@click="showConfirmPassword = !showConfirmPassword"
|
||||
/>
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Name Section -->
|
||||
<div class="grid grid-cols-12 gap-4">
|
||||
<!-- Prefix -->
|
||||
<div class="col-span-4">
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">คำนำหน้า</div>
|
||||
<q-select
|
||||
v-model="registerForm.prefix"
|
||||
:options="prefixOptions"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
options-cover
|
||||
/>
|
||||
</div>
|
||||
<!-- First Name -->
|
||||
<div class="col-span-8">
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">ชื่อ <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.firstName"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder=""
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.firstName"
|
||||
:error-message="errors.firstName"
|
||||
@update:model-value="onFirstNameInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">นามสกุล <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.lastName"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
placeholder=""
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.lastName"
|
||||
:error-message="errors.lastName"
|
||||
@update:model-value="onLastNameInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div>
|
||||
<div class="text-base font-semibold text-slate-300 mb-2 ml-1">เบอร์โทรศัพท์ <span class="text-red-500">*</span></div>
|
||||
<q-input
|
||||
:model-value="registerForm.phone"
|
||||
outlined
|
||||
dense
|
||||
dark
|
||||
type="tel"
|
||||
placeholder=""
|
||||
class="rounded-lg custom-dark-input"
|
||||
color="primary"
|
||||
:error="!!errors.phone"
|
||||
:error-message="errors.phone"
|
||||
@update:model-value="onPhoneInput"
|
||||
hide-bottom-space
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<q-btn
|
||||
type="submit"
|
||||
unelevated
|
||||
rounded
|
||||
color="primary"
|
||||
class="w-full h-12 text-lg font-bold shadow-lg shadow-blue-500/20 bg-blue-600 hover:bg-blue-500 mt-4"
|
||||
:loading="isLoading"
|
||||
>
|
||||
สร้างบัญชี
|
||||
<template v-slot:loading>
|
||||
<q-spinner-dots color="white" />
|
||||
</template>
|
||||
</q-btn>
|
||||
|
||||
<!-- Login Link -->
|
||||
<div class="text-center pt-6 border-t border-slate-700 mt-2 text-base text-slate-400">
|
||||
มีบัญชีอยู่แล้ว?
|
||||
<NuxtLink to="/auth/login" class="font-bold text-blue-400 hover:text-blue-300 transition-colors ml-1">
|
||||
เข้าสู่ระบบ
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Force Dark Theme for Card */
|
||||
.auth-card {
|
||||
background-color: #1e293b; /* Slate 800 */
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
color: #f8fafc;
|
||||
.font-inter {
|
||||
font-family: 'Inter', 'Prompt', sans-serif;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Input Overrides for Dark Mode integration within this page */
|
||||
.dark-input {
|
||||
background-color: #334155; /* Slate 700 */
|
||||
border-color: #475569; /* Slate 600 */
|
||||
color: #f1f5f9;
|
||||
/* Custom dark input styling */
|
||||
.custom-dark-input :deep(.q-field__control) {
|
||||
background: #334155 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dark-input:focus {
|
||||
.custom-dark-input :deep(.q-field__control:before) {
|
||||
border-color: #475569;
|
||||
}
|
||||
.custom-dark-input :deep(.q-field--focused .q-field__control:after) {
|
||||
border-color: #3b82f6;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
/* Deep selector for FormInput component internals */
|
||||
:deep(.input-field) {
|
||||
background-color: #334155 !important;
|
||||
border-color: #475569 !important;
|
||||
color: #f1f5f9 !important;
|
||||
}
|
||||
|
||||
:deep(.input-field::placeholder) {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
:deep(.input-label) {
|
||||
color: #cbd5e1 !important;
|
||||
}
|
||||
|
||||
:deep(.input-label span.required-mark) {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Select option styling */
|
||||
option {
|
||||
background-color: #334155;
|
||||
/* Adjust QSelect to match */
|
||||
.custom-dark-input :deep(.q-field__native) {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
/*
|
||||
Global Override for Auth Layout Background on this page context.
|
||||
Ensures the entire page background matches the design requirement.
|
||||
*/
|
||||
.auth-shell {
|
||||
background-color: #0f172a !important; /* Slate 900 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,6 +57,24 @@ const visibleCategories = computed(() => {
|
|||
return showAllCategories.value ? categories.value : categories.value.slice(0, 8);
|
||||
});
|
||||
|
||||
// เตรียม Options สำหรับ QSelect Dropdown
|
||||
const categoryOptions = computed(() => {
|
||||
return categories.value.map(c => ({
|
||||
id: c.id,
|
||||
label: getLocalizedText(c.name),
|
||||
value: c.id // q-select uses value by default if not constrained
|
||||
}))
|
||||
});
|
||||
|
||||
// ฟังก์ชัน Toggle Category สำหรับ Chip Remove
|
||||
const toggleCategory = (id: number) => {
|
||||
if (selectedCategoryIds.value.includes(id)) {
|
||||
selectedCategoryIds.value = selectedCategoryIds.value.filter(cid => cid !== id);
|
||||
} else {
|
||||
selectedCategoryIds.value.push(id);
|
||||
}
|
||||
};
|
||||
|
||||
// ==========================================
|
||||
// 4. จัดการข้อมูลคอร์ส (Courses)
|
||||
// ==========================================
|
||||
|
|
@ -151,311 +169,257 @@ const filteredCourses = computed(() => {
|
|||
|
||||
return result;
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// 6. User & Helpers
|
||||
// ==========================================
|
||||
const { currentUser } = useAuth();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="p-6 max-w-[1400px] mx-auto">
|
||||
|
||||
|
||||
<!-- CATALOG VIEW: Browse courses -->
|
||||
<div v-if="!showDetail">
|
||||
<!-- Search & Filters Header -->
|
||||
<div
|
||||
class="flex justify-between items-center mb-6"
|
||||
style="flex-wrap: wrap; gap: 16px"
|
||||
>
|
||||
<h1 class="text-[28px] font-bold text-slate-900 dark:text-white">
|
||||
{{ $t('discovery.title') }}
|
||||
</h1>
|
||||
<div class="flex gap-3" style="flex-wrap: wrap">
|
||||
|
||||
<!-- Top Header Area -->
|
||||
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
|
||||
<!-- Title -->
|
||||
<h2 class="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
รายการคอร์สทั้งหมด
|
||||
</h2>
|
||||
|
||||
<!-- Right Side: Search & Sort -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Search Input -->
|
||||
<div class="relative">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="input-field text-slate-900 dark:text-white bg-white dark:bg-slate-800 placeholder:text-slate-500"
|
||||
:placeholder="$t('discovery.searchPlaceholder')"
|
||||
style="padding-left: 36px; width: 240px"
|
||||
/>
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
class="pl-4 pr-10 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:outline-none focus:border-slate-400 w-full md:w-64 text-sm"
|
||||
placeholder="ค้นหาคอร์ส..."
|
||||
/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="absolute right-3 top-2.5 h-4 w-4 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Sort Dropdown (Dummy) -->
|
||||
<div class="relative">
|
||||
<select class="appearance-none pl-4 pr-10 py-2 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 text-sm focus:outline-none focus:border-slate-400 cursor-pointer">
|
||||
<option>เรียงตาม: ล่าสุด</option>
|
||||
<option>ราคา: ต่ำไปสูง</option>
|
||||
<option>ราคา: สูงไปต่ำ</option>
|
||||
</select>
|
||||
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Sorting Select -->
|
||||
<select
|
||||
class="input-field bg-white dark:bg-slate-800"
|
||||
style="width: auto; color: #0f172a"
|
||||
>
|
||||
<option style="color: #0f172a">{{ $t('discovery.sortRecent') }}</option>
|
||||
<option style="color: #0f172a">{{ $t('discovery.sortPopular') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Grid Layout -->
|
||||
<div class="grid-12">
|
||||
<!-- Sidebar Filters -->
|
||||
<div class="col-span-3">
|
||||
<div class="card">
|
||||
<div class="mb-6">
|
||||
<div
|
||||
class="flex items-center justify-between mb-4 cursor-pointer"
|
||||
@click="isCategoryOpen = !isCategoryOpen"
|
||||
>
|
||||
<h4 class="text-lg font-bold text-slate-900 dark:text-white">
|
||||
{{ $t('discovery.categoryTitle') }} ({{ categories.length }})
|
||||
</h4>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5 text-slate-400 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': !isCategoryOpen }"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
<!-- Main Layout: Sidebar + Grid -->
|
||||
<div class="flex flex-col lg:flex-row gap-8 items-start">
|
||||
|
||||
<!-- LEFT SIDEBAR: Category Filter -->
|
||||
<div class="w-full lg:w-64 flex-shrink-0 sticky top-24">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 overflow-hidden">
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
:label="`หมวดหมู่ (${selectedCategoryIds.length})`"
|
||||
class="font-bold text-slate-800 dark:text-white"
|
||||
header-class="bg-white dark:bg-slate-800"
|
||||
default-opened
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M5 15l7-7 7 7"
|
||||
<q-list class="bg-white dark:bg-slate-800 border-t border-slate-100 dark:border-slate-700">
|
||||
<q-item
|
||||
v-for="cat in (showAllCategories ? categories : categories.slice(0, 4))"
|
||||
:key="cat.id"
|
||||
tag="label"
|
||||
clickable
|
||||
v-ripple
|
||||
dense
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-checkbox v-model="selectedCategoryIds" :val="cat.id" color="primary" dense />
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label class="text-sm font-medium text-slate-700 dark:text-slate-300">{{ getLocalizedText(cat.name) }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<!-- Show More/Less Button -->
|
||||
<q-item
|
||||
v-if="categories.length > 4"
|
||||
clickable
|
||||
v-ripple
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
class="text-blue-600 dark:text-blue-400 font-bold text-sm"
|
||||
>
|
||||
<q-item-section>
|
||||
<div class="flex items-center gap-1">
|
||||
{{ showAllCategories ? 'แสดงน้อยลง' : 'แสดงเพิ่มเติม' }}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" :class="showAllCategories ? 'rotate-180' : ''">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</div>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-expansion-item>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT CONTENT: Course Grid -->
|
||||
<div class="flex-1 w-full">
|
||||
<div v-if="filteredCourses.length > 0" class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
<CourseCard
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
:title="course.title"
|
||||
:price="course.price"
|
||||
:description="course.description"
|
||||
:rating="course.rating"
|
||||
:lessons="course.lessons"
|
||||
:image="course.thumbnail_url"
|
||||
show-view-details
|
||||
@view-details="selectCourse(course.id)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div v-show="isCategoryOpen" class="flex flex-col gap-1">
|
||||
<div
|
||||
v-for="cat in visibleCategories"
|
||||
:key="cat.id"
|
||||
class="flex items-center justify-between py-3 border-b border-slate-100 dark:border-slate-700/50 group cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 -mx-4 px-4 transition-colors"
|
||||
>
|
||||
<label
|
||||
class="flex items-center gap-3 text-slate-700 dark:text-slate-300 cursor-pointer w-full"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="cat.id"
|
||||
v-model="selectedCategoryIds"
|
||||
class="w-4 h-4 rounded border-slate-300 text-primary focus:ring-primary"
|
||||
/>
|
||||
{{ getLocalizedText(cat.name) }}
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
class="text-primary text-sm mt-4 font-medium hover:underline flex items-center gap-1"
|
||||
@click="showAllCategories = !showAllCategories"
|
||||
>
|
||||
{{ showAllCategories ? $t('discovery.showLess') : $t('discovery.showMore') }}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-4 w-4 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': showAllCategories }"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-else
|
||||
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"
|
||||
>
|
||||
<div class="text-6xl mb-4">🔍</div>
|
||||
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">{{ $t('discovery.emptyTitle') }}</h3>
|
||||
<p class="text-slate-500 dark:text-slate-400 text-center max-w-md">
|
||||
{{ $t('discovery.emptyDesc') }}
|
||||
</p>
|
||||
<button class="mt-6 font-bold text-blue-600 hover:underline" @click="searchQuery = ''; selectedCategoryIds = []">
|
||||
{{ $t('discovery.showAll') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Course List -->
|
||||
<div class="col-span-9" style="min-width: 0">
|
||||
<div class="course-grid">
|
||||
<CourseCard
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
:title="course.title"
|
||||
:price="course.price"
|
||||
:description="course.description"
|
||||
:rating="course.rating"
|
||||
:lessons="course.lessons"
|
||||
:image="course.thumbnail_url"
|
||||
show-view-details
|
||||
@view-details="selectCourse(course.id)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div
|
||||
v-if="filteredCourses.length === 0"
|
||||
class="empty-state"
|
||||
style="grid-column: 1 / -1"
|
||||
>
|
||||
<h3 class="empty-state-title">{{ $t('discovery.emptyTitle') }}</h3>
|
||||
<p class="empty-state-description">
|
||||
{{ $t('discovery.emptyDesc') }}
|
||||
</p>
|
||||
<button class="btn btn-secondary" @click="searchQuery = ''">
|
||||
{{ $t('discovery.showAll') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Pagination / Load More -->
|
||||
<div class="load-more-wrap">
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
style="
|
||||
border-color: #64748b;
|
||||
color: white;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
"
|
||||
>
|
||||
{{ $t('discovery.loadMore') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- COURSE DETAIL VIEW: Detailed information about a specific course -->
|
||||
<div v-else>
|
||||
<button
|
||||
@click="showDetail = false"
|
||||
class="btn btn-secondary mb-6 inline-flex items-center gap-2"
|
||||
class="mb-6 inline-flex items-center gap-2 text-slate-500 hover:text-slate-900 dark:hover:text-white transition-colors font-medium"
|
||||
>
|
||||
<span>←</span> {{ $t('discovery.backToCatalog') }}
|
||||
</button>
|
||||
|
||||
<div v-if="isLoadingDetail" 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-if="selectedCourse" class="grid-12">
|
||||
<div v-else-if="selectedCourse" class="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
<!-- Main Content (Left Column) -->
|
||||
<div class="col-span-8">
|
||||
<div class="lg:col-span-8">
|
||||
<!-- Hero Video Placeholder -->
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: var(--neutral-900);
|
||||
border-radius: var(--radius-xl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
border: 1px solid var(--border-color);
|
||||
overflow: hidden;
|
||||
"
|
||||
class="w-full aspect-video bg-slate-900 rounded-3xl overflow-hidden relative shadow-lg mb-8 group"
|
||||
>
|
||||
<img
|
||||
v-if="selectedCourse.thumbnail_url"
|
||||
:src="selectedCourse.thumbnail_url"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-50"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-60 group-hover:opacity-40 transition-opacity"
|
||||
/>
|
||||
<!-- Play Button -->
|
||||
<div
|
||||
class="relative z-10"
|
||||
style="
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: var(--primary);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 15px solid transparent;
|
||||
border-bottom: 15px solid transparent;
|
||||
border-left: 25px solid white;
|
||||
margin-left: 6px;
|
||||
"
|
||||
/>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-20 h-20 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center group-hover:scale-110 transition-transform cursor-pointer">
|
||||
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-xl">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600 ml-1" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="text-[32px] font-bold mb-4 text-slate-900 dark:text-white">
|
||||
<h1 class="text-3xl md:text-4xl font-bold mb-4 text-slate-900 dark:text-white tracking-tight">
|
||||
{{ getLocalizedText(selectedCourse.title) }}
|
||||
</h1>
|
||||
<p
|
||||
class="text-slate-700 dark:text-slate-400 mb-6"
|
||||
style="font-size: 1.1em; line-height: 1.7"
|
||||
>
|
||||
<p class="text-slate-600 dark:text-slate-400 text-lg leading-relaxed mb-8">
|
||||
{{ getLocalizedText(selectedCourse.description) }}
|
||||
</p>
|
||||
|
||||
<!-- Course Syllabus / Outline (Dynamic) -->
|
||||
<div class="card" v-if="selectedCourse.chapters && selectedCourse.chapters.length > 0">
|
||||
<h3 class="font-bold mb-4 text-slate-900 dark:text-white">
|
||||
{{ $t('course.courseContent') }}
|
||||
<!-- Course Syllabus -->
|
||||
<div class="bg-white dark:bg-slate-800 rounded-3xl p-8 shadow-sm border border-slate-100 dark:border-slate-700/50">
|
||||
<h3 class="text-xl font-bold mb-6 text-slate-900 dark:text-white flex items-center gap-2">
|
||||
<span class="w-1 h-6 bg-blue-500 rounded-full"></span>
|
||||
{{ $t('course.courseContent') }}
|
||||
</h3>
|
||||
<div v-for="chapter in selectedCourse.chapters" :key="chapter.id" class="mb-4">
|
||||
<div
|
||||
class="flex justify-between p-4 rounded mb-2"
|
||||
style="background: #f3f4f6; border: 1px solid #e5e7eb"
|
||||
>
|
||||
<span class="font-bold text-slate-900 dark:text-slate-900"
|
||||
>{{ getLocalizedText(chapter.title) }}</span
|
||||
>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400"
|
||||
>{{ chapter.lessons ? chapter.lessons.length : 0 }} {{ $t('course.lessons') }}</span
|
||||
>
|
||||
</div>
|
||||
<div style="padding-left: 16px" v-if="chapter.lessons">
|
||||
<div
|
||||
v-for="lesson in chapter.lessons"
|
||||
:key="lesson.id"
|
||||
class="flex justify-between py-2 border-b"
|
||||
style="border-color: var(--neutral-100)"
|
||||
>
|
||||
<span class="text-sm text-slate-700 dark:text-slate-300">{{ getLocalizedText(lesson.title) }}</span>
|
||||
<span class="text-sm text-slate-600 dark:text-slate-400"
|
||||
>{{ lesson.duration_minutes || 0 }}:00</span
|
||||
>
|
||||
<div class="space-y-4">
|
||||
<div v-for="(chapter, index) in selectedCourse.chapters" :key="chapter.id" class="border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden">
|
||||
<div class="bg-slate-50 dark:bg-slate-800/80 p-4 flex justify-between items-center cursor-pointer">
|
||||
<div class="font-bold text-slate-800 dark:text-slate-200">
|
||||
<span class="opacity-50 mr-2">Chapter {{ index + 1 }}</span>
|
||||
{{ getLocalizedText(chapter.title) }}
|
||||
</div>
|
||||
<span class="text-xs font-bold px-3 py-1 bg-white dark:bg-slate-700 rounded-full border border-slate-200 dark:border-slate-600">
|
||||
{{ chapter.lessons ? chapter.lessons.length : 0 }} Lessons
|
||||
</span>
|
||||
</div>
|
||||
<!-- Lessons -->
|
||||
<div class="divide-y divide-slate-100 dark:divide-slate-700/50 bg-white dark:bg-slate-800">
|
||||
<div v-for="(lesson, lIndex) in chapter.lessons" :key="lesson.id" class="p-4 flex justify-between items-center hover:bg-slate-50 dark:hover:bg-slate-700/30 transition-colors">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-[10px] font-bold text-slate-500">
|
||||
{{ lIndex + 1 }}
|
||||
</div>
|
||||
<span class="text-slate-700 dark:text-slate-300 font-medium text-sm">{{ getLocalizedText(lesson.title) }}</span>
|
||||
</div>
|
||||
<span class="text-xs text-slate-400">{{ lesson.duration_minutes || 0 }}:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar (Right Column): Sticky CTA -->
|
||||
<div class="col-span-4">
|
||||
<div class="card" style="position: sticky; top: 88px">
|
||||
<div class="mb-6">
|
||||
<span
|
||||
class="text-sm text-slate-600 dark:text-slate-400"
|
||||
style="text-decoration: line-through"
|
||||
></span
|
||||
>
|
||||
<h2
|
||||
class="text-primary font-bold"
|
||||
style="font-size: 32px; margin: 0"
|
||||
>
|
||||
<!-- Sidebar (Right Column) -->
|
||||
<div class="lg:col-span-4">
|
||||
<div class="bg-white dark:bg-slate-800 rounded-3xl p-6 shadow-lg border border-slate-100 dark:border-slate-700 sticky top-24">
|
||||
<div class="mb-8 text-center bg-slate-50 dark:bg-slate-900/50 rounded-2xl p-6 border border-slate-100 dark:border-slate-700">
|
||||
<div class="text-sm text-slate-500 mb-1 font-medium">{{ selectedCourse.price ? 'ราคาคอร์ส' : 'ราคา' }}</div>
|
||||
<h2 class="text-4xl font-black text-blue-600 dark:text-blue-400">
|
||||
{{ selectedCourse.price || 'ฟรี' }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="handleEnroll(selectedCourse.id)"
|
||||
class="btn btn-primary w-full mb-4 text-white"
|
||||
style="height: 48px; font-size: 16px"
|
||||
class="w-full py-4 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold text-lg shadow-lg hover:shadow-blue-500/30 hover:scale-[1.02] transform transition-all active:scale-95 disabled:opacity-70 disabled:cursor-not-allowed mb-4 flex items-center justify-center gap-2"
|
||||
:disabled="isEnrolling"
|
||||
>
|
||||
<span v-if="isEnrolling" class="spinner-border animate-spin inline-block w-4 h-4 border-2 rounded-full mr-2"></span>
|
||||
<span v-if="isEnrolling" class="block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
|
||||
{{ $t('course.enrollNow') }}
|
||||
</button>
|
||||
|
||||
<div class="text-sm text-slate-600 dark:text-slate-400 mb-4">
|
||||
<div
|
||||
class="flex justify-between py-2 border-b"
|
||||
style="border-color: var(--neutral-100)"
|
||||
>
|
||||
<span>{{ $t('course.certificate') }}</span>
|
||||
<span class="font-bold">{{ selectedCourse.have_certificate ? $t('course.available') : '-' }}</span>
|
||||
</div>
|
||||
<div class="text-sm space-y-3 pt-4 border-t border-slate-100 dark:border-slate-700">
|
||||
<div class="flex justify-between text-slate-600 dark:text-slate-400">
|
||||
<span>{{ $t('course.certificate') }}</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">{{ selectedCourse.have_certificate ? 'มีใบประกาศฯ' : 'ไม่มี' }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-slate-600 dark:text-slate-400">
|
||||
<span>ผู้สอน</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">Professional Instructor</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-slate-600 dark:text-slate-400">
|
||||
<span>ระดับ</span>
|
||||
<span class="font-bold text-slate-900 dark:text-white">ทุกระดับ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -463,3 +427,4 @@ const filteredCourses = computed(() => {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -238,233 +238,142 @@ onBeforeUnmount(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="learning-shell font-main antialiased selection:bg-blue-500/30 dark:!bg-[#0F172A] dark:!text-slate-200 transition-colors">
|
||||
<!-- Header: Custom top bar for learning context -->
|
||||
<header class="learning-header px-2 md:px-4 h-14 md:h-[56px] border-b border-slate-200 dark:border-white/5 flex items-center justify-between gap-2 md:gap-4 dark:!bg-slate-800 transition-colors">
|
||||
<div class="flex items-center gap-1 md:gap-6 min-w-0 flex-1">
|
||||
<!-- Mobile Sidebar Toggle -->
|
||||
<button class="md:hidden text-slate-900 dark:text-white p-2 hover:bg-slate-100 dark:hover:bg-white/5 rounded-lg flex-shrink-0 transition-colors" @click="toggleSidebar">
|
||||
<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 6h16M4 12h16M4 18h16" /></svg>
|
||||
</button>
|
||||
<!-- Back Navigation -->
|
||||
<NuxtLink to="/dashboard/my-courses" class="text-slate-700 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors flex items-center gap-2 flex-shrink-0 p-2 md:p-0">
|
||||
<span class="text-lg md:text-base">←</span>
|
||||
<span class="hidden md:inline text-[11px] font-bold">กลับไปหน้าหลัก</span>
|
||||
</NuxtLink>
|
||||
<div class="w-[1px] h-4 bg-slate-200 dark:bg-white/10 hidden md:block flex-shrink-0"/>
|
||||
<h1 class="text-[13px] md:text-sm font-black text-slate-900 dark:text-white tracking-tight truncate min-w-0 pr-2">
|
||||
{{ courseData ? getLocalizedText(courseData.course.title) : 'กำลังโหลด...' }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<!-- Right Header Actions (Progress) -->
|
||||
<div class="flex items-center gap-2 md:gap-10 pr-2 md:pr-0">
|
||||
<!-- Progress bar removed as it was static/mock data -->
|
||||
</div>
|
||||
</header>
|
||||
<q-layout view="hHh LpR lFf" class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 font-inter">
|
||||
|
||||
<!-- Header -->
|
||||
<q-header bordered class="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-white/5 text-slate-900 dark:text-white h-14">
|
||||
<q-toolbar>
|
||||
<q-btn flat round dense icon="menu" class="lg:hidden mr-2" @click="toggleSidebar" />
|
||||
|
||||
<q-btn flat dense no-caps icon="arrow_back" label="กลับไปหน้าหลัก" to="/dashboard/my-courses" class="text-slate-600 dark:text-slate-300 mobile-hide-label" />
|
||||
|
||||
<q-toolbar-title class="text-sm font-bold text-center lg:text-left truncate">
|
||||
{{ courseData ? getLocalizedText(courseData.course.title) : 'กำลังโหลด...' }}
|
||||
</q-toolbar-title>
|
||||
|
||||
<!-- Sidebar: Course Curriculum list -->
|
||||
<aside class="learning-sidebar dark:!bg-gray-900 dark:!border-r-white/5 transition-colors" :class="{ 'open': sidebarOpen }">
|
||||
<div class="py-2" v-if="courseData">
|
||||
<!-- Chapters & Lessons List -->
|
||||
<div v-for="chapter in courseData.chapters" :key="chapter.id" class="mt-4">
|
||||
<div class="chapter-header px-4 py-2 dark:!bg-slate-900 dark:!text-white dark:!border-b-white/5">
|
||||
{{ getLocalizedText(chapter.title) }}
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Right actions -->
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
|
||||
<!-- Sidebar (Curriculum) -->
|
||||
<q-drawer
|
||||
v-model="sidebarOpen"
|
||||
show-if-above
|
||||
bordered
|
||||
side="left"
|
||||
:width="320"
|
||||
:breakpoint="1024"
|
||||
class="bg-white dark:bg-slate-900"
|
||||
>
|
||||
<div v-if="courseData" class="h-full scroll">
|
||||
<q-list class="pb-10">
|
||||
<template v-for="chapter in courseData.chapters" :key="chapter.id">
|
||||
<q-item-label header class="bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 font-bold sticky top-0 z-10 border-b dark:border-white/5 text-xs py-3">
|
||||
{{ getLocalizedText(chapter.title) }}
|
||||
</q-item-label>
|
||||
|
||||
<q-item
|
||||
v-for="lesson in chapter.lessons"
|
||||
:key="lesson.id"
|
||||
clickable
|
||||
v-ripple
|
||||
:active="currentLesson?.id === lesson.id"
|
||||
active-class="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-200 font-medium"
|
||||
class="border-b border-gray-50 dark:border-white/5"
|
||||
@click="!lesson.is_locked && handleLessonSelect(lesson.id)"
|
||||
:disable="lesson.is_locked"
|
||||
>
|
||||
<q-item-section avatar v-if="lesson.is_locked">
|
||||
<q-icon name="lock" size="xs" color="grey" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label class="text-xs md:text-sm line-clamp-2">
|
||||
{{ getLocalizedText(lesson.title) }}
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section side>
|
||||
<q-icon v-if="lesson.progress?.is_completed" name="check_circle" color="positive" size="xs" />
|
||||
<q-icon v-else-if="currentLesson?.id === lesson.id" name="play_circle" color="primary" size="xs" />
|
||||
<q-icon v-else name="radio_button_unchecked" color="grey-4" size="xs" />
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
</q-list>
|
||||
</div>
|
||||
<div v-else-if="isLoading" class="p-6 text-center text-slate-500">
|
||||
<q-spinner color="primary" size="2em" />
|
||||
<div class="mt-2 text-xs">กำลังโหลดเนื้อหา...</div>
|
||||
</div>
|
||||
</q-drawer>
|
||||
|
||||
<!-- Main Content -->
|
||||
<q-page-container class="bg-white dark:bg-slate-900">
|
||||
<q-page class="flex flex-col h-full bg-slate-50 dark:bg-[#0B0F1A]">
|
||||
<!-- Video Player & Content Area -->
|
||||
<!-- Note: Using existing logic but wrapped -->
|
||||
<div class="w-full max-w-7xl mx-auto p-4 md:p-6 flex-grow">
|
||||
<!-- Video Player Component Placeholder logic -->
|
||||
<div v-if="currentLesson" class="bg-black rounded-xl overflow-hidden shadow-lg mb-6 aspect-video relative group">
|
||||
<video
|
||||
ref="videoRef"
|
||||
v-if="videoSrc"
|
||||
:src="videoSrc"
|
||||
class="w-full h-full object-contain"
|
||||
@click="togglePlay"
|
||||
@timeupdate="updateProgress"
|
||||
@loadedmetadata="onVideoMetadataLoaded"
|
||||
@ended="onVideoEnded"
|
||||
/>
|
||||
<div v-else class="flex items-center justify-center h-full text-white/50 bg-slate-900">
|
||||
<div class="text-center">
|
||||
<q-icon name="article" size="xl" />
|
||||
<p class="mt-2">บทเรียนนี้เป็นเอกสารประกอบการเรียน</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Custom Controls Overlay (Simplified) -->
|
||||
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent transition-opacity opacity-0 group-hover:opacity-100" v-if="videoSrc">
|
||||
<div class="flex items-center gap-4 text-white">
|
||||
<q-btn flat round dense :icon="isPlaying ? 'pause' : 'play_arrow'" @click.stop="togglePlay" />
|
||||
<div class="relative flex-grow h-1 bg-white/30 rounded cursor-pointer" @click="seek">
|
||||
<div class="absolute top-0 left-0 h-full bg-blue-500 rounded" :style="{ width: videoProgress + '%' }"></div>
|
||||
</div>
|
||||
<span class="text-xs font-mono">{{ currentTimeDisplay }} / {{ durationDisplay }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="lesson in chapter.lessons"
|
||||
:key="lesson.id"
|
||||
class="lesson-item px-4 dark:!text-slate-300 dark:!border-b-white/5 hover:dark:!bg-white/5 hover:dark:!text-white transition-colors"
|
||||
:class="{
|
||||
'active-lesson': currentLesson?.id === lesson.id,
|
||||
'completed': lesson.progress?.is_completed,
|
||||
'locked': lesson.is_locked
|
||||
}"
|
||||
@click="!lesson.is_locked && handleLessonSelect(lesson.id)"
|
||||
>
|
||||
<div class="flex items-center gap-2 overflow-hidden">
|
||||
<span class="flex-shrink-0 text-slate-400 text-xs" v-if="lesson.is_locked">🔒</span>
|
||||
<span class="text-[12px] font-medium tracking-tight truncate pr-4">
|
||||
{{ getLocalizedText(lesson.title) }}
|
||||
</span>
|
||||
</div>
|
||||
<span class="icon-status flex-shrink-0" :class="{ 'text-emerald-500': lesson.progress?.is_completed, 'text-blue-500': currentLesson?.id === lesson.id }">
|
||||
<span v-if="lesson.progress?.is_completed">✓</span>
|
||||
<span v-else-if="currentLesson?.id === lesson.id">▶</span>
|
||||
</span>
|
||||
|
||||
<!-- Lesson Info -->
|
||||
<div v-if="currentLesson" class="bg-white dark:bg-slate-800 p-6 rounded-2xl shadow-sm border border-slate-100 dark:border-white/5">
|
||||
<h1 class="text-2xl font-bold mb-2">{{ getLocalizedText(currentLesson.title) }}</h1>
|
||||
<p class="text-slate-500 dark:text-slate-400" v-if="currentLesson.description">{{ currentLesson.description }}</p>
|
||||
<div class="mt-6 prose dark:prose-invert max-w-none">
|
||||
<!-- Content description or attachments here -->
|
||||
<div v-if="!videoSrc" class="p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-dashed border-slate-300 dark:border-slate-700 text-center">
|
||||
<p>เนื้อหาบทเรียน</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="isLoading" class="p-6 text-center text-slate-500 text-sm">
|
||||
กำลังโหลดเนื้อหา...
|
||||
</div>
|
||||
</aside>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
|
||||
<!-- Sidebar Overlay for mobile -->
|
||||
<div v-if="sidebarOpen" class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[85] md:hidden" @click="toggleSidebar"/>
|
||||
|
||||
|
||||
</div>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.learning-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 320px 1fr;
|
||||
grid-template-rows: 56px 1fr;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
background: #ffffff;
|
||||
color: #1e293b;
|
||||
transition: background 0.2s, color 0.2s;
|
||||
<style>
|
||||
.mobile-hide-label .q-btn__content span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:global(.dark) .learning-shell {
|
||||
background: #0F172A;
|
||||
color: #F8FAFC;
|
||||
}
|
||||
|
||||
.learning-header {
|
||||
grid-column: 1 / -1;
|
||||
background: #ffffff;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 100;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) .learning-header {
|
||||
background: #1e293b;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.learning-sidebar {
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid #e2e8f0;
|
||||
overflow-y: auto;
|
||||
z-index: 90;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) .learning-sidebar {
|
||||
background: #111827;
|
||||
border-right-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
background: #ffffff;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
:global(.dark) .main-container {
|
||||
background: #0B0F1A;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.main-container {
|
||||
grid-column: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.lesson-item {
|
||||
padding: 14px 24px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: all 0.2s;
|
||||
color: #000000;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
}
|
||||
.lesson-item:hover {
|
||||
background-color: #f1f5f9;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
:global(.dark) .lesson-item {
|
||||
color: #e2e8f0;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.01);
|
||||
}
|
||||
|
||||
:global(.dark) .lesson-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.active-tab {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
}
|
||||
.active-lesson {
|
||||
background-color: #f3f4f6;
|
||||
color: #000000;
|
||||
box-shadow: inset 4px 0 0 #3B82F6;
|
||||
}
|
||||
|
||||
:global(.dark) .active-lesson {
|
||||
background-color: #1E293B;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.chapter-header {
|
||||
background: #f3f4f6;
|
||||
color: #000000;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
border-bottom: 1px solid #d1d5db;
|
||||
transition: all 0.2s;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
:global(.dark) .chapter-header {
|
||||
background: #0F172A;
|
||||
color: #ffffff;
|
||||
border-bottom-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.learning-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.4s ease-out forwards;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.learning-shell { grid-template-columns: 1fr; }
|
||||
.learning-sidebar {
|
||||
position: fixed;
|
||||
left: -320px;
|
||||
top: 56px;
|
||||
bottom: 0;
|
||||
width: 320px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.learning-sidebar.open { transform: translateX(320px); }
|
||||
@media (min-width: 768px) {
|
||||
.mobile-hide-label .q-btn__content span {
|
||||
display: inline;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -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