next-helios-fe 1.6.28 → 1.7.0
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,119 @@
|
|
|
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: any[];
|
|
10
|
+
options?: {
|
|
11
|
+
border?: boolean;
|
|
12
|
+
};
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
onChange?: (data: any) => void;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const PermissionTable: React.FC<PermissionTableProps> = ({
|
|
18
|
+
header,
|
|
19
|
+
module,
|
|
20
|
+
data,
|
|
21
|
+
options,
|
|
22
|
+
disabled,
|
|
23
|
+
onChange,
|
|
24
|
+
}) => {
|
|
25
|
+
return (
|
|
26
|
+
<div
|
|
27
|
+
className={`w-full overflow-x-auto ${
|
|
28
|
+
options?.border && "border rounded-md"
|
|
29
|
+
}`}
|
|
30
|
+
>
|
|
31
|
+
<table className="w-full divide-y text-sm">
|
|
32
|
+
<thead>
|
|
33
|
+
<tr>
|
|
34
|
+
<th className="py-2 font-medium">Module</th>
|
|
35
|
+
{header.map((item: any, index: number) => {
|
|
36
|
+
return (
|
|
37
|
+
<th key={index} className="py-2 font-medium">
|
|
38
|
+
{item}
|
|
39
|
+
</th>
|
|
40
|
+
);
|
|
41
|
+
})}
|
|
42
|
+
</tr>
|
|
43
|
+
</thead>
|
|
44
|
+
<tbody className="divide-y">
|
|
45
|
+
{module.map((item: any, index: number) => {
|
|
46
|
+
return (
|
|
47
|
+
<tr key={index} className="odd:bg-secondary-transparent">
|
|
48
|
+
<td className="px-4 py-1.5">{module[index]}</td>
|
|
49
|
+
{header.map((permissionItem: any, permissionIndex: number) => {
|
|
50
|
+
if (
|
|
51
|
+
data.find(
|
|
52
|
+
(dataItem: any) =>
|
|
53
|
+
dataItem.module === item &&
|
|
54
|
+
dataItem.permission === permissionItem
|
|
55
|
+
)?.checked === false ||
|
|
56
|
+
data.find(
|
|
57
|
+
(dataItem: any) =>
|
|
58
|
+
dataItem.module === item &&
|
|
59
|
+
dataItem.permission === permissionItem
|
|
60
|
+
)?.checked === true
|
|
61
|
+
) {
|
|
62
|
+
return (
|
|
63
|
+
<td key={permissionIndex} className="py-1.5">
|
|
64
|
+
<div className="flex justify-center w-[76px]">
|
|
65
|
+
<div className="w-min">
|
|
66
|
+
<Form.Checkbox
|
|
67
|
+
options={{ variant: "switch" }}
|
|
68
|
+
disabled={disabled}
|
|
69
|
+
checked={
|
|
70
|
+
data.find(
|
|
71
|
+
(dataItem: any) =>
|
|
72
|
+
dataItem.module === item &&
|
|
73
|
+
dataItem.permission === permissionItem
|
|
74
|
+
)?.checked
|
|
75
|
+
}
|
|
76
|
+
onChange={(e) => {
|
|
77
|
+
let tempPermission = data.map(
|
|
78
|
+
(dataItem: any) => {
|
|
79
|
+
if (
|
|
80
|
+
dataItem.module === item &&
|
|
81
|
+
dataItem.permission === permissionItem
|
|
82
|
+
) {
|
|
83
|
+
return {
|
|
84
|
+
...dataItem,
|
|
85
|
+
checked: e.target.checked,
|
|
86
|
+
};
|
|
87
|
+
} else {
|
|
88
|
+
return dataItem;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
|
|
93
|
+
if (onChange) {
|
|
94
|
+
onChange(tempPermission);
|
|
95
|
+
}
|
|
96
|
+
}}
|
|
97
|
+
/>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</td>
|
|
101
|
+
);
|
|
102
|
+
} else {
|
|
103
|
+
return (
|
|
104
|
+
<td key={permissionIndex}>
|
|
105
|
+
<div className="flex justify-center text-secondary">
|
|
106
|
+
<Icon icon="ic:round-minus" />
|
|
107
|
+
</div>
|
|
108
|
+
</td>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
})}
|
|
112
|
+
</tr>
|
|
113
|
+
);
|
|
114
|
+
})}
|
|
115
|
+
</tbody>
|
|
116
|
+
</table>
|
|
117
|
+
</div>
|
|
118
|
+
);
|
|
119
|
+
};
|