031ca5c984
All checks were successful
Build and Deploy Frontend Management to Dev Server / Build Frontend Management Docker Image (push) Successful in 46s
Build and Deploy Frontend Management to Dev Server / Deploy E-learning Frontend Management to Dev Server (push) Successful in 6s
Build and Deploy Frontend Management to Dev Server / Notify Deployment Status (push) Successful in 1s
119 lines
3.9 KiB
Vue
119 lines
3.9 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<!-- Sidebar -->
|
|
<aside class="fixed left-0 top-0 h-screen w-64 bg-white shadow-lg">
|
|
<div class="p-6">
|
|
<h2 class="text-xl font-bold text-primary-600">E-Learning</h2>
|
|
<p class="text-sm text-gray-500">Admin Panel</p>
|
|
</div>
|
|
|
|
<nav class="px-4">
|
|
<NuxtLink
|
|
to="/admin"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
|
|
active-class="bg-primary-500 text-white hover:bg-primary-600"
|
|
>
|
|
<q-icon name="dashboard" size="24px" />
|
|
<span>Dashboard</span>
|
|
</NuxtLink>
|
|
|
|
<!-- <NuxtLink
|
|
to="/admin/courses"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
|
|
active-class="bg-primary-500 text-white hover:bg-primary-600"
|
|
>
|
|
<q-icon name="school" size="24px" />
|
|
<span>จัดการหลักสูตร</span>
|
|
</NuxtLink> -->
|
|
|
|
<NuxtLink
|
|
to="/admin/courses/pending"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
|
|
active-class="bg-primary-500 text-white hover:bg-primary-600"
|
|
>
|
|
<q-icon name="pending_actions" size="24px" />
|
|
<span>คอร์สรออนุมัติ</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/admin/users"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
|
|
active-class="bg-primary-500 text-white hover:bg-primary-600"
|
|
>
|
|
<q-icon name="people" size="24px" />
|
|
<span>จัดการผู้ใช้</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/admin/categories"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
|
|
active-class="bg-primary-500 text-white hover:bg-primary-600"
|
|
>
|
|
<q-icon name="folder" size="24px" />
|
|
<span>หมวดหมู่</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/admin/recommended-courses"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
|
|
active-class="bg-primary-500 text-white hover:bg-primary-600"
|
|
>
|
|
<q-icon name="recommend" size="24px" />
|
|
<span>คอร์สแนะนำ</span>
|
|
</NuxtLink>
|
|
|
|
<NuxtLink
|
|
to="/admin/audit-log"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-primary-100 transition mb-2"
|
|
active-class="bg-primary-500 text-white hover:bg-primary-600"
|
|
>
|
|
<q-icon name="settings" size="24px" />
|
|
<span>Audit logs</span>
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 p-4 border-t">
|
|
<button
|
|
@click="handleLogout"
|
|
class="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 rounded-lg transition"
|
|
>
|
|
<q-icon name="logout" size="24px" />
|
|
<span>ออกจากระบบ</span>
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="ml-64 p-8">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useQuasar } from 'quasar';
|
|
|
|
const $q = useQuasar();
|
|
const authStore = useAuthStore();
|
|
const router = useRouter();
|
|
|
|
const handleLogout = () => {
|
|
$q.dialog({
|
|
title: 'ยืนยันออกจากระบบ',
|
|
message: 'คุณต้องการออกจากระบบหรือไม่?',
|
|
persistent: true,
|
|
ok: {
|
|
label: 'ออกจากระบบ',
|
|
color: 'negative',
|
|
flat: false
|
|
},
|
|
cancel: {
|
|
label: 'ยกเลิก',
|
|
flat: true
|
|
}
|
|
}).onOk(() => {
|
|
authStore.logout();
|
|
router.push('/login');
|
|
});
|
|
};
|
|
</script>
|