139 lines
3.7 KiB
TypeScript
139 lines
3.7 KiB
TypeScript
'use client';
|
|
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { useCallback } from 'react';
|
|
import { useForm, useWatch } from 'react-hook-form';
|
|
import { toast } from 'sonner';
|
|
import { z } from 'zod';
|
|
|
|
import type { AdministrationUser } from '@/types';
|
|
import { useSaveUserMutation } from './useUserMutations';
|
|
|
|
const optionalPhoneSchema = z
|
|
.string()
|
|
.trim()
|
|
.refine((value) => value === '' || /^\+(?:[0-9] ?){6,14}[0-9]$/.test(value), {
|
|
message: 'Please enter a valid phone number',
|
|
});
|
|
|
|
const userFormSchema = z.object({
|
|
id: z.number().optional(),
|
|
first_name: z.string().trim().min(1, 'First name is required'),
|
|
last_name: z.string().trim().min(1, 'Last name is required'),
|
|
email: z.string().trim().min(1, 'Email is required').email('Invalid email'),
|
|
phone_number: optionalPhoneSchema,
|
|
role_id: z.string().trim().min(1, 'Role is required'),
|
|
});
|
|
|
|
export type UserFormValues = z.infer<typeof userFormSchema>;
|
|
|
|
const defaultValues: UserFormValues = {
|
|
first_name: '',
|
|
last_name: '',
|
|
email: '',
|
|
phone_number: '',
|
|
role_id: '',
|
|
};
|
|
|
|
export function useUserForm({ onSaved }: { onSaved: () => void }) {
|
|
const {
|
|
control,
|
|
register,
|
|
handleSubmit: submitForm,
|
|
reset,
|
|
setValue,
|
|
formState: { errors, isSubmitting, touchedFields },
|
|
} = useForm<UserFormValues>({
|
|
defaultValues,
|
|
mode: 'onTouched',
|
|
reValidateMode: 'onChange',
|
|
resolver: zodResolver(userFormSchema),
|
|
});
|
|
const saveMutation = useSaveUserMutation({
|
|
onSaved: () => {
|
|
reset(defaultValues);
|
|
onSaved();
|
|
},
|
|
});
|
|
|
|
const userId = useWatch({ control, name: 'id' });
|
|
const roleId = useWatch({ control, name: 'role_id' }) || '';
|
|
const firstName = useWatch({ control, name: 'first_name' }) || '';
|
|
const lastName = useWatch({ control, name: 'last_name' }) || '';
|
|
const email = useWatch({ control, name: 'email' }) || '';
|
|
const phoneNumber = useWatch({ control, name: 'phone_number' }) || '';
|
|
const isPhoneValid = phoneNumber.trim() === '' || /^\+(?:[0-9] ?){6,14}[0-9]$/.test(phoneNumber.trim());
|
|
const canSubmit =
|
|
firstName.trim().length > 0 &&
|
|
lastName.trim().length > 0 &&
|
|
email.trim().length > 0 &&
|
|
roleId.trim().length > 0 &&
|
|
isPhoneValid;
|
|
|
|
const handleSubmit = submitForm(
|
|
(values) => saveMutation.mutate(values),
|
|
(formErrors) => {
|
|
if (formErrors.first_name?.message) {
|
|
toast.error(formErrors.first_name.message);
|
|
return;
|
|
}
|
|
if (formErrors.last_name?.message) {
|
|
toast.error(formErrors.last_name.message);
|
|
return;
|
|
}
|
|
if (formErrors.email?.message) {
|
|
toast.error(formErrors.email.message);
|
|
return;
|
|
}
|
|
if (formErrors.phone_number?.message) {
|
|
toast.error(formErrors.phone_number.message);
|
|
return;
|
|
}
|
|
if (formErrors.role_id?.message) {
|
|
toast.error(formErrors.role_id.message);
|
|
}
|
|
},
|
|
);
|
|
|
|
const openCreate = useCallback(() => {
|
|
reset(defaultValues);
|
|
}, [reset]);
|
|
|
|
const openEdit = useCallback(
|
|
(user: AdministrationUser) => {
|
|
const selectedRoleId = user.role_ids?.[0] ?? user.roles?.[0]?.id;
|
|
reset({
|
|
id: user.id,
|
|
first_name: user.first_name || '',
|
|
last_name: user.last_name || '',
|
|
email: user.email || '',
|
|
phone_number: user.phone_number || '',
|
|
role_id: selectedRoleId ? String(selectedRoleId) : '',
|
|
});
|
|
},
|
|
[reset],
|
|
);
|
|
|
|
const setRoleId = useCallback(
|
|
(value: string) => {
|
|
setValue('role_id', value, { shouldDirty: true, shouldValidate: true });
|
|
},
|
|
[setValue],
|
|
);
|
|
|
|
return {
|
|
register,
|
|
handleSubmit,
|
|
reset,
|
|
openCreate,
|
|
openEdit,
|
|
setRoleId,
|
|
roleId,
|
|
userId,
|
|
errors,
|
|
touchedFields,
|
|
canSubmit,
|
|
isSaving: isSubmitting || saveMutation.isPending,
|
|
};
|
|
}
|