add skeleton loading on dialog edit
This commit is contained in:
Wikzyy
@ -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
|
||||
});
|
||||
|
||||
@ -83,24 +84,24 @@ const EditDialog = () => {
|
||||
resetForm();
|
||||
handleEditDialog(false, null);
|
||||
toast.success('Success Update Conversion');
|
||||
const createActivity = {
|
||||
module: 'Manage Conversion',
|
||||
description: `Update Conversion => ${selectedConversion}`,
|
||||
action: 'U'
|
||||
};
|
||||
|
||||
doSaveLogActivity(createActivity);
|
||||
const createActivity = {
|
||||
module: 'Manage Conversion',
|
||||
description: `Update Conversion => ${selectedConversion}`,
|
||||
action: 'U'
|
||||
};
|
||||
|
||||
doSaveLogActivity(createActivity);
|
||||
reload();
|
||||
} else {
|
||||
toast.error('Error Create Conversion');
|
||||
setAlert({ show: true, message: 'Failed to Update Conversion. Please try again.' });
|
||||
}
|
||||
}
|
||||
},
|
||||
[formField]
|
||||
);
|
||||
|
||||
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,30 +118,29 @@ const EditDialog = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const doGetConversionById = useCallback(async (id: string) => {
|
||||
const response = await GetData(`${API_URL}/dashboard/conversion/${id}`, { id });
|
||||
console.log('Transaction Type: ', response?.data);
|
||||
if (response?.status) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
status: response.data.status,
|
||||
id_currency_origin: response.data.id_currency_origin,
|
||||
id_currency_destination: response.data.id_currency_destination,
|
||||
buy: response.data.buy,
|
||||
sell: response.data.sell,
|
||||
}));
|
||||
}
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedConversion) {
|
||||
doGetConversionById(selectedConversion);
|
||||
}
|
||||
}, [selectedConversion]);
|
||||
|
||||
|
||||
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) {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
status: response.data.status,
|
||||
id_currency_origin: response.data.id_currency_origin,
|
||||
id_currency_destination: response.data.id_currency_destination,
|
||||
buy: response.data.buy,
|
||||
sell: response.data.sell
|
||||
}));
|
||||
}
|
||||
// console.log('form fieldd Transaction Type: ', formField);
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedConversion) {
|
||||
doFetchData(selectedConversion);
|
||||
}
|
||||
}, [selectedConversion]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showEditDialog) {
|
||||
@ -156,8 +156,7 @@ const EditDialog = () => {
|
||||
if (showEditDialog) {
|
||||
doGetCurrency([{ id: 'name', desc: false }]);
|
||||
}
|
||||
}, [showEditDialog]);
|
||||
|
||||
}, [showEditDialog]);
|
||||
|
||||
useEffect(() => {
|
||||
if (showEditDialog === false) {
|
||||
@ -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,96 +179,110 @@ const EditDialog = () => {
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<form onSubmit={doUpdateConversion}>
|
||||
<div className="card-body grid gap-5">
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_origin}
|
||||
onValueChange={(id_currency_origin) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_origin }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{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>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_destination}
|
||||
onValueChange={(id_currency_destination) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_destination }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Buy<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.buy}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
buy: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Buy"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Sell
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.sell}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
sell: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Sell"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<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">
|
||||
<label className="form-label">
|
||||
Currency Origin <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_origin}
|
||||
onValueChange={(id_currency_origin) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_origin }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Currency Destination <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formField.id_currency_destination}
|
||||
onValueChange={(id_currency_destination) =>
|
||||
setFormField((prev) => ({ ...prev, id_currency_destination }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select Currency" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{currencies.map((currency, idx) => (
|
||||
<SelectItem value={currency.ID} key={currency.ID}>
|
||||
{currency.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Buy<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.buy}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
buy: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Buy"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Sell
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
<NumericFormat
|
||||
className="input"
|
||||
value={formField.sell}
|
||||
thousandSeparator="."
|
||||
decimalSeparator=","
|
||||
allowNegative={false}
|
||||
onValueChange={(values) => {
|
||||
setFormField((prev) => ({
|
||||
...prev,
|
||||
sell: values.floatValue || 0
|
||||
}));
|
||||
}}
|
||||
placeholder="Enter Sell"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label className="form-label">
|
||||
Status
|
||||
<span className="text-red-500">*</span>
|
||||
</label>
|
||||
</label>
|
||||
|
||||
<div className="grow">
|
||||
<Select
|
||||
@ -287,16 +300,16 @@ const EditDialog = () => {
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-5">
|
||||
<Button type="button" variant="outline" onClick={resetForm}>
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="default">Save Changes</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</DialogBody>
|
||||
</DialogContent>
|
||||
|
||||
Reference in New Issue
Block a user