@visns-studio/visns-components 2.3.1 → 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.
@@ -3,6 +3,7 @@ import DatePicker from 'react-datepicker';
3
3
  import _ from 'lodash';
4
4
  import ReactQuill from 'react-quill';
5
5
  import Toggle from 'react-toggle';
6
+ import { BlockPicker } from 'react-color';
6
7
  import { NumericFormat, PatternFormat } from 'react-number-format';
7
8
 
8
9
  import CustomFetch from './Fetch';
@@ -20,6 +21,7 @@ function Field({
20
21
  inputValue,
21
22
  inputClass,
22
23
  onChange,
24
+ onChangeColour,
23
25
  onChangeDate,
24
26
  onChangeSelect,
25
27
  onChangeRicheditor,
@@ -30,10 +32,25 @@ function Field({
30
32
  settings,
31
33
  style,
32
34
  }) {
33
- const [options, setOptions] = useState([]);
35
+ const [colorPickerShow, setColorPickerShow] = useState(false);
34
36
  const [dataOptions, setDataOptions] = useState([]);
35
37
  const [formItemStyle, setFormItemStyle] = useState({});
36
38
  const [formItemClass, setFormItemClass] = useState('formItem');
39
+ const [options, setOptions] = useState([]);
40
+
41
+ const cover = {
42
+ position: 'fixed',
43
+ top: '0px',
44
+ right: '0px',
45
+ bottom: '0px',
46
+ left: '0px',
47
+ };
48
+ const popover = {
49
+ position: 'absolute',
50
+ zIndex: '2',
51
+ left: '20px',
52
+ marginTop: '6px',
53
+ };
37
54
 
38
55
  useEffect(() => {
39
56
  const fetchOptions = () => {
@@ -193,6 +210,7 @@ function Field({
193
210
  'multi-dropdown-ajax',
194
211
  'async-dropdown-ajax',
195
212
  'richeditor',
213
+ 'colour',
196
214
  ].includes(settings.type)
197
215
  ) {
198
216
  return (
@@ -339,6 +357,57 @@ function Field({
339
357
  </span>
340
358
  </div>
341
359
  );
360
+ case 'colour':
361
+ return (
362
+ <div className="cpicker">
363
+ <div
364
+ className="cpicker__box"
365
+ style={
366
+ inputValue && inputValue !== 'null'
367
+ ? { background: inputValue }
368
+ : {}
369
+ }
370
+ ></div>
371
+ <div className="cpicker__btn">
372
+ <button
373
+ onClick={(e) => {
374
+ e.preventDefault();
375
+
376
+ setColorPickerShow(
377
+ colorPickerShow === true ? false : true
378
+ );
379
+ }}
380
+ >
381
+ Pick Color
382
+ </button>
383
+ {colorPickerShow === true ? (
384
+ <div style={popover}>
385
+ <div
386
+ style={cover}
387
+ onClick={() => {
388
+ setColorPickerShow(false);
389
+ }}
390
+ />
391
+
392
+ <BlockPicker
393
+ color={
394
+ inputValue && inputValue !== 'null'
395
+ ? inputValue
396
+ : ''
397
+ }
398
+ onChangeComplete={(color, event) => {
399
+ onChangeColour(
400
+ event,
401
+ color,
402
+ settings.id
403
+ );
404
+ }}
405
+ />
406
+ </div>
407
+ ) : null}
408
+ </div>
409
+ </div>
410
+ );
342
411
  case 'multi-dropdown':
343
412
  case 'multi-dropdown-ajax':
344
413
  return (
@@ -415,6 +484,7 @@ function Field({
415
484
  'async-dropdown-ajax',
416
485
  'toggle',
417
486
  'richeditor',
487
+ 'colour',
418
488
  ].includes(settings.type)
419
489
  ) {
420
490
  return (
@@ -117,6 +117,15 @@ function Form(props) {
117
117
  }
118
118
  };
119
119
 
120
+ const handleChangeColour = (event, color, id) => {
121
+ if (color && event && id) {
122
+ setFormData((prevState) => ({
123
+ ...prevState,
124
+ [id]: color.hex,
125
+ }));
126
+ }
127
+ };
128
+
120
129
  const handleChangeNumberFormat = (value, id) => {
121
130
  setFormData((prevState) => ({
122
131
  ...prevState,
@@ -154,12 +163,12 @@ function Form(props) {
154
163
 
155
164
  Object.keys(inputValue).forEach((a) => {
156
165
  if (formData.hasOwnProperty(a)) {
157
- updateFormData({
166
+ updateFormData((prevState) => ({
158
167
  [a]:
159
- prevState[a] !== ''
168
+ prevState && prevState[a] !== ''
160
169
  ? prevState[a]
161
170
  : inputValue[a],
162
- });
171
+ }));
163
172
  }
164
173
  });
165
174
 
@@ -215,20 +224,22 @@ function Form(props) {
215
224
 
216
225
  const id = e.target.dataset.jsonkey || e.target.dataset.name;
217
226
 
218
- setFormData((prevState) => ({
219
- ...prevState,
220
- [id]: e.target.checked,
221
- }));
227
+ const updateFormData = (dataToUpdate) => {
228
+ setFormData((prevState) => ({
229
+ ...prevState,
230
+ ...dataToUpdate,
231
+ }));
232
+ };
222
233
 
223
- if (id === 'same_address') {
224
- const postalData = e.target.checked
234
+ const updatePostalData = (checked) => {
235
+ const postalData = checked
225
236
  ? {
226
- postal_address1: prevState.address1,
227
- postal_address2: prevState.address2,
228
- postal_suburb: prevState.suburb,
229
- postal_postcode: prevState.postcode,
230
- postal_state: prevState.state,
231
- 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,
232
243
  }
233
244
  : {
234
245
  postal_address1: '',
@@ -239,10 +250,11 @@ function Form(props) {
239
250
  postal_country: '',
240
251
  };
241
252
 
242
- setFormData((prevState) => ({
243
- ...prevState,
244
- ...postalData,
245
- }));
253
+ updateFormData(postalData);
254
+ };
255
+
256
+ if (id === 'same_address') {
257
+ updatePostalData(e.target.checked);
246
258
  }
247
259
 
248
260
  if (e.target.dataset.show) {
@@ -251,28 +263,26 @@ function Form(props) {
251
263
  : [];
252
264
 
253
265
  if (_show.length > 0) {
254
- const _fields = [...formSettings.fields];
255
-
256
- _show.forEach((showObject) => {
257
- const { id, value } = showObject;
258
-
259
- if (id && value && value.length > 0) {
260
- const index = _fields.findIndex(
261
- (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
262
277
  );
263
-
264
- if (index !== -1) {
265
- _fields[index].hide = !value.includes(
266
- e.target.checked
267
- );
268
- }
269
278
  }
279
+ return field;
270
280
  });
271
281
 
272
282
  if (updateForm) {
273
283
  updateForm((prevState) => ({
274
284
  ...prevState,
275
- fields: _fields,
285
+ fields: updatedFields,
276
286
  }));
277
287
  }
278
288
  }
@@ -767,50 +777,36 @@ function Form(props) {
767
777
  }, []);
768
778
 
769
779
  useEffect(() => {
770
- formSettings.fields.forEach((a) => {
771
- if (a.hasOwnProperty('show') && a.show.length > 0) {
772
- let _show = a.show;
773
- if (_show.length > 0) {
774
- _show.forEach((showObject) => {
775
- if (
776
- showObject.hasOwnProperty('id') &&
777
- showObject.hasOwnProperty('value')
778
- ) {
779
- if (
780
- showObject.id !== '' &&
781
- showObject.value.length > 0
782
- ) {
783
- let _fields = formSettings.fields;
784
- let _counter;
785
- _fields.forEach((a, b) => {
786
- if (a.id === showObject.id) {
787
- _counter = b;
788
- }
789
- });
780
+ formSettings.fields.forEach((field) => {
781
+ const showConditions = field.show || [];
790
782
 
791
- let _valueChecker = formData[a.id];
783
+ showConditions.forEach((showObject) => {
784
+ const { id, value } = showObject;
792
785
 
793
- if (
794
- _counter >= 0 &&
795
- showObject.value.includes(_valueChecker) ===
796
- true
797
- ) {
798
- _fields[_counter].hide = false;
799
- } else {
800
- _fields[_counter].hide = true;
801
- }
786
+ if (id !== '' && value.length > 0) {
787
+ const targetField = formSettings.fields.find(
788
+ (f) => f.id === id
789
+ );
802
790
 
803
- if (updateForm) {
804
- updateForm((prevState) => ({
805
- ...prevState,
806
- fields: _fields,
807
- }));
808
- }
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
+ }));
809
805
  }
810
806
  }
811
- });
807
+ }
812
808
  }
813
- }
809
+ });
814
810
  });
815
811
  }, [fetchTrigger]);
816
812
 
@@ -924,6 +920,7 @@ function Form(props) {
924
920
  }
925
921
  inputClass={inputClass}
926
922
  onChange={handleChange}
923
+ onChangeColour={handleChangeColour}
927
924
  onChangeDate={handleChangeDate}
928
925
  onChangeSelect={handleChangeSelect}
929
926
  onChangeRicheditor={
@@ -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">
@@ -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
@@ -12,6 +12,7 @@
12
12
  "motion": "^10.16.2",
13
13
  "numeral": "^2.0.6",
14
14
  "quill-image-uploader": "^1.3.0",
15
+ "react-color": "^2.19.3",
15
16
  "react-confirm-alert": "^3.0.6",
16
17
  "react-datepicker": "^4.16.0",
17
18
  "react-dropzone": "^14.2.3",
@@ -40,7 +41,7 @@
40
41
  "react-dom": "^17.0.1"
41
42
  },
42
43
  "name": "@visns-studio/visns-components",
43
- "version": "2.3.1",
44
+ "version": "2.3.3",
44
45
  "description": "Various packages to assist in the development of our Custom Applications.",
45
46
  "main": "index.js",
46
47
  "scripts": {