fix editdialog transfertype
This commit is contained in:
bagusajisaputroo
@ -69,8 +69,7 @@ const EditDialog = () => {
|
||||
});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
const [isLoadingWallets, setIsLoadingWallets] = useState(false);
|
||||
|
||||
const [isLoadingWallets, setIsLoadingWallets] = useState(false);
|
||||
|
||||
const initialState: {
|
||||
name: string;
|
||||
@ -122,6 +121,10 @@ const EditDialog = () => {
|
||||
permission: prevState.permission.filter((id) => id !== groupId)
|
||||
};
|
||||
} else {
|
||||
// Hapus error permission ketika user memilih group
|
||||
if (errors.permission && prevState.permission.length === 0) {
|
||||
setErrors((prev) => ({ ...prev, permission: '' }));
|
||||
}
|
||||
return {
|
||||
...prevState,
|
||||
permission: [...prevState.permission, groupId]
|
||||
@ -138,7 +141,8 @@ const EditDialog = () => {
|
||||
{ key: 'wallet_destination', label: 'To Account' },
|
||||
{ key: 'status', label: 'Status' },
|
||||
{ key: 'status_approval', label: 'Status Approval' },
|
||||
{ key: 'status_kind', label: 'Status Kind' }
|
||||
{ key: 'status_kind', label: 'Status Kind' },
|
||||
{ key: 'permission', label: 'Group' }
|
||||
];
|
||||
|
||||
const newErrors: Record<string, string> = {};
|
||||
@ -146,9 +150,11 @@ const EditDialog = () => {
|
||||
|
||||
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
|
||||
key === 'permission'
|
||||
? !formField[key] || formField[key].length === 0
|
||||
: 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`;
|
||||
// Show toast for each required field
|
||||
@ -228,9 +234,7 @@ const EditDialog = () => {
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error(
|
||||
error instanceof Error ? error.message : 'Failed to Update Transfer Type'
|
||||
)
|
||||
toast.error(error instanceof Error ? error.message : 'Failed to Update Transfer Type');
|
||||
return false;
|
||||
}
|
||||
}, [formField, selectedTransferType]);
|
||||
@ -369,36 +373,35 @@ const EditDialog = () => {
|
||||
}
|
||||
}, [showEditDialog]);
|
||||
const renderSelectWithLoading = (
|
||||
value: string,
|
||||
onChangeHandler: (value: string) => void,
|
||||
options: { id: string; name: string }[] | null,
|
||||
placeholder: string,
|
||||
isLoading: boolean
|
||||
) => {
|
||||
return (
|
||||
<Select value={value} onValueChange={onChangeHandler} disabled={isLoading}>
|
||||
<SelectTrigger>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center">
|
||||
<div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
|
||||
<span className="ml-2">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={placeholder} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options &&
|
||||
options.map((option) => (
|
||||
<SelectItem value={option.id} key={option.id}>
|
||||
{option.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
|
||||
value: string,
|
||||
onChangeHandler: (value: string) => void,
|
||||
options: { id: string; name: string }[] | null,
|
||||
placeholder: string,
|
||||
isLoading: boolean
|
||||
) => {
|
||||
return (
|
||||
<Select value={value} onValueChange={onChangeHandler} disabled={isLoading}>
|
||||
<SelectTrigger>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center">
|
||||
<div className="animate-pulse bg-gray-200 h-4 w-24 rounded"></div>
|
||||
<span className="ml-2">Loading...</span>
|
||||
</div>
|
||||
) : (
|
||||
<SelectValue placeholder={placeholder} />
|
||||
)}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options &&
|
||||
options.map((option) => (
|
||||
<SelectItem value={option.id} key={option.id}>
|
||||
{option.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
|
||||
@ -462,7 +465,7 @@ const EditDialog = () => {
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Description
|
||||
<span className="text-red-500">*</span>
|
||||
@ -564,13 +567,13 @@ const EditDialog = () => {
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<div className="grow flex flex-col">
|
||||
{renderSelectWithLoading(
|
||||
formField.wallet_origin,
|
||||
(value) => setFormField({ ...formField, wallet_origin: value }),
|
||||
wallets,
|
||||
'Select Wallet',
|
||||
isLoadingWallets
|
||||
)}
|
||||
{renderSelectWithLoading(
|
||||
formField.wallet_origin,
|
||||
(value) => setFormField({ ...formField, wallet_origin: value }),
|
||||
wallets,
|
||||
'Select Wallet',
|
||||
isLoadingWallets
|
||||
)}
|
||||
{errors.wallet_origin && (
|
||||
<span className="text-red-500 text-xs mt-1">{errors.wallet_origin}</span>
|
||||
)}
|
||||
@ -592,7 +595,9 @@ const EditDialog = () => {
|
||||
setErrors((prev) => ({ ...prev, wallet_destination: '' }));
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className={errors.wallet_destination ? 'border-red-500' : ''}>
|
||||
<SelectTrigger
|
||||
className={errors.wallet_destination ? 'border-red-500' : ''}
|
||||
>
|
||||
<SelectValue placeholder="Select Wallet" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@ -604,7 +609,9 @@ const EditDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{errors.wallet_destination && (
|
||||
<span className="text-red-500 text-xs mt-1">{errors.wallet_destination}</span>
|
||||
<span className="text-red-500 text-xs mt-1">
|
||||
{errors.wallet_destination}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@ -759,9 +766,11 @@ const EditDialog = () => {
|
||||
placeholder="No groups selected"
|
||||
value={selectedPermissionNames || ''}
|
||||
readOnly
|
||||
className="bg-gray-100 mb-2"
|
||||
className={`bg-gray-100 mb-2 ${errors.permission ? 'border-red-500' : ''}`}
|
||||
/>
|
||||
|
||||
{errors.permission && (
|
||||
<span className="text-red-500 text-xs mt-2">{errors.permission}</span>
|
||||
)}
|
||||
<div className="border rounded-md p-3 max-h-48 overflow-y-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
{groups.map((group) => (
|
||||
@ -786,11 +795,7 @@ const EditDialog = () => {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-2.5 gap-5">
|
||||
<Button
|
||||
variant={'outline'}
|
||||
type="button"
|
||||
onClick={() => resetForm()}
|
||||
>
|
||||
<Button variant={'outline'} type="button" onClick={() => resetForm()}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant={'default'} type="submit" disabled={isSubmitting}>
|
||||
@ -816,4 +821,4 @@ const EditDialog = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export { EditDialog };
|
||||
export { EditDialog };
|
||||
|
||||
Reference in New Issue
Block a user