feat: Implement user authentication, admin user management, and role-based access control.
This commit is contained in:
Missez
parent
8a2ca592bc
commit
38648581ec
19 changed files with 1762 additions and 514 deletions
328
frontend_management/pages/admin/categories/index.vue
Normal file
328
frontend_management/pages/admin/categories/index.vue
Normal file
|
|
@ -0,0 +1,328 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-primary-600">จัดการหมวดหมู่</h1>
|
||||
<p class="text-gray-600 mt-1">จัดการหมวดหมู่หลักสูตรในระบบ</p>
|
||||
</div>
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="+ เพิ่มหมวดหมู่ใหม่"
|
||||
@click="openAddModal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Table Card -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-6">
|
||||
<h2 class="text-lg font-semibold text-primary-600 mb-4">รายการหมวดหมู่</h2>
|
||||
|
||||
<!-- Search -->
|
||||
<div class="mb-4" style="max-width: 400px">
|
||||
<q-input
|
||||
v-model="searchQuery"
|
||||
placeholder="ค้นหาหมวดหมู่..."
|
||||
outlined
|
||||
dense
|
||||
bg-color="grey-1"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<q-table
|
||||
:rows="filteredCategories"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
flat
|
||||
bordered
|
||||
>
|
||||
<!-- Name -->
|
||||
<template v-slot:body-cell-name="props">
|
||||
<q-td :props="props">
|
||||
<div class="font-medium">{{ props.row.name.th }}</div>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Description -->
|
||||
<template v-slot:body-cell-description="props">
|
||||
<q-td :props="props">
|
||||
<div class="text-gray-600">{{ props.row.description.th }}</div>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Date -->
|
||||
<template v-slot:body-cell-created_at="props">
|
||||
<q-td :props="props">
|
||||
{{ formatDate(props.row.created_at) }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template v-slot:body-cell-actions="props">
|
||||
<q-td :props="props">
|
||||
<div class="flex gap-2">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="edit"
|
||||
color="warning"
|
||||
@click="openEditModal(props.row)"
|
||||
/>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
icon="delete"
|
||||
color="negative"
|
||||
@click="confirmDelete(props.row)"
|
||||
/>
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
|
||||
<!-- Add/Edit Modal -->
|
||||
<q-dialog v-model="showModal" persistent>
|
||||
<q-card style="min-width: 500px">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-h6">{{ isEditing ? 'แก้ไขหมวดหมู่' : 'เพิ่มหมวดหมู่ใหม่' }}</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense @click="showModal = false" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<q-form @submit="handleSave">
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<q-input
|
||||
v-model="form.name.th"
|
||||
label="ชื่อ (ภาษาไทย)"
|
||||
outlined
|
||||
:rules="[val => !!val || 'กรุณากรอกชื่อ']"
|
||||
/>
|
||||
<q-input
|
||||
v-model="form.name.en"
|
||||
label="ชื่อ (English)"
|
||||
outlined
|
||||
:rules="[val => !!val || 'Please enter name']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
v-model="form.slug"
|
||||
label="Slug (URL)"
|
||||
outlined
|
||||
class="mb-4"
|
||||
hint="ใช้สำหรับ URL เช่น web-development"
|
||||
:rules="[val => !!val || 'กรุณากรอก slug']"
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="form.description.th"
|
||||
label="คำอธิบาย (ภาษาไทย)"
|
||||
type="textarea"
|
||||
outlined
|
||||
class="mb-4"
|
||||
autogrow
|
||||
/>
|
||||
|
||||
<q-input
|
||||
v-model="form.description.en"
|
||||
label="คำอธิบาย (English)"
|
||||
type="textarea"
|
||||
outlined
|
||||
class="mb-4"
|
||||
autogrow
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<q-btn
|
||||
flat
|
||||
label="ยกเลิก"
|
||||
color="grey-7"
|
||||
@click="showModal = false"
|
||||
/>
|
||||
<q-btn
|
||||
type="submit"
|
||||
:label="isEditing ? 'บันทึก' : 'เพิ่ม'"
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
/>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { adminService, type CategoryResponse } from '~/services/admin.service';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: ['auth', 'admin']
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
// Data
|
||||
const categories = ref<CategoryResponse[]>([]);
|
||||
const loading = ref(true);
|
||||
const searchQuery = ref('');
|
||||
const showModal = ref(false);
|
||||
const isEditing = ref(false);
|
||||
const saving = ref(false);
|
||||
const editingId = ref<number | null>(null);
|
||||
|
||||
// Form
|
||||
const form = ref({
|
||||
name: { th: '', en: '' },
|
||||
slug: '',
|
||||
description: { th: '', en: '' }
|
||||
});
|
||||
|
||||
// Table columns
|
||||
const columns = [
|
||||
{ name: 'id', label: 'ID', field: 'id', align: 'center' as const, style: 'width: 60px' },
|
||||
{ name: 'name', label: 'ชื่อหมวดหมู่', field: 'name', align: 'left' as const },
|
||||
{ name: 'description', label: 'คำอธิบาย', field: 'description', align: 'left' as const },
|
||||
{ name: 'created_at', label: 'วันที่สร้าง', field: 'created_at', align: 'center' as const },
|
||||
{ name: 'actions', label: 'การจัดการ', field: 'actions', align: 'center' as const, style: 'width: 120px' }
|
||||
];
|
||||
|
||||
// Computed
|
||||
const filteredCategories = computed(() => {
|
||||
if (!searchQuery.value) return categories.value;
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
return categories.value.filter(cat =>
|
||||
cat.name.th.toLowerCase().includes(query) ||
|
||||
cat.name.en.toLowerCase().includes(query)
|
||||
);
|
||||
});
|
||||
|
||||
// Methods
|
||||
const fetchCategories = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
categories.value = await adminService.getCategories();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'ไม่สามารถโหลดข้อมูลหมวดหมู่ได้',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
form.value = {
|
||||
name: { th: '', en: '' },
|
||||
slug: '',
|
||||
description: { th: '', en: '' }
|
||||
};
|
||||
editingId.value = null;
|
||||
isEditing.value = false;
|
||||
};
|
||||
|
||||
const openAddModal = () => {
|
||||
resetForm();
|
||||
showModal.value = true;
|
||||
};
|
||||
|
||||
const openEditModal = (category: CategoryResponse) => {
|
||||
isEditing.value = true;
|
||||
editingId.value = category.id;
|
||||
form.value = {
|
||||
name: { ...category.name },
|
||||
slug: category.slug,
|
||||
description: { ...category.description }
|
||||
};
|
||||
showModal.value = true;
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
saving.value = true;
|
||||
try {
|
||||
if (isEditing.value && editingId.value) {
|
||||
await adminService.updateCategory(editingId.value, {
|
||||
id: editingId.value,
|
||||
...form.value
|
||||
});
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'แก้ไขหมวดหมู่สำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
} else {
|
||||
await adminService.createCategory({
|
||||
...form.value,
|
||||
created_by: parseInt(authStore.user?.id || '0')
|
||||
});
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'เพิ่มหมวดหมู่สำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
}
|
||||
showModal.value = false;
|
||||
fetchCategories();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'เกิดข้อผิดพลาด กรุณาลองใหม่',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDelete = (category: CategoryResponse) => {
|
||||
$q.dialog({
|
||||
title: 'ยืนยันการลบ',
|
||||
message: `คุณต้องการลบหมวดหมู่ "${category.name.th}" หรือไม่?`,
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(async () => {
|
||||
try {
|
||||
await adminService.deleteCategory(category.id);
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'ลบหมวดหมู่สำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
fetchCategories();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'เกิดข้อผิดพลาดในการลบ',
|
||||
position: 'top'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
fetchCategories();
|
||||
});
|
||||
</script>
|
||||
394
frontend_management/pages/admin/users/index.vue
Normal file
394
frontend_management/pages/admin/users/index.vue
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-2xl font-bold text-primary-600">จัดการผู้ใช้งาน</h1>
|
||||
<div class="flex gap-3">
|
||||
<q-btn
|
||||
outline
|
||||
color="red"
|
||||
label="ส่งออก Excel"
|
||||
icon="download"
|
||||
@click="exportExcel"
|
||||
/>
|
||||
<q-btn
|
||||
color="primary"
|
||||
label="+ เพิ่มผู้ใช้ใหม่"
|
||||
@click="showAddModal = true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter -->
|
||||
<div class="bg-white rounded-xl shadow-sm p-4 mb-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div class="md:col-span-3">
|
||||
<q-input
|
||||
v-model="searchQuery"
|
||||
placeholder="ค้นหาชื่อ, อีเมล, username..."
|
||||
outlined
|
||||
dense
|
||||
bg-color="grey-1"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</div>
|
||||
|
||||
<q-select
|
||||
v-model="filterRole"
|
||||
:options="roleOptions"
|
||||
outlined
|
||||
dense
|
||||
emit-value
|
||||
map-options
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 text-center">
|
||||
<div class="text-4xl font-bold text-primary-600">{{ stats.total.toLocaleString() }}</div>
|
||||
<div class="text-gray-500 mt-1">ผู้ใช้ทั้งหมด</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 text-center">
|
||||
<div class="text-4xl font-bold text-gray-700">{{ stats.admin }}</div>
|
||||
<div class="text-gray-500 mt-1">Admin</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 text-center">
|
||||
<div class="text-4xl font-bold text-gray-700">{{ stats.instructor }}</div>
|
||||
<div class="text-gray-500 mt-1">Instructor</div>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl shadow-sm p-6 text-center">
|
||||
<div class="text-4xl font-bold text-gray-700">{{ stats.student.toLocaleString() }}</div>
|
||||
<div class="text-gray-500 mt-1">Student</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Users Table -->
|
||||
<div class="bg-white rounded-xl shadow-sm overflow-hidden">
|
||||
<q-table
|
||||
:rows="filteredUsers"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
:loading="loading"
|
||||
flat
|
||||
:pagination="pagination"
|
||||
@update:pagination="pagination = $event"
|
||||
>
|
||||
<!-- User Info -->
|
||||
<template v-slot:body-cell-user="props">
|
||||
<q-td :props="props">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center">
|
||||
<q-icon name="person" color="primary" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium text-primary-600 hover:underline cursor-pointer">
|
||||
{{ getFullName(props.row) }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-500">{{ props.row.email }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Role Badge -->
|
||||
<template v-slot:body-cell-role="props">
|
||||
<q-td :props="props">
|
||||
<q-badge
|
||||
:color="getRoleBadgeColor(props.row.role.code)"
|
||||
:label="props.row.role.name.th"
|
||||
class="px-3 py-1"
|
||||
/>
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Date -->
|
||||
<template v-slot:body-cell-created_at="props">
|
||||
<q-td :props="props">
|
||||
{{ formatDate(props.row.created_at) }}
|
||||
</q-td>
|
||||
</template>
|
||||
|
||||
<!-- Actions -->
|
||||
<template v-slot:body-cell-actions="props">
|
||||
<q-td :props="props">
|
||||
<q-btn flat round dense icon="more_vert">
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item clickable v-close-popup @click="viewUser(props.row)">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="visibility" color="grey" />
|
||||
</q-item-section>
|
||||
<q-item-section>ดู</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-close-popup @click="changeRole(props.row)">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="swap_horiz" color="primary" />
|
||||
</q-item-section>
|
||||
<q-item-section>แก้ Role</q-item-section>
|
||||
</q-item>
|
||||
<q-separator />
|
||||
<q-item clickable v-close-popup @click="confirmDelete(props.row)">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="delete" color="negative" />
|
||||
</q-item-section>
|
||||
<q-item-section class="text-negative">ลบ</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-td>
|
||||
</template>
|
||||
</q-table>
|
||||
</div>
|
||||
|
||||
<!-- View User Modal -->
|
||||
<q-dialog v-model="showViewModal">
|
||||
<q-card style="min-width: 500px">
|
||||
<q-card-section class="row items-center q-pb-none">
|
||||
<div class="text-h6">รายละเอียดผู้ใช้</div>
|
||||
<q-space />
|
||||
<q-btn icon="close" flat round dense @click="showViewModal = false" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section v-if="selectedUser">
|
||||
<!-- Avatar & Name -->
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-20 h-20 bg-primary-100 rounded-full flex items-center justify-center text-3xl">
|
||||
<q-icon name="person" color="primary" size="40px" />
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xl font-bold text-gray-900">
|
||||
{{ selectedUser.profile.prefix?.th }}{{ selectedUser.profile.first_name }} {{ selectedUser.profile.last_name }}
|
||||
</div>
|
||||
<div class="text-gray-500">@{{ selectedUser.username }}</div>
|
||||
<q-badge :color="getRoleBadgeColor(selectedUser.role.code)" class="mt-1">
|
||||
{{ selectedUser.role.name.th }}
|
||||
</q-badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Grid -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<div class="text-sm text-gray-500">อีเมล</div>
|
||||
<div class="font-medium">{{ selectedUser.email }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-gray-500">เบอร์โทร</div>
|
||||
<div class="font-medium">{{ selectedUser.profile.phone || '-' }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-gray-500">วันที่ลงทะเบียน</div>
|
||||
<div class="font-medium">{{ formatDate(selectedUser.created_at) }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-sm text-gray-500">อัพเดทล่าสุด</div>
|
||||
<div class="font-medium">{{ formatDate(selectedUser.updated_at) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="ปิด" color="primary" @click="showViewModal = false" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQuasar } from 'quasar';
|
||||
import { adminService, type AdminUserResponse } from '~/services/admin.service';
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: ['auth', 'admin']
|
||||
});
|
||||
|
||||
const $q = useQuasar();
|
||||
|
||||
// Data
|
||||
const users = ref<AdminUserResponse[]>([]);
|
||||
const loading = ref(true);
|
||||
const searchQuery = ref('');
|
||||
const filterRole = ref<string | null>(null);
|
||||
const showAddModal = ref(false);
|
||||
const showViewModal = ref(false);
|
||||
const selectedUser = ref<AdminUserResponse | null>(null);
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
rowsPerPage: 10
|
||||
});
|
||||
|
||||
// Table columns
|
||||
const columns = [
|
||||
{ name: 'user', label: 'ผู้ใช้งาน', field: 'user', align: 'left' as const },
|
||||
{ name: 'role', label: 'บทบาท', field: 'role', align: 'center' as const },
|
||||
{ name: 'created_at', label: 'ลงทะเบียน', field: 'created_at', align: 'center' as const },
|
||||
{ name: 'actions', label: 'Actions', field: 'actions', align: 'center' as const }
|
||||
];
|
||||
|
||||
// Filter options
|
||||
const roleOptions = [
|
||||
{ label: 'บทบาททั้งหมด', value: null },
|
||||
{ label: 'Instructor', value: 'INSTRUCTOR' },
|
||||
{ label: 'Student', value: 'STUDENT' },
|
||||
{ label: 'Admin', value: 'ADMIN' }
|
||||
]
|
||||
|
||||
// Stats computed
|
||||
const stats = computed(() => {
|
||||
const total = users.value.length;
|
||||
const admin = users.value.filter(u => u.role.code === 'ADMIN').length;
|
||||
const instructor = users.value.filter(u => u.role.code === 'INSTRUCTOR').length;
|
||||
const student = users.value.filter(u => u.role.code === 'STUDENT').length;
|
||||
return { total, admin, instructor, student };
|
||||
});
|
||||
|
||||
// Filtered users
|
||||
const filteredUsers = computed(() => {
|
||||
let result = users.value;
|
||||
|
||||
if (searchQuery.value) {
|
||||
const query = searchQuery.value.toLowerCase();
|
||||
result = result.filter(user =>
|
||||
user.profile.first_name.toLowerCase().includes(query) ||
|
||||
user.profile.last_name.toLowerCase().includes(query) ||
|
||||
user.email.toLowerCase().includes(query) ||
|
||||
user.username.toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
if (filterRole.value) {
|
||||
result = result.filter(user => user.role.code === filterRole.value);
|
||||
}
|
||||
|
||||
return result;
|
||||
});
|
||||
|
||||
// Methods
|
||||
const fetchUsers = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
users.value = await adminService.getUsers();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'ไม่สามารถโหลดข้อมูลผู้ใช้ได้',
|
||||
position: 'top'
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const getFullName = (user: AdminUserResponse) => {
|
||||
const prefix = user.profile.prefix?.th || '';
|
||||
return `${prefix}${user.profile.first_name} ${user.profile.last_name}`;
|
||||
};
|
||||
|
||||
const getRoleBadgeColor = (roleCode: string) => {
|
||||
const colors: Record<string, string> = {
|
||||
ADMIN: 'red',
|
||||
INSTRUCTOR: 'orange',
|
||||
STUDENT: 'blue'
|
||||
};
|
||||
return colors[roleCode] || 'grey';
|
||||
};
|
||||
|
||||
const formatDate = (date: string) => {
|
||||
return new Date(date).toLocaleDateString('th-TH', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
const viewUser = (user: AdminUserResponse) => {
|
||||
selectedUser.value = user;
|
||||
showViewModal.value = true;
|
||||
};
|
||||
|
||||
const changeRole = (user: AdminUserResponse) => {
|
||||
const roleIds: Record<string, number> = {
|
||||
INSTRUCTOR: 1,
|
||||
STUDENT: 2,
|
||||
ADMIN: 3
|
||||
};
|
||||
|
||||
$q.dialog({
|
||||
title: 'เปลี่ยน Role',
|
||||
message: `เลือก Role ใหม่สำหรับ ${user.profile.first_name}`,
|
||||
options: {
|
||||
type: 'radio',
|
||||
model: roleIds[user.role.code],
|
||||
items: [
|
||||
{ label: 'Instructor', value: 1 },
|
||||
{ label: 'Student', value: 2 },
|
||||
{ label: 'Admin', value: 3 }
|
||||
]
|
||||
},
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(async (roleId: number) => {
|
||||
try {
|
||||
await adminService.updateUserRole(user.id, roleId);
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'เปลี่ยน Role สำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
fetchUsers();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'เกิดข้อผิดพลาดในการเปลี่ยน Role',
|
||||
position: 'top'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const confirmDelete = (user: AdminUserResponse) => {
|
||||
$q.dialog({
|
||||
title: 'ยืนยันการลบ',
|
||||
message: `คุณต้องการลบผู้ใช้ "${user.profile.first_name} ${user.profile.last_name}" หรือไม่?`,
|
||||
cancel: true,
|
||||
persistent: true
|
||||
}).onOk(async () => {
|
||||
try {
|
||||
await adminService.deleteUser(user.id);
|
||||
$q.notify({
|
||||
type: 'positive',
|
||||
message: 'ลบผู้ใช้สำเร็จ',
|
||||
position: 'top'
|
||||
});
|
||||
fetchUsers();
|
||||
} catch (error) {
|
||||
$q.notify({
|
||||
type: 'negative',
|
||||
message: 'เกิดข้อผิดพลาดในการลบผู้ใช้',
|
||||
position: 'top'
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const exportExcel = () => {
|
||||
$q.notify({
|
||||
type: 'info',
|
||||
message: 'กำลังส่งออกไฟล์ Excel...',
|
||||
position: 'top'
|
||||
});
|
||||
};
|
||||
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
fetchUsers();
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue