feat(dashboard): เพมสวนจดการ user
This commit is contained in:
admin
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