@visns-studio/visns-components 1.5.3 → 1.5.4

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.
Files changed (2) hide show
  1. package/components/crm/visns-navigation.jsx +220 -219
  2. package/package.json +53 -53
package/components/crm/visns-navigation.jsx CHANGED
@@ -1,230 +1,231 @@
1
1
  import React, { useEffect, useState } from "react";
2
- import { Link, useLocation } from "react-router-dom";
2
+ import { Link, useLocation, useNavigate } from "react-router-dom";
3
3
  import {
4
- ArrowCycle,
5
- BookClose,
6
- Bug,
7
- Calendar,
8
- Clipboard,
9
- DoubleSword,
10
- Draft,
11
- Grid,
12
- LightBulb,
13
- PeopleGroup,
14
- Person,
15
- SettingsVertical,
16
- SignOut,
17
- Shield,
18
- Ticket,
4
+ ArrowCycle,
5
+ BookClose,
6
+ Bug,
7
+ Calendar,
8
+ Clipboard,
9
+ DoubleSword,
10
+ Draft,
11
+ Grid,
12
+ LightBulb,
13
+ PeopleGroup,
14
+ Person,
15
+ SettingsVertical,
16
+ SignOut,
17
+ Shield,
18
+ Ticket,
19
19
  } from "akar-icons";
20
20
 
21
21
  import CustomFetch from "./visns-fetch";
22
22
  import Notification from "./visns-notification";
23
23
 
24
24
  function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
25
- const location = useLocation();
26
- const currentPage = location.pathname.substr(1) || "dashboard";
27
- const [navData, setNavData] = useState(navConfig);
28
- const [isScrolled, setIsScrolled] = useState(false);
29
- const appNavClasses = `app-nav ${isScrolled ? "navscrolled" : ""}`;
30
-
31
- const handleLogout = () => {
32
- CustomFetch("/logout", "GET", {}, () => {
33
- setSystemAuth(false);
34
- navigate("/login");
35
- });
36
- };
37
-
38
- const renderSetting = (n) => {
39
- const iconComponents = {
40
- bug: Bug,
41
- calendar: Calendar,
42
- person: Person,
43
- shield: Shield,
44
- signOut: SignOut,
45
- };
46
-
47
- if (n.id === "notifications") {
48
- return (
49
- <li>
50
- <Notification setSystemAuth={setSystemAuth} />
51
- </li>
52
- );
53
- } else if (n.id === "logout") {
54
- const IconComponent = iconComponents[n.icon];
55
- return (
56
- <li>
57
- <button
58
- title={n.label}
59
- data-tooltip-id="system-tooltip"
60
- data-tooltip-content={n.label}
61
- onClick={handleLogout}
62
- >
63
- <IconComponent size={19} strokeWidth={2} />
64
- </button>
65
- </li>
66
- );
67
- } else {
68
- const IconComponent = iconComponents[n.icon];
69
-
70
- return (
71
- <li>
72
- <Link
73
- to={n.url}
74
- data-tooltip-id="system-tooltip"
75
- data-tooltip-content={n.label}
76
- className="tooltip"
77
- target={n.target ? n.target : "_self"}
78
- >
79
- <IconComponent size={19} strokeWidth={2} />
80
- </Link>
81
- </li>
82
- );
83
- }
84
- };
85
-
86
- const renderNav = (n) => {
87
- const iconComponents = {
88
- arrowCycle: ArrowCycle,
89
- bookClose: BookClose,
90
- calendar: Calendar,
91
- clipboard: Clipboard,
92
- doubleSword: DoubleSword,
93
- draft: Draft,
94
- grid: Grid,
95
- lightBulb: LightBulb,
96
- peopleGroup: PeopleGroup,
97
- settingsVertical: SettingsVertical,
98
- ticket: Ticket,
99
- };
100
-
101
- const IconComponent = iconComponents[n.icon];
102
-
103
- const renderChildren = () => {
104
- if (n.children && n.children.length > 0) {
105
- return (
106
- <ul>
107
- {n.children.map((child, childKey) => (
108
- <li
109
- className="sub-nav-item"
110
- key={`nav-child-${childKey}`}
111
- >
112
- <Link to={child.url} title={child.label}>
113
- {child.label}
114
- </Link>
115
- </li>
116
- ))}
117
- </ul>
118
- );
119
- }
120
- return null;
121
- };
122
-
123
- return (
124
- <li className={n.class}>
125
- {n.url ? (
126
- <Link to={n.url}>
127
- <IconComponent strokeWidth={2} size={18} />
128
- {n.label}
129
- </Link>
130
- ) : (
131
- <span title={n.label}>
132
- <IconComponent strokeWidth={2} size={18} />
133
- {n.label}
134
- </span>
135
- )}
136
- {renderChildren()}
137
- </li>
138
- );
139
- };
140
-
141
- useEffect(() => {
142
- const permissions = userProfile.roles[0].permissions;
143
-
144
- setNavData((prevNavData) => {
145
- const updatePermissions = (nav) => {
146
- const matchingPermission = permissions.find(
147
- (permission) => permission.name === nav.permissionKey
148
- );
149
-
150
- if (matchingPermission) {
151
- return {
152
- ...nav,
153
- permission: true,
154
- };
155
- }
156
-
157
- return nav;
158
- };
159
-
160
- const updatedNavigations =
161
- prevNavData.navigations.map(updatePermissions);
162
- const updatedSettings = prevNavData.settings.map(updatePermissions);
163
-
164
- return {
165
- ...prevNavData,
166
- navigations: updatedNavigations,
167
- settings: updatedSettings,
168
- };
169
- });
170
- }, [userProfile]);
171
-
172
- useEffect(() => {
173
- setNavData((prevNavData) => ({
174
- ...prevNavData,
175
- navigations: prevNavData.navigations.map((nav) =>
176
- nav.id === currentPage
177
- ? { ...nav, class: "nav-item active" }
178
- : { ...nav, class: "nav-item" }
179
- ),
180
- }));
181
- }, [currentPage]);
182
-
183
- useEffect(() => {
184
- function handleScroll() {
185
- setIsScrolled(window.scrollY > 0);
186
- }
187
-
188
- window.addEventListener("scroll", handleScroll);
189
- return () => {
190
- window.removeEventListener("scroll", handleScroll);
191
- };
192
- }, []);
193
-
194
- return (
195
- <header className="header">
196
- <div className="hwrap">
197
- <div className="logo">
198
- <Link to="/">
199
- <img src={logo} alt="Visns Studio CRM" />
200
- </Link>
201
- </div>
202
- <div className="navwrap">
203
- <ul className={appNavClasses}>
204
- {navData.navigations.map((nav, navKey) =>
205
- nav.permission === true ||
206
- nav.permissionKey === "" ? (
207
- <React.Fragment key={`nav-item-${navKey}`}>
208
- {renderNav(nav)}
209
- </React.Fragment>
210
- ) : null
211
- )}
212
- </ul>
213
- </div>
214
- <div className="hactions">
215
- <ul>
216
- {navData.settings.map((setting, settingKey) =>
217
- setting.permission === true ? (
218
- <React.Fragment key={`setting-${settingKey}`}>
219
- {renderSetting(setting)}
220
- </React.Fragment>
221
- ) : null
222
- )}
223
- </ul>
224
- </div>
225
- </div>
226
- </header>
227
- );
25
+ const location = useLocation();
26
+ const navigate = useNavigate();
27
+ const currentPage = location.pathname.substr(1) || "dashboard";
28
+ const [navData, setNavData] = useState(navConfig);
29
+ const [isScrolled, setIsScrolled] = useState(false);
30
+ const appNavClasses = `app-nav ${isScrolled ? "navscrolled" : ""}`;
31
+
32
+ const handleLogout = () => {
33
+ CustomFetch("/logout", "GET", {}, () => {
34
+ setSystemAuth(false);
35
+ navigate("/login");
36
+ });
37
+ };
38
+
39
+ const renderSetting = (n) => {
40
+ const iconComponents = {
41
+ bug: Bug,
42
+ calendar: Calendar,
43
+ person: Person,
44
+ shield: Shield,
45
+ signOut: SignOut,
46
+ };
47
+
48
+ if (n.id === "notifications") {
49
+ return (
50
+ <li>
51
+ <Notification setSystemAuth={setSystemAuth} />
52
+ </li>
53
+ );
54
+ } else if (n.id === "logout") {
55
+ const IconComponent = iconComponents[n.icon];
56
+ return (
57
+ <li>
58
+ <button
59
+ title={n.label}
60
+ data-tooltip-id="system-tooltip"
61
+ data-tooltip-content={n.label}
62
+ onClick={handleLogout}
63
+ >
64
+ <IconComponent size={19} strokeWidth={2} />
65
+ </button>
66
+ </li>
67
+ );
68
+ } else {
69
+ const IconComponent = iconComponents[n.icon];
70
+
71
+ return (
72
+ <li>
73
+ <Link
74
+ to={n.url}
75
+ data-tooltip-id="system-tooltip"
76
+ data-tooltip-content={n.label}
77
+ className="tooltip"
78
+ target={n.target ? n.target : "_self"}
79
+ >
80
+ <IconComponent size={19} strokeWidth={2} />
81
+ </Link>
82
+ </li>
83
+ );
84
+ }
85
+ };
86
+
87
+ const renderNav = (n) => {
88
+ const iconComponents = {
89
+ arrowCycle: ArrowCycle,
90
+ bookClose: BookClose,
91
+ calendar: Calendar,
92
+ clipboard: Clipboard,
93
+ doubleSword: DoubleSword,
94
+ draft: Draft,
95
+ grid: Grid,
96
+ lightBulb: LightBulb,
97
+ peopleGroup: PeopleGroup,
98
+ settingsVertical: SettingsVertical,
99
+ ticket: Ticket,
100
+ };
101
+
102
+ const IconComponent = iconComponents[n.icon];
103
+
104
+ const renderChildren = () => {
105
+ if (n.children && n.children.length > 0) {
106
+ return (
107
+ <ul>
108
+ {n.children.map((child, childKey) => (
109
+ <li
110
+ className="sub-nav-item"
111
+ key={`nav-child-${childKey}`}
112
+ >
113
+ <Link to={child.url} title={child.label}>
114
+ {child.label}
115
+ </Link>
116
+ </li>
117
+ ))}
118
+ </ul>
119
+ );
120
+ }
121
+ return null;
122
+ };
123
+
124
+ return (
125
+ <li className={n.class}>
126
+ {n.url ? (
127
+ <Link to={n.url}>
128
+ <IconComponent strokeWidth={2} size={18} />
129
+ {n.label}
130
+ </Link>
131
+ ) : (
132
+ <span title={n.label}>
133
+ <IconComponent strokeWidth={2} size={18} />
134
+ {n.label}
135
+ </span>
136
+ )}
137
+ {renderChildren()}
138
+ </li>
139
+ );
140
+ };
141
+
142
+ useEffect(() => {
143
+ const permissions = userProfile.roles[0].permissions;
144
+
145
+ setNavData((prevNavData) => {
146
+ const updatePermissions = (nav) => {
147
+ const matchingPermission = permissions.find(
148
+ (permission) => permission.name === nav.permissionKey
149
+ );
150
+
151
+ if (matchingPermission) {
152
+ return {
153
+ ...nav,
154
+ permission: true,
155
+ };
156
+ }
157
+
158
+ return nav;
159
+ };
160
+
161
+ const updatedNavigations =
162
+ prevNavData.navigations.map(updatePermissions);
163
+ const updatedSettings = prevNavData.settings.map(updatePermissions);
164
+
165
+ return {
166
+ ...prevNavData,
167
+ navigations: updatedNavigations,
168
+ settings: updatedSettings,
169
+ };
170
+ });
171
+ }, [userProfile]);
172
+
173
+ useEffect(() => {
174
+ setNavData((prevNavData) => ({
175
+ ...prevNavData,
176
+ navigations: prevNavData.navigations.map((nav) =>
177
+ nav.id === currentPage
178
+ ? { ...nav, class: "nav-item active" }
179
+ : { ...nav, class: "nav-item" }
180
+ ),
181
+ }));
182
+ }, [currentPage]);
183
+
184
+ useEffect(() => {
185
+ function handleScroll() {
186
+ setIsScrolled(window.scrollY > 0);
187
+ }
188
+
189
+ window.addEventListener("scroll", handleScroll);
190
+ return () => {
191
+ window.removeEventListener("scroll", handleScroll);
192
+ };
193
+ }, []);
194
+
195
+ return (
196
+ <header className="header">
197
+ <div className="hwrap">
198
+ <div className="logo">
199
+ <Link to="/">
200
+ <img src={logo} alt="Visns Studio CRM" />
201
+ </Link>
202
+ </div>
203
+ <div className="navwrap">
204
+ <ul className={appNavClasses}>
205
+ {navData.navigations.map((nav, navKey) =>
206
+ nav.permission === true ||
207
+ nav.permissionKey === "" ? (
208
+ <React.Fragment key={`nav-item-${navKey}`}>
209
+ {renderNav(nav)}
210
+ </React.Fragment>
211
+ ) : null
212
+ )}
213
+ </ul>
214
+ </div>
215
+ <div className="hactions">
216
+ <ul>
217
+ {navData.settings.map((setting, settingKey) =>
218
+ setting.permission === true ? (
219
+ <React.Fragment key={`setting-${settingKey}`}>
220
+ {renderSetting(setting)}
221
+ </React.Fragment>
222
+ ) : null
223
+ )}
224
+ </ul>
225
+ </div>
226
+ </div>
227
+ </header>
228
+ );
228
229
  }
229
230
 
230
231
  export default Navigation;
package/package.json CHANGED
@@ -1,55 +1,55 @@
1
1
  {
2
- "dependencies": {
3
- "@inovua/reactdatagrid-community": "^5.9.4",
4
- "@inovua/reactdatagrid-enterprise": "^5.9.4",
5
- "akar-icons": "^1.9.28",
6
- "awesome-debounce-promise": "^2.1.0",
7
- "axios": "^1.4.0",
8
- "framer-motion": "^10.12.16",
9
- "html-react-parser": "^4.0.0",
10
- "lodash": "^4.17.21",
11
- "moment": "^2.29.4",
12
- "numeral": "^2.0.6",
13
- "quill-image-uploader": "^1.3.0",
14
- "react-confirm-alert": "^3.0.6",
15
- "react-datepicker": "^4.14.0",
16
- "react-dropzone": "^14.2.3",
17
- "react-number-format": "^5.2.2",
18
- "react-promise-tracker": "^2.1.1",
19
- "react-quill": "^2.0.0",
20
- "react-select": "^5.7.3",
21
- "react-slugify": "^3.0.2",
22
- "react-sortable-hoc": "^2.0.0",
23
- "react-toastify": "^9.1.3",
24
- "react-toggle": "^4.1.3",
25
- "react-tooltip": "^5.14.0",
26
- "react-window": "^1.8.9",
27
- "reactjs-popup": "^2.0.5"
28
- },
29
- "devDependecies": {
30
- "react": "^18.2.0",
31
- "react-dom": "^18.2.0"
32
- },
33
- "peerDependencies": {
34
- "react": "^17.0.1",
35
- "react-dom": "^17.0.1"
36
- },
37
- "name": "@visns-studio/visns-components",
38
- "version": "1.5.3",
39
- "description": "Various packages to assist in the development of our Custom Applications.",
40
- "main": "index.js",
41
- "devDependencies": {},
42
- "scripts": {
43
- "test": "echo \"Error: no test specified\" && exit 1"
44
- },
45
- "repository": {
46
- "type": "git",
47
- "url": "git+https://github.com/visnsstudio/visns-components.git"
48
- },
49
- "author": "Visns Studio",
50
- "license": "ISC",
51
- "bugs": {
52
- "url": "https://github.com/visnsstudio/visns-components/issues"
53
- },
54
- "homepage": "https://github.com/visnsstudio/visns-components#readme"
2
+ "dependencies": {
3
+ "@inovua/reactdatagrid-community": "^5.9.4",
4
+ "@inovua/reactdatagrid-enterprise": "^5.9.4",
5
+ "akar-icons": "^1.9.28",
6
+ "awesome-debounce-promise": "^2.1.0",
7
+ "axios": "^1.4.0",
8
+ "framer-motion": "^10.12.16",
9
+ "html-react-parser": "^4.0.0",
10
+ "lodash": "^4.17.21",
11
+ "moment": "^2.29.4",
12
+ "numeral": "^2.0.6",
13
+ "quill-image-uploader": "^1.3.0",
14
+ "react-confirm-alert": "^3.0.6",
15
+ "react-datepicker": "^4.14.0",
16
+ "react-dropzone": "^14.2.3",
17
+ "react-number-format": "^5.2.2",
18
+ "react-promise-tracker": "^2.1.1",
19
+ "react-quill": "^2.0.0",
20
+ "react-select": "^5.7.3",
21
+ "react-slugify": "^3.0.2",
22
+ "react-sortable-hoc": "^2.0.0",
23
+ "react-toastify": "^9.1.3",
24
+ "react-toggle": "^4.1.3",
25
+ "react-tooltip": "^5.14.0",
26
+ "react-window": "^1.8.9",
27
+ "reactjs-popup": "^2.0.5"
28
+ },
29
+ "devDependecies": {
30
+ "react": "^18.2.0",
31
+ "react-dom": "^18.2.0"
32
+ },
33
+ "peerDependencies": {
34
+ "react": "^17.0.1",
35
+ "react-dom": "^17.0.1"
36
+ },
37
+ "name": "@visns-studio/visns-components",
38
+ "version": "1.5.4",
39
+ "description": "Various packages to assist in the development of our Custom Applications.",
40
+ "main": "index.js",
41
+ "devDependencies": {},
42
+ "scripts": {
43
+ "test": "echo \"Error: no test specified\" && exit 1"
44
+ },
45
+ "repository": {
46
+ "type": "git",
47
+ "url": "git+https://github.com/visnsstudio/visns-components.git"
48
+ },
49
+ "author": "Visns Studio",
50
+ "license": "ISC",
51
+ "bugs": {
52
+ "url": "https://github.com/visnsstudio/visns-components/issues"
53
+ },
54
+ "homepage": "https://github.com/visnsstudio/visns-components#readme"
55
55
  }