l-min-components 1.0.607 → 1.0.611
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 +1 -1
- package/src/components/AdminRolesPermission/create/index.jsx +3 -3
- package/src/components/AdminRolesPermission/create/role-name.jsx +7 -4
- package/src/components/AdminRolesPermission/index.jsx +109 -90
- package/src/components/AdminRolesPermission/index.styled.js +6 -1
- package/src/components/index.js +1 -0
- package/src/components/sideNav/index.jsx +1 -1
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@ import Permissions from "./permissions";
|
|
|
6
6
|
import Admins from "./admins";
|
|
7
7
|
|
|
8
8
|
const AdminRolesCreate = () => {
|
|
9
|
-
const [type, setType] = useState(
|
|
9
|
+
const [type, setType] = useState(null);
|
|
10
10
|
|
|
11
11
|
return (
|
|
12
12
|
<AdminRolesCreateContainer>
|
|
@@ -25,13 +25,13 @@ const AdminRolesCreate = () => {
|
|
|
25
25
|
|
|
26
26
|
<div className="arp_create_row">
|
|
27
27
|
<div className="arp_detail_one">
|
|
28
|
-
<RoleName />
|
|
28
|
+
<RoleName setType={setType} />
|
|
29
29
|
</div>
|
|
30
30
|
|
|
31
31
|
<div className="hr_line"></div>
|
|
32
32
|
|
|
33
33
|
<div className="arp_role_list">
|
|
34
|
-
{type === "
|
|
34
|
+
{type === "admins" && <Admins />}
|
|
35
35
|
{type === "permissions" && <Permissions />}
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
@@ -2,9 +2,10 @@ import React from "react";
|
|
|
2
2
|
import { RoleNameContainer } from "./index.styled";
|
|
3
3
|
import ButtonComponent from "../../button";
|
|
4
4
|
import { roleList } from "./data";
|
|
5
|
-
import avatar from "../assets/images/avatar.png"
|
|
5
|
+
import avatar from "../assets/images/avatar.png";
|
|
6
|
+
import { IoMdAdd } from "react-icons/io";
|
|
6
7
|
|
|
7
|
-
const RoleName = () => {
|
|
8
|
+
const RoleName = ({ setType }) => {
|
|
8
9
|
return (
|
|
9
10
|
<RoleNameContainer>
|
|
10
11
|
<p className="rl_title">Enter role name</p>
|
|
@@ -36,9 +37,10 @@ const RoleName = () => {
|
|
|
36
37
|
backgroundColor: "transparent",
|
|
37
38
|
marginBottom: "24px",
|
|
38
39
|
}}
|
|
39
|
-
icon={{ left: true }}
|
|
40
|
+
icon={{ left: true, jsx: IoMdAdd }}
|
|
40
41
|
onClick={(e) => {
|
|
41
42
|
e.preventDefault();
|
|
43
|
+
setType("permissions");
|
|
42
44
|
}}
|
|
43
45
|
/>
|
|
44
46
|
<p className="rl_perm_txt">Admins</p>
|
|
@@ -71,9 +73,10 @@ const RoleName = () => {
|
|
|
71
73
|
backgroundColor: "transparent",
|
|
72
74
|
marginBottom: "24px",
|
|
73
75
|
}}
|
|
74
|
-
icon={{ left: true }}
|
|
76
|
+
icon={{ left: true, jsx: IoMdAdd }}
|
|
75
77
|
onClick={(e) => {
|
|
76
78
|
e.preventDefault();
|
|
79
|
+
setType("admins");
|
|
77
80
|
}}
|
|
78
81
|
/>
|
|
79
82
|
|
|
@@ -11,12 +11,14 @@ import Checkbox from "../checkBoxes/checkbox/index2";
|
|
|
11
11
|
import avatar from "./assets/images/avatar.png";
|
|
12
12
|
import PreviewModal from "./modals/preview-modal";
|
|
13
13
|
import AssigneesPanel from "./preview-panels/assignees-panel";
|
|
14
|
+
import { IoMdAdd } from "react-icons/io";
|
|
14
15
|
|
|
15
16
|
const AdminRolesAndPermission = () => {
|
|
16
17
|
const navigate = useNavigate();
|
|
17
18
|
const [deleteModal, setDeleteModal] = useState(false);
|
|
18
19
|
const [deleteAssigneeModal, setDeleteAssigneeModal] = useState(false);
|
|
19
20
|
const [assigneePanel, setAssigneePanel] = useState(false);
|
|
21
|
+
const [emptyRoles, setEmptyRoles] = useState(true);
|
|
20
22
|
const handleChange = (newValue) => {
|
|
21
23
|
setChecked(newValue);
|
|
22
24
|
};
|
|
@@ -29,116 +31,129 @@ const AdminRolesAndPermission = () => {
|
|
|
29
31
|
</p>
|
|
30
32
|
</div>
|
|
31
33
|
|
|
32
|
-
{
|
|
33
|
-
<div className="
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
<div className="arp_title">No roles filled yet.</div>
|
|
38
|
-
|
|
39
|
-
<div className="arp_subtitle">
|
|
40
|
-
Here's where you can manage all the roles you create. <br />
|
|
41
|
-
You can start by creating a new role.
|
|
42
|
-
</div>
|
|
34
|
+
{emptyRoles && (
|
|
35
|
+
<div className="arp_main">
|
|
36
|
+
<div className="arp_img">
|
|
37
|
+
<img src={photo} alt="" />
|
|
38
|
+
</div>
|
|
43
39
|
|
|
44
|
-
|
|
45
|
-
text={"Create New Role"}
|
|
46
|
-
styles={{ width: "203px", padding: 10, height: 43, margin: "0 auto" }}
|
|
47
|
-
icon={{ left: true }}
|
|
48
|
-
onClick={(e) => {
|
|
49
|
-
e.preventDefault();
|
|
50
|
-
}}
|
|
51
|
-
/>
|
|
52
|
-
</div> */}
|
|
40
|
+
<div className="arp_title">No roles filled yet.</div>
|
|
53
41
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
outlineColor="transparent"
|
|
59
|
-
heightSize="44px"
|
|
60
|
-
widthSize="100%"
|
|
61
|
-
border="1px solid #ADB2B2"
|
|
62
|
-
// onSubmit={setSearch}
|
|
63
|
-
/>
|
|
42
|
+
<div className="arp_subtitle">
|
|
43
|
+
Here's where you can manage all the roles you create. <br />
|
|
44
|
+
You can start by creating a new role.
|
|
45
|
+
</div>
|
|
64
46
|
|
|
65
47
|
<ButtonComponent
|
|
66
48
|
text={"Create New Role"}
|
|
67
|
-
styles={{
|
|
49
|
+
styles={{
|
|
50
|
+
width: "203px",
|
|
51
|
+
padding: 10,
|
|
52
|
+
height: 43,
|
|
53
|
+
margin: "0 auto",
|
|
54
|
+
}}
|
|
55
|
+
icon={{ left: true, jsx: IoMdAdd }}
|
|
68
56
|
onClick={(e) => {
|
|
69
|
-
|
|
57
|
+
navigate("create")
|
|
70
58
|
}}
|
|
71
59
|
/>
|
|
72
60
|
</div>
|
|
61
|
+
)}
|
|
73
62
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
Role
|
|
86
|
-
</div>
|
|
87
|
-
<div className="rll_no_created">No of Permissions</div>
|
|
88
|
-
<div className="rll_sl_two">Assignees</div>
|
|
89
|
-
<div className="rll_sl_three">Action</div>
|
|
90
|
-
</div>
|
|
63
|
+
{!emptyRoles && (
|
|
64
|
+
<div className="rll_main_body">
|
|
65
|
+
<div className="rll_main_header">
|
|
66
|
+
<SearchBar
|
|
67
|
+
placeholder="Search here"
|
|
68
|
+
outlineColor="transparent"
|
|
69
|
+
heightSize="44px"
|
|
70
|
+
widthSize="100%"
|
|
71
|
+
border="1px solid #ADB2B2"
|
|
72
|
+
// onSubmit={setSearch}
|
|
73
|
+
/>
|
|
91
74
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
defaultValue={item.selection}
|
|
101
|
-
onChange={handleChange}
|
|
102
|
-
className="adm_check"
|
|
103
|
-
/>
|
|
104
|
-
</div>
|
|
105
|
-
{item?.name}
|
|
106
|
-
</div>
|
|
75
|
+
<ButtonComponent
|
|
76
|
+
text={"Create New Role"}
|
|
77
|
+
styles={{ width: "200px", padding: 10, height: 43 }}
|
|
78
|
+
onClick={(e) => {
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
107
83
|
|
|
108
|
-
|
|
84
|
+
<div className="rll_role_section">
|
|
85
|
+
<div className="rll_sl_header">
|
|
86
|
+
<div className="rll_sl_one">
|
|
87
|
+
{" "}
|
|
88
|
+
<Checkbox
|
|
89
|
+
label=""
|
|
90
|
+
color="#ff9900"
|
|
91
|
+
defaultValue={false}
|
|
92
|
+
onChange={handleChange}
|
|
93
|
+
className="adm_check"
|
|
94
|
+
/>
|
|
95
|
+
Role
|
|
96
|
+
</div>
|
|
97
|
+
<div className="rll_no_created">No of Permissions</div>
|
|
98
|
+
<div className="rll_sl_two">Assignees</div>
|
|
99
|
+
<div className="rll_sl_three">Action</div>
|
|
100
|
+
</div>
|
|
109
101
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
102
|
+
<div className="rll_sl_body">
|
|
103
|
+
{categoryList?.map((item, idx) => (
|
|
104
|
+
<div
|
|
105
|
+
className="rll_sl_tr"
|
|
106
|
+
key={idx}
|
|
107
|
+
onClick={() => navigate("")}
|
|
108
|
+
>
|
|
109
|
+
<div className="rll_content_title">
|
|
115
110
|
<div className="rll_img">
|
|
116
|
-
<
|
|
111
|
+
<Checkbox
|
|
112
|
+
label=""
|
|
113
|
+
color="#ff9900"
|
|
114
|
+
defaultValue={item.selection}
|
|
115
|
+
onChange={handleChange}
|
|
116
|
+
className="adm_check"
|
|
117
|
+
/>
|
|
117
118
|
</div>
|
|
118
|
-
|
|
119
|
-
|
|
119
|
+
{item?.name}
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div className="rll_nc_users"> {item?.permissions}</div>
|
|
123
|
+
|
|
124
|
+
<div className="rll_nc_assign">
|
|
125
|
+
<div className="rll_img_group">
|
|
126
|
+
<div className="rll_img">
|
|
127
|
+
<img src={avatar} alt="" />
|
|
128
|
+
</div>
|
|
129
|
+
<div className="rll_img">
|
|
130
|
+
<img src={avatar} alt="" />
|
|
131
|
+
</div>
|
|
132
|
+
<div className="rll_img">
|
|
133
|
+
<img src={avatar} alt="" />
|
|
134
|
+
</div>
|
|
120
135
|
</div>
|
|
136
|
+
<span> +24 Others</span>
|
|
121
137
|
</div>
|
|
122
|
-
<span> +24 Others</span>
|
|
123
|
-
</div>
|
|
124
138
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
139
|
+
<div className="rll_action">
|
|
140
|
+
<span className="">
|
|
141
|
+
<MdDeleteOutline
|
|
142
|
+
color="#F95454"
|
|
143
|
+
onClick={() => setDeleteModal(true)}
|
|
144
|
+
/>
|
|
145
|
+
</span>
|
|
146
|
+
<span className="">
|
|
147
|
+
<PencilIcon />
|
|
148
|
+
Edit
|
|
149
|
+
</span>
|
|
150
|
+
</div>
|
|
136
151
|
</div>
|
|
137
|
-
|
|
138
|
-
|
|
152
|
+
))}
|
|
153
|
+
</div>
|
|
139
154
|
</div>
|
|
140
155
|
</div>
|
|
141
|
-
|
|
156
|
+
)}
|
|
142
157
|
|
|
143
158
|
<PreviewModal
|
|
144
159
|
isOpen={deleteModal}
|
|
@@ -150,7 +165,11 @@ const AdminRolesAndPermission = () => {
|
|
|
150
165
|
isOpen={deleteAssigneeModal}
|
|
151
166
|
onRequestClose={() => setDeleteAssigneeModal(false)}
|
|
152
167
|
title={"Are you sure you want to remove Saul Hayes?"}
|
|
153
|
-
subTitle={
|
|
168
|
+
subTitle={
|
|
169
|
+
<span>
|
|
170
|
+
Admin will no longer have access to <br /> their account.
|
|
171
|
+
</span>
|
|
172
|
+
}
|
|
154
173
|
secondaryButtonText={"No"}
|
|
155
174
|
primaryButtonText={"Yes, Remove"}
|
|
156
175
|
/>
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import styled from "styled-components";
|
|
2
2
|
|
|
3
3
|
export const AdminRolesAndPermissionContainer = styled.div`
|
|
4
|
+
button {
|
|
5
|
+
svg {
|
|
6
|
+
width: 24px;
|
|
7
|
+
height: 24px;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
4
10
|
.arp_header {
|
|
5
11
|
display: flex;
|
|
6
12
|
align-items: center;
|
|
@@ -259,7 +265,6 @@ export const AdminRolesAndPermissionContainer = styled.div`
|
|
|
259
265
|
align-items: center;
|
|
260
266
|
gap: 4px;
|
|
261
267
|
cursor: pointer;
|
|
262
|
-
|
|
263
268
|
}
|
|
264
269
|
}
|
|
265
270
|
}
|
package/src/components/index.js
CHANGED
|
@@ -47,3 +47,4 @@ export { default as AdminDashboard } from "./AdminDashboard/admin-dashboard";
|
|
|
47
47
|
export { default as AdminNotification } from './AdminNotification';
|
|
48
48
|
export { default as AdminSecurity } from './AdminSecuritySettings';
|
|
49
49
|
export { default as GraphMap } from './GraphMap';
|
|
50
|
+
export { default as AdminRolesPermissions } from './AdminRolesPermission';
|