From 3ab53271d1fab787a596653ea7f98a3348bd78da Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 8 May 2025 10:49:40 +0700 Subject: [PATCH] fix alert empty validation on conversion module --- .../blocks/DetailTransaction.tsx | 2 +- .../master/conversion/blocks/AddDialog.tsx | 89 +++++++++---------- .../master/conversion/blocks/EditDialog.tsx | 82 +++++++++-------- src/pages/master/conversion/blocks/Types.ts | 47 ++++++++++ 4 files changed, 135 insertions(+), 85 deletions(-) create mode 100644 src/pages/master/conversion/blocks/Types.ts diff --git a/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx b/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx index e62a1bb..65c070c 100644 --- a/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx +++ b/src/pages/disbursement/history-transaction/blocks/DetailTransaction.tsx @@ -118,7 +118,7 @@ const DetailTransaction = () => { -

Loading Provider Details...

+

Loading Logs Details...

) : ( diff --git a/src/pages/master/conversion/blocks/AddDialog.tsx b/src/pages/master/conversion/blocks/AddDialog.tsx index 4b3197d..3d04251 100644 --- a/src/pages/master/conversion/blocks/AddDialog.tsx +++ b/src/pages/master/conversion/blocks/AddDialog.tsx @@ -35,6 +35,7 @@ import { import { useManageConversionContext } from '../hooks/useManageConversionContext'; import { doSaveLogActivity } from '@/actions/GlobalActions'; import { RefreshCw } from 'lucide-react'; +import { initialState, validateForm } from './Types'; interface CurrencyProps { ID: string; name: string; @@ -50,19 +51,7 @@ const AddDialog = () => { const parsedUser = getAuth()?.user; const [currencies, setCurrencies] = useState([]); const [open, setOpen] = useState(false); - const [alert, setAlert] = useState({ - show: false, - message: '' - }); - const initialState = { - status: '', - id_currency_origin: '', - id_currency_destination: '', - buy: 0, - sell: 0, - created_by: '', - created_at: '' - }; + const [errors, setErrors] = useState>({}); const [formField, setFormField] = useState(initialState); const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); @@ -70,7 +59,7 @@ const AddDialog = () => { const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); }; const doCreateConversion = useCallback( @@ -94,8 +83,7 @@ const AddDialog = () => { doSaveLogActivity(createActivity); reload(); } else { - toast.error('Error Create Conversion'); - setAlert({ show: true, message: response?.message }); + toast.error(response?.message); } } catch (error) { toast.error('Something Went Wrong'); @@ -126,20 +114,11 @@ const AddDialog = () => { const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); - if ( - formField.id_currency_origin === '' || - formField.id_currency_destination === '' || - formField.buy === 0 || - formField.sell === 0 || - formField.status === '' - ) { - setAlert({ show: true, message: 'Please fill in all required fields.' }); + if (!validateForm(formField, setErrors)) { return; } doCreateConversion(e); - // console.log(formField); - setAlert({ show: false, message: '' }); }; useEffect(() => { @@ -171,12 +150,6 @@ const AddDialog = () => {
- {alert.show && ( - -

{alert.message}

- - )} -
@@ -185,11 +158,14 @@ const AddDialog = () => { + {errors.id_currency_destination && ( + + {errors.id_currency_destination} + + )}
+ {errors.id_currency_origin && ( + {errors.id_currency_origin} + )}
{ onValueChange={(values) => { setFormField((prev) => ({ ...prev, - buy: values.floatValue || 0 + buy: values.floatValue ?? null })); + setErrors((prev) => ({ ...prev, buy: '' })); }} placeholder="Enter Buy" /> + {errors.buy && {errors.buy}}
{ onValueChange={(values) => { setFormField((prev) => ({ ...prev, - sell: values.floatValue || 0 + sell: values.floatValue ?? null })); + setErrors((prev) => ({ ...prev, sell: '' })); }} placeholder="Enter Sell" /> + {errors.sell && {errors.sell}}
diff --git a/src/pages/master/conversion/blocks/EditDialog.tsx b/src/pages/master/conversion/blocks/EditDialog.tsx index a178229..85805ac 100644 --- a/src/pages/master/conversion/blocks/EditDialog.tsx +++ b/src/pages/master/conversion/blocks/EditDialog.tsx @@ -35,6 +35,7 @@ import { import { useManageConversionContext } from '../hooks/useManageConversionContext'; import { doSaveLogActivity } from '@/actions/GlobalActions'; import { RefreshCw } from 'lucide-react'; +import { initialState, validateForm } from './Types'; interface CurrencyProps { ID: string; name: string; @@ -52,26 +53,15 @@ const EditDialog = () => { const [open, setOpen] = useState(false); const [isSubmitting, setIsSubmitting] = useState(false); const [isLoading, setIsLoading] = useState(false); - const [alert, setAlert] = useState({ - show: false, - message: '' - }); - const initialState = { - status: '', - id_currency_origin: '', - id_currency_destination: '', - buy: 0, - sell: 0, - created_by: '', - created_at: '' - }; + const [errors, setErrors] = useState>({}); + const [formField, setFormField] = useState(initialState); const updated_time = new Date(); const formattedTime = updated_time.toISOString().slice(0, 19).replace('T', ' '); const resetForm = () => { setFormField(initialState); - setAlert({ show: false, message: '' }); + setErrors({}); }; const doUpdateConversion = useCallback( @@ -79,6 +69,11 @@ const EditDialog = () => { e.preventDefault(); setIsSubmitting(true); + if (!validateForm(formField, setErrors)) { + setIsSubmitting(false); + return; + } + try { const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, { ...formField @@ -97,8 +92,7 @@ const EditDialog = () => { doSaveLogActivity(createActivity); reload(); } else { - toast.error('Error Create Conversion'); - setAlert({ show: true, message: response?.message }); + toast.error(response?.message); } } catch (error) { toast.error('Something went wrong'); @@ -185,12 +179,6 @@ const EditDialog = () => {
- {alert.show && ( - -

{alert.message}

- - )} - {isLoading ? (
@@ -213,11 +201,12 @@ const EditDialog = () => { + {errors.id_currency_origin && ( + {errors.id_currency_origin} + )}
+ {errors.id_currency_destination && ( + + {errors.id_currency_destination} + + )}
diff --git a/src/pages/master/conversion/blocks/Types.ts b/src/pages/master/conversion/blocks/Types.ts new file mode 100644 index 0000000..196e0a0 --- /dev/null +++ b/src/pages/master/conversion/blocks/Types.ts @@ -0,0 +1,47 @@ +import { toast } from 'sonner'; + +export const validateForm = (formField: any, setErrors: any) => { + const requiredFields = [ + { key: 'id_currency_origin', label: 'Currency Origin' }, + { key: 'id_currency_destination', label: 'Currency Destination' }, + { key: 'buy', label: 'Buy' }, + { key: 'sell', label: 'Sell' }, + { 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; +}; + +export const initialState: { + status: string; + id_currency_origin: string; + id_currency_destination: string; + buy: number | null; + sell: number | null; + created_by: string; + created_at: string; +} = { + status: '', + id_currency_origin: '', + id_currency_destination: '', + buy: null, + sell: null, + created_by: '', + created_at: '' +};