changing response on edit and add in mater data module
This commit is contained in:
bagusajisaputroo
@ -46,12 +46,18 @@ const AddDialog = () => {
|
||||
show: false,
|
||||
message: ''
|
||||
});
|
||||
const initialState = {
|
||||
const initialState: {
|
||||
name: string;
|
||||
sucosId: number | null;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
} = {
|
||||
name: '',
|
||||
sucosId: 0,
|
||||
sucosId: null,
|
||||
created_by: '',
|
||||
created_at: ''
|
||||
};
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [formField, setFormField] = useState(initialState);
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
@ -59,9 +65,32 @@ const AddDialog = () => {
|
||||
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
setErrors({});
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const requiredFields = [
|
||||
{ key: 'name', label: 'Aldeia Name' },
|
||||
{ key: 'sucosId', label: 'Sucos ID' }
|
||||
];
|
||||
const newErrors: Record<string, string> = {};
|
||||
let isValid = true;
|
||||
|
||||
requiredFields.forEach(({ key, label }) => {
|
||||
if (
|
||||
formField[key as keyof typeof formField] === '' ||
|
||||
formField[key as keyof typeof formField] === null ||
|
||||
formField[key as keyof typeof formField] === undefined
|
||||
) {
|
||||
newErrors[key] = `${label} is required`;
|
||||
toast.error(`${label} is required`);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
const doCreateAldeias = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
@ -117,14 +146,12 @@ const AddDialog = () => {
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (formField.name === '' || formField.sucosId === 0) {
|
||||
setAlert({ show: true, message: 'Please fill in all required fields.' });
|
||||
setIsSubmitting(true);
|
||||
if (!validateForm()) {
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
doCreateAldeias(e);
|
||||
console.log(formField);
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -169,12 +196,20 @@ const AddDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Aldeia 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 text-sm">
|
||||
<Input
|
||||
className="input"
|
||||
type="text"
|
||||
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-sm">{errors.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -183,46 +218,50 @@ const AddDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Sucos ID<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
<div className="grow flex flex-col text-sm">
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="input col-span-5 text-left"
|
||||
style={{ color: 'inherit' }}
|
||||
>
|
||||
{sucos.find((suco) => suco.id === formField.sucosId)?.name ||
|
||||
'Select Sucos'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[400px] p-0"
|
||||
onWheel={(e) => e.stopPropagation()}
|
||||
>
|
||||
{sucos.find((suco) => suco.id === formField.sucosId)?.name ||
|
||||
'Select Sucos'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent
|
||||
className="w-[400px] p-0"
|
||||
onWheel={(e) => e.stopPropagation()}
|
||||
>
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Sucos..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Sucos found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sucos.map((suco) => (
|
||||
<CommandItem
|
||||
key={suco.id}
|
||||
value={suco.name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
sucosId: suco.id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{suco.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Sucos..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Sucos found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sucos.map((suco) => (
|
||||
<CommandItem
|
||||
key={suco.id}
|
||||
value={suco.name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
sucosId: suco.id
|
||||
});
|
||||
setOpen(false);
|
||||
setErrors((prev) => ({ ...prev, sucosId: '' }));
|
||||
}}
|
||||
>
|
||||
{suco.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{errors.sucosId && <span className="text-red-500 text-sm">{errors.sucosId}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -56,12 +56,35 @@ const EditDialog = () => {
|
||||
const created_time = new Date();
|
||||
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const resetForm = () => {
|
||||
setFormField(initialState);
|
||||
setAlert({ show: false, message: '' });
|
||||
setErrors({});
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const requiredFields = [
|
||||
{ key: 'name', label: 'Aldeia Name' },
|
||||
{ key: 'sucosId', label: 'Sucos ID' }
|
||||
];
|
||||
const newErrors: Record<string, string> = {};
|
||||
let isValid = true;
|
||||
|
||||
requiredFields.forEach(({ key, label }) => {
|
||||
if (
|
||||
formField[key as keyof typeof formField] === '' ||
|
||||
formField[key as keyof typeof formField] === null ||
|
||||
formField[key as keyof typeof formField] === undefined
|
||||
) {
|
||||
newErrors[key] = `${label} is required`;
|
||||
toast.error(`${label} is required`);
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
setErrors(newErrors);
|
||||
return isValid;
|
||||
};
|
||||
const doUpdateAldeias = useCallback(
|
||||
async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
@ -139,15 +162,13 @@ const EditDialog = () => {
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (formField.name === '' || formField.sucosId === 0) {
|
||||
setAlert({ show: true, message: 'Please fill in all required fields.' });
|
||||
setIsSubmitting(true);
|
||||
if (!validateForm()) {
|
||||
setIsSubmitting(false);
|
||||
return;
|
||||
}
|
||||
|
||||
doUpdateAldeias(e);
|
||||
console.log(formField);
|
||||
setAlert({ show: false, message: '' });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -212,12 +233,19 @@ const EditDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Aldeia 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"
|
||||
type="text"
|
||||
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-sm">{errors.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -226,6 +254,7 @@ const EditDialog = () => {
|
||||
<label className="form-label flex items-center gap-1 max-w-56">
|
||||
Sucos ID<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className='grow flex flex-col'>
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<button
|
||||
@ -253,6 +282,7 @@ const EditDialog = () => {
|
||||
sucosId: suco.id
|
||||
});
|
||||
setOpen(false);
|
||||
setErrors((prev) => ({ ...prev, sucosId: '' }));
|
||||
}}
|
||||
>
|
||||
{suco.name}
|
||||
@ -262,7 +292,10 @@ const EditDialog = () => {
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
|
||||
</Popover>
|
||||
{errors.sucosId && <span className="text-red-500 text-sm">{errors.sucosId}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user