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 [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
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<HTMLFormElement>) => {
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
});
@ -100,7 +101,7 @@ const EditDialog = () => {
);
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,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 });
console.log('Transaction Type: ', response?.data);
if (response?.status) {
@ -127,21 +129,19 @@ const EditDialog = () => {
id_currency_origin: response.data.id_currency_origin,
id_currency_destination: response.data.id_currency_destination,
buy: response.data.buy,
sell: response.data.sell,
sell: response.data.sell
}));
}
// console.log('form fieldd Transaction Type: ', formField);
setIsLoading(false);
}, []);
useEffect(() => {
if (selectedConversion) {
doGetConversionById(selectedConversion);
doFetchData(selectedConversion);
}
}, [selectedConversion]);
useEffect(() => {
if (showEditDialog) {
setFormField({
@ -158,7 +158,6 @@ const EditDialog = () => {
}
}, [showEditDialog]);
useEffect(() => {
if (showEditDialog === false) {
resetForm();
@ -166,7 +165,7 @@ const EditDialog = () => {
}, [showEditDialog]);
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">
<DialogHeader>
<DialogTitle>Conversion - Update</DialogTitle>
@ -180,6 +179,20 @@ const EditDialog = () => {
</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}>
<div className="card-body grid gap-5">
<div className="w-full">
@ -287,7 +300,6 @@ const EditDialog = () => {
</SelectContent>
</Select>
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
@ -297,6 +309,7 @@ const EditDialog = () => {
</div>
</div>
</form>
)}
</div>
</DialogBody>
</DialogContent>

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

@ -49,6 +49,7 @@ const EditDialog = () => {
const parsedUser = getAuth()?.user;
const [currencies, setCurrencies] = useState<CurrencyProps[]>([]);
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,6 +153,20 @@ const EditDialog = () => {
</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}>
<div className="card-body grid gap-5">
<div className="w-full">
@ -186,7 +203,9 @@ const EditDialog = () => {
type="text"
placeholder="Code"
value={formField.prefix}
onChange={(e) => setFormField((prev) => ({ ...prev, prefix: e.target.value }))}
onChange={(e) =>
setFormField((prev) => ({ ...prev, prefix: e.target.value }))
}
/>
</div>
@ -198,7 +217,9 @@ const EditDialog = () => {
<Select
value={formField.status}
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, status: value }))
}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select" defaultValue={formField.status} />
@ -218,6 +239,7 @@ const EditDialog = () => {
</div>
</div>
</form>
)}
</div>
</DialogBody>
</DialogContent>

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

@ -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<HTMLFormElement>) => {
@ -214,6 +217,20 @@ const EditDialog = () => {
</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}>
<div className="card-body grid gap-5">
<div className="w-full">
@ -267,7 +284,9 @@ const EditDialog = () => {
className="input"
type="text"
value={formField.description}
onChange={(e) => setFormField({ ...formField, description: e.target.value })}
onChange={(e) =>
setFormField({ ...formField, description: e.target.value })
}
/>
</div>
</div>
@ -433,6 +452,7 @@ const EditDialog = () => {
</div>
</div>
</form>
)}
</div>
</DialogBody>
</DialogContent>

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

@ -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<HTMLFormElement>) => {
@ -134,6 +137,20 @@ const EditDialog = () => {
</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}>
<div className="card-body grid gap-5">
<div className="w-full">
@ -155,6 +172,7 @@ const EditDialog = () => {
</div>
</div>
</form>
)}
</div>
</DialogBody>
</DialogContent>

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

@ -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<HTMLFormElement>) => {
@ -159,6 +162,20 @@ const EditDialog = () => {
<div className="flex flex-col">
{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}>
<div className="card-body grid gap-5">
<div className="grid grid-cols-8 gap-2 w-full items-center">
@ -181,7 +198,9 @@ const EditDialog = () => {
<div className="col-span-6">
<Select
value={formField.type}
onValueChange={(value) => setFormField((prev) => ({ ...prev, type: value }))}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, type: value }))
}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select Type" />
@ -248,6 +267,7 @@ const EditDialog = () => {
</div>
</div>
</form>
)}
</div>
</DialogBody>
</DialogContent>

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

@ -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,6 +216,20 @@ const EditDialog = () => {
</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}>
<div className="card-body grid gap-5">
<div className="w-full">
@ -237,7 +254,9 @@ const EditDialog = () => {
<Input
type="text"
value={formField.description}
onChange={(e) => setFormField({ ...formField, description: e.target.value })}
onChange={(e) =>
setFormField({ ...formField, description: e.target.value })
}
placeholder="Description"
/>
</div>
@ -263,7 +282,9 @@ const EditDialog = () => {
<div className="w-full">
<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">
<Input
type="text"
@ -298,6 +319,7 @@ const EditDialog = () => {
</div>
</div>
</form>
)}
</div>
</DialogBody>
</DialogContent>