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

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

@ -30,6 +30,7 @@ import {
} from '@/components/ui/command'; } from '@/components/ui/command';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { NumericFormat } from 'react-number-format';
interface GroupProps { interface GroupProps {
ID: string; ID: string;
@ -51,7 +52,6 @@ const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedWalletRule } = useManageWalletRuleContext(); const { showEditDialog, handleEditDialog, selectedWalletRule } = useManageWalletRuleContext();
const { GetData, PutData } = useCallApi(); const { GetData, PutData } = useCallApi();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const [open, setOpen] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -59,11 +59,11 @@ const EditDialog = () => {
const initialState: { const initialState: {
id_wallet: string; id_wallet: string;
id_group: string; id_group: string;
max_transaction_per_day: number | null; max_transaction_per_day: string | number | null;
balance_minimum: number | null; balance_minimum: string | number | null;
balance_maximum: number | null; balance_maximum: string | number | null;
credit_limit: number | null; credit_limit: string | number | null;
monthly_limit: number | null; monthly_limit: string | number | null;
status: string; status: string;
} = { } = {
id_wallet: '', id_wallet: '',
@ -89,7 +89,7 @@ const EditDialog = () => {
e.preventDefault(); e.preventDefault();
const response = await PutData( const response = await PutData(
`${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule}`, `${API_URL_WALLET}/dashboard/wallet_rule/${selectedWalletRule?.ID}`,
formField formField
); );
@ -192,10 +192,20 @@ const EditDialog = () => {
useEffect(() => { useEffect(() => {
if (selectedWalletRule) { 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]); }, [selectedWalletRule]);
// console.log(selectedWalletRule); // console.log(selectedWalletRule);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <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"> <label className="form-label flex items-center gap-1 max-w-56">
Max Transaction Per Day<span className="text-red-500">*</span> Max Transaction Per Day<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number"
value={formField.max_transaction_per_day ?? ''} value={formField.max_transaction_per_day ?? ''}
onChange={(e) => thousandSeparator="."
setFormField({ decimalSeparator=","
...formField, allowNegative={false}
max_transaction_per_day: parseInt(e.target.value) onValueChange={(values) => {
}) setFormField((prev) => ({
} ...prev,
max_transaction_per_day:
values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Max Transaction Per Day"
/> />
</div> </div>
</div> </div>
@ -283,13 +297,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Balance Minimum<span className="text-red-500">*</span> Balance Minimum<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number"
value={formField.balance_minimum ?? ''} value={formField.balance_minimum ?? ''}
onChange={(e) => thousandSeparator="."
setFormField({ ...formField, balance_minimum: parseInt(e.target.value) }) decimalSeparator=","
} allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
balance_minimum: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Balance Minimum"
/> />
</div> </div>
</div> </div>
@ -299,13 +319,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Balance Maximum<span className="text-red-500">*</span> Balance Maximum<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number"
value={formField.balance_maximum ?? ''} value={formField.balance_maximum ?? ''}
onChange={(e) => thousandSeparator="."
setFormField({ ...formField, balance_maximum: parseInt(e.target.value) }) decimalSeparator=","
} allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
balance_maximum: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Balance Maximum"
/> />
</div> </div>
</div> </div>
@ -315,13 +341,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Credit Limit<span className="text-red-500">*</span> Credit Limit<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number"
value={formField.credit_limit ?? ''} value={formField.credit_limit ?? ''}
onChange={(e) => thousandSeparator="."
setFormField({ ...formField, credit_limit: parseInt(e.target.value) }) decimalSeparator=","
} allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
credit_limit: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Credit Limit"
/> />
</div> </div>
</div> </div>
@ -331,13 +363,19 @@ const EditDialog = () => {
<label className="form-label flex items-center gap-1 max-w-56"> <label className="form-label flex items-center gap-1 max-w-56">
Monthly Limit<span className="text-red-500">*</span> Monthly Limit<span className="text-red-500">*</span>
</label> </label>
<Input <NumericFormat
className="input" className="input"
type="number"
value={formField.monthly_limit ?? ''} value={formField.monthly_limit ?? ''}
onChange={(e) => thousandSeparator="."
setFormField({ ...formField, monthly_limit: parseInt(e.target.value) }) decimalSeparator=","
} allowNegative={false}
onValueChange={(values) => {
setFormField((prev) => ({
...prev,
monthly_limit: values.floatValue !== undefined ? values.floatValue : ''
}));
}}
placeholder="Enter Monthly Limit"
/> />
</div> </div>
</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'; import ListToolbar from '../blocks/ListToolbar';
interface WalletRuleProps { interface WalletRuleProps {
name: string; ID: string;
id_currency: 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; status: string;
} }
@ -17,10 +23,10 @@ interface ContextProps {
showAddDialog: boolean; showAddDialog: boolean;
handleAddDialog: (show: boolean) => void; handleAddDialog: (show: boolean) => void;
showEditDialog: boolean; showEditDialog: boolean;
handleEditDialog: (show: boolean, selected_walletRule: string | null) => void; handleEditDialog: (show: boolean, selected_walletRule: WalletRuleProps | null) => void;
showDeleteDialog: boolean; showDeleteDialog: boolean;
handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => void; handleDeleteDialog: (show: boolean, selected_walletRule: WalletRuleProps | null) => void;
selectedWalletRule: string | null; selectedWalletRule: WalletRuleProps | null;
getWalletRuleLists: ( getWalletRuleLists: (
limit: number, limit: number,
page: number, page: number,
@ -35,9 +41,9 @@ const initialProps: ContextProps = {
showAddDialog: false, showAddDialog: false,
handleAddDialog: (show: boolean) => {}, handleAddDialog: (show: boolean) => {},
showEditDialog: false, showEditDialog: false,
handleEditDialog: (show: boolean, selected_walletRule: string | null) => {}, handleEditDialog: (show: boolean, selected_walletRule: object | null) => {},
showDeleteDialog: false, showDeleteDialog: false,
handleDeleteDialog: (show: boolean, selected_walletRule: string | null) => {}, handleDeleteDialog: (show: boolean, selected_walletRule: object | null) => {},
selectedWalletRule: null, selectedWalletRule: null,
getWalletRuleLists: async () => undefined getWalletRuleLists: async () => undefined
}; };
@ -50,22 +56,28 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
const [showAddDialog, setShowAddDialog] = useState(false); const [showAddDialog, setShowAddDialog] = useState(false);
const [showEditDialog, setShowEditDialog] = useState(false); const [showEditDialog, setShowEditDialog] = useState(false);
const [showDeleteDialog, setShowDeleteDialog] = 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 { GetData } = useCallApi();
const handleAddDialog = useCallback((show: boolean) => { const handleAddDialog = useCallback((show: boolean) => {
setShowAddDialog(show); setShowAddDialog(show);
}, []); }, []);
const handleEditDialog = useCallback((show: boolean, selected_walletRule: string | null) => { const handleEditDialog = useCallback(
setShowEditDialog(show); (show: boolean, selected_walletRule: WalletRuleProps | null) => {
setSelectedWalletRule(show ? selected_walletRule : null); setShowEditDialog(show);
}, []); setSelectedWalletRule(show ? selected_walletRule : null);
},
[]
);
const handleDeleteDialog = useCallback((show: boolean, selected_walletRule: string | null) => { const handleDeleteDialog = useCallback(
setShowDeleteDialog(show); (show: boolean, selected_walletRule: WalletRuleProps | null) => {
setSelectedWalletRule(show ? selected_walletRule : null); setShowDeleteDialog(show);
}, []); setSelectedWalletRule(show ? selected_walletRule : null);
},
[]
);
const columns = useMemo<ColumnDef<any>[]>( const columns = useMemo<ColumnDef<any>[]>(
() => [ () => [
@ -142,13 +154,13 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
<> <>
<button <button
className="btn btn-sm btn-icon btn-clear btn-light" className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleEditDialog(true, row.ID)} onClick={() => handleEditDialog(true, row)}
> >
<KeenIcon icon="notepad-edit" /> <KeenIcon icon="notepad-edit" />
</button> </button>
<button <button
className="btn btn-sm btn-icon btn-clear btn-light" className="btn btn-sm btn-icon btn-clear btn-light"
onClick={() => handleDeleteDialog(true, row.ID)} onClick={() => handleDeleteDialog(true, row)}
> >
<KeenIcon icon="trash" /> <KeenIcon icon="trash" />
</button> </button>
@ -194,7 +206,7 @@ const ManageWalletRuleContextProvider = ({ children }: { children: React.ReactNo
handleEditDialog, handleEditDialog,
showDeleteDialog, showDeleteDialog,
handleDeleteDialog, handleDeleteDialog,
selectedWalletRule, selectedWalletRule: selectedWalletRule,
getWalletRuleLists getWalletRuleLists
}} }}
> >