267 lines
12 KiB
JavaScript
267 lines
12 KiB
JavaScript
// 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";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Trash2 } from 'lucide-react';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
|
|
|
|
export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
|
|
const [formData, setFormData] = useState({});
|
|
const [allRoles, setAllRoles] = useState([]);
|
|
const [selectedSystemRoles, setSelectedSystemRoles] = useState(new Set());
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const [allProjects, setAllProjects] = useState([]);
|
|
const [projectRoles, setProjectRoles] = useState([]);
|
|
const [selectedProjectId, setSelectedProjectId] = useState('');
|
|
const [selectedRoleId, setSelectedRoleId] = useState('');
|
|
|
|
const isEditMode = !!user;
|
|
|
|
useEffect(() => {
|
|
const fetchPrerequisites = async () => {
|
|
try {
|
|
const [rolesRes, projectsRes] = await Promise.all([
|
|
api.get('/rbac/roles'),
|
|
api.get('/projects'),
|
|
]);
|
|
setAllRoles(rolesRes.data);
|
|
setAllProjects(projectsRes.data);
|
|
} catch (err) {
|
|
console.error('Failed to fetch prerequisites', err);
|
|
}
|
|
};
|
|
if (isOpen) {
|
|
fetchPrerequisites();
|
|
}
|
|
}, [isOpen]);
|
|
|
|
useEffect(() => {
|
|
const fetchUserData = async () => {
|
|
if (isEditMode) {
|
|
setFormData({
|
|
username: user.username,
|
|
email: user.email,
|
|
first_name: user.first_name || '',
|
|
last_name: user.last_name || '',
|
|
is_active: user.is_active,
|
|
});
|
|
setSelectedSystemRoles(new Set(user.Roles?.map(role => role.id) || []));
|
|
|
|
try {
|
|
const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
|
|
setProjectRoles(res.data);
|
|
} catch (err) {
|
|
console.error("Failed to fetch user's project roles", err);
|
|
setProjectRoles([]);
|
|
}
|
|
|
|
} else {
|
|
setFormData({ username: '', email: '', password: '', first_name: '', last_name: '', is_active: true });
|
|
setSelectedSystemRoles(new Set());
|
|
setProjectRoles([]);
|
|
}
|
|
setError('');
|
|
setSelectedProjectId('');
|
|
setSelectedRoleId('');
|
|
};
|
|
|
|
if (isOpen) {
|
|
fetchUserData();
|
|
}
|
|
}, [user, isOpen]);
|
|
|
|
const handleInputChange = (e) => {
|
|
const { id, value } = e.target;
|
|
setFormData((prev) => ({ ...prev, [id]: value }));
|
|
};
|
|
|
|
const handleSystemRoleChange = (roleId) => {
|
|
setSelectedSystemRoles(prev => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(roleId)) newSet.delete(roleId);
|
|
else newSet.add(roleId);
|
|
return newSet;
|
|
});
|
|
};
|
|
|
|
const handleAddProjectRole = async () => {
|
|
if (!selectedProjectId || !selectedRoleId) {
|
|
setError("Please select both a project and a role.");
|
|
return;
|
|
}
|
|
setIsLoading(true);
|
|
setError('');
|
|
try {
|
|
await api.post('/rbac/user-project-roles', {
|
|
userId: user.id,
|
|
projectId: selectedProjectId,
|
|
roleId: selectedRoleId
|
|
});
|
|
const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
|
|
setProjectRoles(res.data);
|
|
setSelectedProjectId('');
|
|
setSelectedRoleId('');
|
|
} catch(err) {
|
|
setError(err.response?.data?.message || 'Failed to add project role.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleRemoveProjectRole = async (assignment) => {
|
|
setIsLoading(true);
|
|
setError('');
|
|
try {
|
|
await api.delete('/rbac/user-project-roles', {
|
|
data: {
|
|
userId: user.id,
|
|
projectId: assignment.project_id,
|
|
roleId: assignment.role_id
|
|
}
|
|
});
|
|
setProjectRoles(prev => prev.filter(p => p.id !== assignment.id));
|
|
} catch(err) {
|
|
setError(err.response?.data?.message || 'Failed to remove project role.');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleSaveUserDetails = async () => {
|
|
setIsLoading(true);
|
|
setError('');
|
|
const payload = { ...formData, roles: Array.from(selectedSystemRoles) };
|
|
|
|
try {
|
|
if (isEditMode) {
|
|
await api.put(`/users/${user.id}`, payload);
|
|
} else {
|
|
await api.post('/users', payload);
|
|
}
|
|
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-3xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{isEditMode ? `Edit User: ${user.username}` : 'Create New User'}</DialogTitle>
|
|
</DialogHeader>
|
|
<ScrollArea className="max-h-[70vh]">
|
|
<div className="grid grid-cols-1 p-4 md:grid-cols-2 gap-x-6 gap-y-4">
|
|
|
|
{/* Section 1: User Details & System Roles */}
|
|
<div className="pr-4 space-y-4 border-r-0 md:border-r">
|
|
<h3 className="pb-2 font-semibold border-b">User Details & System Roles</h3>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username">Username</Label>
|
|
<Input id="username" value={formData.username || ''} onChange={handleInputChange} required disabled={isEditMode} />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} required />
|
|
</div>
|
|
{!isEditMode && (
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">Password</Label>
|
|
<Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} required />
|
|
</div>
|
|
)}
|
|
<div className="flex gap-4">
|
|
<div className="flex-1 space-y-2">
|
|
<Label htmlFor="first_name">First Name</Label>
|
|
<Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} />
|
|
</div>
|
|
<div className="flex-1 space-y-2">
|
|
<Label htmlFor="last_name">Last Name</Label>
|
|
<Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label>System Roles</Label>
|
|
<div className="p-2 space-y-2 overflow-y-auto border rounded-md max-h-32">
|
|
{allRoles.map(role => (
|
|
<div key={role.id} className="flex items-center space-x-2">
|
|
<Checkbox id={`role-${role.id}`} checked={selectedSystemRoles.has(role.id)} onCheckedChange={() => handleSystemRoleChange(role.id)} />
|
|
<label htmlFor={`role-${role.id}`} className="text-sm font-medium">{role.name}</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center pt-2 space-x-2">
|
|
<Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
|
|
<Label htmlFor="is_active">User is Active</Label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 2: Project Role Assignments */}
|
|
<div className="space-y-4">
|
|
<h3 className="pb-2 font-semibold border-b">Project Role Assignments</h3>
|
|
{isEditMode ? (
|
|
<>
|
|
<div className="p-4 space-y-3 border rounded-lg bg-muted/50">
|
|
<p className="text-sm font-medium">Assign New Project Role</p>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<Select onValueChange={setSelectedProjectId} value={selectedProjectId}>
|
|
<SelectTrigger><SelectValue placeholder="Select Project" /></SelectTrigger>
|
|
<SelectContent>{allProjects.map(p => <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>)}</SelectContent>
|
|
</Select>
|
|
<Select onValueChange={setSelectedRoleId} value={selectedRoleId}>
|
|
<SelectTrigger><SelectValue placeholder="Select Role" /></SelectTrigger>
|
|
<SelectContent>{allRoles.map(r => <SelectItem key={r.id} value={String(r.id)}>{r.name}</SelectItem>)}</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<Button onClick={handleAddProjectRole} disabled={isLoading || !selectedProjectId || !selectedRoleId} size="sm" className="w-full">
|
|
{isLoading ? 'Adding...' : 'Add Project Role'}
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-sm font-medium">Current Assignments</p>
|
|
<div className="pr-1 space-y-1 overflow-y-auto max-h-48">
|
|
{projectRoles.length > 0 ? projectRoles.map(pr => (
|
|
<div key={pr.id} className="flex items-center justify-between p-2 text-sm border rounded-md">
|
|
<div>
|
|
<span className="font-semibold">{pr.Project.name}</span>
|
|
<span className="text-muted-foreground"> as </span>
|
|
<span>{pr.Role.name}</span>
|
|
</div>
|
|
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleRemoveProjectRole(pr)} disabled={isLoading}>
|
|
<Trash2 className="w-4 h-4 text-red-500" />
|
|
</Button>
|
|
</div>
|
|
)) : <p className="py-2 text-sm italic text-center text-muted-foreground">No project assignments.</p>}
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : <p className="py-4 text-sm italic text-center text-muted-foreground">Save the user first to assign project roles.</p>}
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
{error && <p className="pb-2 text-sm text-center text-red-500">{error}</p>}
|
|
<DialogFooter className="pt-4 border-t">
|
|
<Button onClick={() => setIsOpen(false)} variant="outline">Close</Button>
|
|
<Button onClick={handleSaveUserDetails} disabled={isLoading}>
|
|
{isLoading ? 'Saving...' : 'Save User Details'}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
} |