changing response on edit and add in mater data module
This commit is contained in:
bagusajisaputroo
@ -47,7 +47,7 @@ const AddDialog = () => {
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const initialState = {
|
||||
name: '',
|
||||
municipio_id: 0,
|
||||
@ -61,9 +61,32 @@ const AddDialog = () => {
|
||||
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
setErrors({});
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const requiredFields = [
|
||||
{ key: 'name', label: 'Postu Administrativo Name' },
|
||||
{ key: 'municipio_id', label: 'Municipio Name' }
|
||||
];
|
||||
const newErrors: Record<string, string> = {};
|
||||
let isValid = true;
|
||||
|
||||
requiredFields.forEach(({ key, label }) => {
|
||||
const value = formField[key as keyof typeof formField];
|
||||
const isEmpty = value === '' || value === null || value === undefined || value === 0;
|
||||
if (isEmpty) {
|
||||
newErrors[key] = `${label} is required`;
|
||||
toast.error(`${label} is required`);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
|
||||
|
||||
const doCreatePostoAdm = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
@ -121,15 +144,12 @@ const AddDialog = () => {
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (formField.name.trim() === '' || formField.municipio_id === 0) {
|
||||
setAlert({ show: true, message: 'Please fill in all required fields.' });
|
||||
setIsSubmitting(true);
|
||||
if (!validateForm()) {
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
doCreatePostoAdm(e);
|
||||
console.log(formField);
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -169,61 +189,78 @@ const AddDialog = () => {
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Postu Administrativo Name<span className="text-red-500">*</span>
|
||||
Posto Administrativo Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
value={formField.name}
|
||||
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
|
||||
/>
|
||||
<div className="grow flex flex-col">
|
||||
<Input
|
||||
className={`input ${errors.name ? 'border-red-500' : ''}`}
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
value={formField.name}
|
||||
onChange={({ target }) => {
|
||||
setFormField((prev) => ({ ...prev, name: target.value }));
|
||||
if (target.value) {
|
||||
setErrors((prev) => ({ ...prev, name: '' }));
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Municipio Name<span className="text-red-500">*</span>
|
||||
Municipio Name
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button type="button" className="input col-span-5 text-left">
|
||||
{municipios.find((municipio) => municipio.id === formField.municipio_id)
|
||||
?.name || 'Select Municipio'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[400px] p-0"
|
||||
onWheel={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Municipio..." />
|
||||
<CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
|
||||
<CommandEmpty>No Municipio found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{municipios.map((municipio) => (
|
||||
<CommandItem
|
||||
key={municipio.id}
|
||||
value={municipio.name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
municipio_id: municipio.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{municipio.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<div className="grow flex flex-col">
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className={`input text-left ${errors.municipio_id ? 'border-red-500' : ''}`}
|
||||
>
|
||||
{municipios.find((municipio) => municipio.id === formField.municipio_id)
|
||||
?.name || 'Select Municipio'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[400px] p-0"
|
||||
onWheel={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Municipio..." />
|
||||
<CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
|
||||
<CommandEmpty>No Municipio found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{municipios.map((municipio) => (
|
||||
<CommandItem
|
||||
key={municipio.id}
|
||||
value={municipio.name}
|
||||
onSelect={() => {
|
||||
setFormField({ ...formField, municipio_id: municipio.id });
|
||||
setErrors((prev) => ({ ...prev, municipio_id: '' }));
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{municipio.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{errors.municipio_id && (
|
||||
<span className="text-red-500 text-xs mt-1">{errors.municipio_id}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user