From 873d516988af1ece9e0589b66a994101fd1c27f6 Mon Sep 17 00:00:00 2001 From: bagusajisaputroo Date: Wed, 7 May 2025 16:22:25 +0700 Subject: [PATCH] fixing response in transfertype --- src/App.tsx | 2 +- .../transfertype/blocks/AddDialog.tsx | 191 +++++++------- .../transfertype/blocks/EditDialog.tsx | 244 +++++++++++------- .../hooks/ManageTransferTypeContext.tsx | 2 +- 4 files changed, 255 insertions(+), 184 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 44c0337..a72d810 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,7 +27,7 @@ const App = () => { - + ); }; diff --git a/src/pages/transfer/transfertype/blocks/AddDialog.tsx b/src/pages/transfer/transfertype/blocks/AddDialog.tsx index b71d9b7..b57fcab 100644 --- a/src/pages/transfer/transfertype/blocks/AddDialog.tsx +++ b/src/pages/transfer/transfertype/blocks/AddDialog.tsx @@ -2,7 +2,6 @@ import { apiConfig } from '@/config/api.config'; import { useCallback, useEffect, useRef, useState } from 'react'; import { useManageTransferTypeContext } from '../hooks/useManageTransferTypeContext'; import { - Alert, Container, DataGridColumnHeader, DataGridInner, @@ -65,17 +64,14 @@ const AddDialog = () => { const [customers, setCustomers] = useState([]); const { reload } = useDataGrid(); const { PostData, PutData } = useCallApi(); - const [alert, setAlert] = useState({ - show: false, - message: '' - }); + + const [errors, setErrors] = useState>({}); const initialState = { name: '', description: '', wallet_origin: '', wallet_destination: '', - minimum_amount: 0, maximum_amount: 0, max_transaction_per_day: 0, @@ -92,38 +88,39 @@ const AddDialog = () => { const resetForm = () => { setFormField(initialState); + setErrors({}); }; const parsedUser = getAuth()?.user; const validateForm = () => { const requiredFields = [ - 'name', - 'description', - 'wallet_origin', - 'wallet_destination', - 'status', - 'status_approval', - 'status_kind' + { key: 'name', label: 'Transfer Type Name' }, + { key: 'description', label: 'Description' }, + { key: 'wallet_origin', label: 'From Account' }, + { key: 'wallet_destination', label: 'To Account' }, + { key: 'status', label: 'Status' }, + { key: 'status_approval', label: 'Status Approval' }, + { key: 'status_kind', label: 'Status Kind' } ]; - const missingFields = requiredFields.filter( - (field) => - formField[field as keyof typeof formField] === '' || - formField[field as keyof typeof formField] === null || - formField[field as keyof typeof formField] === undefined - ); + const newErrors: Record = {}; + let isValid = true; - if (missingFields.length > 0) { - setAlert({ - show: true, - message: `Please fill out all required fields: ${missingFields.join(', ')}` - }); - return false; - } + 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; + } + }); - setAlert({ show: false, message: '' }); - return true; + setErrors(newErrors); + return isValid; }; const handleSubmit = (e: React.FormEvent) => { @@ -162,20 +159,17 @@ const AddDialog = () => { const response = await PostData(`${API_URL}/transactiontype/create`, data); if (response?.status) { - setAlert({ show: false, message: '' }); return true; } else { - setAlert({ show: true, message: response?.message || 'Failed to create transfer type' }); + toast.error(response?.message || 'Failed to create transfer type'); return false; } } catch (error) { - setAlert({ - show: true, - message: - error instanceof Error - ? error.message - : 'An error occurred while creating transfer type' - }); + toast.error( + error instanceof Error + ? error.message + : 'An error occurred while creating transfer type' + ); return false; } }, @@ -226,7 +220,6 @@ const AddDialog = () => { order_direction: 'ASC' }; const response = await GetData(`${API_URL_MASTERDATA}/wallet/list`, params); - // console.log(response) if (response?.status && response?.data) { setWallets(response.data.list); } else { @@ -238,7 +231,13 @@ const AddDialog = () => { if (!showAddDialog) return; fetchWallets(); }, [showAddDialog]); - // console.log(formField) + + useEffect(() => { + if (!showAddDialog) { + resetForm(); + } + }, [showAddDialog]); + return ( handleAddDialog(open)}> @@ -256,7 +255,6 @@ const AddDialog = () => { className="cursor-pointer hover:opacity-100 opacity-50" onClick={() => { handleAddDialog(false); - resetForm(); }} > @@ -265,13 +263,6 @@ const AddDialog = () => {
- {alert.show && ( -
- -

{alert.message}

- -
- )}
@@ -280,16 +271,20 @@ const AddDialog = () => { Transfer Type Name * -
+
- setFormField((prev) => ({ ...prev, name: target.value })) - } + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} /> + {errors.name && {errors.name}}
@@ -300,16 +295,20 @@ const AddDialog = () => { Description * -
+
- setFormField((prev) => ({ ...prev, description: target.value })) - } + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, description: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, description: '' })); + } + }} /> + {errors.description && {errors.description}}
@@ -390,24 +389,26 @@ const AddDialog = () => { From Account * -
+
+ {errors.wallet_origin && {errors.wallet_origin}}
@@ -418,24 +419,26 @@ const AddDialog = () => { To Account * -
+
+ {errors.wallet_destination && {errors.wallet_destination}}
@@ -447,14 +450,15 @@ const AddDialog = () => { * -
+
+ {errors.type && {errors.type}}
@@ -490,14 +495,15 @@ const AddDialog = () => { * -
+
+ {errors.status_approval && {errors.status_approval}}
@@ -515,14 +522,15 @@ const AddDialog = () => { * -
+
+ {errors.status_kind && {errors.status_kind}}
@@ -545,14 +554,15 @@ const AddDialog = () => { * -
+
+ {errors.status && {errors.status}}
@@ -587,4 +598,4 @@ const AddDialog = () => { ); }; -export default AddDialog; +export default AddDialog; \ No newline at end of file diff --git a/src/pages/transfer/transfertype/blocks/EditDialog.tsx b/src/pages/transfer/transfertype/blocks/EditDialog.tsx index fedac18..4ba5874 100644 --- a/src/pages/transfer/transfertype/blocks/EditDialog.tsx +++ b/src/pages/transfer/transfertype/blocks/EditDialog.tsx @@ -67,6 +67,10 @@ const EditDialog = () => { show: false, message: '' }); + const [errors, setErrors] = useState>({}); + + const [isLoadingWallets, setIsLoadingWallets] = useState(false); + const initialState: { name: string; @@ -106,6 +110,7 @@ const EditDialog = () => { setFormField(initialState); setSelectedGroups([]); setAlert({ show: false, message: '' }); + setErrors({}); }; const handleGroupChange = (groupId: string) => { @@ -128,42 +133,33 @@ const EditDialog = () => { const validateForm = () => { const requiredFields = [ - 'name', - 'description', - 'wallet_origin', - 'wallet_destination', - 'status', - 'status_approval', - 'status_kind', - 'type' + { key: 'name', label: 'Transfer Type Name' }, + { key: 'description', label: 'Description' }, + { key: 'wallet_origin', label: 'From Account' }, + { key: 'wallet_destination', label: 'To Account' }, + { key: 'status', label: 'Status' }, + { key: 'status_approval', label: 'Status Approval' }, + { key: 'status_kind', label: 'Status Kind' } ]; - const missingFields = requiredFields.filter((field) => { - return ( - formField[field as keyof typeof formField] === '' || - formField[field as keyof typeof formField] === null || - formField[field as keyof typeof formField] === undefined - ); + 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`; + // Show toast for each required field + toast.error(`${label} is required`); + isValid = false; + } }); - if (missingFields.length > 0) { - setAlert({ - show: true, - message: `Please fill out all required fields: ${missingFields.join(', ')}` - }); - return false; - } - - if (formField.permission.length === 0) { - setAlert({ - show: true, - message: 'Please select at least one group permission' - }); - return false; - } - - setAlert({ show: false, message: '' }); - return true; + setErrors(newErrors); + return isValid; }; useEffect(() => { @@ -202,7 +198,7 @@ const EditDialog = () => { const createActivity = { module: 'Manage Transfer Type', - description: `Edit Transfer Type => ${selectedTransferType}`, + description: `Edit Transfer Type => ${formField.name}`, action: 'U' }; @@ -227,17 +223,18 @@ const EditDialog = () => { ); if (response?.status) { - setAlert({ show: false, message: '' }); return true; } else { - setAlert({ show: true, message: response?.message || 'Failed to update transfer type' }); + toast.error(response?.message || 'Failed to update transfer type'); return false; } } catch (error) { + toast.error( + error instanceof Error ? error.message : 'Failed to Update Transfer Type' + ); setAlert({ show: true, - message: - error instanceof Error ? error.message : 'An error occurred while updating transfer type' + message: error instanceof Error ? error.message : 'Failed to Update Transfer Type' }); return false; } @@ -376,6 +373,37 @@ const EditDialog = () => { resetForm(); } }, [showEditDialog]); + const renderSelectWithLoading = ( + value: string, + onChangeHandler: (value: string) => void, + options: { id: string; name: string }[] | null, + placeholder: string, + isLoading: boolean + ) => { + return ( + + ); + }; + return ( handleEditDialog(open, null)}> @@ -418,36 +446,48 @@ const EditDialog = () => { Transfer Type Name * -
+
- setFormField((prev) => ({ ...prev, name: target.value })) - } + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, name: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, name: '' })); + } + }} /> + {errors.name && ( + {errors.name} + )}
-
+
-
+
- setFormField((prev) => ({ ...prev, description: target.value })) - } + onChange={({ target }) => { + setFormField((prev) => ({ ...prev, description: target.value })); + if (target.value) { + setErrors((prev) => ({ ...prev, description: '' })); + } + }} /> + {errors.description && ( + {errors.description} + )}
@@ -528,24 +568,17 @@ const EditDialog = () => { From Account * -
- +
+ {renderSelectWithLoading( + formField.wallet_origin, + (value) => setFormField({ ...formField, wallet_origin: value }), + wallets, + 'Select Wallet', + isLoadingWallets + )} + {errors.wallet_origin && ( + {errors.wallet_origin} + )}
@@ -556,14 +589,15 @@ const EditDialog = () => { To Account * -
+
+ {errors.wallet_destination && ( + {errors.wallet_destination} + )}
@@ -584,14 +621,15 @@ const EditDialog = () => { Status Transaction Type * -
+
+ {errors.type && ( + {errors.type} + )}
@@ -627,14 +668,15 @@ const EditDialog = () => { Status Approval * -
+
+ {errors.status_approval && ( + {errors.status_approval} + )}
@@ -652,14 +697,15 @@ const EditDialog = () => { * -
+
+ {errors.status_kind && ( + {errors.status_kind} + )}
@@ -680,14 +729,15 @@ const EditDialog = () => { Status * -
+
+ {errors.status && ( + {errors.status} + )}
@@ -738,6 +791,13 @@ const EditDialog = () => {
+ @@ -761,4 +821,4 @@ const EditDialog = () => { ); }; -export { EditDialog }; +export { EditDialog }; \ No newline at end of file diff --git a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx index 55fa2a6..517b956 100644 --- a/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx +++ b/src/pages/transfer/transfertype/hooks/ManageTransferTypeContext.tsx @@ -346,7 +346,7 @@ const ManageTransferTypeContextProvider = ({ children }: { children: React.React setSearchTerm }} > - + {/* */}