From 1ecd62c7774ddf2c3f4bca3f49f7c1441bde376e Mon Sep 17 00:00:00 2001 From: Wikzyy Date: Thu, 17 Apr 2025 10:42:15 +0700 Subject: [PATCH] update set delay loading skeleton on master data --- src/pages/master/aldeias/blocks/AddDialog.tsx | 14 +++++++------- src/pages/master/aldeias/blocks/DeleteDialog.tsx | 11 ++++++++++- src/pages/master/aldeias/blocks/EditDialog.tsx | 11 +++++++---- src/pages/master/conversion/blocks/EditDialog.tsx | 5 ++++- src/pages/master/currency/blocks/EditDialog.tsx | 5 ++++- src/pages/master/municipios/blocks/EditDialog.tsx | 4 +++- src/pages/master/postoadms/blocks/EditDialog.tsx | 4 +++- src/pages/master/products/blocks/EditDialog.tsx | 6 +++++- src/pages/master/profession/blocks/EditDialog.tsx | 4 +++- src/pages/master/provider/blocks/EditDialog.tsx | 4 +++- src/pages/master/reward/blocks/EditDialog.tsx | 5 +++-- src/pages/master/sucos/blocks/EditDialog.tsx | 4 +++- .../master/sucos/hooks/ManageSucosContext.tsx | 1 - src/pages/master/wallet/blocks/EditDialog.tsx | 5 +++-- 14 files changed, 58 insertions(+), 25 deletions(-) diff --git a/src/pages/master/aldeias/blocks/AddDialog.tsx b/src/pages/master/aldeias/blocks/AddDialog.tsx index a1c566c..7d33c9b 100644 --- a/src/pages/master/aldeias/blocks/AddDialog.tsx +++ b/src/pages/master/aldeias/blocks/AddDialog.tsx @@ -27,8 +27,8 @@ import { import { doSaveLogActivity } from '@/actions/GlobalActions'; interface SucosProps { - sucos_id: number; - sucos_name: string; + id: number; + name: string; } const API_URL = apiConfig.service_master_data; @@ -181,7 +181,7 @@ const AddDialog = () => { className="input col-span-5 text-left" style={{ color: 'inherit' }} > - {sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name || + {sucos.find((suco) => suco.id === formField.sucosId)?.name || 'Select Sucos'} @@ -196,17 +196,17 @@ const AddDialog = () => { {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/aldeias/blocks/DeleteDialog.tsx b/src/pages/master/aldeias/blocks/DeleteDialog.tsx index 44f0a81..e98df8c 100644 --- a/src/pages/master/aldeias/blocks/DeleteDialog.tsx +++ b/src/pages/master/aldeias/blocks/DeleteDialog.tsx @@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components'; import { useCallApi } from '@/hooks'; import { useCallback, useState } from 'react'; import { toast } from 'sonner'; -import { Dialog, DialogContent, DialogFooter, DialogHeader } from '@/components/ui/dialog'; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle +} from '@/components/ui/dialog'; import { Button } from '@/components/ui/button'; import { doSaveLogActivity } from '@/actions/GlobalActions'; @@ -52,6 +59,8 @@ const DeleteDialog = () => { handleDeleteDialog(open, null)}> + +

Are you sure?

You will delete this data! diff --git a/src/pages/master/aldeias/blocks/EditDialog.tsx b/src/pages/master/aldeias/blocks/EditDialog.tsx index 76c7c10..a7bcb66 100644 --- a/src/pages/master/aldeias/blocks/EditDialog.tsx +++ b/src/pages/master/aldeias/blocks/EditDialog.tsx @@ -98,7 +98,7 @@ const EditDialog = () => { }); setSucos(response?.data.list); - console.log(sucos); + // console.log(sucos); } catch (error) { console.error('Error fetching Sucos', error); setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' }); @@ -107,7 +107,10 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL}/aldeias/getdata/${id}`, { id }); + + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL}/aldeias/getdata/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); if (response?.status) { setFormField((prev) => ({ @@ -221,8 +224,8 @@ const EditDialog = () => { className="input col-span-5 text-left" style={{ color: 'inherit' }} > - {sucos.find((suco) => suco.id === formField.sucosId) - ?.name || 'Select Sucos'} + {sucos.find((suco) => suco.id === formField.sucosId)?.name || + 'Select Sucos'} diff --git a/src/pages/master/conversion/blocks/EditDialog.tsx b/src/pages/master/conversion/blocks/EditDialog.tsx index 48daf9c..0b98ae6 100644 --- a/src/pages/master/conversion/blocks/EditDialog.tsx +++ b/src/pages/master/conversion/blocks/EditDialog.tsx @@ -120,7 +120,10 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id }); + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL}/dashboard/conversion/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); + console.log('Transaction Type: ', response?.data); if (response?.status) { setFormField((prev) => ({ diff --git a/src/pages/master/currency/blocks/EditDialog.tsx b/src/pages/master/currency/blocks/EditDialog.tsx index 96fb0c4..e0dffd8 100644 --- a/src/pages/master/currency/blocks/EditDialog.tsx +++ b/src/pages/master/currency/blocks/EditDialog.tsx @@ -101,7 +101,10 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id }); + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL}/dashboard/currency/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); + // console.log('Transaction Type: ', response?.data); if (response?.status) { setFormField((prev) => ({ diff --git a/src/pages/master/municipios/blocks/EditDialog.tsx b/src/pages/master/municipios/blocks/EditDialog.tsx index ceeac80..ef7b3d3 100644 --- a/src/pages/master/municipios/blocks/EditDialog.tsx +++ b/src/pages/master/municipios/blocks/EditDialog.tsx @@ -77,7 +77,9 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL}/municipios/getdata/${id}`, { id }); + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL}/municipios/getdata/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); if (response?.status) { setFormField((prev) => ({ diff --git a/src/pages/master/postoadms/blocks/EditDialog.tsx b/src/pages/master/postoadms/blocks/EditDialog.tsx index c5f165f..d33d318 100644 --- a/src/pages/master/postoadms/blocks/EditDialog.tsx +++ b/src/pages/master/postoadms/blocks/EditDialog.tsx @@ -114,7 +114,9 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id }); + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); if (response?.status) { setFormField((prev) => ({ diff --git a/src/pages/master/products/blocks/EditDialog.tsx b/src/pages/master/products/blocks/EditDialog.tsx index a6395cd..f82dbc0 100644 --- a/src/pages/master/products/blocks/EditDialog.tsx +++ b/src/pages/master/products/blocks/EditDialog.tsx @@ -125,7 +125,11 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL}/product/getdata/${id}`, { id }); + + const minDelay = new Promise((resolve) => setTimeout(resolve, 500)); + const fetchData = GetData(`${API_URL}/product/getdata/${id}`, { id }); + + const [response] = await Promise.all([fetchData, minDelay]); // console.log(response); if (response?.status) { diff --git a/src/pages/master/profession/blocks/EditDialog.tsx b/src/pages/master/profession/blocks/EditDialog.tsx index fc8a83f..ea012e4 100644 --- a/src/pages/master/profession/blocks/EditDialog.tsx +++ b/src/pages/master/profession/blocks/EditDialog.tsx @@ -74,7 +74,9 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id }); + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL}/profession/getdata/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); if (response?.status) { setFormField((prev) => ({ diff --git a/src/pages/master/provider/blocks/EditDialog.tsx b/src/pages/master/provider/blocks/EditDialog.tsx index 5c33f37..958f749 100644 --- a/src/pages/master/provider/blocks/EditDialog.tsx +++ b/src/pages/master/provider/blocks/EditDialog.tsx @@ -148,7 +148,9 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id }); + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL_MASTERDATA}/provider/getdata/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); // console.log(response); if (response?.status) { setFormField((prev) => ({ diff --git a/src/pages/master/reward/blocks/EditDialog.tsx b/src/pages/master/reward/blocks/EditDialog.tsx index d61ec96..1a8fd68 100644 --- a/src/pages/master/reward/blocks/EditDialog.tsx +++ b/src/pages/master/reward/blocks/EditDialog.tsx @@ -95,8 +95,9 @@ 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 }); + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL}/reward/getdata/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); // console.log('API Response:', response); if (response?.status) { diff --git a/src/pages/master/sucos/blocks/EditDialog.tsx b/src/pages/master/sucos/blocks/EditDialog.tsx index fabdbf2..d6d6933 100644 --- a/src/pages/master/sucos/blocks/EditDialog.tsx +++ b/src/pages/master/sucos/blocks/EditDialog.tsx @@ -113,7 +113,9 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id }); + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL}/sucos/getdata/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); // console.log('Data Sucos:', response?.data); if (response?.status) { diff --git a/src/pages/master/sucos/hooks/ManageSucosContext.tsx b/src/pages/master/sucos/hooks/ManageSucosContext.tsx index 2d106a7..605a2a9 100644 --- a/src/pages/master/sucos/hooks/ManageSucosContext.tsx +++ b/src/pages/master/sucos/hooks/ManageSucosContext.tsx @@ -163,7 +163,6 @@ 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); setSucos(response?.data.list || []); return { data: response?.data.list, totalCount: response?.data.total_count }; } catch (error) { diff --git a/src/pages/master/wallet/blocks/EditDialog.tsx b/src/pages/master/wallet/blocks/EditDialog.tsx index de4f5dc..ffcc1e5 100644 --- a/src/pages/master/wallet/blocks/EditDialog.tsx +++ b/src/pages/master/wallet/blocks/EditDialog.tsx @@ -117,11 +117,12 @@ const EditDialog = () => { const doFetchData = useCallback(async (id: string) => { setIsLoading(true); - const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, { + const minDelay = new Promise((resolve) => setTimeout(resolve, 300)); + const fetchData = GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, { id }); + const [response] = await Promise.all([fetchData, minDelay]); - console.log(response); if (response?.status) { setFormField((prev) => ({ ...prev,