diff --git a/src/pages/master/conversion/blocks/EditDialog.tsx b/src/pages/master/conversion/blocks/EditDialog.tsx index 396dedf..48daf9c 100644 --- a/src/pages/master/conversion/blocks/EditDialog.tsx +++ b/src/pages/master/conversion/blocks/EditDialog.tsx @@ -49,6 +49,7 @@ const EditDialog = () => { const parsedUser = getAuth()?.user; const [currencies, setCurrencies] = useState([]); const [open, setOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); const [alert, setAlert] = useState({ show: false, message: '' @@ -74,8 +75,8 @@ const EditDialog = () => { const doUpdateConversion = useCallback( async (e: React.FormEvent) => { e.preventDefault(); - if(!showEditDialog) return; - const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`,{ + if (!showEditDialog) return; + const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, { ...formField }); @@ -83,24 +84,24 @@ const EditDialog = () => { resetForm(); handleEditDialog(false, null); toast.success('Success Update Conversion'); - const createActivity = { - module: 'Manage Conversion', - description: `Update Conversion => ${selectedConversion}`, - action: 'U' - }; - - doSaveLogActivity(createActivity); + const createActivity = { + module: 'Manage Conversion', + description: `Update Conversion => ${selectedConversion}`, + action: 'U' + }; + + doSaveLogActivity(createActivity); reload(); } else { toast.error('Error Create Conversion'); setAlert({ show: true, message: 'Failed to Update Conversion. Please try again.' }); - } + } }, [formField] ); const doGetCurrency = async (sorting: any) => { - if (!showEditDialog)return; + if (!showEditDialog) return; try { sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; const response = await GetData(`${API_URL}/dashboard/currency/`, { @@ -117,30 +118,29 @@ const EditDialog = () => { } }; - const doGetConversionById = useCallback(async (id: string) => { - const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id }); - console.log('Transaction Type: ', response?.data); - if (response?.status) { - setFormField((prev) => ({ - ...prev, - status: response.data.status, - id_currency_origin: response.data.id_currency_origin, - id_currency_destination: response.data.id_currency_destination, - buy: response.data.buy, - sell: response.data.sell, - })); - } - // console.log('form fieldd Transaction Type: ', formField); - }, []); - - useEffect(() => { - if (selectedConversion) { - doGetConversionById(selectedConversion); - } - }, [selectedConversion]); - - + const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); + const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id }); + console.log('Transaction Type: ', response?.data); + if (response?.status) { + setFormField((prev) => ({ + ...prev, + status: response.data.status, + id_currency_origin: response.data.id_currency_origin, + id_currency_destination: response.data.id_currency_destination, + buy: response.data.buy, + sell: response.data.sell + })); + } + // console.log('form fieldd Transaction Type: ', formField); + setIsLoading(false); + }, []); + useEffect(() => { + if (selectedConversion) { + doFetchData(selectedConversion); + } + }, [selectedConversion]); useEffect(() => { if (showEditDialog) { @@ -156,8 +156,7 @@ const EditDialog = () => { if (showEditDialog) { doGetCurrency([{ id: 'name', desc: false }]); } - }, [showEditDialog]); - + }, [showEditDialog]); useEffect(() => { if (showEditDialog === false) { @@ -166,7 +165,7 @@ const EditDialog = () => { }, [showEditDialog]); return ( - handleEditDialog(open,null)}> + handleEditDialog(open, null)}> Conversion - Update @@ -180,96 +179,110 @@ const EditDialog = () => { )} -
-
-
- - + {isLoading ? ( +
+
+
+
+
+
+
+
+
-
- - -
-
- - { - setFormField((prev) => ({ - ...prev, - buy: values.floatValue || 0 - })); - }} - placeholder="Enter Buy" - /> -
-
- - { - setFormField((prev) => ({ - ...prev, - sell: values.floatValue || 0 - })); - }} - placeholder="Enter Sell" - /> -
-
+

Loading Conversion Details...

+
+ ) : ( + +
+
+ + +
+
+ + +
+
+ + { + setFormField((prev) => ({ + ...prev, + buy: values.floatValue || 0 + })); + }} + placeholder="Enter Buy" + /> +
+
+ + { + setFormField((prev) => ({ + ...prev, + sell: values.floatValue || 0 + })); + }} + placeholder="Enter Sell" + /> +
+
+
- +
+
+ + +
-
- - -
-
- + + )}
diff --git a/src/pages/master/currency/blocks/EditDialog.tsx b/src/pages/master/currency/blocks/EditDialog.tsx index 57a4c07..96fb0c4 100644 --- a/src/pages/master/currency/blocks/EditDialog.tsx +++ b/src/pages/master/currency/blocks/EditDialog.tsx @@ -49,6 +49,7 @@ const EditDialog = () => { const parsedUser = getAuth()?.user; const [currencies, setCurrencies] = useState([]); const [open, setOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); const [alert, setAlert] = useState({ show: false, message: '' @@ -98,7 +99,8 @@ const EditDialog = () => { [formField] ); - const doGetCurrencyById = useCallback(async (id: string) => { + const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id }); // console.log('Transaction Type: ', response?.data); if (response?.status) { @@ -110,12 +112,13 @@ const EditDialog = () => { prefix: response.data.prefix })); } + setIsLoading(false); // console.log('form fieldd Transaction Type: ', formField); }, []); useEffect(() => { if (selectedCurrency) { - doGetCurrencyById(selectedCurrency); + doFetchData(selectedCurrency); } }, [selectedCurrency]); @@ -150,74 +153,93 @@ const EditDialog = () => { )} -
-
-
- - setFormField((prev) => ({ ...prev, code: e.target.value }))} - /> -
-
- - setFormField((prev) => ({ ...prev, name: e.target.value }))} - /> -
- -
- - setFormField((prev) => ({ ...prev, prefix: e.target.value }))} - /> -
- -
- - - -
- -
- - + {isLoading ? ( +
+
+
+
+
+
+
+
+
+

Loading Currency Details...

- + ) : ( +
+
+
+ + setFormField((prev) => ({ ...prev, code: e.target.value }))} + /> +
+
+ + setFormField((prev) => ({ ...prev, name: e.target.value }))} + /> +
+ +
+ + + setFormField((prev) => ({ ...prev, prefix: e.target.value })) + } + /> +
+ +
+ + + +
+ +
+ + +
+
+
+ )}
diff --git a/src/pages/master/products/blocks/EditDialog.tsx b/src/pages/master/products/blocks/EditDialog.tsx index 493489d..a6395cd 100644 --- a/src/pages/master/products/blocks/EditDialog.tsx +++ b/src/pages/master/products/blocks/EditDialog.tsx @@ -36,6 +36,7 @@ const EditDialog = () => { const { reload } = useDataGrid(); const { PutData, GetData } = useCallApi(); const parsedUser = getAuth()?.user; + const [isLoading, setIsLoading] = useState(false); const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const [alert, setAlert] = useState({ @@ -123,6 +124,7 @@ const EditDialog = () => { }, []); const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); const response = await GetData(`${API_URL}/product/getdata/${id}`, { id }); // console.log(response); @@ -144,6 +146,7 @@ const EditDialog = () => { } else { setFormField(initialState); } + setIsLoading(false); }, []); const handleUpdate = (e: React.FormEvent) => { @@ -214,225 +217,242 @@ const EditDialog = () => { )} -
-
-
-
- - setFormField({ ...formField, name: e.target.value })} - /> + {isLoading ? ( +
+
+
+
+
+
+
+
- -
-
- - setFormField({ ...formField, type: e.target.value })} - /> -
-
- -
-
- - setFormField({ ...formField, code: e.target.value })} - /> -
-
- -
-
- - setFormField({ ...formField, description: e.target.value })} - /> -
-
- -
-
- - { - setFormField((prev) => ({ - ...prev, - price_point: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Price Point" - /> -
-
- -
-
- - { - setFormField((prev) => ({ - ...prev, - price_cash: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Price Cash" - /> -
-
- -
-
- - { - setFormField((prev) => ({ - ...prev, - cashback_point: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Cashback Point" - /> -
-
- -
-
- - { - setFormField((prev) => ({ - ...prev, - cashback_cash: values.floatValue !== undefined ? values.floatValue : '' - })); - }} - placeholder="Enter Cashback Cash" - /> -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- -
- - -
+

Loading Products Details...

- + ) : ( +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, type: e.target.value })} + /> +
+
+ +
+
+ + setFormField({ ...formField, code: e.target.value })} + /> +
+
+ +
+
+ + + setFormField({ ...formField, description: e.target.value }) + } + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + price_point: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Price Point" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + price_cash: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Price Cash" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + cashback_point: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Cashback Point" + /> +
+
+ +
+
+ + { + setFormField((prev) => ({ + ...prev, + cashback_cash: values.floatValue !== undefined ? values.floatValue : '' + })); + }} + placeholder="Enter Cashback Cash" + /> +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+ + +
+
+
+ )}
diff --git a/src/pages/master/profession/blocks/EditDialog.tsx b/src/pages/master/profession/blocks/EditDialog.tsx index ef43499..fc8a83f 100644 --- a/src/pages/master/profession/blocks/EditDialog.tsx +++ b/src/pages/master/profession/blocks/EditDialog.tsx @@ -23,6 +23,7 @@ const EditDialog = () => { const { reload } = useDataGrid(); const { PutData, GetData } = useCallApi(); const parsedUser = getAuth()?.user; + const [isLoading, setIsLoading] = useState(false); const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const [alert, setAlert] = useState({ @@ -72,6 +73,7 @@ const EditDialog = () => { ); const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id }); if (response?.status) { @@ -82,6 +84,7 @@ const EditDialog = () => { } else { setFormField(initialState); } + setIsLoading(false); }, []); const handleUpdate = (e: React.FormEvent) => { @@ -134,27 +137,42 @@ const EditDialog = () => { )} -
-
-
-
- - setFormField({ ...formField, name: e.target.value })} - /> + {isLoading ? ( +
+
+
+
+
+
+
+
- -
- -
+

Loading Profession Details...

- + ) : ( +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+ +
+
+
+ )}
diff --git a/src/pages/master/reward/blocks/EditDialog.tsx b/src/pages/master/reward/blocks/EditDialog.tsx index d31989d..d61ec96 100644 --- a/src/pages/master/reward/blocks/EditDialog.tsx +++ b/src/pages/master/reward/blocks/EditDialog.tsx @@ -33,6 +33,7 @@ const EditDialog = () => { const { reload } = useDataGrid(); const { PutData, GetData } = useCallApi(); const parsedUser = getAuth()?.user; + const [isLoading, setIsLoading] = useState(false); const [alert, setAlert] = useState({ show: false, message: '' @@ -93,6 +94,7 @@ const EditDialog = () => { ); const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); // console.log('Ini datanya:', id); const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id }); // console.log('API Response:', response); @@ -106,6 +108,7 @@ const EditDialog = () => { status: response.data.status })); } + setIsLoading(false); }, []); // const handleUpdate = (e: React.FormEvent) => { @@ -159,95 +162,112 @@ const EditDialog = () => {
{alert.show && {alert.message}} -
-
-
- - - setFormField((prev) => ({ ...prev, name: e.target.value }))} - /> -
-
- - -
- + {isLoading ? ( +
+
+
+
+
+
+
+
-
- - - { - setFormField((prev) => ({ - ...prev, - amount: values.floatValue || 0 - })); - }} - placeholder="Enter Amount" - /> -
-
- - -
- -
-
-
- - -
+

Loading Reward Details...

- + ) : ( +
+
+
+ + + setFormField((prev) => ({ ...prev, name: e.target.value }))} + /> +
+
+ + +
+ +
+
+
+ + + { + setFormField((prev) => ({ + ...prev, + amount: values.floatValue || 0 + })); + }} + placeholder="Enter Amount" + /> +
+
+ + +
+ +
+
+
+ + +
+
+
+ )}
diff --git a/src/pages/master/wallet/blocks/EditDialog.tsx b/src/pages/master/wallet/blocks/EditDialog.tsx index d8ff501..de4f5dc 100644 --- a/src/pages/master/wallet/blocks/EditDialog.tsx +++ b/src/pages/master/wallet/blocks/EditDialog.tsx @@ -45,6 +45,7 @@ const EditDialog = () => { const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext(); const { reload } = useDataGrid(); const { GetData, PutData } = useCallApi(); + const [isLoading, setIsLoading] = useState(false); const [alert, setAlert] = useState({ show: false, message: '' @@ -115,6 +116,7 @@ const EditDialog = () => { }; const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, { id }); @@ -132,6 +134,7 @@ const EditDialog = () => { : [] })); } + setIsLoading(false); }, []); const getCurrencyLists = async (sorting: any) => { @@ -213,91 +216,110 @@ const EditDialog = () => { )} -
-
-
-
- - setFormField({ ...formField, name: e.target.value })} - placeholder="Wallet Name" - /> -
-
- -
-
- - setFormField({ ...formField, description: e.target.value })} - placeholder="Description" - /> -
-
- -
-
- - -
-
- -
-
- -
- + {isLoading ? ( +
+
+
+
+
+
+
- -
-
- -
- -
-
-
- -
- -
+

Loading Wallet Details...

- + ) : ( +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + placeholder="Wallet Name" + /> +
+
+ +
+
+ + + setFormField({ ...formField, description: e.target.value }) + } + placeholder="Description" + /> +
+
+ +
+
+ + +
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ )}