@visns-studio/visns-components 2.9.9 → 3.0.1

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/Form.jsx +170 -63
  2. package/components/crm/generic/GenericDetail.jsx +9 -4
  3. package/package.json +2 -2
package/components/crm/Form.jsx CHANGED
@@ -5,8 +5,11 @@ import { toast } from 'react-toastify';
5
5
  import moment from 'moment';
6
6
  import parse from 'html-react-parser';
7
7
  import _ from 'lodash';
8
+ import ReactDataGrid from '@inovua/reactdatagrid-community';
8
9
  import { CircleX } from 'akar-icons';
9
10
 
11
+ import '@inovua/reactdatagrid-community/index.css';
12
+
10
13
  import CustomFetch from './Fetch';
11
14
  import Field from './Field';
12
15
  import Table from './DataGrid';
@@ -25,9 +28,10 @@ function Form({
25
28
  userProfile,
26
29
  }) {
27
30
  const navigate = useNavigate();
28
- const [inputClass, setInputClass] = useState({});
29
- const [formData, setFormData] = useState({});
30
31
  const [fetchTrigger, setFetchTrigger] = useState(false);
32
+ const [formData, setFormData] = useState({});
33
+ const [inputClass, setInputClass] = useState({});
34
+ const [tableData, setTableData] = useState({ columns: [], dataSource: [] });
31
35
  const [uploadProgress, setUploadProgress] = useState(0);
32
36
 
33
37
  const childDropdownCallback = (data) => {
@@ -232,68 +236,68 @@ function Form({
232
236
  ...prevState,
233
237
  [id]: e.target.checked,
234
238
  }));
235
- } else {
236
- const updateFormData = (dataToUpdate) => {
237
- setFormData((prevState) => ({
238
- ...prevState,
239
- ...dataToUpdate,
240
- }));
241
- };
242
-
243
- const updatePostalData = (checked) => {
244
- const postalData = checked
245
- ? {
246
- postal_address1: formData.address1,
247
- postal_address2: formData.address2,
248
- postal_suburb: formData.suburb,
249
- postal_postcode: formData.postcode,
250
- postal_state: formData.state,
251
- postal_country: formData.country,
252
- }
253
- : {
254
- postal_address1: '',
255
- postal_address2: '',
256
- postal_suburb: '',
257
- postal_postcode: '',
258
- postal_state: '',
259
- postal_country: '',
260
- };
261
-
262
- updateFormData(postalData);
263
- };
264
-
265
- if (id === 'same_address') {
266
- updatePostalData(e.target.checked);
267
- }
239
+ }
268
240
 
269
- if (e.target.dataset.show) {
270
- const _show = e.target.dataset.show
271
- ? JSON.parse(e.target.dataset.show)
272
- : [];
241
+ const updateFormData = (dataToUpdate) => {
242
+ setFormData((prevState) => ({
243
+ ...prevState,
244
+ ...dataToUpdate,
245
+ }));
246
+ };
273
247
 
274
- if (_show.length > 0) {
275
- const updatedFields = formSettings.fields.map((field) => {
276
- const showObject = _show.find(
277
- (showItem) => showItem.id === field.id
278
- );
279
- if (
280
- showObject &&
281
- showObject.value &&
282
- showObject.value.length > 0
283
- ) {
284
- field.hide = !showObject.value.includes(
285
- e.target.checked
286
- );
287
- }
288
- return field;
289
- });
248
+ const updatePostalData = (checked) => {
249
+ const postalData = checked
250
+ ? {
251
+ postal_address1: formData.address1,
252
+ postal_address2: formData.address2,
253
+ postal_suburb: formData.suburb,
254
+ postal_postcode: formData.postcode,
255
+ postal_state: formData.state,
256
+ postal_country: formData.country,
257
+ }
258
+ : {
259
+ postal_address1: '',
260
+ postal_address2: '',
261
+ postal_suburb: '',
262
+ postal_postcode: '',
263
+ postal_state: '',
264
+ postal_country: '',
265
+ };
266
+
267
+ updateFormData(postalData);
268
+ };
269
+
270
+ if (id === 'same_address') {
271
+ updatePostalData(e.target.checked);
272
+ }
290
273
 
291
- if (updateForm) {
292
- updateForm((prevState) => ({
293
- ...prevState,
294
- fields: updatedFields,
295
- }));
274
+ if (e.target.dataset.show) {
275
+ const _show = e.target.dataset.show
276
+ ? JSON.parse(e.target.dataset.show)
277
+ : [];
278
+
279
+ if (_show.length > 0) {
280
+ const updatedFields = formSettings.fields.map((field) => {
281
+ const showObject = _show.find(
282
+ (showItem) => showItem.id === field.id
283
+ );
284
+ if (
285
+ showObject &&
286
+ showObject.value &&
287
+ showObject.value.length > 0
288
+ ) {
289
+ field.hide = !showObject.value.includes(
290
+ e.target.checked
291
+ );
296
292
  }
293
+ return field;
294
+ });
295
+
296
+ if (updateForm) {
297
+ updateForm((prevState) => ({
298
+ ...prevState,
299
+ fields: updatedFields,
300
+ }));
297
301
  }
298
302
  }
299
303
  }
@@ -342,6 +346,37 @@ function Form({
342
346
  }));
343
347
  };
344
348
 
349
+ const parseTableData = (d) => {
350
+ const dataSource = d;
351
+ const keys = Object.keys(dataSource[0]);
352
+ let columns = [];
353
+
354
+ keys.forEach((key) => {
355
+ columns.push({
356
+ name: key,
357
+ header: transformKey(key),
358
+ defaultFlex: 1,
359
+ });
360
+ });
361
+
362
+ return { columns, dataSource };
363
+ };
364
+
365
+ // Helper function to transform snake_case to Title Case
366
+ const transformKey = (key) => {
367
+ return (
368
+ key
369
+ // Replace underscores with spaces
370
+ .replace(/_/g, ' ')
371
+ // Split the string into words
372
+ .split(' ')
373
+ // Capitalize the first letter of each word
374
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
375
+ // Join the words back into a string
376
+ .join(' ')
377
+ );
378
+ };
379
+
345
380
  const handleSubmit = (e) => {
346
381
  e.preventDefault();
347
382
  let fields = formSettings.fields;
@@ -513,12 +548,43 @@ function Form({
513
548
  }
514
549
 
515
550
  toast.success(
516
- 'Entry successfully saved into the system.'
551
+ formSettings?.save?.toast?.success
552
+ ? formSettings.save.toast.success
553
+ : 'Entry successfully saved into the system.'
517
554
  );
518
555
 
519
556
  if (result.redirect) {
520
557
  navigate(result.redirect);
521
558
  }
559
+
560
+ if (
561
+ formSettings?.save?.return?.type &&
562
+ formSettings?.save?.return?.param
563
+ ) {
564
+ if (formSettings.save.return.type === 'table') {
565
+ if (
566
+ result[formSettings.save.return.param]
567
+ .length > 0
568
+ ) {
569
+ const td = parseTableData(
570
+ result[
571
+ formSettings.save.return.param
572
+ ]
573
+ );
574
+
575
+ setTableData((prevState) => ({
576
+ ...prevState,
577
+ ...td,
578
+ }));
579
+ } else {
580
+ setTableData((prevState) => ({
581
+ ...prevState,
582
+ columns: [],
583
+ dataSource: [],
584
+ }));
585
+ }
586
+ }
587
+ }
522
588
  } else {
523
589
  toast.error(
524
590
  <div>
@@ -544,7 +610,9 @@ function Form({
544
610
  }
545
611
 
546
612
  toast.success(
547
- 'Entry successfully saved into the system.'
613
+ formSettings?.save?.toast?.success
614
+ ? formSettings.save.toast.success
615
+ : 'Entry successfully saved into the system.'
548
616
  );
549
617
 
550
618
  if (
@@ -559,6 +627,33 @@ function Form({
559
627
  if (result.redirect) {
560
628
  navigate(result.redirect);
561
629
  }
630
+
631
+ if (
632
+ formSettings?.save?.return?.type &&
633
+ formSettings?.save?.return?.param
634
+ ) {
635
+ if (formSettings.save.return.type === 'table') {
636
+ if (
637
+ result[formSettings.save.return.param]
638
+ .length > 0
639
+ ) {
640
+ const td = parseTableData(
641
+ result[formSettings.save.return.param]
642
+ );
643
+
644
+ setTableData((prevState) => ({
645
+ ...prevState,
646
+ ...td,
647
+ }));
648
+ } else {
649
+ setTableData((prevState) => ({
650
+ ...prevState,
651
+ columns: [],
652
+ dataSource: [],
653
+ }));
654
+ }
655
+ }
656
+ }
562
657
  } else {
563
658
  toast.error(
564
659
  <div>
@@ -991,10 +1086,22 @@ function Form({
991
1086
  }}
992
1087
  />
993
1088
  </div>
1089
+ {tableData?.dataSource?.length > 0 && (
1090
+ <div className="formItem fwItem">
1091
+ <ReactDataGrid
1092
+ idProperty="form-table-result"
1093
+ columns={tableData.columns}
1094
+ dataSource={tableData.dataSource}
1095
+ style={{ minHeight: 550 }}
1096
+ />
1097
+ </div>
1098
+ )}
994
1099
  </form>
995
1100
  <div className="polActions">
996
1101
  <button className="btn" onClick={handleSubmit}>
997
- Save
1102
+ {formSettings?.save?.button?.label
1103
+ ? formSettings.save.button.label
1104
+ : 'Save'}
998
1105
  </button>
999
1106
  </div>
1000
1107
  </div>
package/components/crm/generic/GenericDetail.jsx CHANGED
@@ -879,10 +879,15 @@ function GenericDetail({ setting, urlParam, userProfile }) {
879
879
  >
880
880
  {page && page.title ? page.title : null}
881
881
  </Link>{' '}
882
- <CircleChevronRight strokeWidth={2} size={18} />{' '}
883
- {data && data[page.titleKey]
884
- ? data[page.titleKey]
885
- : null}
882
+ {data && data[page.titleKey] ? (
883
+ <>
884
+ <CircleChevronRight
885
+ strokeWidth={2}
886
+ size={18}
887
+ />{' '}
888
+ {data[page.titleKey]}
889
+ </>
890
+ ) : null}
886
891
  </h1>
887
892
  {total > 0 && (
888
893
  <div className="titleInfo">
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "awesome-debounce-promise": "^2.1.0",
8
8
  "axios": "^1.6.2",
9
9
  "framer-motion": "^10.16.16",
10
- "html-react-parser": "^5.0.7",
10
+ "html-react-parser": "^5.0.8",
11
11
  "lodash": "^4.17.21",
12
12
  "moment": "^2.29.4",
13
13
  "motion": "^10.16.4",
@@ -45,7 +45,7 @@
45
45
  "react-dom": "^17.0.1"
46
46
  },
47
47
  "name": "@visns-studio/visns-components",
48
- "version": "2.9.9",
48
+ "version": "3.0.1",
49
49
  "description": "Various packages to assist in the development of our Custom Applications.",
50
50
  "main": "index.js",
51
51
  "scripts": {