changing response on edit and add in mater data module
This commit is contained in:
bagusajisaputroo
@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user