From c91f59b8c2640af322a42e16d17173897da554ee Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 8 May 2025 18:14:14 +0700 Subject: [PATCH] fix alert empty validation on manage wallet rule --- src/pages/master/walletRule/Types.ts | 81 ++++ .../master/walletRule/blocks/AddDialog.tsx | 376 +++++++++--------- .../master/walletRule/blocks/EditDialog.tsx | 63 +-- .../hooks/ManageWalletRuleContext.tsx | 13 +- 4 files changed, 274 insertions(+), 259 deletions(-) create mode 100644 src/pages/master/walletRule/Types.ts diff --git a/src/pages/master/walletRule/Types.ts b/src/pages/master/walletRule/Types.ts new file mode 100644 index 0000000..bfb60ec --- /dev/null +++ b/src/pages/master/walletRule/Types.ts @@ -0,0 +1,81 @@ +import { toast } from 'sonner'; + +export interface WalletRuleProps { + 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; +} + +export const initialStateWalletRule: { + id_wallet: string; + id_group: string; + 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: '', + id_group: '', + max_transaction_per_day: null, + balance_minimum: null, + balance_maximum: null, + credit_limit: null, + monthly_limit: null, + status: '' +}; + +export interface GroupProps { + ID: string; + is_bank: string; + name: string; + status: string; +} + +export interface WalletProps { + ID: string; + name: string; + id_currency: string; + status: string; +} + +export const validateFormsWalletRule = ( + formField: typeof initialStateWalletRule, + setErrors: React.Dispatch>> +) => { + const requiredFields = [ + { key: 'id_wallet', label: 'Wallet' }, + { key: 'id_group', label: 'Group' }, + { key: 'max_transaction_per_day', label: 'Max Transaction Per Day' }, + { key: 'balance_minimum', label: 'Balance Minimum' }, + { key: 'balance_maximum', label: 'Balance Maximum' }, + { key: 'credit_limit', label: 'Credit Limit' }, + { key: 'monthly_limit', label: 'Monthly Limit' }, + { key: 'status', label: 'Status' } + ]; + + const newErrors: Record = {}; + let isValid = true; + + 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 + ) { + newErrors[key] = `${label} is required`; + toast.error(`${label} is required`); + isValid = false; + } + }); + + setErrors(newErrors); + return isValid; +}; diff --git a/src/pages/master/walletRule/blocks/AddDialog.tsx b/src/pages/master/walletRule/blocks/AddDialog.tsx index 48cfc40..c9e4d72 100644 --- a/src/pages/master/walletRule/blocks/AddDialog.tsx +++ b/src/pages/master/walletRule/blocks/AddDialog.tsx @@ -33,28 +33,8 @@ import { import { NumericFormat } from 'react-number-format'; import { doSaveLogActivity } from '@/actions/GlobalActions'; import { RefreshCw } from 'lucide-react'; - -interface GroupProps { - ID: string; - is_bank: string; - name: string; - status: string; -} - -interface WalletGroupProps { - id: string; - name: string; - description: string; - status: string; -} - -interface WalletProps { - id: string; - name: string; - id_currency: string; - status: string; - group: WalletGroupProps[]; -} +import { initialStateWalletRule, validateFormsWalletRule } from '../Types'; +import { WalletProps } from '../../wallet/Types'; const API_URL_WALLET = apiConfig.service_wallet; const API_URL_MASTERDATA = apiConfig.service_master_data; @@ -63,37 +43,14 @@ const AddDialog = () => { const { showAddDialog, handleAddDialog, selectedWalletRule } = useManageWalletRuleContext(); const { reload } = useDataGrid(); const { PostData, GetData } = useCallApi(); - const [open, setOpen] = useState(false); - const [alert, setAlert] = useState({ - show: false, - message: '' - }); - const initialState: { - id_wallet: string; - id_group: string; - 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: '', - id_group: '', - max_transaction_per_day: null, - balance_minimum: null, - balance_maximum: null, - credit_limit: null, - monthly_limit: null, - status: '' - }; - const [formField, setFormField] = useState(initialState); + const [errors, setErrors] = useState>({}); + const [formField, setFormField] = useState(initialStateWalletRule); const [wallets, setWallets] = useState([]); const [isSubmitting, setIsSubmitting] = useState(false); const resetForm = () => { - setFormField(initialState); - setAlert({ show: false, message: '' }); + setFormField(initialStateWalletRule); + setErrors({}); }; const doCreateWalletRule = useCallback( @@ -117,8 +74,7 @@ const AddDialog = () => { doSaveLogActivity(createActivity); } else { - toast.error('Failed Create Wallet Rule'); - setAlert({ show: true, message: response?.message }); + toast.error(response?.message); } } catch (error) { toast.error('Something went wrong, please try again.'); @@ -132,23 +88,11 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if ( - formField.id_group.trim() === '' || - formField.status.trim() === '' || - formField.id_wallet.trim() === '' || - formField.max_transaction_per_day === null || - formField.balance_minimum === null || - formField.balance_maximum === null || - formField.credit_limit === null || - formField.monthly_limit === null - ) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + if (!validateFormsWalletRule(formField, setErrors)) { return; } - console.log(formField); doCreateWalletRule(e); - setAlert({ show: false, message: '' }); }; const getWalletLists = async (sorting: any) => { @@ -160,8 +104,6 @@ const AddDialog = () => { order_field: sorting[0].id, order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' }); - - // console.log('WALLET: ', response?.data); setWallets(response?.data.list); } catch (error) { console.error('Error fetching wallet', error); @@ -190,12 +132,6 @@ const AddDialog = () => {
- {alert.show && ( - -

{alert.message}

- - )} -
@@ -203,23 +139,29 @@ const AddDialog = () => { - +
+ + {errors.id_wallet && ( +
{errors.id_wallet}
+ )} +
@@ -228,26 +170,34 @@ const AddDialog = () => { - +
+ + {errors.id_group && ( +
{errors.id_group}
+ )} +
@@ -256,21 +206,29 @@ const AddDialog = () => { - { - setFormField((prev) => ({ - ...prev, - max_transaction_per_day: - values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Max Transaction Per Day" - /> +
+ { + setFormField((prev) => ({ + ...prev, + max_transaction_per_day: + values.floatValue !== undefined ? values.floatValue : '' + })); + setErrors({ ...errors, max_transaction_per_day: '' }); + }} + placeholder="Enter Max Transaction Per Day" + /> + {errors.max_transaction_per_day && ( +
+ {errors.max_transaction_per_day} +
+ )} +
@@ -279,20 +237,27 @@ const AddDialog = () => { - { - setFormField((prev) => ({ - ...prev, - balance_minimum: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Balance Minimum" - /> +
+ { + setFormField((prev) => ({ + ...prev, + balance_minimum: + values.floatValue !== undefined ? values.floatValue : '' + })); + setErrors({ ...errors, balance_minimum: '' }); + }} + placeholder="Enter Balance Minimum" + /> + {errors.balance_minimum && ( +
{errors.balance_minimum}
+ )} +
@@ -301,20 +266,27 @@ const AddDialog = () => { - { - setFormField((prev) => ({ - ...prev, - balance_maximum: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Balance Maximum" - /> +
+ { + setFormField((prev) => ({ + ...prev, + balance_maximum: + values.floatValue !== undefined ? values.floatValue : '' + })); + setErrors({ ...errors, balance_maximum: '' }); + }} + placeholder="Enter Balance Maximum" + /> + {errors.balance_maximum && ( +
{errors.balance_maximum}
+ )} +
@@ -323,20 +295,26 @@ const AddDialog = () => { - { - setFormField((prev) => ({ - ...prev, - credit_limit: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Credit Limit" - /> +
+ { + setFormField((prev) => ({ + ...prev, + credit_limit: values.floatValue !== undefined ? values.floatValue : '' + })); + setErrors({ ...errors, credit_limit: '' }); + }} + placeholder="Enter Credit Limit" + /> + {errors.credit_limit && ( +
{errors.credit_limit}
+ )} +
@@ -345,20 +323,26 @@ const AddDialog = () => { - { - setFormField((prev) => ({ - ...prev, - monthly_limit: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Monthly Limit" - /> +
+ { + setFormField((prev) => ({ + ...prev, + monthly_limit: values.floatValue !== undefined ? values.floatValue : '' + })); + setErrors({ ...errors, monthly_limit: '' }); + }} + placeholder="Enter Monthly Limit" + /> + {errors.monthly_limit && ( +
{errors.monthly_limit}
+ )} +
@@ -367,18 +351,26 @@ const AddDialog = () => { - +
+ + {errors.status && ( +
{errors.status}
+ )} +
diff --git a/src/pages/master/walletRule/blocks/EditDialog.tsx b/src/pages/master/walletRule/blocks/EditDialog.tsx index 166225b..02a33f3 100644 --- a/src/pages/master/walletRule/blocks/EditDialog.tsx +++ b/src/pages/master/walletRule/blocks/EditDialog.tsx @@ -33,20 +33,7 @@ import { Button } from '@/components/ui/button'; import { NumericFormat } from 'react-number-format'; import { doSaveLogActivity } from '@/actions/GlobalActions'; import { RefreshCw } from 'lucide-react'; - -interface GroupProps { - ID: string; - is_bank: string; - name: string; - status: string; -} - -interface WalletProps { - ID: string; - name: string; - id_currency: string; - status: string; -} +import { GroupProps, initialStateWalletRule, validateFormsWalletRule, WalletProps } from '../Types'; const API_URL_WALLET = apiConfig.service_wallet; @@ -54,37 +41,15 @@ const EditDialog = () => { const { showEditDialog, handleEditDialog, selectedWalletRule } = useManageWalletRuleContext(); const { GetData, PutData } = useCallApi(); const { reload } = useDataGrid(); - const [alert, setAlert] = useState({ - show: false, - message: '' - }); - const initialState: { - id_wallet: string; - id_group: string; - 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: '', - id_group: '', - max_transaction_per_day: null, - balance_minimum: null, - balance_maximum: null, - credit_limit: null, - monthly_limit: null, - status: '' - }; - const [formField, setFormField] = useState(initialState); + const [errors, setErrors] = useState>({}); + const [formField, setFormField] = useState(initialStateWalletRule); const [groups, setGroups] = useState([]); const [wallets, setWallets] = useState([]); const [isSubmitting, setIsSubmitting] = useState(false); const resetForm = () => { - setFormField(initialState); - setAlert({ show: false, message: '' }); + setFormField(initialStateWalletRule); + setErrors({}); }; const doUpdateWalletRule = useCallback( @@ -111,8 +76,7 @@ const EditDialog = () => { doSaveLogActivity(createActivity); } else { - toast.error('Failed Update Wallet Rule'); - setAlert({ show: true, message: response?.message }); + toast.error(response?.message); } } catch (error) { toast.error('Something went wrong, please try again'); @@ -126,14 +90,11 @@ const EditDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if (formField.id_group.trim() === '' || formField.status.trim() === '') { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + if (!validateFormsWalletRule(formField, setErrors)) { return; } - // console.log(formField); doUpdateWalletRule(e); - setAlert({ show: false, message: '' }); }; const getGroupLists = async (sorting: any) => { @@ -146,7 +107,6 @@ const EditDialog = () => { order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' }); - // console.log('GROUPS: ', response?.data); setGroups(response?.data.list); } catch (error) { console.error('Error fetching groups', error); @@ -163,7 +123,6 @@ const EditDialog = () => { order_direction: sorting[0].desc == false ? 'ASC' : 'DESC' }); - // console.log('WALLET: ', response?.data); setWallets(response?.data.list); } catch (error) { console.error('Error fetching wallet', error); @@ -215,7 +174,7 @@ const EditDialog = () => { })); } }, [selectedWalletRule]); - // console.log(selectedWalletRule); + return ( handleEditDialog(open, null)}> @@ -225,12 +184,6 @@ const EditDialog = () => {
- {alert.show && ( - -

{alert.message}

- - )} -
diff --git a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx index 7f3d6b4..4ac8e3f 100644 --- a/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx +++ b/src/pages/master/walletRule/hooks/ManageWalletRuleContext.tsx @@ -5,18 +5,7 @@ import { useCallApi } from '@/hooks'; import { ColumnDef } from '@tanstack/react-table'; import React, { createContext, useCallback, useMemo, useState } from 'react'; import ListToolbar from '../blocks/ListToolbar'; - -interface WalletRuleProps { - 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; -} +import { WalletRuleProps } from '../Types'; interface ContextProps { walletRules: WalletRuleProps[];