diff --git a/src/hooks/useListSearch.tsx b/src/hooks/useListSearch.tsx new file mode 100644 index 00000000..a559b400 --- /dev/null +++ b/src/hooks/useListSearch.tsx @@ -0,0 +1,48 @@ +import {useState, useMemo} from 'react'; +import Input from "@/components/Low/Input"; + +/*fields example = [ + ['id'], + ['companyInformation', 'companyInformation', 'name'] +]*/ + + +const getFieldValue = (fields: string[], data: any): string => { + if(fields.length === 0) return data; + const [key, ...otherFields] = fields; + + if(data[key]) return getFieldValue(otherFields, data[key]); + return data; +} + +export const useListSearch = (fields: string[][], rows: any[]) => { + const [text, setText] = useState(''); + + const renderSearch = () => ( + + ) + + const updatedRows = useMemo(() => { + const searchText = text.toLowerCase(); + return rows.filter((row) => { + return fields.some((fieldsKeys) => { + const value = getFieldValue(fieldsKeys, row); + if(typeof value === 'string') { + return value.toLowerCase().includes(searchText); + } + }) + }) + }, [fields, rows, text]) + + return { + rows: updatedRows, + renderSearch, + } +} \ No newline at end of file diff --git a/src/pages/(admin)/Lists/UserList.tsx b/src/pages/(admin)/Lists/UserList.tsx index 78efe892..89b9656a 100644 --- a/src/pages/(admin)/Lists/UserList.tsx +++ b/src/pages/(admin)/Lists/UserList.tsx @@ -20,9 +20,14 @@ import {USER_TYPE_LABELS} from "@/resources/user"; import useFilterStore from "@/stores/listFilterStore"; import {useRouter} from "next/router"; import {isCorporateUser} from '@/resources/user'; +import { useListSearch } from "@/hooks/useListSearch"; const columnHelper = createColumnHelper(); - +const searchFields = [ + ['name'], + ['email'], + ['corporateInformation', 'companyInformation', 'name'], +]; export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) { const [showDemographicInformation, setShowDemographicInformation] = useState(false); const [sorter, setSorter] = useState(); @@ -333,7 +338,7 @@ export default function UserList({user, filters = []}: {user: User; filters?: (( ) as any, - cell: (info) => info.getValue(), + cell: (info) => getCorporateName(info.row.original), }), columnHelper.accessor("subscriptionExpirationDate", { header: ( @@ -478,8 +483,13 @@ export default function UserList({user, filters = []}: {user: User; filters?: (( return a.id.localeCompare(b.id); }; + const { rows: filteredRows, renderSearch } = useListSearch( + searchFields, + displayUsers, + ) + const table = useReactTable({ - data: displayUsers, + data: filteredRows, columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any, getCoreRowModel: getCoreRowModel(), }); @@ -562,30 +572,33 @@ export default function UserList({user, filters = []}: {user: User; filters?: (( )} - - - {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - - ))} - - ))} - - - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} - -
- {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
+
+ {renderSearch()} + + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => ( + + ))} + + ))} + + + {table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + ))} + + ))} + +
+ {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+
); }