next-helios-fe 1.6.28 → 1.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
package/src/components/index.ts
CHANGED
|
@@ -21,6 +21,7 @@ export { Chip } from "./chip";
|
|
|
21
21
|
export { Form } from "./form";
|
|
22
22
|
export { Button } from "./button";
|
|
23
23
|
export { Table } from "./table";
|
|
24
|
+
export { PermissionTable } from "./permission-table";
|
|
24
25
|
export { Chart } from "./chart";
|
|
25
26
|
export { Calendar } from "./calendar/calendar";
|
|
26
27
|
export { BigCalendar } from "./calendar/big-calendar";
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { Form } from "../../components";
|
|
4
|
+
import { Icon } from "@iconify/react";
|
|
5
|
+
|
|
6
|
+
interface PermissionTableProps {
|
|
7
|
+
header: any[];
|
|
8
|
+
module: any[];
|
|
9
|
+
data: {
|
|
10
|
+
id: number | string;
|
|
11
|
+
module: string;
|
|
12
|
+
permission: string;
|
|
13
|
+
checked: boolean;
|
|
14
|
+
[key: string]: any;
|
|
15
|
+
}[];
|
|
16
|
+
options?: {
|
|
17
|
+
height?: "full" | "fit" | "20" | "40" | "80";
|
|
18
|
+
border?: boolean;
|
|
19
|
+
};
|
|
20
|
+
disabled?: boolean;
|
|
21
|
+
onChange?: (data: any) => void;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export const PermissionTable: React.FC<PermissionTableProps> = ({
|
|
25
|
+
header,
|
|
26
|
+
module,
|
|
27
|
+
data,
|
|
28
|
+
options,
|
|
29
|
+
disabled,
|
|
30
|
+
onChange,
|
|
31
|
+
}) => {
|
|
32
|
+
const height =
|
|
33
|
+
options?.height === "fit"
|
|
34
|
+
? "h-fit"
|
|
35
|
+
: options?.height === "20"
|
|
36
|
+
? "h-20"
|
|
37
|
+
: options?.height === "40"
|
|
38
|
+
? "h-40"
|
|
39
|
+
: options?.height === "80"
|
|
40
|
+
? "h-80"
|
|
41
|
+
: "flex-1 h-full";
|
|
42
|
+
|
|
43
|
+
const headerArr = header.map((item: any, index: number) => {
|
|
44
|
+
return (
|
|
45
|
+
<th
|
|
46
|
+
key={index}
|
|
47
|
+
className="min-w-24 w-24 max-w-24 py-2 bg-secondary-bg font-medium"
|
|
48
|
+
>
|
|
49
|
+
{item}
|
|
50
|
+
</th>
|
|
51
|
+
);
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
const dataArr = module.map((item: any, index: number) => {
|
|
55
|
+
return (
|
|
56
|
+
<tr
|
|
57
|
+
key={index}
|
|
58
|
+
className={`${index % 2 === 0 ? "bg-neutral-50" : "bg-secondary-bg"}`}
|
|
59
|
+
>
|
|
60
|
+
<td
|
|
61
|
+
className={`sticky left-0 min-w-40 px-4 py-1.5 ${
|
|
62
|
+
index % 2 === 0 ? "bg-neutral-50" : "bg-secondary-bg"
|
|
63
|
+
}`}
|
|
64
|
+
>
|
|
65
|
+
{module[index]}
|
|
66
|
+
</td>
|
|
67
|
+
{header.map((permissionItem: any, permissionIndex: number) => {
|
|
68
|
+
if (
|
|
69
|
+
data.find(
|
|
70
|
+
(dataItem: any) =>
|
|
71
|
+
dataItem.module === item &&
|
|
72
|
+
dataItem.permission === permissionItem
|
|
73
|
+
)?.checked === false ||
|
|
74
|
+
data.find(
|
|
75
|
+
(dataItem: any) =>
|
|
76
|
+
dataItem.module === item &&
|
|
77
|
+
dataItem.permission === permissionItem
|
|
78
|
+
)?.checked === true
|
|
79
|
+
) {
|
|
80
|
+
return (
|
|
81
|
+
<td
|
|
82
|
+
key={permissionIndex}
|
|
83
|
+
className="min-w-24 w-24 max-w-24 py-1.5"
|
|
84
|
+
>
|
|
85
|
+
<div className="flex justify-center w-full">
|
|
86
|
+
<div>
|
|
87
|
+
<Form.Checkbox
|
|
88
|
+
options={{ variant: "switch" }}
|
|
89
|
+
disabled={disabled}
|
|
90
|
+
checked={
|
|
91
|
+
data.find(
|
|
92
|
+
(dataItem: any) =>
|
|
93
|
+
dataItem.module === item &&
|
|
94
|
+
dataItem.permission === permissionItem
|
|
95
|
+
)?.checked
|
|
96
|
+
}
|
|
97
|
+
onChange={(e) => {
|
|
98
|
+
let tempPermission = data.map((dataItem: any) => {
|
|
99
|
+
if (
|
|
100
|
+
dataItem.module === item &&
|
|
101
|
+
dataItem.permission === permissionItem
|
|
102
|
+
) {
|
|
103
|
+
return {
|
|
104
|
+
...dataItem,
|
|
105
|
+
checked: e.target.checked,
|
|
106
|
+
};
|
|
107
|
+
} else {
|
|
108
|
+
return dataItem;
|
|
109
|
+
}
|
|
110
|
+
});
|
|
111
|
+
|
|
112
|
+
if (onChange) {
|
|
113
|
+
onChange(tempPermission);
|
|
114
|
+
}
|
|
115
|
+
}}
|
|
116
|
+
/>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</td>
|
|
120
|
+
);
|
|
121
|
+
} else {
|
|
122
|
+
return (
|
|
123
|
+
<td key={permissionIndex}>
|
|
124
|
+
<div className="flex justify-center text-secondary">
|
|
125
|
+
<Icon icon="ic:round-minus" />
|
|
126
|
+
</div>
|
|
127
|
+
</td>
|
|
128
|
+
);
|
|
129
|
+
}
|
|
130
|
+
})}
|
|
131
|
+
</tr>
|
|
132
|
+
);
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
return (
|
|
136
|
+
<div
|
|
137
|
+
className={`w-full overflow-auto ${
|
|
138
|
+
options?.border && "border rounded-md"
|
|
139
|
+
} ${height}`}
|
|
140
|
+
>
|
|
141
|
+
<table className="w-full divide-y text-sm overflow-x-auto">
|
|
142
|
+
<thead className="sticky top-0 z-10">
|
|
143
|
+
<tr className="bg-secondary-bg">
|
|
144
|
+
<th className="sticky left-0 min-w-40 py-2 z-10 bg-secondary-bg font-medium">
|
|
145
|
+
Module
|
|
146
|
+
</th>
|
|
147
|
+
{headerArr}
|
|
148
|
+
</tr>
|
|
149
|
+
</thead>
|
|
150
|
+
<tbody className="divide-y">{dataArr}</tbody>
|
|
151
|
+
</table>
|
|
152
|
+
</div>
|
|
153
|
+
);
|
|
154
|
+
};
|