@visns-studio/visns-components 2.3.2 → 2.3.3

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 (4) hide show
  1. package/components/crm/Form.jsx +59 -72
  2. package/components/crm/Navigation.jsx +78 -3
  3. package/components/crm/generic/GenericIndex.jsx +61 -22
  4. package/package.json +1 -1
package/components/crm/Form.jsx CHANGED
@@ -163,12 +163,12 @@ function Form(props) {
163
163
 
164
164
  Object.keys(inputValue).forEach((a) => {
165
165
  if (formData.hasOwnProperty(a)) {
166
- updateFormData({
166
+ updateFormData((prevState) => ({
167
167
  [a]:
168
- prevState[a] !== ''
168
+ prevState && prevState[a] !== ''
169
169
  ? prevState[a]
170
170
  : inputValue[a],
171
- });
171
+ }));
172
172
  }
173
173
  });
174
174
 
@@ -224,20 +224,22 @@ function Form(props) {
224
224
 
225
225
  const id = e.target.dataset.jsonkey || e.target.dataset.name;
226
226
 
227
- setFormData((prevState) => ({
228
- ...prevState,
229
- [id]: e.target.checked,
230
- }));
227
+ const updateFormData = (dataToUpdate) => {
228
+ setFormData((prevState) => ({
229
+ ...prevState,
230
+ ...dataToUpdate,
231
+ }));
232
+ };
231
233
 
232
- if (id === 'same_address') {
233
- const postalData = e.target.checked
234
+ const updatePostalData = (checked) => {
235
+ const postalData = checked
234
236
  ? {
235
- postal_address1: prevState.address1,
236
- postal_address2: prevState.address2,
237
- postal_suburb: prevState.suburb,
238
- postal_postcode: prevState.postcode,
239
- postal_state: prevState.state,
240
- postal_country: prevState.country,
237
+ postal_address1: formData.address1,
238
+ postal_address2: formData.address2,
239
+ postal_suburb: formData.suburb,
240
+ postal_postcode: formData.postcode,
241
+ postal_state: formData.state,
242
+ postal_country: formData.country,
241
243
  }
242
244
  : {
243
245
  postal_address1: '',
@@ -248,10 +250,11 @@ function Form(props) {
248
250
  postal_country: '',
249
251
  };
250
252
 
251
- setFormData((prevState) => ({
252
- ...prevState,
253
- ...postalData,
254
- }));
253
+ updateFormData(postalData);
254
+ };
255
+
256
+ if (id === 'same_address') {
257
+ updatePostalData(e.target.checked);
255
258
  }
256
259
 
257
260
  if (e.target.dataset.show) {
@@ -260,28 +263,26 @@ function Form(props) {
260
263
  : [];
261
264
 
262
265
  if (_show.length > 0) {
263
- const _fields = [...formSettings.fields];
264
-
265
- _show.forEach((showObject) => {
266
- const { id, value } = showObject;
267
-
268
- if (id && value && value.length > 0) {
269
- const index = _fields.findIndex(
270
- (field) => field.id === id
266
+ const updatedFields = formSettings.fields.map((field) => {
267
+ const showObject = _show.find(
268
+ (showItem) => showItem.id === field.id
269
+ );
270
+ if (
271
+ showObject &&
272
+ showObject.value &&
273
+ showObject.value.length > 0
274
+ ) {
275
+ field.hide = !showObject.value.includes(
276
+ e.target.checked
271
277
  );
272
-
273
- if (index !== -1) {
274
- _fields[index].hide = !value.includes(
275
- e.target.checked
276
- );
277
- }
278
278
  }
279
+ return field;
279
280
  });
280
281
 
281
282
  if (updateForm) {
282
283
  updateForm((prevState) => ({
283
284
  ...prevState,
284
- fields: _fields,
285
+ fields: updatedFields,
285
286
  }));
286
287
  }
287
288
  }
@@ -776,50 +777,36 @@ function Form(props) {
776
777
  }, []);
777
778
 
778
779
  useEffect(() => {
779
- formSettings.fields.forEach((a) => {
780
- if (a.hasOwnProperty('show') && a.show.length > 0) {
781
- let _show = a.show;
782
- if (_show.length > 0) {
783
- _show.forEach((showObject) => {
784
- if (
785
- showObject.hasOwnProperty('id') &&
786
- showObject.hasOwnProperty('value')
787
- ) {
788
- if (
789
- showObject.id !== '' &&
790
- showObject.value.length > 0
791
- ) {
792
- let _fields = formSettings.fields;
793
- let _counter;
794
- _fields.forEach((a, b) => {
795
- if (a.id === showObject.id) {
796
- _counter = b;
797
- }
798
- });
780
+ formSettings.fields.forEach((field) => {
781
+ const showConditions = field.show || [];
799
782
 
800
- let _valueChecker = formData[a.id];
783
+ showConditions.forEach((showObject) => {
784
+ const { id, value } = showObject;
801
785
 
802
- if (
803
- _counter >= 0 &&
804
- showObject.value.includes(_valueChecker) ===
805
- true
806
- ) {
807
- _fields[_counter].hide = false;
808
- } else {
809
- _fields[_counter].hide = true;
810
- }
786
+ if (id !== '' && value.length > 0) {
787
+ const targetField = formSettings.fields.find(
788
+ (f) => f.id === id
789
+ );
811
790
 
812
- if (updateForm) {
813
- updateForm((prevState) => ({
814
- ...prevState,
815
- fields: _fields,
816
- }));
817
- }
791
+ if (targetField) {
792
+ const valueChecker = formData[field.id];
793
+
794
+ if (valueChecker) {
795
+ const shouldShow =
796
+ valueChecker && value.includes(valueChecker);
797
+
798
+ targetField.hide = !shouldShow;
799
+
800
+ if (updateForm) {
801
+ updateForm((prevState) => ({
802
+ ...prevState,
803
+ fields: [...formSettings.fields],
804
+ }));
818
805
  }
819
806
  }
820
- });
807
+ }
821
808
  }
822
- }
809
+ });
823
810
  });
824
811
  }, [fetchTrigger]);
825
812
 
package/components/crm/Navigation.jsx CHANGED
@@ -9,15 +9,18 @@ import {
9
9
  Clipboard,
10
10
  DoubleSword,
11
11
  Draft,
12
+ Gear,
12
13
  Grid,
13
14
  Home,
14
15
  LightBulb,
15
16
  Microphone,
16
17
  Newspaper,
18
+ Paper,
17
19
  PeopleGroup,
18
20
  PeopleMultiple,
19
21
  Person,
20
22
  SettingsVertical,
23
+ ShippingBoxV1,
21
24
  SignOut,
22
25
  Shield,
23
26
  StatisticUp,
@@ -28,12 +31,21 @@ import {
28
31
  import CustomFetch from './Fetch';
29
32
  import Notification from './Notification';
30
33
 
31
- function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
34
+ function Navigation({
35
+ children,
36
+ layout = 'full',
37
+ logo,
38
+ navConfig,
39
+ searchComponent,
40
+ setSystemAuth,
41
+ userProfile,
42
+ }) {
32
43
  const location = useLocation();
33
44
  const navigate = useNavigate();
34
45
  const currentPage = location.pathname.substr(1) || 'dashboard';
35
- const [navData, setNavData] = useState(navConfig);
46
+ const [isOpen, setOpen] = useState('false');
36
47
  const [isScrolled, setIsScrolled] = useState(false);
48
+ const [navData, setNavData] = useState(navConfig);
37
49
  const appNavClasses = `app-nav ${isScrolled ? 'navscrolled' : ''}`;
38
50
 
39
51
  const handleLogout = () => {
@@ -100,14 +112,17 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
100
112
  clipboard: Clipboard,
101
113
  doubleSword: DoubleSword,
102
114
  draft: Draft,
115
+ gear: Gear,
103
116
  grid: Grid,
104
117
  home: Home,
105
118
  lightBulb: LightBulb,
106
119
  microphone: Microphone,
107
120
  newspaper: Newspaper,
121
+ paper: Paper,
108
122
  peopleGroup: PeopleGroup,
109
123
  peopleMultiple: PeopleMultiple,
110
124
  settingsVertical: SettingsVertical,
125
+ shippingboxv1: ShippingBoxV1,
111
126
  statisticUp: StatisticUp,
112
127
  ticket: Ticket,
113
128
  utensils: Utensils,
@@ -267,7 +282,67 @@ function Navigation({ logo, logout, navConfig, setSystemAuth, userProfile }) {
267
282
  };
268
283
  }, []);
269
284
 
270
- return (
285
+ return layout === 'simple' ? (
286
+ <div className="cwrap">
287
+ <aside className={'aside aside--open'}>
288
+ <div className="logo">
289
+ <Link to="/">
290
+ <img src={logo} alt="Visns Studio CRM" />
291
+ </Link>
292
+ </div>
293
+ <div className="awrap">
294
+ <nav className="navwrap">
295
+ <ul className={appNavClasses}>
296
+ {navData.navigations.map((nav, navKey) =>
297
+ nav.permission === true ||
298
+ nav.permissionKey === '' ? (
299
+ <React.Fragment key={`nav-item-${navKey}`}>
300
+ {renderNav(nav)}
301
+ </React.Fragment>
302
+ ) : null
303
+ )}
304
+ </ul>
305
+ </nav>
306
+ </div>
307
+ </aside>
308
+ <main className="content">
309
+ <div className="content-header">
310
+ {searchComponent}
311
+ <div className="content-title">
312
+ <button
313
+ className={
314
+ isOpen ? 'mobmenu' : 'mobmenu mobmenu--open'
315
+ }
316
+ onClick={() => {
317
+ setOpen(!isOpen);
318
+ }}
319
+ >
320
+ <span></span>
321
+ <span></span>
322
+ <span></span>
323
+ <span></span>
324
+ <span></span>
325
+ <span></span>
326
+ </button>
327
+ </div>
328
+ <div className="hactions">
329
+ <ul>
330
+ {navData.settings.map((setting, settingKey) =>
331
+ setting.permission === true ? (
332
+ <React.Fragment
333
+ key={`setting-${settingKey}`}
334
+ >
335
+ {renderSetting(setting)}
336
+ </React.Fragment>
337
+ ) : null
338
+ )}
339
+ </ul>
340
+ </div>
341
+ </div>
342
+ {children}
343
+ </main>
344
+ </div>
345
+ ) : (
271
346
  <header className="header">
272
347
  <div className="hwrap">
273
348
  <div className="logo">
package/components/crm/generic/GenericIndex.jsx CHANGED
@@ -3,8 +3,8 @@ import { Outlet } from 'react-router-dom';
3
3
  import Table from '../DataGrid';
4
4
  import TableFilter from '../TableFilter';
5
5
 
6
- function GenericIndex({ setting, userProfile }) {
7
- const { filters, page, tabs, ajaxSetting, form, columns, settings } =
6
+ function GenericIndex({ layout = 'full', setting, userProfile }) {
7
+ const { ajaxSetting, columns, form, filters, page, settings, tabs } =
8
8
  setting;
9
9
 
10
10
  const [config, setConfig] = useState({});
@@ -27,7 +27,7 @@ function GenericIndex({ setting, userProfile }) {
27
27
  }, [setting]);
28
28
 
29
29
  useEffect(() => {
30
- if (tabs && tabs.length > 0) {
30
+ if (tabs && tabs.length > 0 && subnav) {
31
31
  const activeTab = subnav.find((s) => s.show === true);
32
32
 
33
33
  if (activeTab) {
@@ -81,25 +81,64 @@ function GenericIndex({ setting, userProfile }) {
81
81
  <div className="grid">
82
82
  {subnav && subnav.length > 0 ? (
83
83
  <div className="grid__subrow">
84
- <div className="grid__subnav">
85
- <TableFilter
86
- filters={subnav}
87
- setFilters={setSubnav}
88
- setSettings={setConfig}
89
- />
90
- </div>
91
- <div className="grid__subcontent">
92
- <Table
93
- {...config}
94
- gridHeight={windowHeight * 0.65}
95
- setConfig={setConfig}
96
- setTotal={setTotal}
97
- style={
98
- userProfile?.settings?.style ||
99
- {}
100
- }
101
- />
102
- </div>
84
+ {layout === 'full' ? (
85
+ <>
86
+ <div className={`grid__subnav`}>
87
+ <TableFilter
88
+ filters={subnav}
89
+ setFilters={setSubnav}
90
+ setSettings={setConfig}
91
+ type={layout}
92
+ />
93
+ </div>
94
+ <div className={`grid__subcontent`}>
95
+ <Table
96
+ {...config}
97
+ gridHeight={
98
+ windowHeight * 0.65
99
+ }
100
+ setConfig={setConfig}
101
+ setTotal={setTotal}
102
+ style={
103
+ userProfile?.settings
104
+ ?.style || {}
105
+ }
106
+ />
107
+ </div>
108
+ </>
109
+ ) : (
110
+ <div className="grid__full">
111
+ <div className="tabcontent">
112
+ <div
113
+ className={`tabcontent__menu`}
114
+ >
115
+ <TableFilter
116
+ filters={subnav}
117
+ setFilters={setSubnav}
118
+ setSettings={setConfig}
119
+ type={layout}
120
+ />
121
+ </div>
122
+ <div
123
+ className={`tabcontent__main`}
124
+ >
125
+ <Table
126
+ {...config}
127
+ gridHeight={
128
+ windowHeight * 0.65
129
+ }
130
+ setConfig={setConfig}
131
+ setTotal={setTotal}
132
+ style={
133
+ userProfile
134
+ ?.settings
135
+ ?.style || {}
136
+ }
137
+ />
138
+ </div>
139
+ </div>
140
+ </div>
141
+ )}
103
142
  </div>
104
143
  ) : (
105
144
  <div className="grid__full">
package/package.json CHANGED
@@ -41,7 +41,7 @@
41
41
  "react-dom": "^17.0.1"
42
42
  },
43
43
  "name": "@visns-studio/visns-components",
44
- "version": "2.3.2",
44
+ "version": "2.3.3",
45
45
  "description": "Various packages to assist in the development of our Custom Applications.",
46
46
  "main": "index.js",
47
47
  "scripts": {