PrivilegesTable.tsx114 lines · main

1	import { Switch } from 'ui'
2
3	import {
4	ALL_PRIVILEGE_TYPES,
5	COLUMN_PRIVILEGE_TYPES,
6	TABLE_PRIVILEGE_TYPES,
7	} from './Privileges.constants'
8	import { usePrivilegesState } from './Privileges.utils'
9	import Table from '@/components/to-be-cleaned/Table'
10	import type { ColumnPrivilege } from '@/data/privileges/column-privileges-query'
11
12	export interface PrivilegesTableProps extends Pick<
13	ReturnType<typeof usePrivilegesState>,
14	'tableCheckedStates' | 'columnCheckedStates' | 'toggleTablePrivilege' | 'toggleColumnPrivilege'
15	> {
16	columnPrivileges: ColumnPrivilege[]
17	disabled: boolean
18	isApplyingChanges?: boolean
19	}
20
21	const PrivilegesTable = ({
22	columnPrivileges,
23	tableCheckedStates,
24	columnCheckedStates,
25	toggleTablePrivilege,
26	toggleColumnPrivilege,
27	disabled,
28	isApplyingChanges = false,
29	}: PrivilegesTableProps) => {
30	const handleClickColumnName = (columnId: string) => {
31	const hasAllPrivileges = COLUMN_PRIVILEGE_TYPES.every(
32	(privilege) => columnCheckedStates[columnId][privilege]
33	)
34	const privilegesToToggle = COLUMN_PRIVILEGE_TYPES.filter((privilege) =>
35	hasAllPrivileges
36	? columnCheckedStates[columnId][privilege]
37	: !columnCheckedStates[columnId][privilege]
38	)
39
40	privilegesToToggle.forEach((privilege) => {
41	toggleColumnPrivilege(columnId, privilege)
42	})
43	}
44
45	return (
46	<Table
47	className="table-fixed mb-4"
48	head={[
49	<Table.th key="header-column">
50	<span>Column</span>
51	</Table.th>,
52	...ALL_PRIVILEGE_TYPES.map((privilege) => {
53	const checked = tableCheckedStates[privilege]
54
55	return (
56	<Table.th key={`header-${privilege}`}>
57	<div className="inline-flex items-center gap-2">
58	<span>{privilege.charAt(0) + privilege.slice(1).toLowerCase()}</span>
59
60	<Switch
61	checked={checked}
62	onCheckedChange={() => {
63	toggleTablePrivilege(privilege)
64	}}
65	disabled={disabled || isApplyingChanges}
66	/>
67	</div>
68	</Table.th>
69	)
70	}),
71	]}
72	body={columnPrivileges.map((column) => (
73	<Table.tr key={column.column_id}>
74	<Table.td>
75	<button
76	onClick={() => handleClickColumnName(column.column_id)}
77	className="block w-full truncate text-left text-foreground"
78	>
79	{column.column_name}
80	</button>
81	</Table.td>
82	{COLUMN_PRIVILEGE_TYPES.map((privilege) => {
83	const checked = columnCheckedStates[column.column_id][privilege]
84
85	return (
86	<Table.td key={privilege}>
87	{COLUMN_PRIVILEGE_TYPES.includes(privilege as any) && (
88	<div className="ml-5 inline-flex">
89	<Switch
90	checked={checked}
91	onCheckedChange={() => {
92	toggleColumnPrivilege(column.column_id, privilege)
93	}}
94	disabled={disabled || isApplyingChanges}
95	/>
96	</div>
97	)}
98	</Table.td>
99	)
100	})}
101	{TABLE_PRIVILEGE_TYPES.map((privilege) => {
102	return (
103	<Table.td key={privilege}>
104	<span className="ml-5 text-xs text-foreground-lighter">N/A</span>
105	</Table.td>
106	)
107	})}
108	</Table.tr>
109	))}
110	/>
111	)
112	}
113
114	export default PrivilegesTable