TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add skeleton loading on dialog edit

Browse Source
This commit is contained in:
Wikzyy
2025-04-16 22:53:06 +07:00
parent 40ebdcc37f
commit 1d11c94175
6 changed files with 716 additions and 601 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/master/conversion/blocks/EditDialog.tsx
View File

@ -49,6 +49,7 @@ const EditDialog = () => {
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]); const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -74,8 +75,8 @@ const EditDialog = () => {
const doUpdateConversion = useCallback( const doUpdateConversion = useCallback(
async (e: React.FormEvent<HTMLFormElement>) => { async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if(!showEditDialog) return; if (!showEditDialog) return;
const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`,{ const response = await PutData(`${API_URL}/dashboard/conversion/${selectedConversion}`, {
...formField ...formField
}); });
@ -100,7 +101,7 @@ const EditDialog = () => {
); );
const doGetCurrency = async (sorting: any) => { const doGetCurrency = async (sorting: any) => {
if (!showEditDialog)return; if (!showEditDialog) return;
try { try {
sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting; sorting = sorting.length == 0 ? [{ id: 'name', desc: false }] : sorting;
const response = await GetData(`${API_URL}/dashboard/currency/`, { const response = await GetData(`${API_URL}/dashboard/currency/`, {
@ -117,7 +118,8 @@ const EditDialog = () => {
} }
}; };
const doGetConversionById = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id }); const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
console.log('Transaction Type: ', response?.data); console.log('Transaction Type: ', response?.data);
if (response?.status) { if (response?.status) {
@ -127,21 +129,19 @@ const EditDialog = () => {
id_currency_origin: response.data.id_currency_origin, id_currency_origin: response.data.id_currency_origin,
id_currency_destination: response.data.id_currency_destination, id_currency_destination: response.data.id_currency_destination,
buy: response.data.buy, buy: response.data.buy,
sell: response.data.sell, sell: response.data.sell
})); }));
} }
// console.log('form fieldd Transaction Type: ', formField); // console.log('form fieldd Transaction Type: ', formField);
setIsLoading(false);
}, []); }, []);
useEffect(() => { useEffect(() => {
if (selectedConversion) { if (selectedConversion) {
doGetConversionById(selectedConversion); doFetchData(selectedConversion);
} }
}, [selectedConversion]); }, [selectedConversion]);
useEffect(() => { useEffect(() => {
if (showEditDialog) { if (showEditDialog) {
setFormField({ setFormField({
@ -158,7 +158,6 @@ const EditDialog = () => {
} }
}, [showEditDialog]); }, [showEditDialog]);
useEffect(() => { useEffect(() => {
if (showEditDialog === false) { if (showEditDialog === false) {
resetForm(); resetForm();
@ -166,7 +165,7 @@ const EditDialog = () => {
}, [showEditDialog]); }, [showEditDialog]);
return ( return (
<Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open,null)}> <Dialog open={showEditDialog} onOpenChange={(open) => handleEditDialog(open, null)}>
<DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden"> <DialogContent className="container-fixed max-w-[768px] flex flex-col p-5 overflow-hidden">
<DialogHeader> <DialogHeader>
<DialogTitle>Conversion - Update</DialogTitle> <DialogTitle>Conversion - Update</DialogTitle>
@ -180,6 +179,20 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
{isLoading ? (
<div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
</div>
<p className="mt-4 text-gray-500">Loading Conversion Details...</p>
</div>
) : (
<form onSubmit={doUpdateConversion}> <form onSubmit={doUpdateConversion}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
@ -287,7 +300,6 @@ const EditDialog = () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
</div> </div>
<div className="flex justify-end gap-5"> <div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}> <Button type="button" variant="outline" onClick={resetForm}>
@ -297,6 +309,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</form> </form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

30
src/pages/master/currency/blocks/EditDialog.tsx
View File

@ -49,6 +49,7 @@ const EditDialog = () => {
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]); const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -98,7 +99,8 @@ const EditDialog = () => {
[formField] [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 }); const response = await GetData(`${API_URL}/dashboard/currency/${id}`, { id });
// console.log('Transaction Type: ', response?.data); // console.log('Transaction Type: ', response?.data);
if (response?.status) { if (response?.status) {
@ -110,12 +112,13 @@ const EditDialog = () => {
prefix: response.data.prefix prefix: response.data.prefix
})); }));
} }
setIsLoading(false);
// console.log('form fieldd Transaction Type: ', formField); // console.log('form fieldd Transaction Type: ', formField);
}, []); }, []);
useEffect(() => { useEffect(() => {
if (selectedCurrency) { if (selectedCurrency) {
doGetCurrencyById(selectedCurrency); doFetchData(selectedCurrency);
} }
}, [selectedCurrency]); }, [selectedCurrency]);
@ -150,6 +153,20 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
{isLoading ? (
<div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
</div>
<p className="mt-4 text-gray-500">Loading Currency Details...</p>
</div>
) : (
<form onSubmit={doUpdateCurrency}> <form onSubmit={doUpdateCurrency}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
@ -186,7 +203,9 @@ const EditDialog = () => {
type="text" type="text"
placeholder="Code" placeholder="Code"
value={formField.prefix} value={formField.prefix}
onChange={(e) => setFormField((prev) => ({ ...prev, prefix: e.target.value }))} onChange={(e) =>
setFormField((prev) => ({ ...prev, prefix: e.target.value }))
}
/> />
</div> </div>
@ -198,7 +217,9 @@ const EditDialog = () => {
<Select <Select
value={formField.status} value={formField.status}
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))} onValueChange={(value) =>
setFormField((prev) => ({ ...prev, status: value }))
}
> >
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
<SelectValue placeholder="Select" defaultValue={formField.status} /> <SelectValue placeholder="Select" defaultValue={formField.status} />
@ -218,6 +239,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</form> </form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

22
src/pages/master/products/blocks/EditDialog.tsx
View File

@ -36,6 +36,7 @@ const EditDialog = () => {
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { PutData, GetData } = useCallApi(); const { PutData, GetData } = useCallApi();
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [isLoading, setIsLoading] = useState(false);
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
@ -123,6 +124,7 @@ const EditDialog = () => {
}, []); }, []);
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/product/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/product/getdata/${id}`, { id });
// console.log(response); // console.log(response);
@ -144,6 +146,7 @@ const EditDialog = () => {
} else { } else {
setFormField(initialState); setFormField(initialState);
} }
setIsLoading(false);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -214,6 +217,20 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
{isLoading ? (
<div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
</div>
<p className="mt-4 text-gray-500">Loading Products Details...</p>
</div>
) : (
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
@ -267,7 +284,9 @@ const EditDialog = () => {
className="input" className="input"
type="text" type="text"
value={formField.description} value={formField.description}
onChange={(e) => setFormField({ ...formField, description: e.target.value })} onChange={(e) =>
setFormField({ ...formField, description: e.target.value })
}
/> />
</div> </div>
</div> </div>
@ -433,6 +452,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</form> </form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

18
src/pages/master/profession/blocks/EditDialog.tsx
View File

@ -23,6 +23,7 @@ const EditDialog = () => {
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { PutData, GetData } = useCallApi(); const { PutData, GetData } = useCallApi();
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [isLoading, setIsLoading] = useState(false);
const created_time = new Date(); const created_time = new Date();
const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' '); const formattedTime = created_time.toISOString().slice(0, 19).replace('T', ' ');
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
@ -72,6 +73,7 @@ const EditDialog = () => {
); );
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/profession/getdata/${id}`, { id });
if (response?.status) { if (response?.status) {
@ -82,6 +84,7 @@ const EditDialog = () => {
} else { } else {
setFormField(initialState); setFormField(initialState);
} }
setIsLoading(false);
}, []); }, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -134,6 +137,20 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
{isLoading ? (
<div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
</div>
<p className="mt-4 text-gray-500">Loading Profession Details...</p>
</div>
) : (
<form onSubmit={handleUpdate}> <form onSubmit={handleUpdate}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
@ -155,6 +172,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</form> </form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

22
src/pages/master/reward/blocks/EditDialog.tsx
View File

@ -33,6 +33,7 @@ const EditDialog = () => {
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { PutData, GetData } = useCallApi(); const { PutData, GetData } = useCallApi();
const parsedUser = getAuth()?.user; const parsedUser = getAuth()?.user;
const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -93,6 +94,7 @@ const EditDialog = () => {
); );
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
// console.log('Ini datanya:', id); // console.log('Ini datanya:', id);
const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id }); const response = await GetData(`${API_URL}/reward/getdata/${id}`, { id });
// console.log('API Response:', response); // console.log('API Response:', response);
@ -106,6 +108,7 @@ const EditDialog = () => {
status: response.data.status status: response.data.status
})); }));
} }
setIsLoading(false);
}, []); }, []);
// const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => { // const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -159,6 +162,20 @@ const EditDialog = () => {
<div className="flex flex-col"> <div className="flex flex-col">
{alert.show && <Alert variant="danger">{alert.message}</Alert>} {alert.show && <Alert variant="danger">{alert.message}</Alert>}
{isLoading ? (
<div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
</div>
<p className="mt-4 text-gray-500">Loading Reward Details...</p>
</div>
) : (
<form onSubmit={doUpdateReward}> <form onSubmit={doUpdateReward}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="grid grid-cols-8 gap-2 w-full items-center"> <div className="grid grid-cols-8 gap-2 w-full items-center">
@ -181,7 +198,9 @@ const EditDialog = () => {
<div className="col-span-6"> <div className="col-span-6">
<Select <Select
value={formField.type} value={formField.type}
onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))} onValueChange={(value) =>
setFormField((prev) => ({ ...prev, type: value }))
}
> >
<SelectTrigger className="w-full"> <SelectTrigger className="w-full">
<SelectValue placeholder="Select Type" /> <SelectValue placeholder="Select Type" />
@ -248,6 +267,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</form> </form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>

26
src/pages/master/wallet/blocks/EditDialog.tsx
View File

@ -45,6 +45,7 @@ const EditDialog = () => {
const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext(); const { showEditDialog, handleEditDialog, selectedWallet } = useManageWalletContext();
const { reload } = useDataGrid(); const { reload } = useDataGrid();
const { GetData, PutData } = useCallApi(); const { GetData, PutData } = useCallApi();
const [isLoading, setIsLoading] = useState(false);
const [alert, setAlert] = useState({ const [alert, setAlert] = useState({
show: false, show: false,
message: '' message: ''
@ -115,6 +116,7 @@ const EditDialog = () => {
}; };
const doFetchData = useCallback(async (id: string) => { const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, { const response = await GetData(`${API_URL_MASTER_DATA}/wallet/detail/${id}`, {
id id
}); });
@ -132,6 +134,7 @@ const EditDialog = () => {
: [] : []
})); }));
} }
setIsLoading(false);
}, []); }, []);
const getCurrencyLists = async (sorting: any) => { const getCurrencyLists = async (sorting: any) => {
@ -213,6 +216,20 @@ const EditDialog = () => {
</Alert> </Alert>
)} )}
{isLoading ? (
<div className="flex flex-col items-center justify-center p-8">
<div className="animate-pulse flex space-x-4 w-full">
<div className="flex-1 space-y-4 py-1">
<div className="h-4 bg-gray-200 rounded w-3/4"></div>
<div className="space-y-2">
<div className="h-4 bg-gray-200 rounded"></div>
<div className="h-4 bg-gray-200 rounded w-5/6"></div>
</div>
</div>
</div>
<p className="mt-4 text-gray-500">Loading Wallet Details...</p>
</div>
) : (
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="card-body grid gap-5"> <div className="card-body grid gap-5">
<div className="w-full"> <div className="w-full">
@ -237,7 +254,9 @@ const EditDialog = () => {
<Input <Input
type="text" type="text"
value={formField.description} value={formField.description}
onChange={(e) => setFormField({ ...formField, description: e.target.value })} onChange={(e) =>
setFormField({ ...formField, description: e.target.value })
}
placeholder="Description" placeholder="Description"
/> />
</div> </div>
@ -263,7 +282,9 @@ const EditDialog = () => {
<div className="w-full"> <div className="w-full">
<div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5"> <div className="flex items-baseline flex-wrap lg:flex-nowrap gap-2.5">
<label className="form-label flex items-center gap-1 max-w-56">Currency</label> <label className="form-label flex items-center gap-1 max-w-56">
Currency
</label>
<div className="relative w-full"> <div className="relative w-full">
<Input <Input
type="text" type="text"
@ -298,6 +319,7 @@ const EditDialog = () => {
</div> </div>
</div> </div>
</form> </form>
)}
</div> </div>
</DialogBody> </DialogBody>
</DialogContent> </DialogContent>