devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added search area for table users

Browse Source
This commit is contained in:
Joao Ramos
2023-12-27 21:44:13 +00:00
parent b7ddee1db2
commit b3bb5a2337
2 changed files with 88 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -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<User>();
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<string>();
@@ -333,7 +338,7 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
<SorterArrow name="companyName" />
</button>
) 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?: ((
)}
</>
</Modal>
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th className="py-4 px-4 text-left" key={header.id}>
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
))}
</thead>
<tbody className="px-2">
{table.getRowModel().rows.map((row) => (
<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
{row.getVisibleCells().map((cell) => (
<td className="px-4 py-2 items-center w-fit" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
<div className="w-full flex flex-col gap-2">
{renderSearch()}
<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th className="py-4 px-4 text-left" key={header.id}>
{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
</th>
))}
</tr>
))}
</thead>
<tbody className="px-2">
{table.getRowModel().rows.map((row) => (
<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
{row.getVisibleCells().map((cell) => (
<td className="px-4 py-2 items-center w-fit" key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}