@visns-studio/visns-components 3.7.3 → 3.7.5

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 (5) hide show
  1. package/components/crm/Field.jsx +17 -1
  2. package/components/crm/Form.jsx +92 -27
  3. package/components/crm/generic/GenericDynamic.jsx +26 -3
  4. package/components/crm/generic/GenericFormBuilder.jsx +1 -1
  5. package/package.json +1 -1
package/components/crm/Field.jsx CHANGED
@@ -397,7 +397,6 @@ function Field({
397
397
  </div>
398
398
  ) : null;
399
399
  case 'text':
400
- case 'json':
401
400
  case 'password':
402
401
  return (
403
402
  <input
@@ -414,6 +413,23 @@ function Field({
414
413
  autoComplete="off"
415
414
  />
416
415
  );
416
+ case 'json':
417
+ return (
418
+ <input
419
+ type={settings.type}
420
+ data-name={settings.id}
421
+ data-parent={settings.parent}
422
+ className={inputClass[settings.id]}
423
+ placeholder=" "
424
+ onChange={onChange}
425
+ value={
426
+ inputValue && inputValue !== 'null'
427
+ ? inputValue
428
+ : ''
429
+ }
430
+ autoComplete="off"
431
+ />
432
+ );
417
433
  case 'html5_date':
418
434
  return (
419
435
  <input
package/components/crm/Form.jsx CHANGED
@@ -56,6 +56,7 @@ function Form({
56
56
  const handleChange = (e) => {
57
57
  const id = e.target.dataset.jsonkey || e.target.dataset.name;
58
58
  const value = e.target.value;
59
+ const parent = e.target.dataset.parent ? e.target.dataset.parent : '';
59
60
  let _dataset = {};
60
61
 
61
62
  if (e.target[e.target.selectedIndex]) {
@@ -71,10 +72,20 @@ function Form({
71
72
  : e.target.files[0],
72
73
  }));
73
74
  } else {
74
- setFormData((prevState) => ({
75
- ...prevState,
76
- [id]: value,
77
- }));
75
+ if (parent) {
76
+ setFormData((prevState) => ({
77
+ ...prevState,
78
+ [parent]: {
79
+ ...prevState[parent],
80
+ [id]: value,
81
+ },
82
+ }));
83
+ } else {
84
+ setFormData((prevState) => ({
85
+ ...prevState,
86
+ [id]: value,
87
+ }));
88
+ }
78
89
  }
79
90
 
80
91
  if (!_.isEmpty(_dataset)) {
@@ -132,6 +143,10 @@ function Form({
132
143
  }
133
144
  };
134
145
 
146
+ useEffect(() => {
147
+ console.info(formData);
148
+ }, [formData]);
149
+
135
150
  const handleChangeCheckbox = (e) => {
136
151
  const { checked, name, value } = e.target;
137
152
 
@@ -388,6 +403,22 @@ function Form({
388
403
  return { columns, dataSource };
389
404
  };
390
405
 
406
+ const renderInputValue = (i, f) => {
407
+ let value = '';
408
+
409
+ if (i.hasOwnProperty('parent') && i.parent) {
410
+ if (f[i.parent]) {
411
+ value = i.hasOwnProperty('key')
412
+ ? f[i.parent][i.key]
413
+ : f[i.parent][i.id];
414
+ }
415
+ } else {
416
+ value = i.hasOwnProperty('key') ? f[i.key] : f[i.id];
417
+ }
418
+
419
+ return value;
420
+ };
421
+
391
422
  // Helper function to transform snake_case to Title Case
392
423
  const transformKey = (key) => {
393
424
  return (
@@ -630,15 +661,19 @@ function Form({
630
661
  }, {});
631
662
 
632
663
  let payload = { ...formData };
633
-
634
664
  Object.keys(formData).forEach((key) => {
635
665
  const value = formData[key];
636
666
  const field = fieldMap[key];
637
667
 
638
668
  // Check if the field exists and is of type 'multi-dropdown-ajax'
639
669
  if (field && field.type === 'multi-dropdown-ajax') {
640
- // Check if 'value' and 'label' exist
641
- if (value && 'value' in value && 'label' in value) {
670
+ // First check if 'value' is an object and then check if 'value' and 'label' exist in it
671
+ if (
672
+ typeof value === 'object' &&
673
+ value !== null &&
674
+ 'value' in value &&
675
+ 'label' in value
676
+ ) {
642
677
  console.info(
643
678
  `Updating payload for key ${key}:`,
644
679
  value
@@ -727,18 +762,26 @@ function Form({
727
762
 
728
763
  if (formSettings.fields.length > 0) {
729
764
  formSettings.fields.forEach((item) => {
730
- const { id, value, type } = item;
731
- if (value !== '') {
732
- if (['date', 'datetime', 'time'].includes(type)) {
733
- _formData[id] =
734
- value instanceof Date
735
- ? value
736
- : moment(value).toDate();
765
+ const { id, value, type, parent } = item;
766
+
767
+ if (parent) {
768
+ _formData[parent] = {
769
+ ..._formData[parent],
770
+ [id]: value ? value : '',
771
+ };
772
+ } else {
773
+ if (value !== '') {
774
+ if (['date', 'datetime', 'time'].includes(type)) {
775
+ _formData[id] =
776
+ value instanceof Date
777
+ ? value
778
+ : moment(value).toDate();
779
+ } else {
780
+ _formData[id] = value;
781
+ }
737
782
  } else {
738
- _formData[id] = value;
783
+ _formData[id] = '';
739
784
  }
740
- } else {
741
- _formData[id] = '';
742
785
  }
743
786
  });
744
787
  }
@@ -895,6 +938,15 @@ function Form({
895
938
  updatedFormData[field.id] = tempRes;
896
939
  }
897
940
 
941
+ if (field && field.hasOwnProperty('parent')) {
942
+ let tempObj = data;
943
+ let tempRes = '';
944
+
945
+ tempRes = tempObj[field.parent][field.id];
946
+
947
+ updatedFormData[field.parent][field.id] = tempRes;
948
+ }
949
+
898
950
  if (item.includes('.')) {
899
951
  // Split the item string by the dot
900
952
  let keys = item.split('.');
@@ -1055,6 +1107,13 @@ function Form({
1055
1107
  ) {
1056
1108
  return null;
1057
1109
  }
1110
+ if (
1111
+ item.hasOwnProperty('updateOnly') &&
1112
+ item.updateOnly === true &&
1113
+ formType === 'create'
1114
+ ) {
1115
+ return null;
1116
+ }
1058
1117
 
1059
1118
  switch (item.type) {
1060
1119
  case 'table':
@@ -1095,11 +1154,10 @@ function Form({
1095
1154
  fetchData={fetchData}
1096
1155
  formData={formData}
1097
1156
  inputClass={inputClass}
1098
- inputValue={
1099
- item.hasOwnProperty('key')
1100
- ? formData[item.key]
1101
- : formData[item.id]
1102
- }
1157
+ inputValue={renderInputValue(
1158
+ item,
1159
+ formData
1160
+ )}
1103
1161
  key={
1104
1162
  index +
1105
1163
  '-fields-' +
@@ -1195,6 +1253,14 @@ function Form({
1195
1253
  ) {
1196
1254
  return null;
1197
1255
  }
1256
+ if (
1257
+ item.hasOwnProperty('updateOnly') &&
1258
+ item.updateOnly === true &&
1259
+ formType === 'create'
1260
+ ) {
1261
+ return null;
1262
+ }
1263
+
1198
1264
  return (
1199
1265
  <Field
1200
1266
  api={api}
@@ -1207,11 +1273,10 @@ function Form({
1207
1273
  fetchData={fetchData}
1208
1274
  formData={formData}
1209
1275
  inputClass={inputClass}
1210
- inputValue={
1211
- item.hasOwnProperty('key')
1212
- ? formData[item.key]
1213
- : formData[item.id]
1214
- }
1276
+ inputValue={renderInputValue(
1277
+ item,
1278
+ formData
1279
+ )}
1215
1280
  key={
1216
1281
  index +
1217
1282
  '-fields-' +
package/components/crm/generic/GenericDynamic.jsx CHANGED
@@ -34,7 +34,13 @@ const updateField = (fields, name, value) => {
34
34
  const renderValue = (field, data) => {
35
35
  switch (field.type) {
36
36
  case 'datetime':
37
+ return field.value && moment(field.value).isValid()
38
+ ? moment(field.value).toDate()
39
+ : '';
37
40
  case 'date':
41
+ return field.value && moment(field.value).isValid()
42
+ ? moment(field.value).toDate()
43
+ : '';
38
44
  case 'dynamicdata':
39
45
  if (field.dynamicfield && typeof field.dynamicfield === 'string') {
40
46
  // Split the dynamicfield string into table and key parts using the "::" delimiter
@@ -62,6 +68,7 @@ const renderValue = (field, data) => {
62
68
  ? moment(field.value).toDate()
63
69
  : '';
64
70
  default:
71
+ console.info(field, data);
65
72
  return field.value || '';
66
73
  }
67
74
  };
@@ -194,6 +201,16 @@ const GenericDynamic = ({
194
201
  setActiveForm((prevState) => updateField(prevState, id, value));
195
202
  };
196
203
 
204
+ const handleChangeToggle = (e) => {
205
+ if (!e) {
206
+ return;
207
+ }
208
+
209
+ const { name, checked } = e.target;
210
+
211
+ setActiveForm((prevState) => updateField(prevState, name, checked));
212
+ };
213
+
197
214
  const handleFileDownload = async (d) => {
198
215
  const toastId = toast.loading('Downloading file...'); // Show loading toast
199
216
  try {
@@ -423,7 +440,9 @@ const GenericDynamic = ({
423
440
  }
424
441
  } else {
425
442
  setActiveForm([]);
426
- // handleAddNewForm();
443
+ if (multiple && templateStatus) {
444
+ handleAddNewForm();
445
+ }
427
446
  }
428
447
  }, [data, type]);
429
448
 
@@ -602,10 +621,12 @@ const GenericDynamic = ({
602
621
  onChangeDate={
603
622
  handleChangeDate
604
623
  }
624
+ onChangeToggle={
625
+ handleChangeToggle
626
+ }
605
627
  onFileDownload={
606
628
  handleFileDownload
607
629
  }
608
- // Omitted other props for brevity
609
630
  style={{}}
610
631
  />
611
632
  )
@@ -634,10 +655,12 @@ const GenericDynamic = ({
634
655
  onChangeDate={
635
656
  handleChangeDate
636
657
  }
658
+ onChangeToggle={
659
+ handleChangeToggle
660
+ }
637
661
  onFileDownload={
638
662
  handleFileDownload
639
663
  }
640
- // Omitted other props for brevity
641
664
  style={{}}
642
665
  />
643
666
  )
package/components/crm/generic/GenericFormBuilder.jsx CHANGED
@@ -245,7 +245,7 @@ function GenericFormBuilder({ setting, urlParam, userProfile }) {
245
245
  }
246
246
 
247
247
  // Modify Validation for Label and Description based on Type
248
- if (field.type === 'plaintext' || field.type === 'plaintextheading') {
248
+ if (field.type === 'plaintext') {
249
249
  // For plaintext or plaintextheading, description is required
250
250
  if (!field.description || field.description === '') {
251
251
  errors.push('Please enter a description for the field.');
package/package.json CHANGED
@@ -50,7 +50,7 @@
50
50
  "react-dom": "^17.0.1"
51
51
  },
52
52
  "name": "@visns-studio/visns-components",
53
- "version": "3.7.3",
53
+ "version": "3.7.5",
54
54
  "description": "Various packages to assist in the development of our Custom Applications.",
55
55
  "main": "index.js",
56
56
  "scripts": {