@visns-studio/visns-components 1.4.2 → 1.4.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 (6) hide show
  1. package/components/cms/visns-data-grid.jsx +30 -1
  2. package/components/crm/visns-data-grid.jsx +28 -1
  3. package/components/crm/visns-navigation.jsx +199 -0
  4. package/components/crm/visns-notification.jsx +38 -33
  5. package/index.js +20 -18
  6. package/package.json +52 -52
package/components/cms/visns-data-grid.jsx CHANGED
@@ -410,6 +410,28 @@ const DataGrid = ({
410
410
  };
411
411
 
412
412
  switch (column.type) {
413
+ case "address":
414
+ return {
415
+ ...commonProps,
416
+ name: `${column.type}.${column.id}`,
417
+ render: ({ data }) => {
418
+ if (data.address1) {
419
+ value += `${data.address1} `;
420
+ }
421
+
422
+ if (data.address2) {
423
+ value += `${data.address2} `;
424
+ }
425
+
426
+ if (data.suburb) {
427
+ value += `${data.suburb} `;
428
+ }
429
+
430
+ if (data.postcode) {
431
+ value += `${data.postcode} `;
432
+ }
433
+ },
434
+ };
413
435
  case "age":
414
436
  return {
415
437
  ...commonProps,
@@ -427,7 +449,14 @@ const DataGrid = ({
427
449
  date = moment(value);
428
450
 
429
451
  return (
430
- <span>{moment().diff(date, "years")}</span>
452
+ <span>
453
+ {moment().diff(
454
+ date,
455
+ column.duration
456
+ ? column.duration
457
+ : "years"
458
+ )}
459
+ </span>
431
460
  );
432
461
  } else {
433
462
  return null;
package/components/crm/visns-data-grid.jsx CHANGED
@@ -586,6 +586,28 @@ const DataGrid = forwardRef(
586
586
  };
587
587
 
588
588
  switch (column.type) {
589
+ case "address":
590
+ return {
591
+ ...commonProps,
592
+ name: `${column.type}.${column.id}`,
593
+ render: ({ data }) => {
594
+ if (data.address1) {
595
+ value += `${data.address1} `;
596
+ }
597
+
598
+ if (data.address2) {
599
+ value += `${data.address2} `;
600
+ }
601
+
602
+ if (data.suburb) {
603
+ value += `${data.suburb} `;
604
+ }
605
+
606
+ if (data.postcode) {
607
+ value += `${data.postcode} `;
608
+ }
609
+ },
610
+ };
589
611
  case "age":
590
612
  return {
591
613
  ...commonProps,
@@ -604,7 +626,12 @@ const DataGrid = forwardRef(
604
626
 
605
627
  return (
606
628
  <span>
607
- {moment().diff(date, "years")}
629
+ {moment().diff(
630
+ date,
631
+ column.duration
632
+ ? column.duration
633
+ : "years"
634
+ )}
608
635
  </span>
609
636
  );
610
637
  } else {
package/components/crm/visns-navigation.jsx ADDED
@@ -0,0 +1,199 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { Link, useLocation } from "react-router-dom";
3
+ import {
4
+ Bug,
5
+ DoubleSword,
6
+ Draft,
7
+ Grid,
8
+ PeopleGroup,
9
+ Person,
10
+ SettingsVertical,
11
+ SignOut,
12
+ Shield,
13
+ Ticket,
14
+ } from "akar-icons";
15
+
16
+ import CustomFetch from "./visns-fetch";
17
+ import Notification from "./visns-notification";
18
+
19
+ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
20
+ const location = useLocation();
21
+ const currentPage = location.pathname.substr(1) || "dashboard";
22
+ const [navData, setNavData] = useState(navConfig);
23
+ const [isScrolled, setIsScrolled] = useState(false);
24
+ const appNavClasses = `app-nav ${isScrolled ? "navscrolled" : ""}`;
25
+
26
+ const handleLogout = () => {
27
+ CustomFetch("/logout", "GET", {}, () => {
28
+ setSystemAuth(false);
29
+ navigate("/login");
30
+ });
31
+ };
32
+
33
+ const renderSetting = (n) => {
34
+ const iconComponents = {
35
+ bug: Bug,
36
+ person: Person,
37
+ shield: Shield,
38
+ signOut: SignOut,
39
+ };
40
+
41
+ if (n.id === "notifications") {
42
+ return (
43
+ <li>
44
+ <Notification setSystemAuth={setSystemAuth} />
45
+ </li>
46
+ );
47
+ } else if (n.id === "logout") {
48
+ const IconComponent = iconComponents[n.icon];
49
+ return (
50
+ <li>
51
+ <button
52
+ title={n.label}
53
+ data-tooltip-id="system-tooltip"
54
+ data-tooltip-content={n.label}
55
+ onClick={handleLogout}
56
+ >
57
+ <IconComponent size={19} strokeWidth={2} />
58
+ </button>
59
+ </li>
60
+ );
61
+ } else {
62
+ const IconComponent = iconComponents[n.icon];
63
+
64
+ return (
65
+ <li>
66
+ <Link
67
+ to={n.url}
68
+ data-tooltip-id="system-tooltip"
69
+ data-tooltip-content={n.label}
70
+ className="tooltip"
71
+ >
72
+ <IconComponent size={19} strokeWidth={2} />
73
+ </Link>
74
+ </li>
75
+ );
76
+ }
77
+ };
78
+
79
+ const renderNav = (n) => {
80
+ const iconComponents = {
81
+ doubleSword: DoubleSword,
82
+ draft: Draft,
83
+ grid: Grid,
84
+ peopleGroup: PeopleGroup,
85
+ settingsVertical: SettingsVertical,
86
+ ticket: Ticket,
87
+ };
88
+
89
+ const IconComponent = iconComponents[n.icon];
90
+
91
+ const renderChildren = () => {
92
+ if (n.children && n.children.length > 0) {
93
+ return (
94
+ <ul>
95
+ {n.children.map((child, childKey) => (
96
+ <li
97
+ className="sub-nav-item"
98
+ key={`nav-child-${childKey}`}
99
+ >
100
+ <Link to={child.url} title={child.label}>
101
+ {child.label}
102
+ </Link>
103
+ </li>
104
+ ))}
105
+ </ul>
106
+ );
107
+ }
108
+ return null;
109
+ };
110
+
111
+ return (
112
+ <li className={n.class}>
113
+ {n.url ? (
114
+ <Link to={n.url}>
115
+ <IconComponent strokeWidth={2} size={18} />
116
+ {n.label}
117
+ </Link>
118
+ ) : (
119
+ <span title={n.label}>
120
+ <IconComponent strokeWidth={2} size={18} />
121
+ {n.label}
122
+ </span>
123
+ )}
124
+ {renderChildren()}
125
+ </li>
126
+ );
127
+ };
128
+
129
+ useEffect(() => {
130
+ const permissions = userProfile.roles[0].permissions;
131
+
132
+ setNavData((prevNavData) => {
133
+ const updatedNavData = prevNavData.navigations.map((nav) => ({
134
+ ...nav,
135
+ permission: permissions.some(
136
+ (permission) => permission.name === nav.permissionKey
137
+ ),
138
+ }));
139
+
140
+ return { ...prevNavData, navigations: updatedNavData };
141
+ });
142
+ }, [userProfile]);
143
+
144
+ useEffect(() => {
145
+ setNavData((prevNavData) => ({
146
+ ...prevNavData,
147
+ navigations: prevNavData.navigations.map((nav) =>
148
+ nav.id === currentPage
149
+ ? { ...nav, class: "nav-item active" }
150
+ : { ...nav, class: "nav-item" }
151
+ ),
152
+ }));
153
+ }, [currentPage]);
154
+
155
+ useEffect(() => {
156
+ function handleScroll() {
157
+ setIsScrolled(window.scrollY > 0);
158
+ }
159
+
160
+ window.addEventListener("scroll", handleScroll);
161
+ return () => {
162
+ window.removeEventListener("scroll", handleScroll);
163
+ };
164
+ }, []);
165
+
166
+ return (
167
+ <header className="header">
168
+ <div className="hwrap">
169
+ <div className="logo">
170
+ <Link to="/">
171
+ <img src={logo} alt="Visns Studio CRM" />
172
+ </Link>
173
+ </div>
174
+ <div className="navwrap">
175
+ <ul className={appNavClasses}>
176
+ {navData.navigations.map((nav, navKey) =>
177
+ nav.permission === true ? (
178
+ <React.Fragment key={`nav-item-${navKey}`}>
179
+ {renderNav(nav)}
180
+ </React.Fragment>
181
+ ) : null
182
+ )}
183
+ </ul>
184
+ </div>
185
+ <div className="hactions">
186
+ <ul>
187
+ {navData.settings.map((setting, settingKey) => (
188
+ <React.Fragment key={`setting-${settingKey}`}>
189
+ {renderSetting(setting)}
190
+ </React.Fragment>
191
+ ))}
192
+ </ul>
193
+ </div>
194
+ </div>
195
+ </header>
196
+ );
197
+ }
198
+
199
+ export default Navigation;
package/components/crm/visns-notification.jsx CHANGED
@@ -1,40 +1,40 @@
1
- import React, { useState, useEffect, useRef } from 'react';
2
- import { useNavigate } from 'react-router-dom';
3
- import moment from 'moment';
4
- import parse from 'html-react-parser';
5
- import { TooltipWrapper } from 'react-tooltip';
6
- import { toast } from 'react-toastify';
7
- import { Bell, CircleX } from 'akar-icons';
1
+ import React, { useState, useEffect, useRef } from "react";
2
+ import { useNavigate } from "react-router-dom";
3
+ import moment from "moment";
4
+ import parse from "html-react-parser";
5
+ import { TooltipWrapper } from "react-tooltip";
6
+ import { toast } from "react-toastify";
7
+ import { Bell, CircleX } from "akar-icons";
8
8
 
9
- import CustomFetch from './visns-fetch';
9
+ import CustomFetch from "./visns-fetch";
10
10
 
11
11
  function Notification(props) {
12
12
  let interval;
13
13
  const navigate = useNavigate();
14
14
  const wrapperRef = useRef(null);
15
- const [containerClass] = useState('notibox');
16
- const [divClass] = useState('notibox-item');
17
- const [iconBellBlinkClass] = useState('cis-bell-exclamation noti');
18
- const [iconBellClass] = useState('cis-bell-exclamation');
19
- const [iconXClass] = useState('cis-x-circle noti-read');
20
- const [actionClass] = useState('notibox-actions');
15
+ const [containerClass] = useState("notibox");
16
+ const [divClass] = useState("notibox-item");
17
+ const [iconBellBlinkClass] = useState("cis-bell-exclamation noti");
18
+ const [iconBellClass] = useState("cis-bell-exclamation");
19
+ const [iconXClass] = useState("cis-x-circle noti-read");
20
+ const [actionClass] = useState("notibox-actions");
21
21
  const [items, setItems] = useState([]);
22
22
  const [show, setShow] = useState(false);
23
23
  const { setSystemAuth } = props;
24
24
 
25
25
  const fetchNotification = () => {
26
26
  CustomFetch(
27
- '/ajax/user/notifications',
28
- 'POST',
27
+ "/ajax/user/notifications",
28
+ "POST",
29
29
  {},
30
30
  function (result) {
31
31
  setItems(result.data);
32
32
  },
33
33
  function (error) {
34
- if (String(error) === 'CSRF token mismatch.') {
35
- window.open('/login');
34
+ if (String(error) === "CSRF token mismatch.") {
35
+ window.open("/login");
36
36
  } else {
37
- if (error === 'Unauthenticated.') {
37
+ if (error === "Unauthenticated.") {
38
38
  setSystemAuth(false);
39
39
  }
40
40
 
@@ -67,8 +67,8 @@ function Notification(props) {
67
67
  };
68
68
 
69
69
  CustomFetch(
70
- '/ajax/user/notification/markasread',
71
- 'POST',
70
+ "/ajax/user/notification/markasread",
71
+ "POST",
72
72
  formData,
73
73
  function () {
74
74
  fetchNotification();
@@ -89,8 +89,8 @@ function Notification(props) {
89
89
  };
90
90
 
91
91
  CustomFetch(
92
- '/ajax/user/notification/markasread',
93
- 'POST',
92
+ "/ajax/user/notification/markasread",
93
+ "POST",
94
94
  formData,
95
95
  function () {
96
96
  fetchNotification();
@@ -109,7 +109,7 @@ function Notification(props) {
109
109
  };
110
110
 
111
111
  const showAllNotifications = () => {
112
- navigate('/notifications');
112
+ navigate("/notifications");
113
113
  setShow(false);
114
114
  };
115
115
 
@@ -120,18 +120,23 @@ function Notification(props) {
120
120
  fetchNotification();
121
121
  }, 60000);
122
122
 
123
- document.addEventListener('mousedown', handleClick, false);
123
+ document.addEventListener("mousedown", handleClick, false);
124
124
 
125
125
  return function cleanup() {
126
126
  clearInterval(interval);
127
127
 
128
- document.addEventListener('mousedown', handleClick, false);
128
+ document.addEventListener("mousedown", handleClick, false);
129
129
  };
130
130
  }, []);
131
131
 
132
132
  return (
133
- <TooltipWrapper content="Notifications">
134
- <a href="#" onClick={toggleNotification}>
133
+ <>
134
+ <a
135
+ href="#"
136
+ onClick={toggleNotification}
137
+ data-tooltip-id="system-tooltip"
138
+ data-tooltip-content="Notification"
139
+ >
135
140
  <Bell
136
141
  size={19}
137
142
  strokeWidth={2}
@@ -151,15 +156,15 @@ function Notification(props) {
151
156
  size={19}
152
157
  strokeWidth={2}
153
158
  className={iconBellClass}
154
- />{' '}
155
- {parse(item.data.label)}{' '}
159
+ />{" "}
160
+ {parse(item.data.label)}{" "}
156
161
  <span>
157
162
  [
158
163
  {moment(item.created_at).format(
159
- 'DD/MM - H:mma'
164
+ "DD/MM - H:mma"
160
165
  )}
161
166
  ]
162
- </span>{' '}
167
+ </span>{" "}
163
168
  <button onClick={markAsRead}>
164
169
  <CircleX
165
170
  size={24}
@@ -195,7 +200,7 @@ function Notification(props) {
195
200
  ) : (
196
201
  <div></div>
197
202
  )}
198
- </TooltipWrapper>
203
+ </>
199
204
  );
200
205
  }
201
206
 
package/index.js CHANGED
@@ -14,6 +14,7 @@ import Field from "./components/crm/visns-field";
14
14
  import Form from "./components/crm/visns-form";
15
15
  import Loader from "./components/crm/visns-loader";
16
16
  import MultiSelect from "./components/crm/visns-multi-select";
17
+ import Navigation from "./components/crm/visns-navigation";
17
18
  import Notification from "./components/crm/visns-notification";
18
19
  import SelectList from "./components/crm/visns-select-list";
19
20
  import Select from "./components/crm/visns-select";
@@ -21,22 +22,23 @@ import Table from "./components/crm/visns-data-grid";
21
22
  import TableFilter from "./components/crm/visns-table-filter";
22
23
 
23
24
  export {
24
- AsyncSelect,
25
- Autocomplete,
26
- Call,
27
- CmsForm,
28
- CustomFetch,
29
- DataGrid,
30
- Download,
31
- DropZone,
32
- Field,
33
- Form,
34
- Loader,
35
- MultiSelect,
36
- Notification,
37
- SelectList,
38
- Select,
39
- SortableList,
40
- Table,
41
- TableFilter,
25
+ AsyncSelect,
26
+ Autocomplete,
27
+ Call,
28
+ CmsForm,
29
+ CustomFetch,
30
+ DataGrid,
31
+ Download,
32
+ DropZone,
33
+ Field,
34
+ Form,
35
+ Loader,
36
+ MultiSelect,
37
+ Navigation,
38
+ Notification,
39
+ SelectList,
40
+ Select,
41
+ SortableList,
42
+ Table,
43
+ TableFilter,
42
44
  };
package/package.json CHANGED
@@ -1,54 +1,54 @@
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
- "react-confirm-alert": "^3.0.6",
14
- "react-datepicker": "^4.14.0",
15
- "react-dropzone": "^14.2.3",
16
- "react-number-format": "^5.2.2",
17
- "react-promise-tracker": "^2.1.1",
18
- "react-quill": "^2.0.0",
19
- "react-select": "^5.7.3",
20
- "react-slugify": "^3.0.2",
21
- "react-sortable-hoc": "^2.0.0",
22
- "react-toastify": "^9.1.3",
23
- "react-toggle": "^4.1.3",
24
- "react-tooltip": "^5.14.0",
25
- "react-window": "^1.8.9",
26
- "reactjs-popup": "^2.0.5"
27
- },
28
- "devDependecies": {
29
- "react": "^18.2.0",
30
- "react-dom": "^18.2.0"
31
- },
32
- "peerDependencies": {
33
- "react": "^17.0.1",
34
- "react-dom": "^17.0.1"
35
- },
36
- "name": "@visns-studio/visns-components",
37
- "version": "1.4.2",
38
- "description": "Various packages to assist in the development of our Custom Applications.",
39
- "main": "index.js",
40
- "devDependencies": {},
41
- "scripts": {
42
- "test": "echo \"Error: no test specified\" && exit 1"
43
- },
44
- "repository": {
45
- "type": "git",
46
- "url": "git+https://github.com/visnsstudio/visns-components.git"
47
- },
48
- "author": "Visns Studio",
49
- "license": "ISC",
50
- "bugs": {
51
- "url": "https://github.com/visnsstudio/visns-components/issues"
52
- },
53
- "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
+ "react-confirm-alert": "^3.0.6",
14
+ "react-datepicker": "^4.14.0",
15
+ "react-dropzone": "^14.2.3",
16
+ "react-number-format": "^5.2.2",
17
+ "react-promise-tracker": "^2.1.1",
18
+ "react-quill": "^2.0.0",
19
+ "react-select": "^5.7.3",
20
+ "react-slugify": "^3.0.2",
21
+ "react-sortable-hoc": "^2.0.0",
22
+ "react-toastify": "^9.1.3",
23
+ "react-toggle": "^4.1.3",
24
+ "react-tooltip": "^5.14.0",
25
+ "react-window": "^1.8.9",
26
+ "reactjs-popup": "^2.0.5"
27
+ },
28
+ "devDependecies": {
29
+ "react": "^18.2.0",
30
+ "react-dom": "^18.2.0"
31
+ },
32
+ "peerDependencies": {
33
+ "react": "^17.0.1",
34
+ "react-dom": "^17.0.1"
35
+ },
36
+ "name": "@visns-studio/visns-components",
37
+ "version": "1.4.4",
38
+ "description": "Various packages to assist in the development of our Custom Applications.",
39
+ "main": "index.js",
40
+ "devDependencies": {},
41
+ "scripts": {
42
+ "test": "echo \"Error: no test specified\" && exit 1"
43
+ },
44
+ "repository": {
45
+ "type": "git",
46
+ "url": "git+https://github.com/visnsstudio/visns-components.git"
47
+ },
48
+ "author": "Visns Studio",
49
+ "license": "ISC",
50
+ "bugs": {
51
+ "url": "https://github.com/visnsstudio/visns-components/issues"
52
+ },
53
+ "homepage": "https://github.com/visnsstudio/visns-components#readme"
54
54
  }