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

adding button on search on masterdata

Browse Source
This commit is contained in:
bagusajisaputroo
2025-04-16 17:33:51 +07:00
parent 730bbb9519
commit 585cd326b7
8 changed files with 98 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/master/products/blocks/ListToolbar.tsx
View File

@ -1,10 +1,24 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageProductsContext } from '../hooks/useManageProductsContext';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageProductsContext();
const[searchProduct, setSearchProduct] = useState('');
const handleSearch = ()=>{
table.getColumn('name')?.setFilterValue(searchProduct);
table.setPageIndex(0);
}
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,10 +30,16 @@ const ListToolbar = () => {
<input
type="text"
placeholder="Search Products"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
value={ searchProduct}
onChange={(event) => setSearchProduct(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"
@ -37,6 +57,7 @@ const ListToolbar = () => {
variant="outline"
className="h-7.5 text-[0.8rem]"
onClick={() => handleAddDialog(true)}
onKeyDown={handleKeyDown}
>
Add Data
</Button>

2
src/pages/master/products/hooks/ManageProductsContext.tsx
View File

@ -231,7 +231,7 @@ const ManageProductsContextProvider = ({ children }: { children: React.ReactNode
);
},
meta: {
headerClassName: 'w-[100px]',
headerClassName: 'w-[100px] text-center',
cellClassName: 'text-center'
}
}

27
src/pages/master/profession/blocks/ListToolbar.tsx
View File

@ -1,10 +1,27 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageProfessionContext } from '../hooks/useManageProfessionContext';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
import { set } from 'date-fns';
const ListToolbar = () => {
const { reload, table } = useDataGrid();
const { handleAddDialog } = useManageProfessionContext();
const [searchProfession, setSearchProfession]= useState('');
const handleKeyDown = (event: React.KeyboardEvent) =>{
if(event.key==='Enter'){
handleSearch();
}
}
const handleSearch = () =>{
table.getColumn('name')?.setFilterValue(searchProfession);
table.setPageIndex(0);
}
return (
<div className="card-header flex-wrap gap-2 border-b-0 px-5">
@ -16,12 +33,18 @@ const ListToolbar = () => {
<input
type="text"
placeholder="Search Profession"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
value={searchProfession}
onChange={(event) =>
table.getColumn('name')?.setFilterValue(event.target.value)
setSearchProfession(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"

4
src/pages/master/profession/hooks/ManageProfessionContext.tsx
View File

@ -102,7 +102,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
);
},
meta: {
headerClassName: 'w-[100px]',
headerClassName: 'w-[100px] text-center',
cellClassName: 'text-center'
}
}
@ -151,7 +151,7 @@ const ManageProfessionContextProvider = ({ children }: { children: React.ReactNo
pagination={{ size: 10 }}
toolbar={<ListToolbar />}
layout={{ card: true }}
sorting={[{ id: 'id', desc: false }]}
sorting={[{ id: 'name', desc: false }]}
serverSide={true}
onFetchData={({ pageIndex, pageSize, sorting, columnFilters }) =>
getProfessionLists(pageIndex, pageSize, sorting, columnFilters)

23
src/pages/master/provider/blocks/ListToolbar.tsx
View File

@ -1,10 +1,23 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { useManageProviderContext } from '../hooks/useManageProviderContext';
import { Button } from '@/components/ui/button';
import { useState } from 'react';
const ListToolbar = () => {
const { reload, table } = useDataGrid();
const { handleAddDialog } = useManageProviderContext();
const [searchProvider, setSearchProvider] = useState('');
const handleSearch = () =>{
table.getColumn('name')?.setFilterValue(searchProvider);
table.setPageIndex(0);
}
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,12 +29,18 @@ const ListToolbar = () => {
<input
type="text"
placeholder="Search Provider"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
value={searchProvider}
onChange={(event) =>
table.getColumn('name')?.setFilterValue(event.target.value)
setSearchProvider(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"

4
src/pages/master/provider/hooks/ManageProviderContext.tsx
View File

@ -129,7 +129,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
);
},
meta: {
headerClassName: 'w-[100px]',
headerClassName: 'w-[100px] text-center',
cellClassName: 'text-center'
}
},
@ -158,7 +158,7 @@ const ManageProviderContextProvider = ({ children }: { children: React.ReactNode
);
},
meta: {
headerClassName: 'w-[100px]',
headerClassName: 'w-[100px] text-center',
cellClassName: 'text-center'
}
}

23
src/pages/master/reward/blocks/ListToolbar.tsx
View File

@ -1,10 +1,23 @@
import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
import { Button } from '@/components/ui/button';
import { useManageRewardContext } from '../hooks/useManageRewardContext';
import { useState } from 'react';
const ListToolbar = () => {
const { table, reload } = useDataGrid();
const { handleAddDialog } = useManageRewardContext();
const [searchReward, setSearchReward] = useState('');
const handleSearch = () =>{
table.getColumn('name')?.setFilterValue(searchReward);
table.setPageIndex(0);
}
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,10 +29,16 @@ const ListToolbar = () => {
<input
type="text"
placeholder="Search Reward"
value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
value={searchReward}
onChange={(event) => setSearchReward(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>
</div>
<div className="flex gap-3 items-center">
<Button

5
src/pages/master/reward/hooks/ManageRewardContext.tsx
View File

@ -110,7 +110,8 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
);
},
meta: {
headerClassName: 'w-[250px]'
headerClassName: 'w-[250px] text-center',
cellClassName: 'text-center'
}
},
{
@ -138,7 +139,7 @@ const ManageRewardContextProvider = ({ children }: { children: React.ReactNode }
);
},
meta: {
heaaderClassName: 'w-[100px]',
headerClassName: 'w-[100px] text-center',
cellClassName: 'text-center'
}
}