yashwin/Qassure-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance role management modals by adding error handling and validation feedback. Implemented clearErrors and setError for API response handling in EditRoleModal and NewRoleModal, along with general error display for user feedback.

Browse Source
This commit is contained in:
Yashwin 2026-01-19 20:05:09 +05:30
parent 367c208942
commit ef0e67e07a
2 changed files with 79 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/shared/EditRoleModal.tsx
View File

@ -51,6 +51,8 @@ export const EditRoleModal = ({
setValue,
watch,
reset,
setError,
clearErrors,
formState: { errors },
} = useForm<EditRoleFormData>({
resolver: zodResolver(editRoleSchema),
@ -65,6 +67,7 @@ export const EditRoleModal = ({
try {
setIsLoadingRole(true);
setLoadError(null);
clearErrors();
const role = await onLoadRole(roleId);
reset({
name: role.name,
@ -87,12 +90,40 @@ export const EditRoleModal = ({
scope: 'platform',
});
setLoadError(null);
clearErrors();
}
}, [isOpen, roleId, onLoadRole, reset]);
}, [isOpen, roleId, onLoadRole, reset, clearErrors]);
const handleFormSubmit = async (data: EditRoleFormData): Promise<void> => {
if (roleId) {
if (!roleId) return;
clearErrors();
try {
await onSubmit(roleId, data);
} catch (error: any) {
// Handle validation errors from API
if (error?.response?.data?.details && Array.isArray(error.response.data.details)) {
const validationErrors = error.response.data.details;
validationErrors.forEach((detail: { path: string; message: string }) => {
if (detail.path === 'name' || detail.path === 'code' || detail.path === 'description' || detail.path === 'scope') {
setError(detail.path as keyof EditRoleFormData, {
type: 'server',
message: detail.message,
});
}
});
} else {
// Handle general errors
const errorMessage =
error?.response?.data?.error ||
error?.response?.data?.message ||
error?.message ||
'Failed to update role. Please try again.';
setError('root', {
type: 'server',
message: typeof errorMessage === 'string' ? errorMessage : 'Failed to update role. Please try again.',
});
}
}
};
@ -139,6 +170,13 @@ export const EditRoleModal = ({
{!isLoadingRole && (
<form onSubmit={handleSubmit(handleFormSubmit)} className="p-5 flex flex-col gap-0">
{/* General Error Display */}
{errors.root && (
<div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
<p className="text-sm text-[#ef4444]">{errors.root.message}</p>
</div>
)}
{/* Role Name and Role Code Row */}
<div className="grid grid-cols-2 gap-5 pb-4">
<FormField

39
src/components/shared/NewRoleModal.tsx
View File

@ -43,6 +43,8 @@ export const NewRoleModal = ({
setValue,
watch,
reset,
setError,
clearErrors,
formState: { errors },
} = useForm<NewRoleFormData>({
resolver: zodResolver(newRoleSchema),
@ -62,11 +64,39 @@ export const NewRoleModal = ({
description: '',
scope: 'platform',
});
clearErrors();
}
}, [isOpen, reset]);
}, [isOpen, reset, clearErrors]);
const handleFormSubmit = async (data: NewRoleFormData): Promise<void> => {
clearErrors();
try {
await onSubmit(data);
} catch (error: any) {
// Handle validation errors from API
if (error?.response?.data?.details && Array.isArray(error.response.data.details)) {
const validationErrors = error.response.data.details;
validationErrors.forEach((detail: { path: string; message: string }) => {
if (detail.path === 'name' || detail.path === 'code' || detail.path === 'description' || detail.path === 'scope') {
setError(detail.path as keyof NewRoleFormData, {
type: 'server',
message: detail.message,
});
}
});
} else {
// Handle general errors
const errorMessage =
error?.response?.data?.error ||
error?.response?.data?.message ||
error?.message ||
'Failed to create role. Please try again.';
setError('root', {
type: 'server',
message: typeof errorMessage === 'string' ? errorMessage : 'Failed to create role. Please try again.',
});
}
}
};
return (
@ -99,6 +129,13 @@ export const NewRoleModal = ({
}
>
<form onSubmit={handleSubmit(handleFormSubmit)} className="p-5 flex flex-col gap-0">
{/* General Error Display */}
{errors.root && (
<div className="p-4 bg-[rgba(239,68,68,0.1)] border border-[#ef4444] rounded-md mb-4">
<p className="text-sm text-[#ef4444]">{errors.root.message}</p>
</div>
)}
{/* Role Name and Role Code Row */}
<div className="grid grid-cols-2 gap-5 pb-4">
<FormField