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

158
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,74 +153,93 @@ const EditDialog = () => {
</Alert>
)}
<form onSubmit={doUpdateCurrency}>
<div className="card-body grid gap-5">
<div className="w-full">
<label className="form-label">
Code
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.code}
onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
/>
</div>
<div className="w-full">
<label className="form-label">
Name
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.name}
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
/>
</div>
<div className="w-full">
<label className="form-label">
Prefix
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.prefix}
onChange={(e) => setFormField((prev) => ({ ...prev, prefix: e.target.value }))}
/>
</div>
<div className="w-full">
<label className="form-label">
Status
<span className="text-red-500">*</span>
</label>
<Select
value={formField.status}
onValueChange={(value) => setFormField((prev) => ({ ...prev, status: value }))}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select" defaultValue={formField.status} />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button variant="default">Save Changes</Button>
{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>
) : (
<form onSubmit={doUpdateCurrency}>
<div className="card-body grid gap-5">
<div className="w-full">
<label className="form-label">
Code
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.code}
onChange={(e) => setFormField((prev) => ({ ...prev, code: e.target.value }))}
/>
</div>
<div className="w-full">
<label className="form-label">
Name
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.name}
onChange={(e) => setFormField((prev) => ({ ...prev, name: e.target.value }))}
/>
</div>
<div className="w-full">
<label className="form-label">
Prefix
<span className="text-red-500">*</span>
</label>
<Input
type="text"
placeholder="Code"
value={formField.prefix}
onChange={(e) =>
setFormField((prev) => ({ ...prev, prefix: e.target.value }))
}
/>
</div>
<div className="w-full">
<label className="form-label">
Status
<span className="text-red-500">*</span>
</label>
<Select
value={formField.status}
onValueChange={(value) =>
setFormField((prev) => ({ ...prev, status: value }))
}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select" defaultValue={formField.status} />
</SelectTrigger>
<SelectContent>
<SelectItem value="Y">Active</SelectItem>
<SelectItem value="N">Inactive</SelectItem>
</SelectContent>
</Select>
</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>
)}
</div>
</DialogBody>
</DialogContent>