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

fix alert empty validation on manage wallet module

Browse Source 
- make 2 mode of validation (create and update)
- change input field group
This commit is contained in:
Wikzyy
2025-05-08 17:10:10 +07:00
parent faf9adbb42
commit ebd5e8b4f9
4 changed files with 247 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

211
src/pages/master/wallet/blocks/AddDialog.tsx
View File

@ -46,19 +46,21 @@ const AddDialog = () => {
const handleGroupChange = (groupId: string) => { const handleGroupChange = (groupId: string) => {
setFormField((prevState) => { setFormField((prevState) => {
const isSelected = prevState.group.includes(groupId); const currentGroup = prevState.group ?? [];
const isSelected = currentGroup.includes(groupId);
if (isSelected) { if (isSelected) {
// Remove the group if already selected // Remove the group if already selected
return { return {
...prevState, ...prevState,
group: prevState.group.filter((id) => id !== groupId) group: currentGroup.filter((id) => id !== groupId)
}; };
} else { } else {
// Add the group if not selected // Add the group if not selected
return { return {
...prevState, ...prevState,
group: [...prevState.group, groupId] group: [...currentGroup, groupId]
}; };
} }
}); });
@ -99,11 +101,11 @@ const AddDialog = () => {
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (!validateFormsWallet(formField, setErrors)) { if (!validateFormsWallet(formField, setErrors, 'create')) {
return; return;
} }
console.log(formField); console.log(formField);
// doCreateWallet(e); doCreateWallet(e);
}; };
const getCurrencyLists = async (sorting: any) => { const getCurrencyLists = async (sorting: any) => {
@ -137,7 +139,7 @@ const AddDialog = () => {
}; };
const selectedGroups = groups const selectedGroups = groups
.filter((g) => formField.group.includes(g.id)) .filter((g) => formField.group?.includes(g.id))
.map((g) => g.name) .map((g) => g.name)
.join(', '); .join(', ');
@ -154,7 +156,7 @@ const AddDialog = () => {
return ( return (
<Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}> <Dialog open={showAddDialog} onOpenChange={(open) => handleAddDialog(open)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[1000px] flex flex-col p-5 overflow-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Wallet - Create</DialogTitle> <DialogTitle>Wallet - Create</DialogTitle>
<DialogDescription></DialogDescription> <DialogDescription></DialogDescription>
@ -168,18 +170,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Wallet Name<span className="text-red-500">*</span> Wallet Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="w-full">
className={errors.name ? 'border-red-500' : ''} <Input
type="text" className={errors.name ? 'border-red-500' : ''}
value={formField.name} type="text"
onChange={(e) => { value={formField.name}
setFormField({ ...formField, name: e.target.value }); onChange={(e) => {
setErrors({ ...errors, name: '' }); setFormField({ ...formField, name: e.target.value });
}} setErrors({ ...errors, name: '' });
placeholder="Wallet Name" }}
/> placeholder="Wallet Name"
/>
{errors.name && (
<div className="text-red-500 text-xs mt-1">{errors.name}</div>
)}
</div>
</div> </div>
{errors.name && <div className="text-red-500 text-xs mt-1">{errors.name}</div>}
</div> </div>
<div className="w-full"> <div className="w-full">
@ -187,20 +193,22 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Description<span className="text-red-500">*</span> Description<span className="text-red-500">*</span>
</label> </label>
<Input <div className="w-full">
className={errors.description ? 'border-red-500' : ''} <Input
type="text" className={errors.description ? 'border-red-500' : ''}
value={formField.description} type="text"
onChange={(e) => { value={formField.description}
setFormField({ ...formField, description: e.target.value }); onChange={(e) => {
setErrors({ ...errors, description: '' }); setFormField({ ...formField, description: e.target.value });
}} setErrors({ ...errors, description: '' });
placeholder="Description" }}
/> placeholder="Description"
/>
{errors.description && (
<div className="text-red-500 text-xs mt-1">{errors.description}</div>
)}
</div>
</div> </div>
{errors.description && (
<div className="text-red-500 text-xs mt-1">{errors.description}</div>
)}
</div> </div>
<div className="w-full"> <div className="w-full">
@ -208,25 +216,27 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Status<span className="text-red-500">*</span> Status<span className="text-red-500">*</span>
</label> </label>
<Select <div className="w-full">
value={formField.status} <Select
onValueChange={(value) => { value={formField.status}
setFormField({ ...formField, status: value }); onValueChange={(value) => {
setErrors({ ...errors, status: '' }); setFormField({ ...formField, status: value });
}} setErrors({ ...errors, status: '' });
> }}
<SelectTrigger className={errors.status ? 'border-red-500' : ''}> >
<SelectValue placeholder="Select Status" /> <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
</SelectTrigger> <SelectValue placeholder="Select Status" />
<SelectContent> </SelectTrigger>
<SelectItem value="Y">Active</SelectItem> <SelectContent>
<SelectItem value="N">Inactive</SelectItem> <SelectItem value="Y">Active</SelectItem>
</SelectContent> <SelectItem value="N">Inactive</SelectItem>
</Select> </SelectContent>
</Select>
{errors.status && (
<div className="text-red-500 text-xs mt-1">{errors.status}</div>
)}
</div>
</div> </div>
{errors.status && (
<div className="text-red-500 text-xs mt-1">{errors.status}</div>
)}
</div> </div>
<div className="w-full"> <div className="w-full">
@ -234,28 +244,30 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Currency<span className="text-red-500">*</span> Currency<span className="text-red-500">*</span>
</label> </label>
<Select <div className="w-full">
value={formField.id_currency} <Select
onValueChange={(value) => { value={formField.id_currency}
setFormField({ ...formField, id_currency: value }); onValueChange={(value) => {
setErrors({ ...errors, id_currency: '' }); setFormField({ ...formField, id_currency: value });
}} setErrors({ ...errors, id_currency: '' });
> }}
<SelectTrigger className={errors.id_currency ? 'border-red-500' : ''}> >
<SelectValue placeholder="Select Currency Type" /> <SelectTrigger className={errors.id_currency ? 'border-red-500' : ''}>
</SelectTrigger> <SelectValue placeholder="Select Currency Type" />
<SelectContent> </SelectTrigger>
{currencies.map((currency) => ( <SelectContent>
<SelectItem key={currency.ID} value={currency.ID}> {currencies.map((currency) => (
{currency.name} <SelectItem key={currency.ID} value={currency.ID}>
</SelectItem> {currency.name}
))} </SelectItem>
</SelectContent> ))}
</Select> </SelectContent>
</Select>
{errors.id_currency && (
<div className="text-red-500 text-xs mt-1">{errors.id_currency}</div>
)}
</div>
</div> </div>
{errors.id_currency && (
<div className="text-red-500 text-xs mt-1">{errors.id_currency}</div>
)}
</div> </div>
<div className="w-full"> <div className="w-full">
@ -263,36 +275,37 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Groups<span className="text-red-500">*</span> Groups<span className="text-red-500">*</span>
</label> </label>
<div className="relative w-full"> <div className="w-full">
<Input <div className="relative w-full">
type="text" <Input
placeholder="No groups selected" type="text"
value={selectedGroups || ''} placeholder="No groups selected"
readOnly value={selectedGroups || ''}
className="bg-gray-100 mb-2" readOnly
/> className={`bg-gray-100 mb-2 ${errors.group ? 'border-red-500' : ''}`}
{errors.group && ( />
<div className="text-red-500 text-xs mt-1">{errors.group}</div> <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) => (
<div className="border rounded-md p-3 max-h-48 overflow-y-auto"> <div key={group.id} className="flex items-center space-x-2">
<div className="grid grid-cols-1 md:grid-cols-2 gap-2"> <Checkbox
{groups.map((group) => ( id={`group-${group.id}`}
<div key={group.id} className="flex items-center space-x-2"> checked={formField.group?.includes(group.id)}
<Checkbox onCheckedChange={() => handleGroupChange(group.id)}
id={`group-${group.id}`} />
checked={formField.group.includes(group.id)} <label
onCheckedChange={() => handleGroupChange(group.id)} htmlFor={`group-${group.id}`}
/> className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
<label >
htmlFor={`group-${group.id}`} {group.name}
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" </label>
> </div>
{group.name} ))}
</label> </div>
</div>
))}
</div> </div>
{errors.group && (
<div className="text-red-500 text-xs mt-1">{errors.group}</div>
)}
</div> </div>
</div> </div>
</div> </div>

151
src/pages/master/wallet/blocks/EditDialog.tsx
View File

@ -23,21 +23,7 @@ import {
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
import { RefreshCw } from 'lucide-react'; import { RefreshCw } from 'lucide-react';
import { CurrencyProps, GroupProps, initialStateWallet, validateFormsWallet } from './Types';
interface CurrencyProps {
ID: string;
code: string;
name: string;
prefix: string;
status: string;
}
interface GroupProps {
id: string;
name: string;
description: string;
status: string;
}
const API_URL_WALLET = apiConfig.service_wallet; const API_URL_WALLET = apiConfig.service_wallet;
const API_URL_MASTER_DATA = apiConfig.service_master_data; const API_URL_MASTER_DATA = apiConfig.service_master_data;
@ -47,31 +33,15 @@ const EditDialog = () => {
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { GetData, PutData } = useCallApi(); const { GetData, PutData } = useCallApi();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({ const [errors, setErrors] = useState<Record<string, string>>({});
show: false, const [formField, setFormField] = useState(initialStateWallet);
message: ''
});
const initialState: {
name: string;
description: string;
status: string;
currency_id: string;
group: string[];
} = {
name: '',
description: '',
status: '',
currency_id: '',
group: []
};
const [formField, setFormField] = useState(initialState);
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]); const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
const [groups, setGroups] = useState<GroupProps[]>([]); const [groups, setGroups] = useState<GroupProps[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false);
const resetForm = () => { const resetForm = () => {
setFormField(initialState); setFormField(initialStateWallet);
setAlert({ show: false, message: '' }); setErrors({});
}; };
const doUpdateWallet = useCallback( const doUpdateWallet = useCallback(
@ -98,8 +68,7 @@ const EditDialog = () => {
doSaveLogActivity(createActivity); doSaveLogActivity(createActivity);
} else { } else {
toast.error('Failed Update Wallet'); toast.error(response?.message);
setAlert({ show: true, message: response?.message });
} }
} catch (error) { } catch (error) {
toast.error('Something went wrong, please try again.'); toast.error('Something went wrong, please try again.');
@ -119,9 +88,11 @@ const EditDialog = () => {
description: formField.description, description: formField.description,
status: formField.status status: formField.status
}; };
// console.log(payload);
if (!validateFormsWallet(payload, setErrors, 'update')) {
return;
}
doUpdateWallet(payload); doUpdateWallet(payload);
setAlert({ show: false, message: '' });
}; };
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
@ -179,10 +150,10 @@ const EditDialog = () => {
} }
}; };
const selectedCurrency = currencies.find((currency) => currency.ID === formField.currency_id); const selectedCurrency = currencies.find((currency) => currency.ID === formField.id_currency);
const selectedGroupNames = groups const selectedGroupNames = groups
.filter((g) => formField.group.includes(g.id)) .filter((g) => formField.group?.includes(g.id))
.map((g) => g.name) .map((g) => g.name)
.join(', '); .join(', ');
@ -193,14 +164,6 @@ const EditDialog = () => {
useEffect(() => { useEffect(() => {
if (selectedWallet) { if (selectedWallet) {
// setFormField((prev) => ({
// ...prev,
// name: selectedWallet?.Wallet_name,
// description: selectedWallet?.Wallet_description,
// status: selectedWallet?.Wallet_status,
// currency_id: selectedWallet?.Wallet_currency_id,
// group: selectedWallet?.Wallet_group
// }));
doFetchData(selectedWallet?.id); doFetchData(selectedWallet?.id);
} }
}, [selectedWallet]); }, [selectedWallet]);
@ -220,12 +183,6 @@ const EditDialog = () => {
</DialogHeader> </DialogHeader>
<DialogBody className="scrollable"> <DialogBody className="scrollable">
<div className="flex flex-col"> <div className="flex flex-col">
{alert.show && (
<Alert variant="danger">
<h3>{alert.message}</h3>
</Alert>
)}
{isLoading ? ( {isLoading ? (
<div className="flex flex-col items-center justify-center p-8"> <div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full"> <div className="animate-pulse flex space-x-4 w-full">
@ -245,48 +202,74 @@ const EditDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Wallet Name Wallet Name<span className="text-red-500">*</span>
</label> </label>
<Input <div className="w-full">
type="text" <Input
value={formField.name} className={errors.name ? 'border-red-500' : ''}
onChange={(e) => setFormField({ ...formField, name: e.target.value })} type="text"
placeholder="Wallet Name" value={formField.name}
/> onChange={(e) => {
setFormField({ ...formField, name: e.target.value });
setErrors({ ...errors, name: '' });
}}
placeholder="Wallet Name"
/>
{errors.name && (
<div className="text-red-500 text-xs mt-1">{errors.name}</div>
)}
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Description Description<span className="text-red-500">*</span>
</label> </label>
<Input <div className="w-full">
type="text" <Input
value={formField.description} className={errors.description ? 'border-red-500' : ''}
onChange={(e) => type="text"
setFormField({ ...formField, description: e.target.value }) value={formField.description}
} onChange={(e) => {
placeholder="Description" setFormField({ ...formField, description: e.target.value });
/> setErrors({ ...errors, description: '' });
}}
placeholder="Description"
/>
{errors.description && (
<div className="text-red-500 text-xs mt-1">{errors.description}</div>
)}
</div>
</div> </div>
</div> </div>
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Status</label> <label className="form-label flex items-center gap-1 max-w-56">
<Select Status<span className="text-red-500">*</span>
value={formField.status} </label>
onValueChange={(value) => setFormField({ ...formField, status: value })} <div className="w-full">
> <Select
<SelectTrigger> value={formField.status}
<SelectValue placeholder="Select Status" /> onValueChange={(value) => {
</SelectTrigger> setFormField({ ...formField, status: value });
<SelectContent> setErrors({ ...errors, status: '' });
<SelectItem value="Y">Active</SelectItem> }}
<SelectItem value="N">Inactive</SelectItem> >
</SelectContent> <SelectTrigger className={errors.status ? 'border-red-500' : ''}>
</Select> <SelectValue placeholder="Select Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
{errors.status && (
<div className="text-red-500 text-xs mt-1">{errors.status}</div>
)}
</div>
</div> </div>
</div> </div>

68
src/pages/master/wallet/blocks/Types.ts Normal file
View File

@ -0,0 +1,68 @@
import React from 'react';
import { toast } from 'sonner';
export interface CurrencyProps {
ID: string;
code: string;
name: string;
prefix: string;
status: string;
}
export interface GroupProps {
id: string;
name: string;
description: string;
status: string;
}
export const initialStateWallet: {
name: string;
description: string;
status: string;
group?: string[];
id_currency?: string;
} = {
name: '',
description: '',
status: '',
group: [],
id_currency: ''
};
export const validateFormsWallet = (
formField: typeof initialStateWallet,
setErrors: React.Dispatch<React.SetStateAction<Record<string, string>>>,
mode: 'create' | 'update' = 'create' // default: create
) => {
const requiredFields =
mode === 'create'
? [
{ key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' },
{ key: 'status', label: 'Status' },
{ key: 'group', label: 'Group' },
{ key: 'id_currency', label: 'Currency' }
]
: [
{ key: 'name', label: 'Name' },
{ key: 'description', label: 'Description' },
{ key: 'status', label: 'Status' }
];
const newErrors: Record<string, string> = {};
let isValid = true;
requiredFields.forEach(({ key, label }) => {
const value = formField[key as keyof typeof formField];
if (value === '' || value === null || value === undefined) {
newErrors[key] = `${label} is required`;
toast.error(`${label} is required`);
isValid = false;
}
});
setErrors(newErrors);
return isValid;
};

1
src/pages/transaction/disbursement-saldo/TransactionDisbursement.tsx
View File

@ -137,7 +137,6 @@ const TransactionDisbursement = () => {
}); });
return; return;
} }
console.log(form);
setAlert({ show: false, message: '' }); setAlert({ show: false, message: '' });
setShowConfirmation(true); setShowConfirmation(true);
}; };