Skip to content

Commit f5dce19

Browse files
EdouardVanbelleEdouardVanbelle
committed
peers table: refactor filters
1 parent 61e11d3 commit f5dce19

File tree

1 file changed

+80
-86
lines changed

1 file changed

+80
-86
lines changed

‎src/modules/peers/PeersTable.tsx‎

Lines changed: 80 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@ import GetStartedTest from "@components/ui/GetStartedTest";
1212
import { NotificationCountBadge } from "@components/ui/NotificationCountBadge";
1313
import {
1414
ColumnDef,
15+
ColumnFiltersState,
1516
RowSelectionState,
1617
SortingState,
18+
Table,
19+
VisibilityState,
1720
} from "@tanstack/react-table";
1821
import { uniqBy } from "lodash";
1922
import { ExternalLinkIcon } from "lucide-react";
@@ -65,6 +68,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
6568
{
6669
id: "name",
6770
accessorFn: (peer) => `${peer?.name}${peer?.dns_label}`,
71+
enableHiding: false,
6872
header: ({ column }) => {
6973
return <DataTableHeader column={column}>Name</DataTableHeader>;
7074
},
@@ -83,6 +87,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
8387
accessorFn: (peer) => peer.connected,
8488
},
8589
{
90+
id: "ip",
8691
accessorKey: "ip",
8792
sortingFn: "text",
8893
},
@@ -96,18 +101,21 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
96101
},
97102
{
98103
id: "dns_label",
104+
enableHiding: false,
99105
accessorKey: "dns_label",
100106
header: ({ column }) => {
101107
return <DataTableHeader column={column}>Address</DataTableHeader>;
102108
},
103109
cell: ({ row }) => <PeerAddressCell peer={row.original} />,
104110
},
105111
{
112+
id: "group_name_strings",
106113
accessorKey: "group_name_strings",
107114
accessorFn: (peer) => peer.groups?.map((g) => g?.name || "").join(", "),
108115
sortingFn: "text",
109116
},
110117
{
118+
id: "group_names",
111119
accessorKey: "group_names",
112120
accessorFn: (peer) => peer.groups?.map((g) => g?.name || ""),
113121
sortingFn: "text",
@@ -126,6 +134,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
126134
),
127135
},
128136
{
137+
id: "last_seen",
129138
accessorKey: "last_seen",
130139
header: ({ column }) => {
131140
return <DataTableHeader column={column}>Last seen</DataTableHeader>;
@@ -150,6 +159,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
150159
sortingFn: "text",
151160
},
152161
{
162+
id: "version",
153163
accessorKey: "version",
154164
header: ({ column }) => {
155165
return <DataTableHeader column={column}>Version</DataTableHeader>;
@@ -176,6 +186,7 @@ const PeersTableColumns: ColumnDef<Peer>[] = [
176186
},
177187
{
178188
id: "actions",
189+
enableHiding: false,
179190
accessorKey: "id",
180191
header: "",
181192
cell: ({ row }) => (
@@ -234,13 +245,60 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
234245
}
235246
};
236247

248+
const filteredColunms = [
249+
"connected",
250+
"approval_required",
251+
"group_name_strings",
252+
"group_names",
253+
];
254+
255+
/**
256+
* This function overrides the given column filters and reuses the previous filters
257+
*
258+
* Table index and selection is also cleared
259+
*/
260+
const overrideTableFilter = (table: Table<Peer>, change: ColumnFiltersState) => {
261+
let filters = [] as ColumnFiltersState;
262+
263+
filteredColunms.forEach((columnId) => {
264+
let columnFilter = change.find((entry) => entry.id == columnId);
265+
if (columnFilter === undefined) {
266+
columnFilter = {
267+
id: columnId,
268+
value: table.getColumn(columnId)?.getFilterValue()
269+
}
270+
}
271+
filters.push(columnFilter);
272+
})
273+
table.setPageIndex(0);
274+
table.setColumnFilters( filters);
275+
resetSelectedRows();
276+
};
277+
278+
const columnVisibility: VisibilityState = {
279+
select: !isUser,
280+
actions: !isUser,
281+
groups: !isUser,
282+
connected: false,
283+
approval_required: false,
284+
285+
// hidden, but usefull for lookup
286+
serial: false,
287+
group_name_strings: false,
288+
group_names: false,
289+
ip: false,
290+
user_name: false,
291+
user_email: false,
292+
};
293+
237294
return (
238295
<>
239296
<PeerMultiSelect
240297
selectedPeers={selectedRows}
241298
onCanceled={() => setSelectedRows({})}
242299
/>
243300
<DataTable
301+
keepStateInLocalStorage={true}
244302
headingTarget={headingTarget}
245303
rowSelection={selectedRows}
246304
setRowSelection={setSelectedRows}
@@ -251,19 +309,7 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
251309
columns={PeersTableColumns}
252310
data={peers}
253311
searchPlaceholder={"Search by name, IP, Serial, owner or group..."}
254-
columnVisibility={{
255-
select: !isUser,
256-
connected: false,
257-
approval_required: false,
258-
group_name_strings: false,
259-
group_names: false,
260-
ip: false,
261-
serial: false,
262-
user_name: false,
263-
user_email: false,
264-
actions: !isUser,
265-
groups: !isUser,
266-
}}
312+
columnVisibility={columnVisibility}
267313
isLoading={isLoading}
268314
getStartedCard={
269315
<GetStartedTest
@@ -302,29 +348,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
302348
<ButtonGroup.Button
303349
disabled={peers?.length == 0}
304350
onClick={() => {
305-
table.setPageIndex(0);
306-
let groupFilters = table
307-
.getColumn("group_names")
308-
?.getFilterValue();
309-
table.setColumnFilters([
351+
overrideTableFilter( table, [
310352
{
311353
id: "connected",
312354
value: undefined,
313355
},
314-
{
315-
id: "approval_required",
316-
value: undefined,
317-
},
318-
{
319-
id: "group_names",
320-
value: groupFilters ?? [],
321-
},
322-
{
323-
id: "group_names",
324-
value: groupFilters ?? [],
325-
},
326356
]);
327-
resetSelectedRows();
328357
}}
329358
variant={
330359
table.getColumn("connected")?.getFilterValue() == undefined
@@ -336,29 +365,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
336365
</ButtonGroup.Button>
337366
<ButtonGroup.Button
338367
onClick={() => {
339-
table.setPageIndex(0);
340-
let groupFilters = table
341-
.getColumn("group_names")
342-
?.getFilterValue();
343-
table.setColumnFilters([
368+
overrideTableFilter( table, [
344369
{
345370
id: "connected",
346371
value: true,
347372
},
348-
{
349-
id: "approval_required",
350-
value: undefined,
351-
},
352-
{
353-
id: "group_names",
354-
value: groupFilters ?? [],
355-
},
356-
{
357-
id: "group_names",
358-
value: groupFilters ?? [],
359-
},
360373
]);
361-
resetSelectedRows();
362374
}}
363375
disabled={peers?.length == 0}
364376
variant={
@@ -371,25 +383,12 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
371383
</ButtonGroup.Button>
372384
<ButtonGroup.Button
373385
onClick={() => {
374-
table.setPageIndex(0);
375-
let groupFilters = table
376-
.getColumn("group_names")
377-
?.getFilterValue();
378-
table.setColumnFilters([
386+
overrideTableFilter( table, [
379387
{
380388
id: "connected",
381389
value: false,
382390
},
383-
{
384-
id: "approval_required",
385-
value: undefined,
386-
},
387-
{
388-
id: "group_names",
389-
value: groupFilters ?? [],
390-
},
391391
]);
392-
resetSelectedRows();
393392
}}
394393
disabled={peers?.length == 0}
395394
variant={
@@ -406,29 +405,21 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
406405
<Button
407406
disabled={peers?.length == 0}
408407
onClick={() => {
409-
table.setPageIndex(0);
410408
let current =
411409
table.getColumn("approval_required")?.getFilterValue() ===
412-
undefined
410+
undefined
413411
? true
414412
: undefined;
415-
416-
table.setColumnFilters([
417-
{
418-
id: "connected",
419-
value: undefined,
420-
},
413+
overrideTableFilter( table, [
421414
{
422415
id: "approval_required",
423416
value: current,
424417
},
425418
]);
426-
427-
resetSelectedRows();
428419
}}
429420
variant={
430421
table.getColumn("approval_required")?.getFilterValue() ===
431-
true
422+
true
432423
? "tertiary"
433424
: "secondary"
434425
}
@@ -438,30 +429,33 @@ export default function PeersTable({ peers, isLoading, headingTarget }: Props) {
438429
</Button>
439430
)}
440431

441-
<DataTableRowsPerPage table={table} disabled={peers?.length == 0} />
442-
443-
{!isUser && (
432+
{
433+
!isUser
434+
&& tableGroups.length > 1 // if length == 1, it means only "All" group exists, case not relevant
435+
&& (
444436
<GroupSelector
445437
disabled={peers?.length == 0}
446438
values={
447439
(table
448440
.getColumn("group_names")
449441
?.getFilterValue() as string[]) || []
450442
}
451-
onChange={(groups) => {
452-
table.setPageIndex(0);
453-
if (groups.length == 0) {
454-
table.getColumn("group_names")?.setFilterValue(undefined);
455-
return;
456-
} else {
457-
table.getColumn("group_names")?.setFilterValue(groups);
458-
}
459-
resetSelectedRows();
443+
onChange={(anyOfValues) => {
444+
const normalizedAnyOf = ( anyOfValues.length == 0 ) ? undefined : anyOfValues;
445+
overrideTableFilter( table, [
446+
{
447+
id: "group_names",
448+
value: normalizedAnyOf
449+
},
450+
]
451+
);
460452
}}
461453
groups={tableGroups}
462454
/>
463455
)}
464456

457+
<DataTableRowsPerPage table={table} disabled={peers?.length == 0} />
458+
465459
<DataTableRefreshButton
466460
isDisabled={peers?.length == 0}
467461
onClick={() => {

0 commit comments

Comments
 (0)