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 17:11:32 +07:00
parent a74a2b42bb
commit 730bbb9519
4 changed files with 383 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/pages/master/postoadms/blocks/EditDialog.tsx
View File

@ -41,6 +41,7 @@ const EditDialog = () => {
const { PutData, GetData } = useCallApi();
const parsedUser = getAuth()?.user;
const [open, setOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [municipios, setMunicipios] = useState<MunicipioProps[]>([]);
const [alert, setAlert] = useState({
@ -112,6 +113,7 @@ const EditDialog = () => {
}, []);
const doFetchData = useCallback(async (id: string) => {
setIsLoading(true);
const response = await GetData(`${API_URL}/postoadms/getdata/${id}`, { id });
if (response?.status) {
@ -126,6 +128,7 @@ const EditDialog = () => {
name: ''
}));
}
setIsLoading(false);
}, []);
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
@ -184,71 +187,86 @@ const EditDialog = () => {
</Alert>
)}
<form onSubmit={handleUpdate}>
<div className="card-body grid gap-5">
<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">
Postu Administrativo Name<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
{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">
<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">
Municipio Name<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left">
{municipios.find((municipio) => municipio.id === formField.municipio_id)
?.name || 'Select Municipio'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Municipio..." />
<CommandList>
<CommandEmpty>No Municipio found.</CommandEmpty>
<CommandGroup>
{municipios.map((municipio) => (
<CommandItem
key={municipio.id}
value={municipio.name}
onSelect={() => {
setFormField({
...formField,
municipio_id: municipio.id
});
setOpen(false);
}}
>
{municipio.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button className="btn btn-primary">Save Changes</Button>
</div>
<p className="mt-4 text-gray-500">Loading Postu Administrativo Details...</p>
</div>
</form>
) : (
<form onSubmit={handleUpdate}>
<div className="card-body grid gap-5">
<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">
Postu Administrativo Name<span className="text-red-500">*</span>
</label>
<Input
className="input"
type="text"
value={formField.name}
onChange={(e) => setFormField({ ...formField, name: e.target.value })}
/>
</div>
</div>
<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">
Municipio Name<span className="text-red-500">*</span>
</label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<button type="button" className="input col-span-5 text-left">
{municipios.find((municipio) => municipio.id === formField.municipio_id)
?.name || 'Select Municipio'}
</button>
</PopoverTrigger>
<PopoverContent className="w-[400px] p-0">
<Command>
<CommandInput placeholder="Search Municipio..." />
<CommandList>
<CommandEmpty>No Municipio found.</CommandEmpty>
<CommandGroup>
{municipios.map((municipio) => (
<CommandItem
key={municipio.id}
value={municipio.name}
onSelect={() => {
setFormField({
...formField,
municipio_id: municipio.id
});
setOpen(false);
}}
>
{municipio.name}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
</div>
<div className="flex justify-end gap-5">
<Button type="button" variant="outline" onClick={resetForm}>
Reset
</Button>
<Button className="btn btn-primary">Save Changes</Button>
</div>
</div>
</form>
)}
</div>
</DialogBody>
</DialogContent>