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>

50
src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx
View File

@ -7,8 +7,14 @@ import React, { createContext, useCallback, useMemo, useState } from 'react';
import ListToolbar from '../blocks/ListToolbar';
interface WalletRuleProps {
name: string;
id_currency: string;
ID: string;
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;
status: string;
}
@ -17,10 +23,10 @@ interface ContextProps {
showAddDialog: boolean;
handleAddDialog: (show: boolean) => void;
showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_walletRule: string | null) => void;
handleEditDialog: (show: boolean, selected_walletRule: WalletRuleProps | null) => void;
showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => void;
selectedWalletRule: string | null;
handleDeleteDialog: (show: boolean, selected_walletRule: WalletRuleProps | null) => void;
selectedWalletRule: WalletRuleProps | null;
getWalletRuleLists: (
limit: number,
page: number,
@ -35,9 +41,9 @@ const initialProps: ContextProps = {
showAddDialog: false,
handleAddDialog: (show: boolean) => {},
showEditDialog: false,
handleEditDialog: (show: boolean, selected_walletRule: string | null) => {},
handleEditDialog: (show: boolean, selected_walletRule: object | null) => {},
showDeleteDialog: false,
handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => {},
handleDeleteDialog: (show: boolean, selected_walletRule: object | null) => {},
selectedWalletRule: null,
getWalletRuleLists: async () => undefined
};
@ -50,22 +56,28 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
const [showAddDialog, setShowAddDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = useState(false);
const [selectedWalletRule, setSelectedWalletRule] = useState<string | null>(null);
const [selectedWalletRule, setSelectedWalletRule] = useState<WalletRuleProps | null>(null);
const { GetData } = useCallApi();
const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show);
}, []);
const handleEditDialog = useCallback((show: boolean, selected_walletRule: string | null) => {
setShowEditDialog(show);
setSelectedWalletRule(show ? selected_walletRule : null);
}, []);
const handleEditDialog = useCallback(
(show: boolean, selected_walletRule: WalletRuleProps | null) => {
setShowEditDialog(show);
setSelectedWalletRule(show ? selected_walletRule : null);
},
[]
);
const handleDeleteDialog = useCallback((show: boolean, selected_walletRule: string | null) => {
setShowDeleteDialog(show);
setSelectedWalletRule(show ? selected_walletRule : null);
}, []);
const handleDeleteDialog = useCallback(
(show: boolean, selected_walletRule: WalletRuleProps | null) => {
setShowDeleteDialog(show);
setSelectedWalletRule(show ? selected_walletRule : null);
},
[]
);
const columns = useMemo<ColumnDef<any>[]>(
() => [
@ -142,13 +154,13 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
<>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleEditDialog(true, row.ID)}
onClick={() => handleEditDialog(true, row)}
>
<KeenIcon icon="notepad-edit" />
</button>
<button
className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDeleteDialog(true, row.ID)}
onClick={() => handleDeleteDialog(true, row)}
>
<KeenIcon icon="trash" />
</button>
@ -194,7 +206,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
handleEditDialog,
showDeleteDialog,
handleDeleteDialog,
selectedWalletRule,
selectedWalletRule: selectedWalletRule,
getWalletRuleLists
}}
>