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';
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'}
</button>
</PopoverTrigger>
@ -196,17 +196,17 @@ const AddDialog = () => {
<CommandGroup>
{sucos.map((suco) => (
<CommandItem
key={suco.sucos_id}
value={suco.sucos_name}
key={suco.id}
value={suco.name}
onSelect={() => {
setFormField({
...formField,
sucosId: suco.sucos_id
sucosId: suco.id
});
setOpen(false);
}}
>
{suco.sucos_name}
{suco.name}
</CommandItem>
))}
</CommandGroup>

View File

@ -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 = () => {
<Dialog open={showDeleteDialog} onOpenChange={(open) => handleDeleteDialog(open, null)}>
<DialogContent className="container-fixed max-w-md flex flex-col p-5 overflow-hidden [&>button]:hidden">
<DialogHeader className="p-0 border-0 block">
<DialogTitle></DialogTitle>
<DialogDescription></DialogDescription>
<Alert variant="warning">
<h3 className="text-lg">Are you sure?</h3>
<span className="text-sm">You will delete this data!</span>

View File

@ -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'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">

View File

@ -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) => ({

View File

@ -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) => ({

View File

@ -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) => ({

View File

@ -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) => ({

View File

@ -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) {

View File

@ -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) => ({

View File

@ -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) => ({

View File

@ -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) {

View File

@ -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) {

View File

@ -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) {

View File

@ -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,