361 lines
13 KiB
TypeScript
361 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Checkbox } from '@/components/ui/checkbox';
|
|
import { useCreateUser, useUpdateUser, useRoles } from '@/hooks/use-users';
|
|
import { useOrganizations } from '@/hooks/use-master-data';
|
|
import { useEffect, useState } from 'react';
|
|
import { User } from '@/types/user';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { Eye, EyeOff } from 'lucide-react';
|
|
|
|
const ALL_ORGANIZATIONS_VALUE = 'all';
|
|
|
|
// Update schema to include confirmPassword
|
|
const userSchema = z
|
|
.object({
|
|
username: z.string().min(3, 'Username must be at least 3 characters'),
|
|
email: z.string().email('Invalid email address'),
|
|
firstName: z.string().min(1, 'First name is required'),
|
|
lastName: z.string().min(1, 'Last name is required'),
|
|
password: z.string().optional(),
|
|
confirmPassword: z.string().optional(),
|
|
isActive: z.boolean().optional(),
|
|
lineId: z.string().optional(),
|
|
primaryOrganizationId: z.string().optional(),
|
|
roleIds: z.array(z.number()).optional(),
|
|
})
|
|
.refine(
|
|
(data) => {
|
|
// If password is provided (creating or resetting), confirmPassword must match
|
|
if (data.password && data.password !== data.confirmPassword) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
{
|
|
message: 'Passwords do not match',
|
|
path: ['confirmPassword'],
|
|
}
|
|
)
|
|
.refine(
|
|
(data) => {
|
|
// Password required for creation
|
|
// We can't easily check "isCreating" here without context, checking length if provided
|
|
if (data.password && data.password.length < 6) {
|
|
return false;
|
|
}
|
|
return true;
|
|
},
|
|
{
|
|
message: 'Password must be at least 6 characters',
|
|
path: ['password'],
|
|
}
|
|
);
|
|
|
|
type UserFormData = z.infer<typeof userSchema>;
|
|
|
|
interface UserDialogProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
user?: User | null;
|
|
}
|
|
|
|
export function UserDialog({ open, onOpenChange, user }: UserDialogProps) {
|
|
const createUser = useCreateUser();
|
|
const updateUser = useUpdateUser();
|
|
const { data: roles = [] } = useRoles();
|
|
const { data: organizations = [] } = useOrganizations();
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
reset,
|
|
formState: { errors },
|
|
} = useForm<UserFormData>({
|
|
resolver: zodResolver(userSchema),
|
|
defaultValues: {
|
|
username: '',
|
|
email: '',
|
|
firstName: '',
|
|
lastName: '',
|
|
isActive: true,
|
|
roleIds: [],
|
|
lineId: '',
|
|
primaryOrganizationId: ALL_ORGANIZATIONS_VALUE,
|
|
password: '',
|
|
confirmPassword: '',
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
reset({
|
|
username: user.username,
|
|
email: user.email,
|
|
firstName: user.firstName,
|
|
lastName: user.lastName,
|
|
isActive: user.isActive,
|
|
lineId: user.lineId || '',
|
|
primaryOrganizationId: user.primaryOrganizationId || ALL_ORGANIZATIONS_VALUE,
|
|
roleIds: user.roles?.map((r: { roleId?: number }) => r.roleId).filter((id): id is number => id !== undefined) || [],
|
|
password: '',
|
|
confirmPassword: '',
|
|
});
|
|
} else {
|
|
reset({
|
|
username: '',
|
|
email: '',
|
|
firstName: '',
|
|
lastName: '',
|
|
isActive: true,
|
|
lineId: '',
|
|
primaryOrganizationId: ALL_ORGANIZATIONS_VALUE,
|
|
roleIds: [],
|
|
password: '',
|
|
confirmPassword: '',
|
|
});
|
|
}
|
|
// Also reset visibility
|
|
setShowPassword(false);
|
|
setShowConfirmPassword(false);
|
|
}, [user, reset, open]);
|
|
|
|
const selectedRoleIds = watch('roleIds') || [];
|
|
|
|
const onSubmit = (data: UserFormData) => {
|
|
// Basic validation for create vs update
|
|
if (!user && !data.password) {
|
|
// This should be caught by schema ideally, but refined schema is tricky with conditional
|
|
// Force error via set error not possible easily here, rely on form state?
|
|
// Actually the refine check handles length check if provided, but for create it is mandatory.
|
|
// Let's rely on server side or manual check if schema misses it (zod optional() makes it pass if undefined)
|
|
// Adjusting schema to be strict string for create is hard with one schema.
|
|
// Let's trust Zod or add checks.
|
|
}
|
|
|
|
// Clean up data
|
|
const payload = { ...data };
|
|
delete payload.confirmPassword; // Don't send to API
|
|
if (!payload.password) delete payload.password; // Don't send empty password on edit
|
|
if (payload.primaryOrganizationId === ALL_ORGANIZATIONS_VALUE) {
|
|
delete payload.primaryOrganizationId;
|
|
}
|
|
|
|
if (user) {
|
|
updateUser.mutate({ uuid: user.publicId, data: payload }, { onSuccess: () => onOpenChange(false) });
|
|
} else {
|
|
// Create req: Password mandatory
|
|
if (!payload.password) return; // Should allow Zod to catch or show error
|
|
|
|
createUser.mutate(
|
|
{
|
|
username: payload.username,
|
|
email: payload.email,
|
|
firstName: payload.firstName,
|
|
lastName: payload.lastName,
|
|
password: payload.password,
|
|
isActive: payload.isActive ?? true,
|
|
lineId: payload.lineId,
|
|
primaryOrganizationId: payload.primaryOrganizationId,
|
|
roleIds: payload.roleIds ?? [],
|
|
},
|
|
{
|
|
onSuccess: () => onOpenChange(false),
|
|
}
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{user ? 'Edit User' : 'Create New User'}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Username *</Label>
|
|
<Input {...register('username')} disabled={!!user} autoComplete="off" />
|
|
{errors.username && <p className="text-sm text-red-500">{errors.username.message}</p>}
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Email *</Label>
|
|
<Input type="email" {...register('email')} autoComplete="off" />
|
|
{errors.email && <p className="text-sm text-red-500">{errors.email.message}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>First Name *</Label>
|
|
<Input {...register('firstName')} autoComplete="off" />
|
|
{errors.firstName && <p className="text-sm text-red-500">{errors.firstName.message}</p>}
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Last Name *</Label>
|
|
<Input {...register('lastName')} autoComplete="off" />
|
|
{errors.lastName && <p className="text-sm text-red-500">{errors.lastName.message}</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Line ID</Label>
|
|
<Input {...register('lineId')} autoComplete="off" />
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Primary Organization</Label>
|
|
<Select
|
|
value={watch('primaryOrganizationId') || ALL_ORGANIZATIONS_VALUE}
|
|
onValueChange={(val) => setValue('primaryOrganizationId', val)}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Select Organization" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value={ALL_ORGANIZATIONS_VALUE}>All Organizations</SelectItem>
|
|
{Array.isArray(organizations) &&
|
|
organizations.map((org: { publicId: string; organizationCode: string; organizationName: string }) => (
|
|
<SelectItem key={org.publicId} value={org.publicId}>
|
|
{org.organizationCode} - {org.organizationName}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Password Section - Show for Create, or Optional for Edit */}
|
|
<div className="space-y-4 border p-4 rounded-md">
|
|
<h3 className="text-sm font-medium">{user ? 'Change Password (Optional)' : 'Password Setup'}</h3>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="relative">
|
|
<Label>Password {user ? '' : '*'}</Label>
|
|
<div className="relative">
|
|
<Input
|
|
type={showPassword ? 'text' : 'password'}
|
|
{...register('password')}
|
|
autoComplete="new-password"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute right-0 top-0 h-full px-3"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
>
|
|
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
{errors.password && <p className="text-sm text-red-500">{errors.password.message}</p>}
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<Label>Confirm Password {user ? '' : '*'}</Label>
|
|
<div className="relative">
|
|
<Input
|
|
type={showConfirmPassword ? 'text' : 'password'}
|
|
{...register('confirmPassword')}
|
|
autoComplete="new-password"
|
|
/>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className="absolute right-0 top-0 h-full px-3"
|
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
|
>
|
|
{showConfirmPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
|
</Button>
|
|
</div>
|
|
{errors.confirmPassword && <p className="text-sm text-red-500">{errors.confirmPassword.message}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="mb-3 block">Roles</Label>
|
|
<div className="space-y-2 border p-3 rounded-md max-h-[200px] overflow-y-auto">
|
|
{Array.isArray(roles) && roles.length === 0 && (
|
|
<p className="text-sm text-muted-foreground">Loading roles...</p>
|
|
)}
|
|
{Array.isArray(roles) &&
|
|
roles.map((role: { publicId?: string; roleId?: number; roleName: string; description?: string }) => {
|
|
const roleId = role.roleId;
|
|
if (roleId === undefined) return null;
|
|
return (
|
|
<div key={role.publicId ?? roleId} className="flex items-start space-x-2">
|
|
<Checkbox
|
|
id={`role-${role.publicId ?? roleId}`}
|
|
checked={selectedRoleIds.includes(roleId)}
|
|
onCheckedChange={(checked) => {
|
|
const current = selectedRoleIds;
|
|
if (checked) {
|
|
setValue('roleIds', [...current, roleId]);
|
|
} else {
|
|
setValue(
|
|
'roleIds',
|
|
current.filter((id) => id !== roleId)
|
|
);
|
|
}
|
|
}}
|
|
/>
|
|
<div className="grid gap-1.5 leading-none">
|
|
<label
|
|
htmlFor={`role-${role.publicId}`}
|
|
className="text-sm font-medium leading-none cursor-pointer"
|
|
>
|
|
{role.roleName}
|
|
</label>
|
|
<p className="text-xs text-muted-foreground">{role.description}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{user && (
|
|
<div className="flex items-center space-x-2">
|
|
<Checkbox
|
|
id="is_active"
|
|
checked={watch('isActive')}
|
|
onCheckedChange={(chk) => setValue('isActive', chk === true)}
|
|
/>
|
|
<label htmlFor="is_active" className="text-sm font-medium leading-none cursor-pointer">
|
|
Active User
|
|
</label>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex justify-end gap-3 pt-4">
|
|
<Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={createUser.isPending || updateUser.isPending}>
|
|
{user ? 'Update User' : 'Create User'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|