update search

This commit is contained in:
Raja Oktafrianto
2025-04-17 11:14:53 +07:00
parent 08bc0c37c9
commit 3034886eef
3 changed files with 15 additions and 51 deletions

View File

@ -1,22 +1,10 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageNotificationContext } from '../hooks/useManageNotificationContext';
import { Button } from '@/components/ui/button';
import React, { useState } from 'react';
const ListToolBar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageNotificationContext();
const [searchValue, setSearchValue] = useState('');
const handleKeydown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
handleSearch();
}
};
const handleSearch = () => {
table.getColumn('content')?.setFilterValue(searchValue);
};
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -27,13 +15,12 @@ const ListToolBar = () => {
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search users"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeydown}
placeholder="Search notifications"
value={table.getColumn(`content`)?.getFilterValue() as string}
onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
{/* <DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
@ -41,7 +28,7 @@ const ListToolBar = () => {
>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</DefaultTooltip> */}
</div>
<div className="flex gap-3 items-center">
<Button

View File

@ -6,17 +6,6 @@ import { useState } from 'react';
const ListToolBar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManagePositionContext();
const [searchValue, setSearchValue] = useState('');
const handleSearch = () => {
table.getColumn('name')?.setFilterValue(searchValue);
};
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
handleSearch();
}
};
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -28,12 +17,11 @@ const ListToolBar = () => {
<input
type="text"
placeholder="Search roles"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeyDown}
value={table.getColumn(`name`)?.getFilterValue() as string}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
{/* <DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
@ -41,7 +29,7 @@ const ListToolBar = () => {
>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</DefaultTooltip> */}
</div>
<div className="flex gap-3 items-center">

View File

@ -1,22 +1,10 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useUserContext } from '../hooks';
import { Button } from '@/components/ui/button';
import React, { useState } from 'react';
const ListToolBar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useUserContext();
const [searchValue, setSearchValue] = useState('');
const handleSearch = () => {
table.getColumn('username')?.setFilterValue(searchValue);
};
const handleKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Enter') {
handleSearch();
}
};
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -28,12 +16,13 @@ const ListToolBar = () => {
<input
type="text"
placeholder="Search Username"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeyDown}
value={table.getColumn(`username`)?.getFilterValue() as string}
onChange={(event) =>
table.getColumn('username')?.setFilterValue(event.target.value)
}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
{/* <DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
@ -41,7 +30,7 @@ const ListToolBar = () => {
>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</DefaultTooltip> */}
</div>
<div className="flex gap-3 items-center">
<Button