feat(dashboard): เพมสวนจดการ user
This commit is contained in:
admin
@@ -0,0 +1,38 @@
|
||||
// File: frontend/app/(protected)/admin/_components/confirm-delete-dialog.jsx
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function ConfirmDeleteDialog({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
title,
|
||||
description,
|
||||
onConfirm,
|
||||
isLoading,
|
||||
}) {
|
||||
return (
|
||||
<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{title}</AlertDialogTitle>
|
||||
<AlertDialogDescription>{description}</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={onConfirm} disabled={isLoading} className="bg-red-600 hover:bg-red-700">
|
||||
{isLoading ? 'Processing...' : 'Confirm'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
}
|
||||
146
frontend/app/(protected)/admin/_components/role-form-dialog.jsx
Normal file
146
frontend/app/(protected)/admin/_components/role-form-dialog.jsx
Normal file
@@ -0,0 +1,146 @@
|
||||
// File: frontend/app/(protected)/admin/_components/role-form-dialog.jsx
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
|
||||
export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSuccess }) {
|
||||
const [formData, setFormData] = useState({ name: '', description: '' });
|
||||
const [selectedPermissions, setSelectedPermissions] = useState(new Set());
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const isEditMode = !!role;
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (isEditMode) {
|
||||
setFormData({ name: role.name, description: role.description || '' });
|
||||
setSelectedPermissions(new Set(role.Permissions?.map(p => p.id) || []));
|
||||
} else {
|
||||
setFormData({ name: '', description: '' });
|
||||
setSelectedPermissions(new Set());
|
||||
}
|
||||
setError('');
|
||||
}
|
||||
}, [role, isOpen]);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const handlePermissionChange = (permissionId) => {
|
||||
setSelectedPermissions(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(permissionId)) {
|
||||
newSet.delete(permissionId);
|
||||
} else {
|
||||
newSet.add(permissionId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
if (isEditMode) {
|
||||
// ในโหมดแก้ไข เราจะอัปเดตสิทธิ์เสมอ
|
||||
await api.put(`/rbac/roles/${role.id}/permissions`, {
|
||||
permissionIds: Array.from(selectedPermissions)
|
||||
});
|
||||
// (Optional) อาจจะเพิ่มการแก้ไขชื่อ/description ของ role ที่นี่ด้วยก็ได้
|
||||
// await api.put(`/rbac/roles/${role.id}`, { name: formData.name, description: formData.description });
|
||||
} else {
|
||||
// ในโหมดสร้างใหม่
|
||||
const newRoleRes = await api.post('/rbac/roles', formData);
|
||||
// ถ้าสร้าง Role สำเร็จ และมีการเลือก Permission ไว้ ให้ทำการผูกสิทธิ์ทันที
|
||||
if (newRoleRes.data && selectedPermissions.size > 0) {
|
||||
await api.put(`/rbac/roles/${newRoleRes.data.id}/permissions`, {
|
||||
permissionIds: Array.from(selectedPermissions)
|
||||
});
|
||||
}
|
||||
}
|
||||
onSuccess();
|
||||
setIsOpen(false);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'An unexpected error occurred.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEditMode ? `Edit Permissions for ${role.name}` : 'Create New Role'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Select the permissions for this role.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="py-4 space-y-4">
|
||||
{!isEditMode && (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="name">Role Name</Label>
|
||||
<Input id="name" value={formData.name} onChange={handleInputChange} required />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Input id="description" value={formData.description} onChange={handleInputChange} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label>Permissions</Label>
|
||||
<ScrollArea className="h-60 w-full rounded-md border p-4 mt-1">
|
||||
<div className="space-y-2">
|
||||
{allPermissions.map(perm => (
|
||||
<div key={perm.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={`perm-${perm.id}`}
|
||||
checked={selectedPermissions.has(perm.id)}
|
||||
onCheckedChange={() => handlePermissionChange(perm.id)}
|
||||
/>
|
||||
<label htmlFor={`perm-${perm.id}`} className="text-sm font-medium leading-none">
|
||||
{perm.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red-500 text-center pb-2">{error}</p>}
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
172
frontend/app/(protected)/admin/_components/user-form-dialog.jsx
Normal file
172
frontend/app/(protected)/admin/_components/user-form-dialog.jsx
Normal file
@@ -0,0 +1,172 @@
|
||||
// File: frontend/app/(protected)/admin/users/_components/user-form-dialog.jsx
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
|
||||
const [formData, setFormData] = useState({});
|
||||
const [allRoles, setAllRoles] = useState([]);
|
||||
const [selectedRoles, setSelectedRoles] = useState(new Set());
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const isEditMode = !!user;
|
||||
|
||||
useEffect(() => {
|
||||
// ดึงข้อมูล Role ทั้งหมดมาเตรียมไว้
|
||||
const fetchRoles = async () => {
|
||||
try {
|
||||
const res = await api.get('/rbac/roles');
|
||||
setAllRoles(res.data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch roles', err);
|
||||
}
|
||||
};
|
||||
fetchRoles();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// เมื่อ user prop เปลี่ยน (เปิด dialog เพื่อแก้ไข) ให้ตั้งค่าฟอร์ม
|
||||
if (isEditMode) {
|
||||
setFormData({
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
first_name: user.first_name || '',
|
||||
last_name: user.last_name || '',
|
||||
is_active: user.is_active,
|
||||
});
|
||||
setSelectedRoles(new Set(user.Roles?.map(role => role.id) || []));
|
||||
} else {
|
||||
// ถ้าเป็นการสร้างใหม่ ให้เคลียร์ฟอร์ม
|
||||
setFormData({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
is_active: true,
|
||||
});
|
||||
setSelectedRoles(new Set());
|
||||
}
|
||||
setError('');
|
||||
}, [user, isOpen]);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const handleRoleChange = (roleId) => {
|
||||
setSelectedRoles(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(roleId)) {
|
||||
newSet.delete(roleId);
|
||||
} else {
|
||||
newSet.add(roleId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
const payload = { ...formData, roles: Array.from(selectedRoles) };
|
||||
|
||||
try {
|
||||
if (isEditMode) {
|
||||
await api.put(`/users/${user.id}`, payload);
|
||||
} else {
|
||||
await api.post('/users', payload);
|
||||
}
|
||||
onSuccess(); // บอกให้หน้าหลัก refresh ข้อมูล
|
||||
setIsOpen(false); // ปิด Dialog
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'An unexpected error occurred.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEditMode ? 'Edit User' : 'Create New User'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEditMode ? `Editing ${user.username}` : 'Fill in the details for the new user.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="username" className="text-right">Username</Label>
|
||||
<Input id="username" value={formData.username || ''} onChange={handleInputChange} className="col-span-3" required disabled={isEditMode} />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="email" className="text-right">Email</Label>
|
||||
<Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} className="col-span-3" required />
|
||||
</div>
|
||||
{!isEditMode && (
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="password" className="text-right">Password</Label>
|
||||
<Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} className="col-span-3" required />
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="first_name" className="text-right">First Name</Label>
|
||||
<Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} className="col-span-3" />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="last_name" className="text-right">Last Name</Label>
|
||||
<Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} className="col-span-3" />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="roles" className="text-right">Roles</Label>
|
||||
<div className="col-span-3 space-y-2">
|
||||
{allRoles.map(role => (
|
||||
<div key={role.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={`role-${role.id}`}
|
||||
checked={selectedRoles.has(role.id)}
|
||||
onCheckedChange={() => handleRoleChange(role.id)}
|
||||
/>
|
||||
<label htmlFor={`role-${role.id}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||
{role.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="is_active" className="text-right">Active</Label>
|
||||
<Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-500 text-center">{error}</p>}
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user