update set delay loading skeleton on master data

This commit is contained in:
Wikzyy
2025-04-17 10:42:15 +07:00
parent 528837b422
commit 1ecd62c777
14 changed files with 58 additions and 25 deletions

View File

@ -27,8 +27,8 @@ import {
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
interface SucosProps { interface SucosProps {
sucos_id: number; id: number;
sucos_name: string; name: string;
} }
const API_URL = apiConfig.service_master_data; const API_URL = apiConfig.service_master_data;
@ -181,7 +181,7 @@ const AddDialog = () => {
className="input col-span-5 text-left" className="input col-span-5 text-left"
style={{ color: 'inherit' }} style={{ color: 'inherit' }}
> >
{sucos.find((suco) => suco.sucos_id === formField.sucosId)?.sucos_name || {sucos.find((suco) => suco.id === formField.sucosId)?.name ||
'Select Sucos'} 'Select Sucos'}
</button> </button>
</PopoverTrigger> </PopoverTrigger>
@ -196,17 +196,17 @@ const AddDialog = () => {
<CommandGroup> <CommandGroup>
{sucos.map((suco) => ( {sucos.map((suco) => (
<CommandItem <CommandItem
key={suco.sucos_id} key={suco.id}
value={suco.sucos_name} value={suco.name}
onSelect={() => { onSelect={() => {
setFormField({ setFormField({
...formField, ...formField,
sucosId: suco.sucos_id sucosId: suco.id
}); });
setOpen(false); setOpen(false);
}} }}
> >
{suco.sucos_name} {suco.name}
</CommandItem> </CommandItem>
))} ))}
</CommandGroup> </CommandGroup>

View File

@ -4,7 +4,14 @@ import { Alert, useDataGrid } from '@/components';
import { useCallApi } from '@/hooks'; import { useCallApi } from '@/hooks';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { toast } from 'sonner'; 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 { Button } from '@/components/ui/button';
import { doSaveLogActivity } from '@/actions/GlobalActions'; import { doSaveLogActivity } from '@/actions/GlobalActions';
@ -52,6 +59,8 @@ const DeleteDialog = () => {
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}> <Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden"> <DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0 block"> <DialogHeader className="p-0 border-0 block">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<Alert variant="warning"> <Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3> <h3 className="text-lg">Are you sure?</h3>
<span className="text-sm">You will delete this data!</span> <span className="text-sm">You will delete this data!</span>

View File

@ -98,7 +98,7 @@ const EditDialog = () => {
}); });
setSucos(response?.data.list); setSucos(response?.data.list);
console.log(sucos); // console.log(sucos);
} catch (error) { } catch (error) {
console.error('Error fetching Sucos', error); console.error('Error fetching Sucos', error);
setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' }); setAlert({ show: true, message: 'Failed to get Sucos. Please try again.' });
@ -107,7 +107,10 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
@ -221,8 +224,8 @@ const EditDialog = () => {
className="input col-span-5 text-left" className="input col-span-5 text-left"
style={{ color: 'inherit' }} style={{ color: 'inherit' }}
> >
{sucos.find((suco) => suco.id === formField.sucosId) {sucos.find((suco) => suco.id === formField.sucosId)?.name ||
?.name || 'Select Sucos'} 'Select Sucos'}
</button> </button>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-[400px] p-0"> <PopoverContent className="w-[400px] p-0">

View File

@ -120,7 +120,10 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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); console.log('Transaction Type: ', response?.data);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({

View File

@ -101,7 +101,10 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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); // console.log('Transaction Type: ', response?.data);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({

View File

@ -77,7 +77,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({

View File

@ -114,7 +114,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({

View File

@ -125,7 +125,11 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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); // console.log(response);
if (response?.status) { if (response?.status) {

View File

@ -74,7 +74,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({

View File

@ -148,7 +148,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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); // console.log(response);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({

View File

@ -95,8 +95,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); setIsLoading(true);
// console.log('Ini datanya:', id); const minDelay = new Promise((resolve) => setTimeout(resolve, 300));
const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id }); const fetchData = GetData(`${API_URL}/reward/getdata/${id}`, { id });
const [response] = await Promise.all([fetchData, minDelay]);
// console.log('API Response:', response); // console.log('API Response:', response);
if (response?.status) { if (response?.status) {

View File

@ -113,7 +113,9 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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); // console.log('Data Sucos:', response?.data);
if (response?.status) { if (response?.status) {

View File

@ -163,7 +163,6 @@ const ManageSucosContextProvider = ({ children }: { children: React.ReactNode })
order_direction: sorting[0].desc == false ? 'ASC' : 'DESC', order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
filter: JSON.stringify(filter) filter: JSON.stringify(filter)
}); });
console.log('Sucos List Response:', response?.data);
setSucos(response?.data.list || []); setSucos(response?.data.list || []);
return { data: response?.data.list, totalCount: response?.data.total_count }; return { data: response?.data.list, totalCount: response?.data.total_count };
} catch (error) { } catch (error) {

View File

@ -117,11 +117,12 @@ const EditDialog = () => {
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true); 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 id
}); });
const [response] = await Promise.all([fetchData, minDelay]);
console.log(response);
if (response?.status) { if (response?.status) {
setFormField((prev) => ({ setFormField((prev) => ({
...prev, ...prev,