@visns-studio/visns-components 3.7.8 → 3.7.10

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 (9) hide show
  1. package/components/crm/DataGrid.jsx +1186 -1061
  2. package/components/crm/Field.jsx +1 -0
  3. package/components/crm/Form.jsx +23 -16
  4. package/components/crm/auth/Profile.jsx +0 -1
  5. package/components/crm/generic/GenericDashboard.jsx +42 -0
  6. package/components/crm/generic/GenericDetail.jsx +141 -49
  7. package/components/crm/generic/GenericDynamic.jsx +22 -10
  8. package/components/crm/generic/GenericIndex.jsx +0 -3
  9. package/package.json +5 -1
package/components/crm/Field.jsx CHANGED
@@ -410,6 +410,7 @@ function Field({
410
410
  ? inputValue
411
411
  : ''
412
412
  }
413
+ readOnly={settings.readOnly ? settings.readOnly : false}
413
414
  autoComplete="off"
414
415
  />
415
416
  );
package/components/crm/Form.jsx CHANGED
@@ -25,6 +25,7 @@ function Form({
25
25
  formSettings,
26
26
  fetchTable,
27
27
  mapbox,
28
+ paramValue,
28
29
  style,
29
30
  type,
30
31
  updateForm,
@@ -143,10 +144,6 @@ function Form({
143
144
  }
144
145
  };
145
146
 
146
- useEffect(() => {
147
- console.info(formData);
148
- }, [formData]);
149
-
150
147
  const handleChangeCheckbox = (e) => {
151
148
  const { checked, name, value } = e.target;
152
149
 
@@ -674,10 +671,6 @@ function Form({
674
671
  'value' in value &&
675
672
  'label' in value
676
673
  ) {
677
- console.info(
678
- `Updating payload for key ${key}:`,
679
- value
680
- );
681
674
  payload[key] = value.value;
682
675
  }
683
676
  }
@@ -762,22 +755,27 @@ function Form({
762
755
 
763
756
  if (formSettings.fields.length > 0) {
764
757
  formSettings.fields.forEach((item) => {
765
- const { id, value, type, parent } = item;
758
+ const { id, value, type, parent, urlParam } = item;
759
+ let newValue = value;
760
+
761
+ if (urlParam) {
762
+ newValue = paramValue;
763
+ }
766
764
 
767
765
  if (parent) {
768
766
  _formData[parent] = {
769
767
  ..._formData[parent],
770
- [id]: value ? value : '',
768
+ [id]: newValue ? newValue : '',
771
769
  };
772
770
  } else {
773
- if (value !== '') {
771
+ if (newValue !== '') {
774
772
  if (['date', 'datetime', 'time'].includes(type)) {
775
773
  _formData[id] =
776
- value instanceof Date
777
- ? value
778
- : moment(value).toDate();
774
+ newValue instanceof Date
775
+ ? newValue
776
+ : moment(newValue).toDate();
779
777
  } else {
780
- _formData[id] = value;
778
+ _formData[id] = newValue;
781
779
  }
782
780
  } else {
783
781
  _formData[id] = '';
@@ -1117,6 +1115,14 @@ function Form({
1117
1115
 
1118
1116
  switch (item.type) {
1119
1117
  case 'table':
1118
+ let ajaxSetting = item.ajaxSetting;
1119
+
1120
+ item.ajaxSetting.where.forEach((a, b) => {
1121
+ if (a.urlParam) {
1122
+ ajaxSetting.where[b].value = paramValue;
1123
+ }
1124
+ });
1125
+
1120
1126
  return (
1121
1127
  <div
1122
1128
  className="grid__full"
@@ -1129,10 +1135,11 @@ function Form({
1129
1135
  }
1130
1136
  >
1131
1137
  <Table
1132
- ajaxSetting={item.ajaxSetting}
1138
+ ajaxSetting={ajaxSetting}
1133
1139
  form={item.form}
1134
1140
  columns={item.columns}
1135
1141
  mapbox={mapbox}
1142
+ paramValue={paramValue}
1136
1143
  settings={item.settings}
1137
1144
  style={
1138
1145
  userProfile?.settings?.style ||
package/components/crm/auth/Profile.jsx CHANGED
@@ -26,7 +26,6 @@ const Profile = ({ userProfile, setUserProfile }) => {
26
26
  ]);
27
27
 
28
28
  useEffect(() => {
29
- console.info(userProfile);
30
29
  setProfile({
31
30
  name: userProfile.name,
32
31
  email: userProfile.email,
package/components/crm/generic/GenericDashboard.jsx ADDED
@@ -0,0 +1,42 @@
1
+ import React, { useState, useEffect } from 'react';
2
+ import { toast } from 'react-toastify';
3
+ import CustomFetch from '../../crm/Fetch';
4
+
5
+ const GenericDashboard = ({ userProfile }) => {
6
+ const [data, setData] = useState([]);
7
+
8
+ return (
9
+ <div className="grid">
10
+ <div className="grid__row">
11
+ <div className="grid__three dashtopwidge">
12
+ <div className="dashtopwidge__left">
13
+ <h2>
14
+ Current
15
+ <span>
16
+ <strong>Enquiries</strong>
17
+ </span>
18
+ </h2>
19
+ </div>
20
+ <div className="dashtopwidge__right">
21
+ <span>0</span>
22
+ </div>
23
+ </div>
24
+ <div className="grid__three dashtopwidge">
25
+ <div className="dashtopwidge__left">
26
+ <h2>
27
+ Current{' '}
28
+ <span>
29
+ <strong>Enquiries</strong>
30
+ </span>
31
+ </h2>
32
+ </div>
33
+ <div className="dashtopwidge__right">
34
+ <span>0</span>
35
+ </div>
36
+ </div>
37
+ </div>
38
+ </div>
39
+ );
40
+ };
41
+
42
+ export default GenericDashboard;
package/components/crm/generic/GenericDetail.jsx CHANGED
@@ -120,6 +120,12 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
120
120
  : '';
121
121
  };
122
122
 
123
+ const formatDateTime = (date) => {
124
+ return date && moment(date).format('DD-MM-YYYY') !== '01-01-1970'
125
+ ? moment(date).format('DD-MM-YYYY HH:mm A')
126
+ : '';
127
+ };
128
+
123
129
  const renderValue = (item, data) => {
124
130
  const {
125
131
  type,
@@ -143,6 +149,7 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
143
149
  : stringValue;
144
150
 
145
151
  const formatDateValue = (date) => formatDate(date);
152
+ const formatDateTimeValue = (date) => formatDateTime(date);
146
153
 
147
154
  const formatNoteValue = () => {
148
155
  const noteData = data?.[id]?.[0];
@@ -192,8 +199,12 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
192
199
  );
193
200
  };
194
201
 
202
+ const renderBoolean = () => (value ? 'Yes' : 'No');
203
+
195
204
  const renderDate = () => formatDateValue(value);
196
205
 
206
+ const renderDateTime = () => formatDateTimeValue(value);
207
+
197
208
  const renderFile = () =>
198
209
  value ? (
199
210
  <a href={value} target="_blank">
@@ -215,7 +226,8 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
215
226
  return null;
216
227
  }
217
228
 
218
- const lines = truncatedValue.split('\n');
229
+ // Split the string on both '\n' and '<br>' using a regular expression.
230
+ const lines = truncatedValue.split(/<br>|\\n/);
219
231
 
220
232
  if (lines.length === 0) {
221
233
  return null;
@@ -234,10 +246,14 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
234
246
 
235
247
  // Render based on the item's type
236
248
  switch (type) {
249
+ case 'boolean':
250
+ return renderBoolean();
237
251
  case 'copyToClipboard':
238
252
  return renderCopyToClipboard();
239
253
  case 'date':
240
254
  return renderDate();
255
+ case 'datetime':
256
+ return renderDateTime();
241
257
  case 'exist':
242
258
  return renderExist();
243
259
  case 'file':
@@ -289,13 +305,22 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
289
305
  label: 'Yes',
290
306
  onClick: () => {
291
307
  CustomFetch(
292
- `${activeTabConfig.deleteUrl}/${routeParams[urlParam]}`,
308
+ `${activeTabConfig.deleteUrl}`,
293
309
  'POST',
294
310
  {
295
311
  file_id: id,
296
312
  },
297
313
  function (result) {
298
- setFiles(result);
314
+ if (
315
+ result.error ===
316
+ ''
317
+ ) {
318
+ handleReload();
319
+ } else {
320
+ toast.error(
321
+ result.error
322
+ );
323
+ }
299
324
  }
300
325
  );
301
326
  },
@@ -311,7 +336,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
311
336
 
312
337
  return (
313
338
  <div className="gridtxt">
314
- <div className="gridtxt__header">Files</div>
339
+ <div className="gridtxt__header">
340
+ {activeTabConfig.label
341
+ ? activeTabConfig.label
342
+ : 'Files'}
343
+ </div>
315
344
  <div className="progress">
316
345
  <motion.div
317
346
  className="progress__bar"
@@ -340,10 +369,12 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
340
369
  uuid: response.uuid,
341
370
  key: response.key,
342
371
  bucket: response.bucket,
343
- name: file.name,
344
- size: file.size,
372
+ filename: file.name,
373
+ filesize: file.size,
345
374
  extension:
346
375
  response.extension,
376
+ file_relationship:
377
+ activeTabConfig.file_relationship,
347
378
  };
348
379
 
349
380
  CustomFetch(
@@ -374,58 +405,105 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
374
405
  <input
375
406
  {...getInputProps()}
376
407
  />
377
- <p>
378
- {isDragActive ? (
379
- <p>
380
- Drop the files
381
- here ...
382
- </p>
383
- ) : (
384
- <p>
385
- Drag 'n' drop
386
- some files here,
387
- or click to
388
- select files
389
- </p>
390
- )}
391
- </p>
408
+ {isDragActive ? (
409
+ <p>
410
+ Drop the files here
411
+ ...
412
+ </p>
413
+ ) : (
414
+ <p>
415
+ Drag 'n' drop some
416
+ files here, or click
417
+ to select files
418
+ </p>
419
+ )}
392
420
  </div>
393
- <ul className="dropzone__files">
394
- {files.map((a, b) => (
395
- <li
396
- onClick={() => {
397
- downloadFile(
398
- a.id
399
- );
400
- }}
401
- key={'tf-' + b}
402
- >
403
- <File
404
- strokeWidth={2}
405
- size={18}
406
- />
407
- {a.file_name}
408
- <button
409
- onClick={(
410
- event
411
- ) => {
412
- deleteFile(
413
- event,
414
- a.id,
415
- a.file_name
421
+ {activeTabConfig.filetype ===
422
+ 'image' ? (
423
+ <div>
424
+ <ul className="sortlist">
425
+ {files.map(
426
+ (a, b) =>
427
+ a.base64_encoded_image && (
428
+ <li
429
+ key={`tf-${b}`}
430
+ >
431
+ {
432
+ a.file_name
433
+ }
434
+ <div className="sortimg">
435
+ <img
436
+ src={
437
+ a.base64_encoded_image
438
+ }
439
+ width="150"
440
+ />
441
+ </div>
442
+ <TrashCan
443
+ onClick={(
444
+ event
445
+ ) => {
446
+ deleteFile(
447
+ event,
448
+ a.id,
449
+ a.file_name
450
+ );
451
+ }}
452
+ strokeWidth={
453
+ 2
454
+ }
455
+ size={
456
+ 18
457
+ }
458
+ className="delete trash-delete"
459
+ />
460
+ </li>
461
+ )
462
+ )}
463
+ </ul>
464
+ </div>
465
+ ) : (
466
+ <ul className="dropzone__files">
467
+ {files.map((a, b) => (
468
+ <li
469
+ onClick={() => {
470
+ downloadFile(
471
+ a.id
416
472
  );
417
473
  }}
474
+ key={'tf-' + b}
418
475
  >
419
- <TrashCan
476
+ <File
420
477
  strokeWidth={
421
478
  2
422
479
  }
423
480
  size={18}
424
481
  />
425
- </button>
426
- </li>
427
- ))}
428
- </ul>
482
+ {a.file_name}
483
+ <button
484
+ onClick={(
485
+ event
486
+ ) => {
487
+ deleteFile(
488
+ event,
489
+ a.id,
490
+ a.file_name
491
+ );
492
+ }}
493
+ >
494
+ <TrashCan
495
+ strokeWidth={
496
+ 2
497
+ }
498
+ size={
499
+ 18
500
+ }
501
+ />
502
+ </button>
503
+ </li>
504
+ ))}
505
+ </ul>
506
+ )}
429
507
  </section>
430
508
  )}
431
509
  </Dropzone>
@@ -545,6 +623,15 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
545
623
  stage.form
546
624
  }
547
625
  formType="update"
626
+ paramValue={
627
+ routeParams[
628
+ urlParam
629
+ ]
630
+ ? routeParams[
631
+ urlParam
632
+ ]
633
+ : null
634
+ }
548
635
  style={
549
636
  userProfile
550
637
  ?.settings
@@ -578,6 +665,11 @@ function GenericDetail({ extraUrlParam, setting, urlParam, userProfile }) {
578
665
  columnId={routeParams[urlParam]}
579
666
  formSettings={formConfig.form}
580
667
  formType="update"
668
+ paramValue={
669
+ routeParams[urlParam]
670
+ ? routeParams[urlParam]
671
+ : null
672
+ }
581
673
  style={
582
674
  userProfile?.settings
583
675
  ?.style || {}
package/components/crm/generic/GenericDynamic.jsx CHANGED
@@ -47,6 +47,7 @@ const renderValue = (field, data) => {
47
47
  const [table, key] = field.dynamicfield.split('::');
48
48
 
49
49
  if (table && key) {
50
+ console.info(table, key, data);
50
51
  switch (table) {
51
52
  case 'opportunities':
52
53
  return data[table][key];
@@ -77,6 +78,7 @@ const GenericDynamic = ({
77
78
  fetchData,
78
79
  label,
79
80
  multiple = true,
81
+ originalData = {},
80
82
  primaryKey,
81
83
  setData,
82
84
  setting,
@@ -84,7 +86,7 @@ const GenericDynamic = ({
84
86
  type,
85
87
  }) => {
86
88
  const toastId = useRef(null);
87
- const [activeForm, setActiveForm] = useState([]);
89
+ const [activeForm, setActiveForm] = useState({});
88
90
  const [activeFormKey, setActiveFormKey] = useState(0);
89
91
 
90
92
  const handleChange = (e) => {
@@ -256,7 +258,7 @@ const GenericDynamic = ({
256
258
  setActiveFormKey(key);
257
259
  };
258
260
 
259
- const handleAddNewForm = async () => {
261
+ const handleAddNewForm = async (showToast = true) => {
260
262
  try {
261
263
  if (activeForm && activeForm.id) {
262
264
  await CustomFetch(setting.save, 'POST', {
@@ -274,7 +276,9 @@ const GenericDynamic = ({
274
276
  form_name: type,
275
277
  });
276
278
  if (res.data.error === '') {
277
- toast.success('Form added successfully');
279
+ if (showToast) {
280
+ toast.success('Form added successfully');
281
+ }
278
282
  fetchData();
279
283
  }
280
284
  } catch (err) {
@@ -438,17 +442,25 @@ const GenericDynamic = ({
438
442
  }
439
443
  }
440
444
  } else {
441
- setActiveForm([]);
445
+ setActiveForm({});
446
+ }
447
+ }, [data, type]);
448
+
449
+ useEffect(() => {
450
+ if (data[type] && data[type].length > 0) {
451
+ } else {
442
452
  if (multiple && templateStatus) {
443
- handleAddNewForm();
453
+ if (activeForm.hasOwnProperty('id') === false) {
454
+ handleAddNewForm(false);
455
+ }
444
456
  }
445
457
  }
446
- }, [data, type]);
458
+ }, [activeForm]);
447
459
 
448
460
  return (
449
461
  <>
450
462
  <div className="formSplit">
451
- {multiple && data[type] && data[type].length > 1 && (
463
+ {multiple && (
452
464
  <>
453
465
  <div className="gridtxt__header">
454
466
  <span>Form List</span>
@@ -519,7 +531,7 @@ const GenericDynamic = ({
519
531
  handleDownloadForm(
520
532
  item,
521
533
  label,
522
- data
534
+ originalData
523
535
  )
524
536
  }
525
537
  >
@@ -609,7 +621,7 @@ const GenericDynamic = ({
609
621
  inputClass={''}
610
622
  inputValue={renderValue(
611
623
  field,
612
- data
624
+ originalData
613
625
  )}
614
626
  onChange={
615
627
  handleChange
@@ -643,7 +655,7 @@ const GenericDynamic = ({
643
655
  inputClass={''}
644
656
  inputValue={renderValue(
645
657
  field,
646
- data
658
+ originalData
647
659
  )}
648
660
  onChange={
649
661
  handleChange
package/components/crm/generic/GenericIndex.jsx CHANGED
@@ -113,9 +113,6 @@ const ReportForm = ({ config, userProfile }) => {
113
113
  toast.error('Invalid file format received.');
114
114
  }
115
115
  }
116
-
117
- // Proceed with the export functionality
118
- console.info(formData, res);
119
116
  }
120
117
  } catch (err) {
121
118
  console.error(err);
package/package.json CHANGED
@@ -1,6 +1,10 @@
1
1
  {
2
2
  "dependencies": {
3
3
  "@inovua/reactdatagrid-community": "^5.10.2",
4
+ "@nivo/bar": "^0.85.1",
5
+ "@nivo/core": "^0.85.1",
6
+ "@nivo/line": "^0.85.1",
7
+ "@nivo/pie": "^0.85.1",
4
8
  "@tinymce/tinymce-react": "^5.0.1",
5
9
  "add": "^2.0.6",
6
10
  "akar-icons": "^1.9.31",
@@ -50,7 +54,7 @@
50
54
  "react-dom": "^17.0.1"
51
55
  },
52
56
  "name": "@visns-studio/visns-components",
53
- "version": "3.7.8",
57
+ "version": "3.7.10",
54
58
  "description": "Various packages to assist in the development of our Custom Applications.",
55
59
  "main": "index.js",
56
60
  "scripts": {