@visns-studio/visns-components 1.7.1 → 1.7.2

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 (3) hide show
  1. package/components/crm/visns-data-grid.jsx +1735 -1735
  2. package/components/crm/visns-navigation.jsx +264 -262
  3. package/package.json +1 -1
package/components/crm/visns-navigation.jsx CHANGED
@@ -1,298 +1,300 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { Link, useLocation, useNavigate } from "react-router-dom";
3
3
  import {
4
- ArrowCycle,
5
- BookClose,
6
- Briefcase,
7
- Bug,
8
- Calendar,
9
- Clipboard,
10
- DoubleSword,
11
- Draft,
12
- Grid,
13
- Home,
14
- LightBulb,
15
- PeopleGroup,
16
- PeopleMultiple,
17
- Person,
18
- SettingsVertical,
19
- SignOut,
20
- Shield,
21
- StatisticUp,
22
- Ticket,
23
- Utensils,
4
+ ArrowCycle,
5
+ BookClose,
6
+ Briefcase,
7
+ Bug,
8
+ Calendar,
9
+ Clipboard,
10
+ DoubleSword,
11
+ Draft,
12
+ Grid,
13
+ Home,
14
+ LightBulb,
15
+ Newspaper,
16
+ PeopleGroup,
17
+ PeopleMultiple,
18
+ Person,
19
+ SettingsVertical,
20
+ SignOut,
21
+ Shield,
22
+ StatisticUp,
23
+ Ticket,
24
+ Utensils,
24
25
  } from "akar-icons";
25
26
 
26
27
  import CustomFetch from "./visns-fetch";
27
28
  import Notification from "./visns-notification";
28
29
 
29
30
  function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
30
- const location = useLocation();
31
- const navigate = useNavigate();
32
- const currentPage = location.pathname.substr(1) || "dashboard";
33
- const [navData, setNavData] = useState(navConfig);
34
- const [isScrolled, setIsScrolled] = useState(false);
35
- const appNavClasses = `app-nav ${isScrolled ? "navscrolled" : ""}`;
31
+ const location = useLocation();
32
+ const navigate = useNavigate();
33
+ const currentPage = location.pathname.substr(1) || "dashboard";
34
+ const [navData, setNavData] = useState(navConfig);
35
+ const [isScrolled, setIsScrolled] = useState(false);
36
+ const appNavClasses = `app-nav ${isScrolled ? "navscrolled" : ""}`;
36
37
 
37
- const handleLogout = () => {
38
- CustomFetch("/logout", "GET", {}, () => {
39
- setSystemAuth(false);
40
- navigate("/login");
41
- });
42
- };
38
+ const handleLogout = () => {
39
+ CustomFetch("/logout", "GET", {}, () => {
40
+ setSystemAuth(false);
41
+ navigate("/login");
42
+ });
43
+ };
43
44
 
44
- const renderSetting = (n) => {
45
- const iconComponents = {
46
- bug: Bug,
47
- calendar: Calendar,
48
- person: Person,
49
- shield: Shield,
50
- signOut: SignOut,
51
- };
45
+ const renderSetting = (n) => {
46
+ const iconComponents = {
47
+ bug: Bug,
48
+ calendar: Calendar,
49
+ person: Person,
50
+ shield: Shield,
51
+ signOut: SignOut,
52
+ };
52
53
 
53
- if (n.id === "notifications") {
54
- return (
55
- <li>
56
- <Notification setSystemAuth={setSystemAuth} />
57
- </li>
58
- );
59
- } else if (n.id === "logout") {
60
- const IconComponent = iconComponents[n.icon];
61
- return (
62
- <li>
63
- <button
64
- title={n.label}
65
- data-tooltip-id="system-tooltip"
66
- data-tooltip-content={n.label}
67
- onClick={handleLogout}
68
- >
69
- <IconComponent size={19} strokeWidth={2} />
70
- </button>
71
- </li>
72
- );
73
- } else {
74
- const IconComponent = iconComponents[n.icon];
54
+ if (n.id === "notifications") {
55
+ return (
56
+ <li>
57
+ <Notification setSystemAuth={setSystemAuth} />
58
+ </li>
59
+ );
60
+ } else if (n.id === "logout") {
61
+ const IconComponent = iconComponents[n.icon];
62
+ return (
63
+ <li>
64
+ <button
65
+ title={n.label}
66
+ data-tooltip-id="system-tooltip"
67
+ data-tooltip-content={n.label}
68
+ onClick={handleLogout}
69
+ >
70
+ <IconComponent size={19} strokeWidth={2} />
71
+ </button>
72
+ </li>
73
+ );
74
+ } else {
75
+ const IconComponent = iconComponents[n.icon];
75
76
 
76
- return (
77
- <li>
78
- <Link
79
- to={n.url}
80
- data-tooltip-id="system-tooltip"
81
- data-tooltip-content={n.label}
82
- className="tooltip"
83
- target={n.target ? n.target : "_self"}
84
- >
85
- <IconComponent size={19} strokeWidth={2} />
86
- </Link>
87
- </li>
88
- );
89
- }
90
- };
77
+ return (
78
+ <li>
79
+ <Link
80
+ to={n.url}
81
+ data-tooltip-id="system-tooltip"
82
+ data-tooltip-content={n.label}
83
+ className="tooltip"
84
+ target={n.target ? n.target : "_self"}
85
+ >
86
+ <IconComponent size={19} strokeWidth={2} />
87
+ </Link>
88
+ </li>
89
+ );
90
+ }
91
+ };
91
92
 
92
- const renderNav = (n) => {
93
- const iconComponents = {
94
- arrowCycle: ArrowCycle,
95
- bookClose: BookClose,
96
- briefcase: Briefcase,
97
- calendar: Calendar,
98
- clipboard: Clipboard,
99
- doubleSword: DoubleSword,
100
- draft: Draft,
101
- grid: Grid,
102
- home: Home,
103
- lightBulb: LightBulb,
104
- peopleGroup: PeopleGroup,
105
- peopleMultiple: PeopleMultiple,
106
- settingsVertical: SettingsVertical,
107
- statisticUp: StatisticUp,
108
- ticket: Ticket,
109
- utensils: Utensils,
110
- };
93
+ const renderNav = (n) => {
94
+ const iconComponents = {
95
+ arrowCycle: ArrowCycle,
96
+ bookClose: BookClose,
97
+ briefcase: Briefcase,
98
+ calendar: Calendar,
99
+ clipboard: Clipboard,
100
+ doubleSword: DoubleSword,
101
+ draft: Draft,
102
+ grid: Grid,
103
+ home: Home,
104
+ lightBulb: LightBulb,
105
+ newspaper: Newspaper,
106
+ peopleGroup: PeopleGroup,
107
+ peopleMultiple: PeopleMultiple,
108
+ settingsVertical: SettingsVertical,
109
+ statisticUp: StatisticUp,
110
+ ticket: Ticket,
111
+ utensils: Utensils,
112
+ };
111
113
 
112
- const IconComponent = iconComponents[n.icon];
114
+ const IconComponent = iconComponents[n.icon];
113
115
 
114
- const renderChildren = () => {
115
- if (n.children && n.children.length > 0) {
116
- return (
117
- <ul>
118
- {n.children.map(
119
- (child, childKey) =>
120
- child.permission === true && (
121
- <li
122
- className="sub-nav-item"
123
- key={`nav-child-${childKey}`}
124
- >
125
- <Link
126
- to={child.url}
127
- title={child.label}
128
- >
129
- {child.label}
130
- </Link>
131
- </li>
132
- )
133
- )}
134
- </ul>
135
- );
136
- }
137
- return null;
138
- };
116
+ const renderChildren = () => {
117
+ if (n.children && n.children.length > 0) {
118
+ return (
119
+ <ul>
120
+ {n.children.map(
121
+ (child, childKey) =>
122
+ child.permission === true && (
123
+ <li
124
+ className="sub-nav-item"
125
+ key={`nav-child-${childKey}`}
126
+ >
127
+ <Link
128
+ to={child.url}
129
+ title={child.label}
130
+ >
131
+ {child.label}
132
+ </Link>
133
+ </li>
134
+ )
135
+ )}
136
+ </ul>
137
+ );
138
+ }
139
+ return null;
140
+ };
139
141
 
140
- return (
141
- <li className={n.class}>
142
- {n.url ? (
143
- <Link to={n.url}>
144
- <IconComponent strokeWidth={2} size={18} />
145
- {n.label}
146
- </Link>
147
- ) : (
148
- <span title={n.label}>
149
- <IconComponent strokeWidth={2} size={18} />
150
- {n.label}
151
- </span>
152
- )}
153
- {renderChildren()}
154
- </li>
155
- );
156
- };
142
+ return (
143
+ <li className={n.class}>
144
+ {n.url ? (
145
+ <Link to={n.url}>
146
+ <IconComponent strokeWidth={2} size={18} />
147
+ {n.label}
148
+ </Link>
149
+ ) : (
150
+ <span title={n.label}>
151
+ <IconComponent strokeWidth={2} size={18} />
152
+ {n.label}
153
+ </span>
154
+ )}
155
+ {renderChildren()}
156
+ </li>
157
+ );
158
+ };
157
159
 
158
- useEffect(() => {
159
- const permissions = userProfile.roles[0].permissions.map(
160
- (permission) => permission.name
161
- );
160
+ useEffect(() => {
161
+ const permissions = userProfile.roles[0].permissions.map(
162
+ (permission) => permission.name
163
+ );
162
164
 
163
- setNavData((prevNavData) => {
164
- const updatePermissions = (nav) => {
165
- if (nav.children && nav.children.length > 0) {
166
- const updatedChildren = nav.children
167
- .map(updatePermissions)
168
- .filter(Boolean);
169
- const childPermission = updatedChildren.length > 0;
165
+ setNavData((prevNavData) => {
166
+ const updatePermissions = (nav) => {
167
+ if (nav.children && nav.children.length > 0) {
168
+ const updatedChildren = nav.children
169
+ .map(updatePermissions)
170
+ .filter(Boolean);
171
+ const childPermission = updatedChildren.length > 0;
170
172
 
171
- if (nav.permissionKey) {
172
- const matchingPermission = permissions.includes(
173
- nav.permissionKey
174
- );
173
+ if (nav.permissionKey) {
174
+ const matchingPermission = permissions.includes(
175
+ nav.permissionKey
176
+ );
175
177
 
176
- return {
177
- ...nav,
178
- permission: matchingPermission,
179
- children: updatedChildren,
180
- };
181
- } else {
182
- return {
183
- ...nav,
184
- permission: childPermission,
185
- children: updatedChildren,
186
- };
187
- }
188
- }
178
+ return {
179
+ ...nav,
180
+ permission: matchingPermission,
181
+ children: updatedChildren,
182
+ };
183
+ } else {
184
+ return {
185
+ ...nav,
186
+ permission: childPermission,
187
+ children: updatedChildren,
188
+ };
189
+ }
190
+ }
189
191
 
190
- if (nav.permissionKey) {
191
- const matchingPermission = permissions.includes(
192
- nav.permissionKey
193
- );
192
+ if (nav.permissionKey) {
193
+ const matchingPermission = permissions.includes(
194
+ nav.permissionKey
195
+ );
194
196
 
195
- return {
196
- ...nav,
197
- permission: matchingPermission,
198
- };
199
- }
197
+ return {
198
+ ...nav,
199
+ permission: matchingPermission,
200
+ };
201
+ }
200
202
 
201
- return {
202
- ...nav,
203
- permission: true,
204
- };
205
- };
203
+ return {
204
+ ...nav,
205
+ permission: true,
206
+ };
207
+ };
206
208
 
207
- const updatedNavigations = prevNavData.navigations
208
- .map(updatePermissions)
209
- .filter(Boolean);
210
- const updatedSettings = prevNavData.settings
211
- .map(updatePermissions)
212
- .filter(Boolean);
209
+ const updatedNavigations = prevNavData.navigations
210
+ .map(updatePermissions)
211
+ .filter(Boolean);
212
+ const updatedSettings = prevNavData.settings
213
+ .map(updatePermissions)
214
+ .filter(Boolean);
213
215
 
214
- return {
215
- ...prevNavData,
216
- navigations: updatedNavigations,
217
- settings: updatedSettings,
218
- };
219
- });
220
- }, [userProfile]);
216
+ return {
217
+ ...prevNavData,
218
+ navigations: updatedNavigations,
219
+ settings: updatedSettings,
220
+ };
221
+ });
222
+ }, [userProfile]);
221
223
 
222
- useEffect(() => {
223
- setNavData((prevNavData) => {
224
- const updateNavItems = (nav) => {
225
- const cleanUrl = (url) => {
226
- return url && url.startsWith("/") ? url.substr(1) : url;
227
- };
224
+ useEffect(() => {
225
+ setNavData((prevNavData) => {
226
+ const updateNavItems = (nav) => {
227
+ const cleanUrl = (url) => {
228
+ return url && url.startsWith("/") ? url.substr(1) : url;
229
+ };
228
230
 
229
- const currentUrl = cleanUrl(currentPage);
231
+ const currentUrl = cleanUrl(currentPage);
230
232
 
231
- if (
232
- cleanUrl(nav.url) === currentUrl ||
233
- (nav.children &&
234
- nav.children.some(
235
- (child) => cleanUrl(child.url) === currentUrl
236
- ))
237
- ) {
238
- return { ...nav, class: "nav-item active" };
239
- } else {
240
- return { ...nav, class: "nav-item" };
241
- }
242
- };
233
+ if (
234
+ cleanUrl(nav.url) === currentUrl ||
235
+ (nav.children &&
236
+ nav.children.some(
237
+ (child) => cleanUrl(child.url) === currentUrl
238
+ ))
239
+ ) {
240
+ return { ...nav, class: "nav-item active" };
241
+ } else {
242
+ return { ...nav, class: "nav-item" };
243
+ }
244
+ };
243
245
 
244
- return {
245
- ...prevNavData,
246
- navigations: prevNavData.navigations.map(updateNavItems),
247
- };
248
- });
249
- }, [currentPage]);
246
+ return {
247
+ ...prevNavData,
248
+ navigations: prevNavData.navigations.map(updateNavItems),
249
+ };
250
+ });
251
+ }, [currentPage]);
250
252
 
251
- useEffect(() => {
252
- function handleScroll() {
253
- setIsScrolled(window.scrollY > 0);
254
- }
253
+ useEffect(() => {
254
+ function handleScroll() {
255
+ setIsScrolled(window.scrollY > 0);
256
+ }
255
257
 
256
- window.addEventListener("scroll", handleScroll);
257
- return () => {
258
- window.removeEventListener("scroll", handleScroll);
259
- };
260
- }, []);
258
+ window.addEventListener("scroll", handleScroll);
259
+ return () => {
260
+ window.removeEventListener("scroll", handleScroll);
261
+ };
262
+ }, []);
261
263
 
262
- return (
263
- <header className="header">
264
- <div className="hwrap">
265
- <div className="logo">
266
- <Link to="/">
267
- <img src={logo} alt="Visns Studio CRM" />
268
- </Link>
269
- </div>
270
- <div className="navwrap">
271
- <ul className={appNavClasses}>
272
- {navData.navigations.map((nav, navKey) =>
273
- nav.permission === true ||
274
- nav.permissionKey === "" ? (
275
- <React.Fragment key={`nav-item-${navKey}`}>
276
- {renderNav(nav)}
277
- </React.Fragment>
278
- ) : null
279
- )}
280
- </ul>
281
- </div>
282
- <div className="hactions">
283
- <ul>
284
- {navData.settings.map((setting, settingKey) =>
285
- setting.permission === true ? (
286
- <React.Fragment key={`setting-${settingKey}`}>
287
- {renderSetting(setting)}
288
- </React.Fragment>
289
- ) : null
290
- )}
291
- </ul>
292
- </div>
293
- </div>
294
- </header>
295
- );
264
+ return (
265
+ <header className="header">
266
+ <div className="hwrap">
267
+ <div className="logo">
268
+ <Link to="/">
269
+ <img src={logo} alt="Visns Studio CRM" />
270
+ </Link>
271
+ </div>
272
+ <div className="navwrap">
273
+ <ul className={appNavClasses}>
274
+ {navData.navigations.map((nav, navKey) =>
275
+ nav.permission === true ||
276
+ nav.permissionKey === "" ? (
277
+ <React.Fragment key={`nav-item-${navKey}`}>
278
+ {renderNav(nav)}
279
+ </React.Fragment>
280
+ ) : null
281
+ )}
282
+ </ul>
283
+ </div>
284
+ <div className="hactions">
285
+ <ul>
286
+ {navData.settings.map((setting, settingKey) =>
287
+ setting.permission === true ? (
288
+ <React.Fragment key={`setting-${settingKey}`}>
289
+ {renderSetting(setting)}
290
+ </React.Fragment>
291
+ ) : null
292
+ )}
293
+ </ul>
294
+ </div>
295
+ </div>
296
+ </header>
297
+ );
296
298
  }
297
299
 
298
300
  export default Navigation;
package/package.json CHANGED
@@ -34,7 +34,7 @@
34
34
  "react-dom": "^17.0.1"
35
35
  },
36
36
  "name": "@visns-studio/visns-components",
37
- "version": "1.7.1",
37
+ "version": "1.7.2",
38
38
  "description": "Various packages to assist in the development of our Custom Applications.",
39
39
  "main": "index.js",
40
40
  "devDependencies": {},