93 lines
3.2 KiB
TypeScript
93 lines
3.2 KiB
TypeScript
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
|
|
import { useManageMunicipiosContext } from '../hooks/useManageMunicipiosContext';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useCallback, useState } from 'react';
|
|
import { toast } from 'sonner';
|
|
|
|
const ListToolbar = () => {
|
|
const { table, reload } = useDataGrid();
|
|
const { handleAddDialog, handleSearchDialog } = useManageMunicipiosContext();
|
|
const [searchName, setSearchName] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [searchValue, setSearchValue] = useState('');
|
|
|
|
const handleFilterData = useCallback(() => {
|
|
try {
|
|
table.getColumn('name')?.setFilterValue(searchName);
|
|
} catch (error) {
|
|
toast.error('Error applying filter');
|
|
console.error('Error applying filter:', error);
|
|
}
|
|
}, [searchName, table]);
|
|
|
|
const handleKeyDown = (event: React.KeyboardEvent) => {
|
|
if (event.key === 'Enter') {
|
|
handleSearch();
|
|
}
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
table.getColumn('name')?.setFilterValue(searchValue);
|
|
};
|
|
|
|
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">
|
|
<div className="flex justify-between w-full items-center">
|
|
<div className="flex w-[50%] gap-3 items-center">
|
|
<label className="input input-sm w-1/3 overflow-hidden">
|
|
<KeenIcon icon="magnifier" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search Municipio"
|
|
value={searchValue}
|
|
onChange={(event) => setSearchValue(event.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
/>
|
|
</label>
|
|
<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 Postu Administrativo
|
|
</Button> */}
|
|
</div>
|
|
<div className="flex gap-3 items-center">
|
|
<Button
|
|
variant="outline"
|
|
className="h-7.5 text-[0.8rem]"
|
|
onClick={() => handleAddDialog(true)}
|
|
>
|
|
Add Data
|
|
</Button>
|
|
<DefaultTooltip title={'Refresh'} placement={'top'}>
|
|
<Button variant="outline" className="h-7.5" onClick={() => reload()}>
|
|
<KeenIcon icon="arrows-circle" />
|
|
</Button>
|
|
</DefaultTooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ListToolbar;
|