From 730bbb951962c0dfde337ef75422805314c9788d Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Wed, 16 Apr 2025 17:11:32 +0700 Subject: [PATCH] add skeleton loading on dialog edit --- .../master/aldeias/blocks/EditDialog.tsx | 144 ++++---- .../master/municipios/blocks/EditDialog.tsx | 54 ++- .../master/postoadms/blocks/EditDialog.tsx | 142 +++---- .../master/provider/blocks/EditDialog.tsx | 347 ++++++++++-------- 4 files changed, 383 insertions(+), 304 deletions(-) diff --git a/src/pages/master/aldeias/blocks/EditDialog.tsx b/src/pages/master/aldeias/blocks/EditDialog.tsx index 0eec124..aaf4bb4 100644 --- a/src/pages/master/aldeias/blocks/EditDialog.tsx +++ b/src/pages/master/aldeias/blocks/EditDialog.tsx @@ -40,6 +40,7 @@ const EditDialog = () => { const parsedUser = getAuth()?.user; const [sucos, setSucos] = useState([]); const [open, setOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); const [alert, setAlert] = useState({ show: false, message: '' @@ -105,6 +106,7 @@ const EditDialog = () => { }; const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id }); if (response?.status) { @@ -120,6 +122,7 @@ const EditDialog = () => { sucosId: 0 })); } + setIsLoading(false); }, []); const handleUpdate = (e: React.FormEvent) => { @@ -176,72 +179,87 @@ const EditDialog = () => { )} -
-
-
-
- - setFormField({ ...formField, name: e.target.value })} - /> + {isLoading ? ( +
+
+
+
+
+
+
+
- -
-
- - - - - - - - - - No Sucos found. - - {sucos.map((suco) => ( - { - setFormField({ - ...formField, - sucosId: suco.sucos_id - }); - setOpen(false); - }} - > - {suco.sucos_name} - - ))} - - - - - -
-
- -
- -
+

Loading Aldeia Details...

- + ) : ( +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + + + + + + + + + No Sucos found. + + {sucos.map((suco) => ( + { + setFormField({ + ...formField, + sucosId: suco.sucos_id + }); + setOpen(false); + }} + > + {suco.sucos_name} + + ))} + + + + + +
+
+ +
+ +
+
+
+ )}
diff --git a/src/pages/master/municipios/blocks/EditDialog.tsx b/src/pages/master/municipios/blocks/EditDialog.tsx index 6b6724a..ceeac80 100644 --- a/src/pages/master/municipios/blocks/EditDialog.tsx +++ b/src/pages/master/municipios/blocks/EditDialog.tsx @@ -26,6 +26,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: '' @@ -75,6 +76,7 @@ const EditDialog = () => { ); const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id }); if (response?.status) { @@ -88,6 +90,7 @@ const EditDialog = () => { name: '' })); } + setIsLoading(false); }, []); const handleUpdate = (e: React.FormEvent) => { @@ -141,27 +144,42 @@ const EditDialog = () => { )} -
-
-
-
- - setFormField({ ...formField, name: e.target.value })} - /> + {isLoading ? ( +
+
+
+
+
+
+
+
- -
- -
+

Loading Municipio Details...

- + ) : ( +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+ +
+
+
+ )}
diff --git a/src/pages/master/postoadms/blocks/EditDialog.tsx b/src/pages/master/postoadms/blocks/EditDialog.tsx index fd68b10..c5f165f 100644 --- a/src/pages/master/postoadms/blocks/EditDialog.tsx +++ b/src/pages/master/postoadms/blocks/EditDialog.tsx @@ -41,6 +41,7 @@ const EditDialog = () => { const { PutData, GetData } = useCallApi(); const parsedUser = getAuth()?.user; const [open, setOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); const [municipios, setMunicipios] = useState([]); const [alert, setAlert] = useState({ @@ -112,6 +113,7 @@ const EditDialog = () => { }, []); const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id }); if (response?.status) { @@ -126,6 +128,7 @@ const EditDialog = () => { name: '' })); } + setIsLoading(false); }, []); const handleUpdate = (e: React.FormEvent) => { @@ -184,71 +187,86 @@ const EditDialog = () => { )} -
-
-
-
- - setFormField({ ...formField, name: e.target.value })} - /> + {isLoading ? ( +
+
+
+
+
+
+
+
- -
-
- - - - - - - - - - No Municipio found. - - {municipios.map((municipio) => ( - { - setFormField({ - ...formField, - municipio_id: municipio.id - }); - setOpen(false); - }} - > - {municipio.name} - - ))} - - - - - -
-
- -
- - -
+

Loading Postu Administrativo Details...

- + ) : ( +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + + + + + + + + + No Municipio found. + + {municipios.map((municipio) => ( + { + setFormField({ + ...formField, + municipio_id: municipio.id + }); + setOpen(false); + }} + > + {municipio.name} + + ))} + + + + + +
+
+ +
+ + +
+
+
+ )}
diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx index 9bcee4e..5c33f37 100644 --- a/src/pages/master/provider/blocks/EditDialog.tsx +++ b/src/pages/master/provider/blocks/EditDialog.tsx @@ -47,6 +47,7 @@ const EditDialog = () => { const created_time = new Date(); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const [open, setOpen] = useState(false); + const [isLoading, setIsLoading] = useState(false); const [alert, setAlert] = useState({ show: false, message: '' @@ -146,6 +147,7 @@ const EditDialog = () => { }; const doFetchData = useCallback(async (id: string) => { + setIsLoading(true); const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id }); // console.log(response); if (response?.status) { @@ -159,6 +161,7 @@ const EditDialog = () => { agent: response?.data.agent?.id || null })); } + setIsLoading(false); }, []); const handleUpdate = (e: React.FormEvent) => { @@ -206,7 +209,7 @@ const EditDialog = () => { getCustomerList([{ id: 'id', desc: false }]); getTransactionTypeList([{ id: 'name', desc: false }]); }, []); - // console.log(selectedProvider); + return ( handleEditDialog(open, null)}> @@ -222,170 +225,192 @@ const EditDialog = () => { )} -
-
-
-
- - - setFormField((prev) => ({ ...prev, name: target.value })) - } - /> -
-
- -
-
- - setFormField({ ...formField, description: e.target.value })} - /> -
-
- -
-
- - -
-
- -
-
- - -
-
- -
-
- - -
-
- - {formField.type === 'agent' ? ( -
-
- - - - - - - - - { - e.currentTarget.scrollTop += e.deltaY; - }} - > - No Agent found. - - {customers.map((customer) => ( - { - setFormField({ - ...formField, - agent: customer.id - }); - setOpen(false); - }} - > - {customer.username} - - ))} - - - - - + {isLoading ? ( +
+
+
+
+
+
+
- ) : ( -
-
- - -
-
- )} - -
-
+

Loading Provider Details...

- + ) : ( +
+
+
+
+ + + setFormField((prev) => ({ ...prev, name: target.value })) + } + /> +
+
+ +
+
+ + + setFormField({ ...formField, description: e.target.value }) + } + /> +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+
+ + {formField.type === 'agent' ? ( +
+
+ + + + + + + + + { + e.currentTarget.scrollTop += e.deltaY; + }} + > + No Agent found. + + {customers.map((customer) => ( + { + setFormField({ + ...formField, + agent: customer.id + }); + setOpen(false); + }} + > + {customer.username} + + ))} + + + + + +
+
+ ) : ( +
+
+ + +
+
+ )} + +
+ +
+
+
+ )}