update search filter
- add debounce - set default value page to 1 each time search
This commit is contained in:
Wikzyy
@ -39,6 +39,7 @@ const EditDialog = () => {
|
||||
const { PutData, GetData } = useCallApi();
|
||||
const parsedUser = getAuth()?.user;
|
||||
const [open, setOpen] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [postoadms, setPostoadms] = useState<PostoAdmsProps[]>([]);
|
||||
|
||||
const [alert, setAlert] = useState({
|
||||
@ -111,6 +112,7 @@ const EditDialog = () => {
|
||||
}, []);
|
||||
|
||||
const doFetchData = useCallback(async (id: string) => {
|
||||
setIsLoading(true);
|
||||
const response = await GetData(`${API_URL}/sucos/getdata/${id}`, { id });
|
||||
// console.log('Data Sucos:', response?.data);
|
||||
|
||||
@ -126,6 +128,7 @@ const EditDialog = () => {
|
||||
name: ''
|
||||
}));
|
||||
}
|
||||
setIsLoading(false);
|
||||
}, []);
|
||||
|
||||
const handleUpdate = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
@ -182,72 +185,87 @@ 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">
|
||||
Sucos 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">
|
||||
Postu Administrativo 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">
|
||||
{postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
|
||||
?.PostoAdms_name || 'Select Postu Administrativo'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Postu Administrativo..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{postoadms.map((posto) => (
|
||||
<CommandItem
|
||||
key={posto.PostoAdms_id}
|
||||
value={posto.PostoAdms_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
postoId: posto.PostoAdms_id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{posto.PostoAdms_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 Sucos 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">
|
||||
Sucos 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">
|
||||
Postu Administrativo 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">
|
||||
{postoadms.find((posto) => posto.PostoAdms_id === formField.postoId)
|
||||
?.PostoAdms_name || 'Select Postu Administrativo'}
|
||||
</button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[400px] p-0">
|
||||
<Command>
|
||||
<CommandInput placeholder="Search Postu Administrativo..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>No Postu Administrativo Found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{postoadms.map((posto) => (
|
||||
<CommandItem
|
||||
key={posto.PostoAdms_id}
|
||||
value={posto.PostoAdms_name}
|
||||
onSelect={() => {
|
||||
setFormField({
|
||||
...formField,
|
||||
postoId: posto.PostoAdms_id
|
||||
});
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{posto.PostoAdms_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>
|
||||
|
||||
@ -1,12 +1,14 @@
|
||||
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useManageSucosContext } from '../hooks/useManageSucosContext';
|
||||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
const ListToolbar = () => {
|
||||
const { table, reload } = useDataGrid();
|
||||
const { handleAddDialog, handleSearchDialog } = useManageSucosContext();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [searchValue, setSearchValue] = useState<string>(
|
||||
(table.getColumn('sucos_name')?.getFilterValue() as string) ?? ''
|
||||
);
|
||||
|
||||
const handleKeyDown = (event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Enter') {
|
||||
@ -19,6 +21,15 @@ const ListToolbar = () => {
|
||||
table.setPageIndex(0);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
table.getColumn('sucos_name')?.setFilterValue(searchValue);
|
||||
table.setPageIndex(0);
|
||||
}, 200);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchValue, table]);
|
||||
|
||||
return (
|
||||
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
|
||||
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
|
||||
@ -31,32 +42,13 @@ const ListToolbar = () => {
|
||||
placeholder="Search Sucos"
|
||||
value={searchValue}
|
||||
onChange={(event) => setSearchValue(event.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</label>
|
||||
<DefaultTooltip title={'Search'} placement={'top'}>
|
||||
{/* <DefaultTooltip title={'Search'} placement={'top'}>
|
||||
<Button variant="outline" className="h-7.5" onClick={handleSearch}>
|
||||
<KeenIcon icon="magnifier" />
|
||||
</Button>
|
||||
</DefaultTooltip>
|
||||
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-7.5 disabled:bg-gray-400"
|
||||
// disabled={isLoading}
|
||||
// onClick={handleFilterData}
|
||||
>
|
||||
{loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
|
||||
<KeenIcon icon="filter" />
|
||||
</Button>
|
||||
</DefaultTooltip> */}
|
||||
{/* <Button
|
||||
variant="outline"
|
||||
className="h-7.5 text-[0.8rem]"
|
||||
onClick={() => handleSearchDialog(true)}
|
||||
>
|
||||
Search Aldeias
|
||||
</Button> */}
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user