TIMOR-TELECOM/revenue-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add button search for searching

Browse Source
This commit is contained in:
Raja Oktafrianto
2025-04-16 14:53:40 +07:00
parent d281ff0a9f
commit 2f81da93a9
3 changed files with 72 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/pages/notification/blocks/ListToolbar.tsx
View File

@ -1,10 +1,22 @@
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">
@ -16,21 +28,20 @@ const ListToolBar = () => {
<input
type="text"
placeholder="Search users"
value={(table.getColumn('content')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('content')?.setFilterValue(event.target.value)}
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeydown}
/>
</label>
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
<DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
// disabled={isLoading}
// onClick={handleFilterData}
onClick={handleSearch}
>
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
{/* <KeenIcon icon="filter" /> */}
{/* </Button>
</DefaultTooltip> */}
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</div>
<div className="flex gap-3 items-center">
<Button

42
src/pages/settings/user/manage-position/blocks/ListToolBar.tsx
View File

@ -1,24 +1,48 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManagePositionContext } from '../hooks';
import { Button } from '@/components/ui/button';
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">
<div className="flex flex-wrap gap-2 lg:gap-5 w-full">
<div className="flex justify-between w-full items-center">
<label className="input input-sm w-1/6">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search roles"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
/>
</label>
<div className="flex w-[50%] gap-3 items-center">
<label className="input input-sm w-1/3">
<KeenIcon icon="magnifier" />
<input
type="text"
placeholder="Search roles"
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeyDown}
/>
</label>
<DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
onClick={handleSearch}
>
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip>
</div>
<div className="flex gap-3 items-center">
<Button

29
src/pages/settings/user/manage-user/blocks/ListToolBar.tsx
View File

@ -1,10 +1,22 @@
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">
@ -16,23 +28,20 @@ const ListToolBar = () => {
<input
type="text"
placeholder="Search Username"
value={(table.getColumn('username')?.getFilterValue() as string) ?? ''}
onChange={(event) =>
table.getColumn('username')?.setFilterValue(event.target.value)
}
value={searchValue}
onChange={(event) => setSearchValue(event.target.value)}
onKeyDown={handleKeyDown}
/>
</label>
{/* <DefaultTooltip title={'Filter'} placement={'top'}>
<DefaultTooltip title={'Search'} placement={'top'}>
<Button
variant="outline"
className="h-7.5 disabled:bg-gray-400"
// disabled={isLoading}
// onClick={handleFilterData}
onClick={handleSearch}
>
{/* {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />} */}
{/* <KeenIcon icon="filter" />
<KeenIcon icon="magnifier" />
</Button>
</DefaultTooltip> */}
</DefaultTooltip>
</div>
<div className="flex gap-3 items-center">
<Button