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

fix create update form field

Browse Source 
- use NumericFormat from react number format
- pull data object from table not consume API get data by id
This commit is contained in:
Wikzyy
2025-03-26 11:46:04 +07:00
parent 41c1fed872
commit d1835b32bc
3 changed files with 168 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/pages/master/walletRule/blocks/AddDialog.tsx
View File

@ -30,6 +30,7 @@ import {
CommandItem,
CommandList
} from '@/components/ui/command';
import { NumericFormat } from 'react-number-format';
interface GroupProps {
ID: string;
@ -58,11 +59,11 @@ const AddDialog = () => {
const initialState: {
id_wallet: string;
id_group: string;
max_transaction_per_day: number | null;
balance_minimum: number | null;
balance_maximum: number | null;
credit_limit: number | null;
monthly_limit: number | null;
max_transaction_per_day: string | number | null;
balance_minimum: string | number | null;
balance_maximum: string | number | null;
credit_limit: string | number | null;
monthly_limit: string | number | null;
status: string;
} = {
id_wallet: '',
@ -235,16 +236,20 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Max Transaction Per Day<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.max_transaction_per_day ?? ''}
onChange={(e) =>
setFormField({
...formField,
max_transaction_per_day: parseInt(e.target.value)
})
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
max_transaction_per_day:
values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Max Transaction Per Day"
/>
</div>
</div>
@ -254,13 +259,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Balance Minimum<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.balance_minimum ?? ''}
onChange={(e) =>
setFormField({ ...formField, balance_minimum: parseInt(e.target.value) })
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
balance_minimum: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Balance Minimum"
/>
</div>
</div>
@ -270,13 +281,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Balance Maximum<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.balance_maximum ?? ''}
onChange={(e) =>
setFormField({ ...formField, balance_maximum: parseInt(e.target.value) })
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
balance_maximum: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Balance Maximum"
/>
</div>
</div>
@ -286,13 +303,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Credit Limit<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.credit_limit ?? ''}
onChange={(e) =>
setFormField({ ...formField, credit_limit: parseInt(e.target.value) })
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
credit_limit: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Credit Limit"
/>
</div>
</div>
@ -302,13 +325,19 @@ const AddDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Monthly Limit<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.monthly_limit ?? ''}
onChange={(e) =>
setFormField({ ...formField, monthly_limit: parseInt(e.target.value) })
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
monthly_limit: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Monthly Limit"
/>
</div>
</div>

112
src/pages/master/walletRule/blocks/EditDialog.tsx
View File

@ -30,6 +30,7 @@ import {
} from '@/components/ui/command';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { NumericFormat } from 'react-number-format';
interface GroupProps {
ID: string;
@ -51,7 +52,6 @@ const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedWalletRule } = useManageWalletRuleContext();
const { GetData, PutData } = useCallApi();
const { reload } = useDataGrid();
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({
show: false,
message: ''
@ -59,11 +59,11 @@ const EditDialog = () => {
const initialState: {
id_wallet: string;
id_group: string;
max_transaction_per_day: number | null;
balance_minimum: number | null;
balance_maximum: number | null;
credit_limit: number | null;
monthly_limit: number | null;
max_transaction_per_day: string | number | null;
balance_minimum: string | number | null;
balance_maximum: string | number | null;
credit_limit: string | number | null;
monthly_limit: string | number | null;
status: string;
} = {
id_wallet: '',
@ -89,7 +89,7 @@ const EditDialog = () => {
e.preventDefault();
const response = await PutData(
`${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule}`,
`${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule?.ID}`,
formField
);
@ -192,10 +192,20 @@ const EditDialog = () => {
useEffect(() => {
if (selectedWalletRule) {
doFetchData(selectedWalletRule);
setFormField((prev) => ({
...prev,
id_wallet: selectedWalletRule?.id_wallet,
id_group: selectedWalletRule?.id_group,
max_transaction_per_day: selectedWalletRule?.max_transaction_per_day,
balance_minimum: selectedWalletRule?.balance_minimum,
balance_maximum: selectedWalletRule?.balance_maximum,
credit_limit: selectedWalletRule?.credit_limit,
monthly_limit: selectedWalletRule?.monthly_limit,
status: selectedWalletRule?.status
}));
}
}, [selectedWalletRule]);
// console.log(selectedWalletRule);
// console.log(selectedWalletRule);
return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
@ -264,16 +274,20 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Max Transaction Per Day<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.max_transaction_per_day ?? ''}
onChange={(e) =>
setFormField({
...formField,
max_transaction_per_day: parseInt(e.target.value)
})
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
max_transaction_per_day:
values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Max Transaction Per Day"
/>
</div>
</div>
@ -283,13 +297,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Balance Minimum<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.balance_minimum ?? ''}
onChange={(e) =>
setFormField({ ...formField, balance_minimum: parseInt(e.target.value) })
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
balance_minimum: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Balance Minimum"
/>
</div>
</div>
@ -299,13 +319,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Balance Maximum<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.balance_maximum ?? ''}
onChange={(e) =>
setFormField({ ...formField, balance_maximum: parseInt(e.target.value) })
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
balance_maximum: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Balance Maximum"
/>
</div>
</div>
@ -315,13 +341,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Credit Limit<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.credit_limit ?? ''}
onChange={(e) =>
setFormField({ ...formField, credit_limit: parseInt(e.target.value) })
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
credit_limit: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Credit Limit"
/>
</div>
</div>
@ -331,13 +363,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56">
Monthly Limit<span className="text-red-500">*</span>
</label>
<Input
<NumericFormat
className="input"
type="number"
value={formField.monthly_limit ?? ''}
onChange={(e) =>
setFormField({ ...formField, monthly_limit: parseInt(e.target.value) })
}
thousandSeparator="."
decimalSeparator=","
allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
monthly_limit: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Monthly Limit"
/>
</div>
</div>