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

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

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

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

@ -41,10 +41,30 @@ const AddDialog = () => {
const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [isSubmitting, setIsSubmitting] = useState(false);
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
setErrors({});
};
const validateForm = () => {
const requiredFields = [{ key: 'name', label: '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(
@ -82,16 +102,17 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (formField.name.trim() === '') {
setAlert({ show: true, message: 'Please fill name field.' });
setIsSubmitting(true);
if(!validateForm()) {
setIsSubmitting(false);
return;
}
doCreateMunicipio(e);
console.log(parsedUser.email);
console.log(formField);
setAlert({ show: false, message: '' });
// console.log(parsedUser.email);
// console.log(formField);
// setAlert({ show: false, message: '' });
};
const handleReset = () => {
@ -133,21 +154,29 @@ const AddDialog = () => {
<form onSubmit={handleSubmit}>
<div className="card-body grid gap-5">
<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">
Municipio Name<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text"
autoComplete='off'
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 className="flex justify-end pt-2.5 gap-5">
<Button variant={'outline'} type="reset" onClick={handleReset}>
<Button variant={'outline'} type="reset" onClick={resetForm}>
Reset
</Button>
<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 formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [errors, setErrors] = useState<Record<string, string>>({});
const resetForm = () => {
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(
@ -73,7 +96,7 @@ const EditDialog = () => {
doSaveLogActivity(createActivity);
} else {
toast.error('Failed update user');
toast.error('Failed update municipios');
setAlert({ show: true, message: response?.message });
}
} catch (error) {
@ -85,6 +108,21 @@ const EditDialog = () => {
[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) => {
setIsLoading(true);
const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
@ -105,18 +143,18 @@ const EditDialog = () => {
setIsLoading(false);
}, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
// e.preventDefault();
if (formField.name.trim() === '') {
setAlert({ show: true, message: 'Please fill name field.' });
return;
}
// if (formField.name.trim() === '') {
// setAlert({ show: true, message: 'Please fill name field.' });
// return;
// }
doUpdateMunicipios(e);
console.log(formField);
setAlert({ show: false, message: '' });
};
// doUpdateMunicipios(e);
// console.log(formField);
// setAlert({ show: false, message: '' });
// };
useEffect(() => {
if (selectedMunicipios) {
@ -170,21 +208,33 @@ const EditDialog = () => {
<p className="mt-4 text-gray-500">Loading Municipio Details...</p>
</div>
) : (
<form onSubmit={handleUpdate}>
<form onSubmit={handleSubmit}>
<div className="card-body grid gap-5">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Municipio Name<span className="text-red-500">*</span>
</label>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Municipios Name
<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input
className="input"
className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text"
autoComplete="off"
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 className="flex justify-end pt-2.5">
<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,
message: ''
});
const [errors, setErrors] = useState<Record<string, string>>({});
const initialState = {
name: '',
municipio_id: 0,
@ -61,9 +61,32 @@ const AddDialog = () => {
const resetForm = () => {
setFormField(initialState);
setAlert({ show: false, message: '' });
setErrors({});
};
const validateForm = () => {
const requiredFields = [
{ key: 'name', label: 'Postu Administrativo Name' },
{ key: 'municipio_id', label: 'Municipio Name' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
const value = formField[key as keyof typeof formField];
const isEmpty = value === '' || value === null || value === undefined || value === 0;
if (isEmpty) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};
const doCreatePostoAdm = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@ -121,15 +144,12 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (formField.name.trim() === '' || formField.municipio_id === 0) {
setAlert({ show: true, message: 'Please fill in all required fields.' });
setIsSubmitting(true);
if (!validateForm()) {
setIsSubmitting(false);
return;
}
doCreatePostoAdm(e);
console.log(formField);
setAlert({ show: false, message: '' });
};
useEffect(() => {
@ -169,61 +189,78 @@ const AddDialog = () => {
<form onSubmit={handleSubmit}>
<div className="card-body grid gap-5">
<div className="w-full">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Postu Administrativo Name<span className="text-red-500">*</span>
Posto Administrativo Name
<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
<div className="grow flex flex-col">
<Input
className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text"
autoComplete="off"
value={formField.name}
onChange={({ target }) => {
setFormField((prev) => ({ ...prev, name: target.value }));
if (target.value) {
setErrors((prev) => ({ ...prev, name: '' }));
}
}}
/>
{errors.name && <span className="text-red-500 text-xs mt-1">{errors.name}</span>}
</div>
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Municipio Name<span className="text-red-500">*</span>
Municipio Name
<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left">
{municipios.find((municipio) => municipio.id === formField.municipio_id)
?.name || 'Select Municipio'}
</button>
</PopoverTrigger>
<PopoverContent
className="w-[400px] p-0"
onWheel={(e) => e.stopPropagation()}
>
<Command>
<CommandInput placeholder="Search Municipio..." />
<CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
<CommandEmpty>No Municipio found.</CommandEmpty>
<CommandGroup>
{municipios.map((municipio) => (
<CommandItem
key={municipio.id}
value={municipio.name}
onSelect={() => {
setFormField({
...formField,
municipio_id: municipio.id
});
setOpen(false);
}}
>
{municipio.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
<div className="grow flex flex-col">
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button
type="button"
className={`input text-left ${errors.municipio_id ? 'border-red-500' : ''}`}
>
{municipios.find((municipio) => municipio.id === formField.municipio_id)
?.name || 'Select Municipio'}
</button>
</PopoverTrigger>
<PopoverContent
className="w-[400px] p-0"
onWheel={(e) => e.stopPropagation()}
>
<Command>
<CommandInput placeholder="Search Municipio..." />
<CommandList className="max-h-[300px] overflow-y-auto pointer-events-auto">
<CommandEmpty>No Municipio found.</CommandEmpty>
<CommandGroup>
{municipios.map((municipio) => (
<CommandItem
key={municipio.id}
value={municipio.name}
onSelect={() => {
setFormField({ ...formField, municipio_id: municipio.id });
setErrors((prev) => ({ ...prev, municipio_id: '' }));
setOpen(false);
}}
>
{municipio.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
{errors.municipio_id && (
<span className="text-red-500 text-xs mt-1">{errors.municipio_id}</span>
)}
</div>
</div>
</div>

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

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

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

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

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

@ -81,7 +81,37 @@ const EditDialog = () => {
setFormField(initialState);
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(
async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
@ -164,29 +194,14 @@ const EditDialog = () => {
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (
formField.name.trim() === '' ||
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.' });
setIsSubmitting(true);
if (!validateForm()) {
setIsSubmitting(false);
return;
}
doUpdateProduct(e);
// console.log(formField);
setAlert({ show: false, message: '' });
// setAlert({ show: false, message: '' });
};
useEffect(() => {
@ -245,72 +260,102 @@ const EditDialog = () => {
</div>
) : (
<form onSubmit={handleUpdate}>
<div className="card-body grid gap-5">
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span>
</label>
<div className="card-body grid gap-5">
{/* Name */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Name<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input
className="input"
className={`input ${errors.name ? 'border-red-500' : ''}`}
type="text"
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 className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span>
</label>
</div>
{/* Type */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Type<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input
className="input"
className={`input ${errors.type ? 'border-red-500' : ''}`}
type="text"
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 className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Code<span className="text-red-500">*</span>
</label>
</div>
{/* Code */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Code<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input
className="input"
className={`input ${errors.code ? 'border-red-500' : ''}`}
type="text"
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 className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span>
</label>
</div>
{/* Description */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Input
className="input"
className={`input ${errors.description ? 'border-red-500' : ''}`}
type="text"
value={formField.description}
onChange={(e) =>
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 className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span>
</label>
</div>
{/* Price Point */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Price Point<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat
className="input"
className={`input ${errors.price_point ? 'border-red-500' : ''}`}
value={formField.price_point ?? ''}
thousandSeparator="."
decimalSeparator=","
@ -318,21 +363,29 @@ const EditDialog = () => {
onValueChange={(values) => {
setFormField((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"
/>
{errors.price_point && (
<span className="text-red-500 text-xs mt-1">{errors.price_point}</span>
)}
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span>
</label>
</div>
{/* Price Cash */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Price Cash<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat
className="input"
className={`input ${errors.price_cash ? 'border-red-500' : ''}`}
value={formField.price_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
@ -340,21 +393,29 @@ const EditDialog = () => {
onValueChange={(values) => {
setFormField((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"
/>
{errors.price_cash && (
<span className="text-red-500 text-xs mt-1">{errors.price_cash}</span>
)}
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span>
</label>
</div>
{/* Cashback Point */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Cashback Point<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat
className="input"
className={`input ${errors.cashback_point ? 'border-red-500' : ''}`}
value={formField.cashback_point ?? ''}
thousandSeparator="."
decimalSeparator=","
@ -362,21 +423,29 @@ const EditDialog = () => {
onValueChange={(values) => {
setFormField((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"
/>
{errors.cashback_point && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_point}</span>
)}
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span>
</label>
</div>
{/* Cashback Cash */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Cashback Cash<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<NumericFormat
className="input"
className={`input ${errors.cashback_cash ? 'border-red-500' : ''}`}
value={formField.cashback_cash ?? ''}
thousandSeparator="."
decimalSeparator=","
@ -384,24 +453,35 @@ const EditDialog = () => {
onValueChange={(values) => {
setFormField((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"
/>
{errors.cashback_cash && (
<span className="text-red-500 text-xs mt-1">{errors.cashback_cash}</span>
)}
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span>
</label>
</div>
{/* Status */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select
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" />
</SelectTrigger>
<SelectContent>
@ -409,44 +489,63 @@ const EditDialog = () => {
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<span className="text-red-500 text-xs mt-1">{errors.status}</span>
)}
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Provider
</label>
</div>
{/* Provider */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Provider
</label>
<div className="grow flex flex-col">
<Select
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" />
</SelectTrigger>
<SelectContent>
{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}
</SelectItem>
))}
</SelectContent>
</Select>
{errors.provider && (
<span className="text-red-500 text-xs mt-1">{errors.provider}</span>
)}
</div>
</div>
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Process on Third Party<span className="text-red-500">*</span>
</label>
</div>
{/* Process on Third Party */}
<div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">
Process on Third Party<span className="text-red-500">*</span>
</label>
<div className="grow flex flex-col">
<Select
value={formField.process_on_third_party}
onValueChange={(value) =>
setFormField({ ...formField, process_on_third_party: value })
}
onValueChange={(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" />
</SelectTrigger>
<SelectContent>
@ -454,20 +553,25 @@ const EditDialog = () => {
<SelectItem value="N">No</SelectItem>
</SelectContent>
</Select>
{errors.process_on_third_party && (
<span className="text-red-500 text-xs mt-1">{errors.process_on_third_party}</span>
)}
</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>
</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>
</DialogBody>

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

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

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

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

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

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

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

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

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

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

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

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