TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changing response on edit and add in mater data module

Browse Source
This commit is contained in:
bagusajisaputroo
2025-05-08 22:27:32 +07:00
parent 1ac93eb551
commit 97129d62b1
16 changed files with 1461 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
src/pages/master/aldeias/blocks/AddDialog.tsx
View File

@ -46,12 +46,18 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = { const initialState: {
name: string;
sucosId: number | null;
created_by: string;
created_at: string;
} = {
name: '', name: '',
sucosId: 0, sucosId: null,
created_by: '', created_by: '',
created_at: '' created_at: ''
}; };
const [errors, setErrors] = useState<Record<string, string>>({});
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
@ -59,9 +65,32 @@ const AddDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); 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( const doCreateAldeias = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -117,14 +146,12 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (formField.name === '' || formField.sucosId === 0) { setIsSubmitting(true);
setAlert({ show: true, message: 'Please fill in all required fields.' }); if (!validateForm()) {
setIsSubmitting(false);
return; return;
} }
doCreateAldeias(e); doCreateAldeias(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -169,12 +196,20 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Aldeia Name<span className="text-red-500">*</span> Aldeia Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col text-sm">
className="input" <Input
type="text" className="input"
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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>
</div> </div>
@ -183,46 +218,50 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Sucos ID<span className="text-red-500">*</span> Sucos ID<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col text-sm">
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button <PopoverTrigger asChild>
type="button" <button
className="input col-span-5 text-left" type="button"
style={{ color: 'inherit' }} 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 || <Command>
'Select Sucos'} <CommandInput placeholder="Search Sucos..." />
</button> <CommandList>
</PopoverTrigger> <CommandEmpty>No Sucos found.</CommandEmpty>
<PopoverContent <CommandGroup>
className="w-[400px] p-0" {sucos.map((suco) => (
onWheel={(e) => e.stopPropagation()} <CommandItem
> key={suco.id}
<Command> value={suco.name}
<CommandInput placeholder="Search Sucos..." /> onSelect={() => {
<CommandList> setFormField({
<CommandEmpty>No Sucos found.</CommandEmpty> ...formField,
<CommandGroup> sucosId: suco.id
{sucos.map((suco) => ( });
<CommandItem setOpen(false);
key={suco.id} setErrors((prev) => ({ ...prev, sucosId: '' }));
value={suco.name} }}
onSelect={() => { >
setFormField({ {suco.name}
...formField, </CommandItem>
sucosId: suco.id ))}
}); </CommandGroup>
setOpen(false); </CommandList>
}} </Command>
> </PopoverContent>
{suco.name} </Popover>
</CommandItem> {errors.sucosId && <span className="text-red-500 text-sm">{errors.sucosId}</span>}
))} </div>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div> </div>
</div> </div>

59
src/pages/master/aldeias/blocks/EditDialog.tsx
View File

@ -56,12 +56,35 @@ const EditDialog = () => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); 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( const doUpdateAldeias = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -139,15 +162,13 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name === '' || formField.sucosId === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
doUpdateAldeias(e); doUpdateAldeias(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -212,12 +233,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Aldeia Name<span className="text-red-500">*</span> Aldeia Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className="input"
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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>
</div> </div>
@ -226,6 +254,7 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Sucos ID<span className="text-red-500">*</span> Sucos ID<span className="text-red-500">*</span>
</label> </label>
<div className='grow flex flex-col'>
<Popover open={open} onOpenChange={setOpen}> <Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<button <button
@ -253,6 +282,7 @@ const EditDialog = () => {
sucosId: suco.id sucosId: suco.id
}); });
setOpen(false); setOpen(false);
setErrors((prev) => ({ ...prev, sucosId: '' }));
}} }}
> >
{suco.name} {suco.name}
@ -262,7 +292,10 @@ const EditDialog = () => {
</CommandList> </CommandList>
</Command> </Command>
</PopoverContent> </PopoverContent>
</Popover> </Popover>
{errors.sucosId && <span className="text-red-500 text-sm">{errors.sucosId}</span>}
</div>
</div> </div>
</div> </div>

55
src/pages/master/municipios/blocks/AddDialog.tsx
View File

@ -41,10 +41,30 @@ const AddDialog = () => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
};
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Municipio Name' }];
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 doCreateMunicipio = useCallback( const doCreateMunicipio = useCallback(
@ -82,16 +102,17 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '') { if(!validateForm()) {
setAlert({ show: true, message: 'Please fill name field.' }); setIsSubmitting(false);
return; return;
} }
doCreateMunicipio(e); doCreateMunicipio(e);
console.log(parsedUser.email); // console.log(parsedUser.email);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; };
const handleReset = () => { const handleReset = () => {
@ -133,21 +154,29 @@ const AddDialog = () => {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <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"> <div className="flex items-baseline flex-wrap lg:flex-wrap gap-2.5 text-sm">
<label className="form-label flex items-center gap-1 max-w-56"> <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> </label>
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete='off'
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} onChange={({target})=>{
setFormField((prev) => ({...prev,name:target.value}))
if (target.value){
setErrors((prev)=> ({...prev,name: ''}))
}
}
}
/> />
{errors.name && <span className="text-red-500">{errors.name}</span>}
</div> </div>
</div> </div>
<div className="flex justify-end pt-2.5 gap-5"> <div className="flex justify-end pt-2.5 gap-5">
<Button variant={'outline'} type="reset" onClick={handleReset}> <Button variant={'outline'} type="reset" onClick={resetForm}>
Reset Reset
</Button> </Button>
<Button variant="default" type="submit" disabled={isSubmitting}> <Button variant="default" type="submit" disabled={isSubmitting}>

90
src/pages/master/municipios/blocks/EditDialog.tsx
View File

@ -44,9 +44,32 @@ const EditDialog = () => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
};
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Municipio Name' }];
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 doUpdateMunicipios = useCallback( const doUpdateMunicipios = useCallback(
@ -73,7 +96,7 @@ const EditDialog = () => {
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
toast.error('Failed update user'); toast.error('Failed update municipios');
setAlert({ show: true, message: response?.message }); setAlert({ show: true, message: response?.message });
} }
} catch (error) { } catch (error) {
@ -85,6 +108,21 @@ const EditDialog = () => {
[selectedMunicipios, formField] [selectedMunicipios, formField]
); );
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setIsSubmitting(true);
if(!validateForm()) {
setIsSubmitting(false);
return;
}
doUpdateMunicipios(e);
// console.log(parsedUser.email);
// console.log(formField);
// setAlert({ show: false, message: '' });
};
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); setIsLoading(true);
const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
@ -105,18 +143,18 @@ const EditDialog = () => {
setIsLoading(false); setIsLoading(false);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); // e.preventDefault();
if (formField.name.trim() === '') { // if (formField.name.trim() === '') {
setAlert({ show: true, message: 'Please fill name field.' }); // setAlert({ show: true, message: 'Please fill name field.' });
return; // return;
} // }
doUpdateMunicipios(e); // doUpdateMunicipios(e);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; // };
useEffect(() => { useEffect(() => {
if (selectedMunicipios) { if (selectedMunicipios) {
@ -170,21 +208,33 @@ const EditDialog = () => {
<p className="mt-4 text-gray-500">Loading Municipio Details...</p> <p className="mt-4 text-gray-500">Loading Municipio Details...</p>
</div> </div>
) : ( ) : (
<form onSubmit={handleUpdate}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <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"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Municipio Name<span className="text-red-500">*</span> Municipios Name
</label> <span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete="off"
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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>
</div>
<div className="flex justify-end pt-2.5"> <div className="flex justify-end pt-2.5">
<Button variant="default" type="submit" disabled={isSubmitting}> <Button variant="default" type="submit" disabled={isSubmitting}>

143
src/pages/master/postoadms/blocks/AddDialog.tsx
View File

@ -47,7 +47,7 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const initialState = { const initialState = {
name: '', name: '',
municipio_id: 0, municipio_id: 0,
@ -61,9 +61,32 @@ const AddDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); 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( const doCreatePostoAdm = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -121,15 +144,12 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '' || formField.municipio_id === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
doCreatePostoAdm(e); doCreatePostoAdm(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -169,61 +189,78 @@ const AddDialog = () => {
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <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"> <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"> <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> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <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> </label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col">
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button type="button" className="input col-span-5 text-left"> <PopoverTrigger asChild>
{municipios.find((municipio) => municipio.id === formField.municipio_id) <button
?.name || 'Select Municipio'} type="button"
</button> className={`input text-left ${errors.municipio_id ? 'border-red-500' : ''}`}
</PopoverTrigger> >
<PopoverContent {municipios.find((municipio) => municipio.id === formField.municipio_id)
className="w-[400px] p-0" ?.name || 'Select Municipio'}
onWheel={(e) => e.stopPropagation()} </button>
> </PopoverTrigger>
<Command> <PopoverContent
<CommandInput placeholder="Search Municipio..." /> className="w-[400px] p-0"
<CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto"> onWheel={(e) => e.stopPropagation()}
<CommandEmpty>No Municipio found.</CommandEmpty> >
<CommandGroup> <Command>
{municipios.map((municipio) => ( <CommandInput placeholder="Search Municipio..." />
<CommandItem <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
key={municipio.id} <CommandEmpty>No Municipio found.</CommandEmpty>
value={municipio.name} <CommandGroup>
onSelect={() => { {municipios.map((municipio) => (
setFormField({ <CommandItem
...formField, key={municipio.id}
municipio_id: municipio.id value={municipio.name}
}); onSelect={() => {
setOpen(false); setFormField({ ...formField, municipio_id: municipio.id });
}} setErrors((prev) => ({ ...prev, municipio_id: '' }));
> setOpen(false);
{municipio.name} }}
</CommandItem> >
))} {municipio.name}
</CommandGroup> </CommandItem>
</CommandList> ))}
</Command> </CommandGroup>
</PopoverContent> </CommandList>
</Popover> </Command>
</PopoverContent>
</Popover>
{errors.municipio_id && (
<span className="text-red-500 text-xs mt-1">{errors.municipio_id}</span>
)}
</div>
</div> </div>
</div> </div>

141
src/pages/master/postoadms/blocks/EditDialog.tsx
View File

@ -45,7 +45,7 @@ const EditDialog = () => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [municipios, setMunicipios] = useState<MunicipioProps[]>([]); const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -62,7 +62,28 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); 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 doUpdatePostoAdm = useCallback( const doUpdatePostoAdm = useCallback(
@ -147,15 +168,12 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '' || formField.municipio_id === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
doUpdatePostoAdm(e); doUpdatePostoAdm(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -218,57 +236,80 @@ const EditDialog = () => {
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="card-body grid gap-5"> <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"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5 text-sm">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Postu Administrativo Name<span className="text-red-500">*</span> Postu Administrativo Name
<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <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> </label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col">
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button type="button" className="input col-span-5 text-left"> <PopoverTrigger asChild>
{municipios.find((municipio) => municipio.id === formField.municipio_id) <button
?.name || 'Select Municipio'} type="button"
</button> className={`input text-left ${errors.municipio_id ? 'border-red-500' : ''}`}
</PopoverTrigger> >
<PopoverContent className="w-[400px] p-0"> {municipios.find(
<Command> (municipio) => municipio.id === formField.municipio_id
<CommandInput placeholder="Search Municipio..." /> )?.name || 'Select Municipio'}
<CommandList> </button>
<CommandEmpty>No Municipio found.</CommandEmpty> </PopoverTrigger>
<CommandGroup> <PopoverContent
{municipios.map((municipio) => ( className="w-[400px] p-0"
<CommandItem onWheel={(e) => e.stopPropagation()}
key={municipio.id} >
value={municipio.name} <Command>
onSelect={() => { <CommandInput placeholder="Search Municipio..." />
setFormField({ <CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
...formField, <CommandEmpty>No Municipio found.</CommandEmpty>
municipio_id: municipio.id <CommandGroup>
}); {municipios.map((municipio) => (
setOpen(false); <CommandItem
}} key={municipio.id}
> value={municipio.name}
{municipio.name} onSelect={() => {
</CommandItem> setFormField({ ...formField, municipio_id: municipio.id });
))} setErrors((prev) => ({ ...prev, municipio_id: '' })); // Clear error
</CommandGroup> setOpen(false);
</CommandList> }}
</Command> >
</PopoverContent> {municipio.name}
</Popover> </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>
</div> </div>

572
src/pages/master/products/blocks/AddDialog.tsx
View File

@ -76,11 +76,41 @@ const AddDialog = () => {
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const validateForm = () => {
const requiredFields = [
{key:'name', label: 'Name'},
{key:'type', label: 'Type'},
{key:'code', label: 'Code'},
{key:'description', label: 'Description'},
{key:'price_point', label: 'Price Point'},
{key:'price_cash', label: 'Price Cash'},
{key:'cashback_point', label: 'Cashback Point'},
{key:'cashback_cash', label: 'Cashback Cash'},
{key:'status', label: 'Status'},
{key:'provider', label: 'Provider'},
{key:'process_on_third_party', label: 'Process On Third Party'}
]
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 doCreateProduct = useCallback( const doCreateProduct = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
@ -136,28 +166,15 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if ( setIsSubmitting(true);
formField.name.trim() === '' || if (!validateForm()) {
formField.type.trim() === '' || setIsSubmitting(false);
formField.code.trim() === '' ||
formField.description.trim() === '' ||
formField.price_point === null ||
formField.price_cash === null ||
formField.cashback_point === null ||
formField.cashback_cash === null ||
formField.status.trim() === '' ||
formField.provider.trim() === '' ||
formField.process_on_third_party.trim() === '' ||
formField.created_by.trim() === '' ||
formField.created_at.trim() === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
doCreateProduct(e); doCreateProduct(e);
// console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -197,234 +214,317 @@ const AddDialog = () => {
</div> </div>
)} )}
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <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"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} value={formField.name}
/> onChange={(e) => {
</div> setFormField({ ...formField, name: e.target.value });
</div> if (e.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="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.type ? 'border-red-500' : ''}`}
value={formField.type} type="text"
onChange={(e) => setFormField({ ...formField, type: e.target.value })} value={formField.type}
/> onChange={(e) => {
</div> setFormField({ ...formField, type: e.target.value });
</div> if (e.target.value) {
setErrors((prev) => ({ ...prev, type: '' }));
}
}}
/>
{errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Code<span className="text-red-500">*</span> Code<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.code ? 'border-red-500' : ''}`}
value={formField.code} type="text"
onChange={(e) => setFormField({ ...formField, code: e.target.value })} value={formField.code}
/> onChange={(e) => {
</div> setFormField({ ...formField, code: e.target.value });
</div> if (e.target.value) {
setErrors((prev) => ({ ...prev, code: '' }));
}
}}
/>
{errors.code && <span className="text-red-500 text-xs mt-1">{errors.code}</span>}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span> Description<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.description ? 'border-red-500' : ''}`}
value={formField.description} type="text"
onChange={(e) => setFormField({ ...formField, description: e.target.value })} value={formField.description}
/> onChange={(e) => {
</div> setFormField({ ...formField, description: e.target.value });
</div> if (e.target.value) {
setErrors((prev) => ({ ...prev, description: '' }));
}
}}
/>
{errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span> Price Point<span className="text-red-500">*</span>
</label> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <NumericFormat
value={formField.price_point ?? ''} className={`input ${errors.price_point ? 'border-red-500' : ''}`}
thousandSeparator="." value={formField.price_point ?? ''}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
price_point: values.floatValue !== undefined ? values.floatValue : '' ...prev,
})); price_point: values.floatValue !== undefined ? values.floatValue : ''
}} }));
placeholder="Enter Price Point" if (values.floatValue !== undefined) {
/> setErrors((prev) => ({ ...prev, price_point: '' }));
</div> }
</div> }}
placeholder="Enter Price Point"
/>
{errors.price_point && (
<span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
)}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span> Price Cash<span className="text-red-500">*</span>
</label> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <NumericFormat
value={formField.price_cash ?? ''} className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
thousandSeparator="." value={formField.price_cash ?? ''}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
price_cash: values.floatValue !== undefined ? values.floatValue : '' ...prev,
})); price_cash: values.floatValue !== undefined ? values.floatValue : ''
}} }));
placeholder="Enter Price Cash" if (values.floatValue !== undefined) {
/> setErrors((prev) => ({ ...prev, price_cash: '' }));
</div> }
</div> }}
placeholder="Enter Price Cash"
/>
{errors.price_cash && (
<span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
)}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span> Cashback Point<span className="text-red-500">*</span>
</label> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <NumericFormat
value={formField.cashback_point ?? ''} className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
thousandSeparator="." value={formField.cashback_point ?? ''}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
cashback_point: values.floatValue !== undefined ? values.floatValue : '' ...prev,
})); cashback_point: values.floatValue !== undefined ? values.floatValue : ''
}} }));
placeholder="Enter Cashback Point" if (values.floatValue !== undefined) {
/> setErrors((prev) => ({ ...prev, cashback_point: '' }));
</div> }
</div> }}
placeholder="Enter Cashback Point"
/>
{errors.cashback_point && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
)}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span> Cashback Cash<span className="text-red-500">*</span>
</label> </label>
<NumericFormat <div className="grow flex flex-col">
className="input" <NumericFormat
value={formField.cashback_cash ?? ''} className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
thousandSeparator="." value={formField.cashback_cash ?? ''}
decimalSeparator="," thousandSeparator="."
allowNegative={false} decimalSeparator=","
onValueChange={(values) => { allowNegative={false}
setFormField((prev) => ({ onValueChange={(values) => {
...prev, setFormField((prev) => ({
cashback_cash: values.floatValue !== undefined ? values.floatValue : '' ...prev,
})); cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
}} }));
placeholder="Enter Cashback Cash" if (values.floatValue !== undefined) {
/> setErrors((prev) => ({ ...prev, cashback_cash: '' }));
</div> }
</div> }}
placeholder="Enter Cashback Cash"
/>
{errors.cashback_cash && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
)}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.status} <Select
onValueChange={(value) => setFormField({ ...formField, status: value })} value={formField.status}
> onValueChange={(value) => {
<SelectTrigger> setFormField({ ...formField, status: value });
<SelectValue placeholder="Select Status" /> setErrors((prev) => ({ ...prev, status: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="Y">Yes</SelectItem> <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
<SelectItem value="N">No</SelectItem> <SelectValue placeholder="Select Status" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
</div> <SelectItem value="Y">Yes</SelectItem>
</div> <SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
{errors.status && <span className="text-red-500 text-xs mt-1">{errors.status}</span>}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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">Provider</label> <label className="form-label flex items-center gap-1 max-w-56">Provider<span className="text-red-500">*</span></label>
<Select <div className="grow flex flex-col">
value={formField.provider} <Select
onValueChange={(value) => value={formField.provider}
setFormField({ ...formField, provider: value.toString() }) onValueChange={(value) => {
} setFormField({ ...formField, provider: value.toString() });
> setErrors((prev) => ({ ...prev, provider: '' }));
<SelectTrigger> }}
<SelectValue placeholder="Select Provider" /> >
</SelectTrigger> <SelectTrigger className={`input ${errors.provider ? 'border-red-500' : ''}`}>
<SelectContent> <SelectValue placeholder="Select Provider" />
{providers.map((provider) => ( </SelectTrigger>
<SelectItem <SelectContent>
key={provider.provider_id} {providers.map((provider) => (
value={provider.provider_id.toString()} <SelectItem
> key={provider.provider_id}
{provider.provider_name} value={provider.provider_id.toString()}
</SelectItem> >
))} {provider.provider_name}
</SelectContent> </SelectItem>
</Select> ))}
</div> </SelectContent>
</div> </Select>
{errors.provider && <span className="text-red-500 text-xs mt-1">{errors.provider}</span>}
</div>
</div>
</div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Process on Third Party<span className="text-red-500">*</span> Process on Third Party<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.process_on_third_party} <Select
onValueChange={(value) => value={formField.process_on_third_party}
setFormField({ ...formField, process_on_third_party: value }) onValueChange={(value) => {
} setFormField({ ...formField, process_on_third_party: value });
> setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
<SelectTrigger> }}
<SelectValue placeholder="Select Status" /> >
</SelectTrigger> <SelectTrigger className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}>
<SelectContent> <SelectValue placeholder="Select Status" />
<SelectItem value="Y">Yes</SelectItem> </SelectTrigger>
<SelectItem value="N">No</SelectItem> <SelectContent>
</SelectContent> <SelectItem value="Y">Yes</SelectItem>
</Select> <SelectItem value="N">No</SelectItem>
</div> </SelectContent>
</div> </Select>
{errors.process_on_third_party && (
<span className="text-red-500 text-xs mt-1">{errors.process_on_third_party}</span>
)}
</div>
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Create'
)}
</Button>
</div>
</div>
</form>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Create'
)}
</Button>
</div>
</div>
</form>
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

332
src/pages/master/products/blocks/EditDialog.tsx
View File

@ -81,7 +81,37 @@ const EditDialog = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
}; };
const[errors, setErrors] = useState<Record<string, string>>({});
const validateForm = () => {
const requiredFields = [
{key:'name', label: 'Name'},
{key:'type', label: 'Type'},
{key:'code', label: 'Code'},
{key:'description', label: 'Description'},
{key:'price_point', label: 'Price Point'},
{key:'price_cash', label: 'Price Cash'},
{key:'cashback_point', label: 'Cashback Point'},
{key:'cashback_cash', label: 'Cashback Cash'},
{key:'status', label: 'Status'},
{key:'provider', label: 'Provider'},
{key:'process_on_third_party', label: 'Process On Third Party'}
]
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 doUpdateProduct = useCallback( const doUpdateProduct = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -164,29 +194,14 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if ( if (!validateForm()) {
formField.name.trim() === '' || setIsSubmitting(false);
formField.type.trim() === '' ||
formField.code.trim() === '' ||
formField.description.trim() === '' ||
formField.price_point === null ||
formField.price_cash === null ||
formField.cashback_point === null ||
formField.cashback_cash === null ||
formField.status.trim() === '' ||
formField.provider.trim() === '' ||
formField.process_on_third_party.trim() === '' ||
formField.updated_by.trim() === '' ||
formField.updated_at.trim() === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
doUpdateProduct(e); doUpdateProduct(e);
// console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -245,72 +260,102 @@ const EditDialog = () => {
</div> </div>
) : ( ) : (
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> {/* Name */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Name<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Name<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} onChange={(e) => {
setFormField({ ...formField, name: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
}}
/> />
{errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Type */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Type<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Type<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.type ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.type} value={formField.type}
onChange={(e) => setFormField({ ...formField, type: e.target.value })} onChange={(e) => {
setFormField({ ...formField, type: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, type: '' }));
}}
/> />
{errors.type && <span className="text-red-500 text-xs mt-1">{errors.type}</span>}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Code */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Code<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Code<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.code ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.code} value={formField.code}
onChange={(e) => setFormField({ ...formField, code: e.target.value })} onChange={(e) => {
setFormField({ ...formField, code: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, code: '' }));
}}
/> />
{errors.code && <span className="text-red-500 text-xs mt-1">{errors.code}</span>}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Description */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Description<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Description<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.description ? 'border-red-500' : ''}`}
type="text" type="text"
value={formField.description} value={formField.description}
onChange={(e) => onChange={(e) => {
setFormField({ ...formField, description: e.target.value }) setFormField({ ...formField, description: e.target.value });
} if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
}}
/> />
{errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Price Point */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Price Point<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Price Point<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat <NumericFormat
className="input" className={`input ${errors.price_point ? 'border-red-500' : ''}`}
value={formField.price_point ?? ''} value={formField.price_point ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
@ -318,21 +363,29 @@ const EditDialog = () => {
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
price_point: values.floatValue !== undefined ? values.floatValue : '' price_point: values.floatValue ?? ''
})); }));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, price_point: '' }));
}} }}
placeholder="Enter Price Point" placeholder="Enter Price Point"
/> />
{errors.price_point && (
<span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Price Cash */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Price Cash<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Price Cash<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat <NumericFormat
className="input" className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
value={formField.price_cash ?? ''} value={formField.price_cash ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
@ -340,21 +393,29 @@ const EditDialog = () => {
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
price_cash: values.floatValue !== undefined ? values.floatValue : '' price_cash: values.floatValue ?? ''
})); }));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, price_cash: '' }));
}} }}
placeholder="Enter Price Cash" placeholder="Enter Price Cash"
/> />
{errors.price_cash && (
<span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Cashback Point */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Cashback Point<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Cashback Point<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat <NumericFormat
className="input" className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
value={formField.cashback_point ?? ''} value={formField.cashback_point ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
@ -362,21 +423,29 @@ const EditDialog = () => {
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
cashback_point: values.floatValue !== undefined ? values.floatValue : '' cashback_point: values.floatValue ?? ''
})); }));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, cashback_point: '' }));
}} }}
placeholder="Enter Cashback Point" placeholder="Enter Cashback Point"
/> />
{errors.cashback_point && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Cashback Cash */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Cashback Cash<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Cashback Cash<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat <NumericFormat
className="input" className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
value={formField.cashback_cash ?? ''} value={formField.cashback_cash ?? ''}
thousandSeparator="." thousandSeparator="."
decimalSeparator="," decimalSeparator=","
@ -384,24 +453,35 @@ const EditDialog = () => {
onValueChange={(values) => { onValueChange={(values) => {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,
cashback_cash: values.floatValue !== undefined ? values.floatValue : '' cashback_cash: values.floatValue ?? ''
})); }));
if (values.floatValue !== undefined)
setErrors((prev) => ({ ...prev, cashback_cash: '' }));
}} }}
placeholder="Enter Cashback Cash" placeholder="Enter Cashback Cash"
/> />
{errors.cashback_cash && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Status */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Status<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Status<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(e) => setFormField({ ...formField, status: e })} onValueChange={(e) => {
setFormField({ ...formField, status: e });
setErrors((prev) => ({ ...prev, status: '' }));
}}
> >
<SelectTrigger> <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select a Status" /> <SelectValue placeholder="Select a Status" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -409,44 +489,63 @@ const EditDialog = () => {
<SelectItem value="N">Inactive</SelectItem> <SelectItem value="N">Inactive</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Provider */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Provider <label className="form-label flex items-center gap-1 max-w-56">
</label> Provider
</label>
<div className="grow flex flex-col">
<Select <Select
value={formField.provider} value={formField.provider}
onValueChange={(e) => setFormField({ ...formField, provider: e })} onValueChange={(e) => {
setFormField({ ...formField, provider: e });
setErrors((prev) => ({ ...prev, provider: '' }));
}}
> >
<SelectTrigger> <SelectTrigger className={`input ${errors.provider ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select a Provider" /> <SelectValue placeholder="Select a Provider" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{providers.map((provider) => ( {providers.map((provider) => (
<SelectItem key={provider.provider_id} value={provider.provider_id}> <SelectItem
key={provider.provider_id}
value={provider.provider_id.toString()}
>
{provider.provider_name} {provider.provider_name}
</SelectItem> </SelectItem>
))} ))}
</SelectContent> </SelectContent>
</Select> </Select>
{errors.provider && (
<span className="text-red-500 text-xs mt-1">{errors.provider}</span>
)}
</div> </div>
</div> </div>
</div>
<div className="w-full"> {/* Process on Third Party */}
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="w-full">
<label className="form-label flex items-center gap-1 max-w-56"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
Process on Third Party<span className="text-red-500">*</span> <label className="form-label flex items-center gap-1 max-w-56">
</label> Process on Third Party<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select <Select
value={formField.process_on_third_party} value={formField.process_on_third_party}
onValueChange={(value) => onValueChange={(value) => {
setFormField({ ...formField, process_on_third_party: value }) setFormField({ ...formField, process_on_third_party: value });
} setErrors((prev) => ({ ...prev, process_on_third_party: '' }));
}}
> >
<SelectTrigger> <SelectTrigger className={`input ${errors.process_on_third_party ? 'border-red-500' : ''}`}>
<SelectValue placeholder="Select Status" /> <SelectValue placeholder="Select Status" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -454,20 +553,25 @@ const EditDialog = () => {
<SelectItem value="N">No</SelectItem> <SelectItem value="N">No</SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
{errors.process_on_third_party && (
<span className="text-red-500 text-xs mt-1">{errors.process_on_third_party}</span>
)}
</div> </div>
</div> </div>
<div className="flex justify-end gap-5">
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Save Changes'
)}
</Button>
</div>
</div> </div>
</form>
<div className="flex justify-end gap-5">
<Button variant="default" type="submit" disabled={isSubmitting}>
{isSubmitting ? (
<RefreshCw className="animate-spin h-8 w-8 text-white mx-7" />
) : (
'Save Changes'
)}
</Button>
</div>
</div>
</form>
)} )}
</div> </div>
</DialogBody> </DialogBody>

51
src/pages/master/profession/blocks/AddDialog.tsx
View File

@ -29,7 +29,7 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const initialState = { const initialState = {
name: '', name: '',
created_by: '', created_by: '',
@ -40,9 +40,31 @@ const AddDialog = () => {
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Profession Name' }];
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 resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const doCreateProfession = useCallback( const doCreateProfession = useCallback(
@ -81,15 +103,13 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (!formField.name.trim()) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill name field.' }); setIsSubmitting(false);
return; return;
} }
doCreateProfession(e); doCreateProfession(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -130,12 +150,21 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<div className='grow flex flex-col'>
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete='off'
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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>
</div> </div>

42
src/pages/master/profession/blocks/EditDialog.tsx
View File

@ -38,12 +38,29 @@ const EditDialog = () => {
updated_at: '' updated_at: ''
}; };
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const validateForm = () => {
const requiredFields = [{ key: 'name', label: 'Profession Name' }];
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] === undefined
) {
newErrors[key] = `${label} is required`;
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const doUpdateProfession = useCallback( const doUpdateProfession = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -101,14 +118,13 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (formField.name.trim() === '') { setIsSubmitting(true);
setAlert({ show: true, message: 'Please fill name field.' }); if (!validateForm()) {
setIsSubmitting(false);
return; return;
} }
doUpdateProfession(e); doUpdateProfession(e);
console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -169,12 +185,22 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<div className="grow flex flex-col">
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete="off"
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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>
</div> </div>

187
src/pages/master/provider/blocks/AddDialog.tsx
View File

@ -63,7 +63,31 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' },
{ key: 'type', label: 'Type' },
{ key: 'status', label: 'Status' },
{ key: 'transaction_type', label: 'Transaction Type' }
];
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 initialState: { const initialState: {
name: string; name: string;
description: string; description: string;
@ -130,21 +154,13 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if ( if (!validateForm()) {
formField.name.trim() === '' || setIsSubmitting(false);
formField.description.trim() === '' ||
formField.type.trim() === '' ||
formField.status.trim() === '' ||
formField.transaction_type === ''
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
// console.log(formField);
doCreateProvider(e); doCreateProvider(e);
setAlert({ show: false, message: '' });
}; };
const getTransactionTypeList = async (sorting: any) => { const getTransactionTypeList = async (sorting: any) => {
@ -225,12 +241,20 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} value={formField.name}
/> onChange={(e) => {
setFormField({ ...formField, name: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, name: '' }));
}}
/>
{errors.name && (
<span className="text-red-500 text-xs mt-1">{errors.name}</span>
)}
</div>
</div> </div>
</div> </div>
@ -239,12 +263,20 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span> Description<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.description ? 'border-red-500' : ''}`}
value={formField.description} type="text"
onChange={(e) => setFormField({ ...formField, description: e.target.value })} value={formField.description}
/> onChange={(e) => {
setFormField({ ...formField, description: e.target.value });
if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
}}
/>
{errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div>
</div> </div>
</div> </div>
@ -253,38 +285,53 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.type} <Select
onValueChange={(value) => setFormField({ ...formField, type: value })} value={formField.type}
> onValueChange={(e) => {
<SelectTrigger> setFormField({ ...formField, type: e });
<SelectValue placeholder="Select Type" /> setErrors((prev) => ({ ...prev, type: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="h2h">Host to Host</SelectItem> <SelectTrigger className={`input ${errors.type ? 'border-red-500' : ''}`}>
<SelectItem value="agent">Agent</SelectItem> <SelectValue placeholder="Select Type" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
<SelectItem value="user">User</SelectItem>
<SelectItem value="agent">Agent</SelectItem>
</SelectContent>
</Select>
{errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span>
)}
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.status} <Select
onValueChange={(value) => setFormField({ ...formField, status: value })} value={formField.status}
> onValueChange={(e) => {
<SelectTrigger> setFormField({ ...formField, status: e });
<SelectValue placeholder="Select Status" /> setErrors((prev) => ({ ...prev, status: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="Y">Active</SelectItem> <SelectTrigger className={`input ${errors.status ? 'border-red-500' : ''}`}>
<SelectItem value="N">Inactive</SelectItem> <SelectValue placeholder="Select Status" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div> </div>
</div> </div>
@ -293,23 +340,31 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Transaction Type<span className="text-red-500">*</span> Transaction Type<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.transaction_type} <Select
onValueChange={(value) => value={formField.transaction_type}
setFormField({ ...formField, transaction_type: value }) onValueChange={(e) => {
} setFormField({ ...formField, transaction_type: e });
> setErrors((prev) => ({ ...prev, transaction_type: '' }));
<SelectTrigger> }}
<SelectValue placeholder="Select Transaction Type" /> >
</SelectTrigger> <SelectTrigger
<SelectContent> className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
{transactions.map((transaction) => ( >
<SelectItem key={transaction.id} value={transaction.id}> <SelectValue placeholder="Select Transaction Type" />
{transaction.name} </SelectTrigger>
</SelectItem> <SelectContent>
))} {transactions.map((transaction) => (
</SelectContent> <SelectItem key={transaction.id} value={transaction.id}>
</Select> {transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.transaction_type && (
<span className="text-red-500 text-xs mt-1">{errors.transaction_type}</span>
)}
</div>
</div> </div>
</div> </div>

199
src/pages/master/provider/blocks/EditDialog.tsx
View File

@ -53,7 +53,31 @@ const EditDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const [errors, setErrors] = useState<Record<string, string>>({});
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' },
{ key: 'type', label: 'Type' },
{ key: 'status', label: 'Status' },
{ key: 'transaction_type', label: 'Transaction Type' }
];
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 initialState: { const initialState: {
name: string; name: string;
description: string; description: string;
@ -81,7 +105,7 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const doUpdateProvider = useCallback( const doUpdateProvider = useCallback(
@ -177,22 +201,14 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if ( if (!validateForm()) {
formField.name.trim() === '' || setIsSubmitting(false);
formField.description.trim() === '' ||
formField.type.trim() === '' ||
formField.status.trim() === '' ||
formField.transaction_type.trim() === '' ||
formField.agent === null
) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
return; return;
} }
doUpdateProvider(e); doUpdateProvider(e);
// console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' }); // setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -258,30 +274,43 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span> Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={({ target }) => value={formField.name}
setFormField((prev) => ({ ...prev, name: target.value })) 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> </div>
{/* Description */}
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span> Description<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.description ? 'border-red-500' : ''}`}
value={formField.description} type="text"
onChange={(e) => value={formField.description}
setFormField({ ...formField, description: e.target.value }) onChange={(e) => {
} setFormField({ ...formField, description: e.target.value });
/> if (e.target.value) setErrors((prev) => ({ ...prev, description: '' }));
}}
/>
{errors.description && (
<span className="text-red-500 text-xs mt-1">{errors.description}</span>
)}
</div>
</div> </div>
</div> </div>
@ -290,18 +319,26 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span> Type<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.type} <Select
onValueChange={(value) => setFormField({ ...formField, type: value })} value={formField.type}
> onValueChange={(value) => {
<SelectTrigger> setFormField({ ...formField, type: value });
<SelectValue placeholder="Select Type" /> setErrors((prev) => ({ ...prev, type: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="h2h">Host to Host</SelectItem> <SelectTrigger className={`input ${errors.type ? 'border-red-500' : ''}`}>
<SelectItem value="agent">Agent</SelectItem> <SelectValue placeholder="Select Type" />
</SelectContent> </SelectTrigger>
</Select> <SelectContent>
<SelectItem value="h2h">Host to Host</SelectItem>
<SelectItem value="agent">Agent</SelectItem>
</SelectContent>
</Select>
{errors.type && (
<span className="text-red-500 text-xs mt-1">{errors.type}</span>
)}
</div>
</div> </div>
</div> </div>
@ -310,18 +347,28 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.status} <Select
onValueChange={(value) => setFormField({ ...formField, status: value })} value={formField.status}
> onValueChange={(value) => {
<SelectTrigger> setFormField({ ...formField, status: value });
<SelectValue placeholder="Select Status" /> setErrors((prev) => ({ ...prev, status: '' }));
</SelectTrigger> }}
<SelectContent> >
<SelectItem value="Y">Active</SelectItem> <SelectTrigger
<SelectItem value="N">Inactive</SelectItem> className={`input ${errors.status ? 'border-red-500' : ''}`}
</SelectContent> >
</Select> <SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div> </div>
</div> </div>
@ -330,23 +377,33 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Transaction Type<span className="text-red-500">*</span> Transaction Type<span className="text-red-500">*</span>
</label> </label>
<Select <div className="grow flex flex-col">
value={formField.transaction_type} <Select
onValueChange={(value) => value={formField.transaction_type}
setFormField({ ...formField, transaction_type: value }) onValueChange={(value) => {
} setFormField({ ...formField, status: value });
> setErrors((prev) => ({ ...prev, status: '' }));
<SelectTrigger className="min-h-[40px] items-center"> }}
<SelectValue placeholder="Select Transaction Type" /> >
</SelectTrigger> <SelectTrigger
<SelectContent> className={`input ${errors.transaction_type ? 'border-red-500' : ''}`}
{transactions.map((transaction) => ( >
<SelectItem key={transaction.id} value={transaction.id}> <SelectValue placeholder="Select Transaction Type" />
{transaction.name} </SelectTrigger>
</SelectItem> <SelectContent>
))} {transactions.map((transaction) => (
</SelectContent> <SelectItem key={transaction.id} value={transaction.id}>
</Select> {transaction.name}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.transaction_type && (
<span className="text-red-500 text-xs mt-1">
{errors.transaction_type}
</span>
)}
</div>
</div> </div>
</div> </div>

146
src/pages/master/sucos/blocks/AddDialog.tsx
View File

@ -46,12 +46,18 @@ const AddDialog = () => {
show: false, show: false,
message: '' message: ''
}); });
const initialState = { const initialState: {
name: string;
postoId: number | null;
created_by: string;
created_at: string;
} = {
name: '', name: '',
postoId: 0, postoId: null,
created_by: '', created_by: '',
created_at: '' created_at: ''
}; };
const [errors, setErrors] = useState<Record<string, string>>({});
const [formField, setFormField] = useState(initialState); const [formField, setFormField] = useState(initialState);
const created_time = new Date(); const created_time = new Date();
@ -59,7 +65,31 @@ const AddDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ show: false, message: '' }); setErrors({});
};
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Sucos Name' },
{ key: 'postoId', label: 'Posto Administrativo Name' }
];
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 doCreateSucos = useCallback( const doCreateSucos = useCallback(
@ -97,15 +127,14 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '' || formField.postoId === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
doCreateSucos(e); doCreateSucos(e);
console.log(formField); // console.log(formField);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -168,12 +197,23 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Sucos Name<span className="text-red-500">*</span> Sucos Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="grow flex flex-col">
className="input" <Input
type="text" className={`input ${errors.name ? 'border-red-500' : ''}`}
value={formField.name} type="text"
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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> </div>
@ -182,42 +222,48 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Postu Administrativo ID<span className="text-red-500">*</span> Postu Administrativo ID<span className="text-red-500">*</span>
</label> </label>
<Popover open={open} onOpenChange={setOpen}> <div className="grow flex flex-col">
<PopoverTrigger asChild> <Popover open={open} onOpenChange={setOpen}>
<button type="button" className="input col-span-5 text-left"> <PopoverTrigger asChild>
{posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId) <button type="button" className="input col-span-5 text-left">
?.PostoAdms_name || 'Select Postu Administrativo'} {posto_adms.find((posto) => posto.PostoAdms_id === formField.postoId)
</button> ?.PostoAdms_name || 'Select Postu Administrativo'}
</PopoverTrigger> </button>
<PopoverContent </PopoverTrigger>
className="w-[400px] p-0" <PopoverContent
onWheel={(e) => e.stopPropagation()} className="w-[400px] p-0"
> onWheel={(e) => e.stopPropagation()}
<Command> >
<CommandInput placeholder="Search Postu Administrativo..." /> <Command>
<CommandList> <CommandInput placeholder="Search Postu Administrativo..." />
<CommandEmpty>No Postu Administrativo Found.</CommandEmpty> <CommandList>
<CommandGroup> <CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
{posto_adms.map((posto) => ( <CommandGroup>
<CommandItem {posto_adms.map((posto) => (
key={posto.PostoAdms_id} <CommandItem
value={posto.PostoAdms_name} key={posto.PostoAdms_id}
onSelect={() => { value={posto.PostoAdms_name}
setFormField({ onSelect={() => {
...formField, setFormField({
postoId: posto.PostoAdms_id ...formField,
}); postoId: posto.PostoAdms_id
setOpen(false); });
}} setOpen(false);
> setErrors((prev) => ({ ...prev, postoId: '' }));
{posto.PostoAdms_name} }}
</CommandItem> >
))} {posto.PostoAdms_name}
</CommandGroup> </CommandItem>
</CommandList> ))}
</Command> </CommandGroup>
</PopoverContent> </CommandList>
</Popover> </Command>
</PopoverContent>
</Popover>
{errors.postoId && (
<span className="text-red-500 text-xs mt-1">{errors.postoId}</span>
)}
</div>
{/* <Input {/* <Input
className="input" className="input"
type="number" type="number"

57
src/pages/master/sucos/blocks/EditDialog.tsx
View File

@ -43,7 +43,7 @@ const EditDialog = () => {
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]); const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
const [errors, setErrors] = useState<Record<string, string>>({});
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -62,12 +62,31 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setAlert({ setErrors({});
show: false,
message: ''
});
}; };
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Sucos Name' },
{ key: 'postoId', label: 'Posto Administrativo Name' }
];
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 doUpdateSucos = useCallback( const doUpdateSucos = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
@ -144,15 +163,15 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
setIsSubmitting(true);
if (formField.name.trim() === '' || formField.postoId === 0) { if (!validateForm()) {
setAlert({ show: true, message: 'Please fill in all required fields.' }); setIsSubmitting(false);
return; return;
} }
// console.log('Form Field before update:', formField); // console.log('Form Field before update:', formField);
doUpdateSucos(e); doUpdateSucos(e);
setAlert({ show: false, message: '' });
}; };
useEffect(() => { useEffect(() => {
@ -217,12 +236,24 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Sucos Name<span className="text-red-500">*</span> Sucos Name<span className="text-red-500">*</span>
</label> </label>
<div className='grow flex flex-col'>
<Input <Input
className="input" className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text" type="text"
autoComplete='off'
value={formField.name} value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} 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> </div>

1
src/pages/transfer/transferfee/blocks/AddDialog.tsx
View File

@ -90,6 +90,7 @@ const AddFeeDialog = () => {
id: customer.id, id: customer.id,
name: customer.username name: customer.username
})); }));
const [errors, setErrors] = useState<Record<string, string>>({});
const initialState = { const initialState = {
name: '', name: '',
description: '', description: '',

7
src/pages/transfer/transfertype/blocks/EditDialog.tsx
View File

@ -109,7 +109,6 @@ const EditDialog = () => {
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialState);
setSelectedGroups([]); setSelectedGroups([]);
setAlert({ show: false, message: '' });
setErrors({}); setErrors({});
}; };
@ -231,11 +230,7 @@ const EditDialog = () => {
} catch (error) { } catch (error) {
toast.error( toast.error(
error instanceof Error ? error.message : 'Failed to Update Transfer Type' error instanceof Error ? error.message : 'Failed to Update Transfer Type'
); )
setAlert({
show: true,
message: error instanceof Error ? error.message : 'Failed to Update Transfer Type'
});
return false; return false;
} }
}, [formField, selectedTransferType]); }, [formField, selectedTransferType]);