From 910ef6da896a49ee313cd48f058b2b873809c8ea Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Wed, 16 Apr 2025 15:03:20 +0700 Subject: [PATCH 01/16] update column actions --- src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx | 2 +- src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx | 2 +- src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx | 2 +- src/pages/master/sucos/hooks/ManageSucosContext.tsx | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx b/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx index 355a683..8d8fda0 100644 --- a/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx +++ b/src/pages/master/aldeias/hooks/ManageAldeiasContext.tsx @@ -122,7 +122,7 @@ const ManageAldeiasContextProvider = ({ children }: { children: React.ReactNode ); }, meta: { - headerClassName: 'w-[100px]', + headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' } } diff --git a/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx b/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx index 3fcb85e..9946333 100644 --- a/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx +++ b/src/pages/master/municipios/hooks/ManageMunicipiosContext.tsx @@ -132,7 +132,7 @@ const ManageMunicipiosProvider = ({ children }: { children: React.ReactNode }) = ); }, meta: { - headerClassName: 'w-[100px]', + headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' } } diff --git a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx index 06a76c4..4fd1416 100644 --- a/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx +++ b/src/pages/master/postoadms/hooks/ManagePostoAdmsContext.tsx @@ -131,7 +131,7 @@ const ManagePostoAdmsContextProvider = ({ children }: { children: React.ReactNod ); }, meta: { - headerClassName: 'w-[100px]', + headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' } } diff --git a/src/pages/master/sucos/hooks/ManageSucosContext.tsx b/src/pages/master/sucos/hooks/ManageSucosContext.tsx index c77539a..780b93a 100644 --- a/src/pages/master/sucos/hooks/ManageSucosContext.tsx +++ b/src/pages/master/sucos/hooks/ManageSucosContext.tsx @@ -138,7 +138,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode }) ); }, meta: { - headerClassName: 'w-[100px]', + headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' } } From a74a2b42bb53a5436a931cc0d22229fcf527ffc6 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Wed, 16 Apr 2025 15:27:17 +0700 Subject: [PATCH 02/16] update text on header logo - set to black when sticky mode --- src/layouts/demo2/header/HeaderLogo.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/layouts/demo2/header/HeaderLogo.tsx b/src/layouts/demo2/header/HeaderLogo.tsx index 443be9e..03fb815 100644 --- a/src/layouts/demo2/header/HeaderLogo.tsx +++ b/src/layouts/demo2/header/HeaderLogo.tsx @@ -19,6 +19,16 @@ const HeaderLogo = () => { const { pathname } = useLocation(); const { isRTL } = useLanguage(); const [selectedMenuItem, setSelectedMenuItem] = useState(MENU_ROOT[0]); + const [isSticky, setIsSticky] = useState(false); + + useEffect(() => { + const handleScroll = () => { + setIsSticky(window.scrollY > 100); + }; + + window.addEventListener('scroll', handleScroll); + return () => window.removeEventListener('scroll', handleScroll); + }, []); useEffect(() => { MENU_ROOT.forEach((item) => { @@ -55,7 +65,9 @@ const HeaderLogo = () => {
-

TPAY Dashboard Portal

+
); From 730bbb951962c0dfde337ef75422805314c9788d Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Wed, 16 Apr 2025 17:11:32 +0700 Subject: [PATCH 03/16] 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} + + ))} + + + + + +
+
+ ) : ( +
+
+ + +
+
+ )} + +
+ +
+
+
+ )}
From 585cd326b749790e51779401e584b3cb084e29a3 Mon Sep 17 00:00:00 2001 From: bagusajisaputroo Date: Wed, 16 Apr 2025 17:33:51 +0700 Subject: [PATCH 04/16] adding button on search on masterdata --- .../master/products/blocks/ListToolbar.tsx | 25 +++++++++++++++-- .../products/hooks/ManageProductsContext.tsx | 2 +- .../master/profession/blocks/ListToolbar.tsx | 27 +++++++++++++++++-- .../hooks/ManageProfessionContext.tsx | 4 +-- .../master/provider/blocks/ListToolbar.tsx | 23 ++++++++++++++-- .../provider/hooks/ManageProviderContext.tsx | 4 +-- .../master/reward/blocks/ListToolbar.tsx | 23 ++++++++++++++-- .../reward/hooks/ManageRewardContext.tsx | 5 ++-- 8 files changed, 98 insertions(+), 15 deletions(-) diff --git a/src/pages/master/products/blocks/ListToolbar.tsx b/src/pages/master/products/blocks/ListToolbar.tsx index 92bd362..efb5d3a 100644 --- a/src/pages/master/products/blocks/ListToolbar.tsx +++ b/src/pages/master/products/blocks/ListToolbar.tsx @@ -1,10 +1,24 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { useManageProductsContext } from '../hooks/useManageProductsContext'; import { Button } from '@/components/ui/button'; +import { useState } from 'react'; const ListToolbar = () => { const { table, reload } = useDataGrid(); const { handleAddDialog } = useManageProductsContext(); + const[searchProduct, setSearchProduct] = useState(''); + + + const handleSearch = ()=>{ + table.getColumn('name')?.setFilterValue(searchProduct); + table.setPageIndex(0); + } + + const handleKeyDown = (event:React.KeyboardEvent) =>{ + if(event.key==='Enter'){ + handleSearch(); + } + } return (
@@ -16,10 +30,16 @@ const ListToolbar = () => { table.getColumn('name')?.setFilterValue(event.target.value)} + value={ searchProduct} + onChange={(event) => setSearchProduct(event.target.value)} + onKeyDown={handleKeyDown} /> + + + {/* diff --git a/src/pages/master/products/hooks/ManageProductsContext.tsx b/src/pages/master/products/hooks/ManageProductsContext.tsx index 236e306..f785421 100644 --- a/src/pages/master/products/hooks/ManageProductsContext.tsx +++ b/src/pages/master/products/hooks/ManageProductsContext.tsx @@ -231,7 +231,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode ); }, meta: { - headerClassName: 'w-[100px]', + headerClassName: 'w-[100px] text-center', cellClassName: 'text-center' } } diff --git a/src/pages/master/profession/blocks/ListToolbar.tsx b/src/pages/master/profession/blocks/ListToolbar.tsx index 9c04194..0e5b23d 100644 --- a/src/pages/master/profession/blocks/ListToolbar.tsx +++ b/src/pages/master/profession/blocks/ListToolbar.tsx @@ -1,10 +1,27 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { useManageProfessionContext } from '../hooks/useManageProfessionContext'; import { Button } from '@/components/ui/button'; +import { useState } from 'react'; +import { set } from 'date-fns'; const ListToolbar = () => { const { reload, table } = useDataGrid(); const { handleAddDialog } = useManageProfessionContext(); + const [searchProfession, setSearchProfession]= useState(''); + + const handleKeyDown = (event: React.KeyboardEvent) =>{ + if(event.key==='Enter'){ + handleSearch(); + } + } + + const handleSearch = () =>{ + table.getColumn('name')?.setFilterValue(searchProfession); + table.setPageIndex(0); + } + + + return (
@@ -16,12 +33,18 @@ const ListToolbar = () => { - table.getColumn('name')?.setFilterValue(event.target.value) + setSearchProfession(event.target.value) } + onKeyDown={handleKeyDown} /> + + + {/* + {/* +
@@ -233,17 +233,17 @@ const EditDialog = () => { {sucos.map((suco) => ( { setFormField({ ...formField, - sucosId: suco.sucos_id + sucosId: suco.id }); setOpen(false); }} > - {suco.sucos_name} + {suco.name} ))} diff --git a/src/pages/master/sucos/blocks/EditDialog.tsx b/src/pages/master/sucos/blocks/EditDialog.tsx index 4dbd307..50156f3 100644 --- a/src/pages/master/sucos/blocks/EditDialog.tsx +++ b/src/pages/master/sucos/blocks/EditDialog.tsx @@ -34,7 +34,6 @@ interface PostoAdmsProps { const API_URL = apiConfig.service_master_data; const EditDialog = () => { - const parentRef = useRef(null); const { showEditDialog, handleEditDialog, selectedSucos, sucos } = useManageSucosContext(); const { reload } = useDataGrid(); const { PutData, GetData } = useCallApi(); diff --git a/src/pages/master/sucos/hooks/ManageSucosContext.tsx b/src/pages/master/sucos/hooks/ManageSucosContext.tsx index 780b93a..2d106a7 100644 --- a/src/pages/master/sucos/hooks/ManageSucosContext.tsx +++ b/src/pages/master/sucos/hooks/ManageSucosContext.tsx @@ -9,9 +9,12 @@ import { useNavigate } from 'react-router'; import axios from 'axios'; interface SucosProps { - sucos_id: number; - sucos_name: string; - posto_name: string; + id: string; + name: string; + posto: { + id: string; + name: string; + }; } interface ContextProps { @@ -106,7 +109,9 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode }) const value = row.getValue(columnId); return String(value).includes(String(filterValue)); }, - header: ({ column }) => , + header: ({ column }) => ( + + ), enableSorting: true, enableHiding: false, meta: { @@ -124,13 +129,13 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode }) <> @@ -158,7 +163,7 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode }) order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', filter: JSON.stringify(filter) }); - // console.log('Sucos List Response:', response?.data); + console.log('Sucos List Response:', response?.data); setSucos(response?.data.list || []); return { data: response?.data.list, totalCount: response?.data.total_count }; } catch (error) { From 9ab5fcf5a1dd3cb89b9e871d83efd79ce212bc72 Mon Sep 17 00:00:00 2001 From: bagusajisaputroo Date: Wed, 16 Apr 2025 19:18:28 +0700 Subject: [PATCH 06/16] handle debounce on search municipio --- .../master/municipios/blocks/ListToolbar.tsx | 32 +++++++------------ 1 file changed, 11 insertions(+), 21 deletions(-) diff --git a/src/pages/master/municipios/blocks/ListToolbar.tsx b/src/pages/master/municipios/blocks/ListToolbar.tsx index 140850c..f5f046d 100644 --- a/src/pages/master/municipios/blocks/ListToolbar.tsx +++ b/src/pages/master/municipios/blocks/ListToolbar.tsx @@ -1,7 +1,7 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext'; import { Button } from '@/components/ui/button'; -import { useCallback, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { toast } from 'sonner'; const ListToolbar = () => { @@ -9,8 +9,15 @@ const ListToolbar = () => { const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext(); const [searchName, setSearchName] = useState(''); const [isLoading, setIsLoading] = useState(false); - const [searchValue, setSearchValue] = useState(''); + const [searchValue, setSearchValue] = useState((table.getColumn('name')?.getFilterValue() as string) ?? ''); + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); const handleFilterData = useCallback(() => { try { table.getColumn('name')?.setFilterValue(searchName); @@ -20,37 +27,20 @@ const ListToolbar = () => { } }, [searchName, table]); - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter') { - handleSearch(); - } - }; - - const handleSearch = () => { - table.getColumn('name')?.setFilterValue(searchValue); - table.setPageIndex(0); - }; - return (
-
- - {isFound && sucos.length > 0 && ( -
-

Aldeias:

-
- - {aldeia.map((aldeias) => aldeias.name).join(', ')} - -
-
- )} - -
- - -
- - - -
- ); -}; - -export default SearchDialog; From cb1c1756f9619cd50bc4a454e74e65f17b96dd26 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Wed, 16 Apr 2025 19:29:15 +0700 Subject: [PATCH 08/16] fix error --- src/pages/master/sucos/SucosMaster.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/master/sucos/SucosMaster.tsx b/src/pages/master/sucos/SucosMaster.tsx index 46c3215..16f5402 100644 --- a/src/pages/master/sucos/SucosMaster.tsx +++ b/src/pages/master/sucos/SucosMaster.tsx @@ -3,7 +3,6 @@ import { ManageSucosContextProvider } from './hooks/ManageSucosContext'; import AddDialog from './blocks/AddDialog'; import EditDialog from './blocks/EditDialog'; import DeleteDialog from './blocks/DeleteDialog'; -import SearchDialog from './blocks/SearchDialog'; import { Breadcrumbs, Link } from '@mui/material'; import { Helmet } from 'react-helmet'; From 14a6db5eaaf7b130eb4e9717f340b8e38869a594 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Wed, 16 Apr 2025 19:29:56 +0700 Subject: [PATCH 09/16] fix error --- src/pages/master/sucos/SucosMaster.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/master/sucos/SucosMaster.tsx b/src/pages/master/sucos/SucosMaster.tsx index 16f5402..77f0815 100644 --- a/src/pages/master/sucos/SucosMaster.tsx +++ b/src/pages/master/sucos/SucosMaster.tsx @@ -36,7 +36,6 @@ const SucosMaster = () => { - From 68e5c15a006db67f2df24c0948cf913b505c8dd7 Mon Sep 17 00:00:00 2001 From: bagusajisaputroo Date: Wed, 16 Apr 2025 19:48:10 +0700 Subject: [PATCH 10/16] adding handle debounce on some sub modules in master data --- .../master/aldeias/blocks/ListToolbar.tsx | 19 +++++----- .../master/products/blocks/ListToolbar.tsx | 34 +++++++----------- .../master/profession/blocks/ListToolbar.tsx | 36 +++++++------------ .../master/provider/blocks/ListToolbar.tsx | 36 +++++++------------ .../master/reward/blocks/ListToolbar.tsx | 33 +++++++---------- 5 files changed, 60 insertions(+), 98 deletions(-) diff --git a/src/pages/master/aldeias/blocks/ListToolbar.tsx b/src/pages/master/aldeias/blocks/ListToolbar.tsx index c5c77ab..f627d3f 100644 --- a/src/pages/master/aldeias/blocks/ListToolbar.tsx +++ b/src/pages/master/aldeias/blocks/ListToolbar.tsx @@ -1,12 +1,12 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { Button } from '@/components/ui/button'; import { useManageAldeiasContext } from '../hooks/useManageAldeiasContext'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; const ListToolbar = () => { const { table, reload } = useDataGrid(); const { handleAddDialog, handleSearchDialog } = useManageAldeiasContext(); - const [searchValue, setSearchValue] = useState(''); + const [searchValue, setSearchValue] = useState((table.getColumn('name')?.getFilterValue() as string) ?? ''); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { @@ -14,6 +14,13 @@ const ListToolbar = () => { } }; + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); const handleSearch = () => { table.getColumn('name')?.setFilterValue(searchValue); table.setPageIndex(0); @@ -28,17 +35,11 @@ const ListToolbar = () => { setSearchValue(event.target.value)} - onKeyDown={handleKeyDown} /> - - - {/* - {/* diff --git a/src/pages/master/profession/blocks/ListToolbar.tsx b/src/pages/master/profession/blocks/ListToolbar.tsx index 0e5b23d..442b4d1 100644 --- a/src/pages/master/profession/blocks/ListToolbar.tsx +++ b/src/pages/master/profession/blocks/ListToolbar.tsx @@ -1,24 +1,21 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { useManageProfessionContext } from '../hooks/useManageProfessionContext'; import { Button } from '@/components/ui/button'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { set } from 'date-fns'; const ListToolbar = () => { const { reload, table } = useDataGrid(); const { handleAddDialog } = useManageProfessionContext(); - const [searchProfession, setSearchProfession]= useState(''); + const [searchValue, setSearchValue] = useState((table.getColumn('name')?.getFilterValue() as string) ?? ''); - const handleKeyDown = (event: React.KeyboardEvent) =>{ - if(event.key==='Enter'){ - handleSearch(); - } - } - - const handleSearch = () =>{ - table.getColumn('name')?.setFilterValue(searchProfession); - table.setPageIndex(0); - } + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); @@ -32,19 +29,12 @@ const ListToolbar = () => { - setSearchProfession(event.target.value) - } - onKeyDown={handleKeyDown} + placeholder="Search Transaction Type" + value={searchValue} + onChange={(event) => setSearchValue(event.target.value)} /> - - - + {/* - + {/* -
- -
-
- -
- - - - ); -}; - -export default SearchDialog; diff --git a/src/pages/master/postoadms/PostoAdmsMaster.tsx b/src/pages/master/postoadms/PostoAdmsMaster.tsx index 90823ab..275760a 100644 --- a/src/pages/master/postoadms/PostoAdmsMaster.tsx +++ b/src/pages/master/postoadms/PostoAdmsMaster.tsx @@ -1,7 +1,6 @@ import AddDialog from './blocks/AddDialog'; import DeleteDialog from './blocks/DeleteDialog'; import EditDialog from './blocks/EditDialog'; -import SearchDialog from './blocks/SearchDialog'; import { ManagePostoAdmsContextProvider } from './hooks/ManagePostoAdmsContext'; import { Container, DataGridInner } from '@/components'; import { Breadcrumbs, Link } from '@mui/material'; @@ -37,7 +36,6 @@ const PostoAdmsMaster = () => { - diff --git a/src/pages/master/postoadms/blocks/ListToolbar.tsx b/src/pages/master/postoadms/blocks/ListToolbar.tsx index 6d2e7ca..e181848 100644 --- a/src/pages/master/postoadms/blocks/ListToolbar.tsx +++ b/src/pages/master/postoadms/blocks/ListToolbar.tsx @@ -2,12 +2,14 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { Button } from '@/components/ui/button'; import { useManagePostoAdmsContext } from '../hooks/useManagePostoAdmsContext'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; const ListToolbar = () => { const { table, reload } = useDataGrid(); const { handleAddDialog, handleSearchDialog } = useManagePostoAdmsContext(); - const [searchPosto, setSearchPosto] = useState(''); + const [searchValue, setSearchValue] = useState( + (table.getColumn('name')?.getFilterValue() as string) ?? '' + ); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { @@ -16,10 +18,19 @@ const ListToolbar = () => { }; const handleSearch = () => { - table.getColumn('name')?.setFilterValue(searchPosto); + table.getColumn('name')?.setFilterValue(searchValue); table.setPageIndex(0); }; + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + table.setPageIndex(0); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); + return (
@@ -30,34 +41,15 @@ const ListToolbar = () => { setSearchPosto(event.target.value)} - onKeyDown={handleKeyDown} + value={searchValue} + onChange={(event) => setSearchValue(event.target.value)} /> - + {/* - - {/* - */} - {/* */}
- - - - - - No PostoAdms found. - - {postoAdms.map((postoAdm) => ( - { - setFormField({ - id: postoAdm.PostoAdms_id, - name: postoAdm.PostoAdms_name - }); - setOpen(false); - }} - > - {postoAdm.PostoAdms_name} - - ))} - - - - - -
- - {isFound && sucos.length > 0 && ( -
-

Sucos:

-
- - {sucos.map((suco) => suco.name).join(', ')} - -
-
- )} - -
- - -
- - - - - ); -}; - -export default SearchDialog; diff --git a/src/pages/master/products/blocks/ListToolbar.tsx b/src/pages/master/products/blocks/ListToolbar.tsx index a56506f..c8620f6 100644 --- a/src/pages/master/products/blocks/ListToolbar.tsx +++ b/src/pages/master/products/blocks/ListToolbar.tsx @@ -6,16 +6,18 @@ import { useEffect, useState } from 'react'; const ListToolbar = () => { const { table, reload } = useDataGrid(); const { handleAddDialog } = useManageProductsContext(); - const [searchValue, setSearchValue] = useState((table.getColumn('name')?.getFilterValue() as string) ?? ''); + const [searchValue, setSearchValue] = useState( + (table.getColumn('name')?.getFilterValue() as string) ?? '' + ); - useEffect(() => { - const timer = setTimeout(() => { - table.getColumn('name')?.setFilterValue(searchValue); - }, 200); - - return () => clearTimeout(timer); - }, [searchValue, table]); + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + table.setPageIndex(0); + }, 200); + return () => clearTimeout(timer); + }, [searchValue, table]); return (
@@ -26,22 +28,11 @@ const ListToolbar = () => { setSearchValue(event.target.value)} /> - {/* - - */}
- */}
- */}
- - - - - - No Postu Administrativo Found. - - {postoadms.map((posto) => ( - { - setFormField({ - ...formField, - postoId: posto.PostoAdms_id - }); - setOpen(false); - }} - > - {posto.PostoAdms_name} - - ))} - - - - - -
-
- -
- - -
+

Loading Sucos Details...

- + ) : ( +
+
+
+
+ + setFormField({ ...formField, name: e.target.value })} + /> +
+
+ +
+
+ + + + + + + + + + No Postu Administrativo Found. + + {postoadms.map((posto) => ( + { + setFormField({ + ...formField, + postoId: posto.PostoAdms_id + }); + setOpen(false); + }} + > + {posto.PostoAdms_name} + + ))} + + + + + +
+
+ +
+ + +
+
+
+ )}
diff --git a/src/pages/master/sucos/blocks/ListToolbar.tsx b/src/pages/master/sucos/blocks/ListToolbar.tsx index 75e52e4..0ed4cab 100644 --- a/src/pages/master/sucos/blocks/ListToolbar.tsx +++ b/src/pages/master/sucos/blocks/ListToolbar.tsx @@ -1,12 +1,14 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { Button } from '@/components/ui/button'; import { useManageSucosContext } from '../hooks/useManageSucosContext'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; const ListToolbar = () => { const { table, reload } = useDataGrid(); const { handleAddDialog, handleSearchDialog } = useManageSucosContext(); - const [searchValue, setSearchValue] = useState(''); + const [searchValue, setSearchValue] = useState( + (table.getColumn('sucos_name')?.getFilterValue() as string) ?? '' + ); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { @@ -19,6 +21,15 @@ const ListToolbar = () => { table.setPageIndex(0); }; + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('sucos_name')?.setFilterValue(searchValue); + table.setPageIndex(0); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); + return (
@@ -31,32 +42,13 @@ const ListToolbar = () => { placeholder="Search Sucos" value={searchValue} onChange={(event) => setSearchValue(event.target.value)} - onKeyDown={handleKeyDown} /> - + {/* - - {/* - */} - {/* */}
- - {/* - */}
diff --git a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx index 0820e05..91425b8 100644 --- a/src/pages/menu/manage-menu/blocks/ListToolbar.tsx +++ b/src/pages/menu/manage-menu/blocks/ListToolbar.tsx @@ -1,12 +1,14 @@ import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components'; import { useManageMenusContext } from '../hooks/useManageMenusContext'; import { Button } from '@/components/ui/button'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; const ListToolbar = () => { const { table, reload } = useDataGrid(); const { handleAddDialog } = useManageMenusContext(); - const [searchValue, setSearchValue] = useState(''); + const [searchValue, setSearchValue] = useState( + (table.getColumn('name')?.getFilterValue() as string) ?? '' + ); const handleKeyDown = (event: React.KeyboardEvent) => { if (event.key === 'Enter') { @@ -18,6 +20,15 @@ const ListToolbar = () => { table.getColumn('name')?.setFilterValue(searchValue); }; + useEffect(() => { + const timer = setTimeout(() => { + table.getColumn('name')?.setFilterValue(searchValue); + table.setPageIndex(0); + }, 200); + + return () => clearTimeout(timer); + }, [searchValue, table]); + return (
@@ -30,25 +41,12 @@ const ListToolbar = () => { placeholder="Search Menu" value={searchValue} onChange={(event) => setSearchValue(event.target.value)} - onKeyDown={handleKeyDown} /> - + {/* - - {/* - */}
From 1d11c94175c3284ec6994551cb357ee9614b2a27 Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Wed, 16 Apr 2025 22:53:06 +0700 Subject: [PATCH 12/16] add skeleton loading on dialog edit --- .../master/conversion/blocks/EditDialog.tsx | 277 ++++++----- .../master/currency/blocks/EditDialog.tsx | 158 +++--- .../master/products/blocks/EditDialog.tsx | 452 +++++++++--------- .../master/profession/blocks/EditDialog.tsx | 54 ++- src/pages/master/reward/blocks/EditDialog.tsx | 192 ++++---- src/pages/master/wallet/blocks/EditDialog.tsx | 184 +++---- 6 files changed, 716 insertions(+), 601 deletions(-) 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" + /> +
+
+ +
+
+ + +
+
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+ +
+
+
+ +
+ +
+
+
+ )}
From 292e1d4a8ef2df9ac433a366fe6b5fba3388371f Mon Sep 17 00:00:00 2001 From: ardiola Date: Wed, 16 Apr 2025 23:37:14 +0700 Subject: [PATCH 13/16] fix: update visibility logic for transaction actions based on approval status --- .../history-transaction/hooks/TransactionContext.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx index 00bbdf0..b9eeb9e 100644 --- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx +++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx @@ -205,7 +205,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { enableHiding: false, cell: (data) => { const row = data.row.original; - const isVisible = row.status === 'F' ? true : false || row.status === 'P' ? true : false; + const isVisible = (row.status === 'F' ? true : false || row.status === 'P' ? true : false) && row.status_approve !== 'W' ? true : false; return (