@visns-studio/visns-components 4.8.10 → 4.8.12

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/crm/DataGrid.jsx +3 -1
  3. package/src/components/crm/Field.jsx +75 -22
  4. package/src/components/crm/Form.jsx +34 -6
  5. package/src/components/crm/generic/GenericDetail.jsx +2 -0
  6. package/src/components/crm/generic/GenericSort.jsx +2 -2
  7. package/src/components/crm/styles/Field.module.scss +20 -0
package/package.json CHANGED
@@ -75,7 +75,7 @@
75
75
  "react-dom": "^17.0.0 || ^18.0.0"
76
76
  },
77
77
  "name": "@visns-studio/visns-components",
78
- "version": "4.8.10",
78
+ "version": "4.8.12",
79
79
  "description": "Various packages to assist in the development of our Custom Applications.",
80
80
  "main": "src/index.js",
81
81
  "files": [
package/src/components/crm/DataGrid.jsx CHANGED
@@ -457,11 +457,12 @@ const DataGrid = forwardRef(
457
457
  form.hasOwnProperty('json') &&
458
458
  form.json === true
459
459
  ) {
460
- deleteForm.url = `${form.url}/jsonDelete`;
460
+ deleteForm.url = `${form.url}/json/delete`;
461
461
  deleteForm.method = 'POST';
462
462
  deleteForm.payload = {
463
463
  id: d[form.primaryKey],
464
464
  dataId: getDataId(),
465
+ key: form.jsonKey || '',
465
466
  };
466
467
  } else {
467
468
  deleteForm.url = `${form.url}/${
@@ -2686,6 +2687,7 @@ const DataGrid = forwardRef(
2686
2687
  paramValue={paramValue}
2687
2688
  style={style}
2688
2689
  updateForm={setFormData}
2690
+ userProfile={userProfile}
2689
2691
  />
2690
2692
  </Popup>
2691
2693
  <Popup
package/src/components/crm/Field.jsx CHANGED
@@ -39,6 +39,7 @@ function Field({
39
39
  mapbox,
40
40
  onChange,
41
41
  onChangeCheckbox,
42
+ onChangeCheckboxManual,
42
43
  onChangeColour,
43
44
  onChangeDate,
44
45
  onChangeNumberFormat,
@@ -386,32 +387,84 @@ function Field({
386
387
  />
387
388
  );
388
389
  case 'checkbox':
389
- return settings.options?.length > 0 ? (
390
+ return (
390
391
  <div
391
- className="fi__optionscontainer"
392
+ className={styles.fi__optionscontainer}
392
393
  style={{ paddingTop: '10px' }}
393
394
  >
394
- {settings.options.map((option, index) => (
395
- <div
396
- key={`${settings.id}-checkbox-option-${index}`}
397
- className="fi__checkboxcontainer"
398
- >
399
- <input
400
- name={settings.id}
401
- data-name={settings.id}
402
- type="checkbox"
403
- className="fi__customcheckbox"
404
- value={option.label}
405
- checked={inputValue[index]}
406
- onChange={onChangeCheckbox}
407
- />
408
- <label className="fi__checkboxlabel">
409
- {option.label}
410
- </label>{' '}
411
- </div>
412
- ))}
395
+ {settings.hasOwnProperty('mode')
396
+ ? settings.mode === 'useValue' &&
397
+ settings.options.length > 0
398
+ ? // Use Object.entries to loop through inputValue as it's an object
399
+ settings.options.map((value, index) => {
400
+ return (
401
+ <div
402
+ key={`${settings.id}-checkbox-option-${index}`}
403
+ className={
404
+ styles.fi__checkboxcontainer
405
+ }
406
+ >
407
+ <input
408
+ name={settings.id}
409
+ data-name={settings.id}
410
+ type="checkbox"
411
+ className={
412
+ styles.fi__customcheckbox
413
+ }
414
+ value={value.label}
415
+ checked={
416
+ inputValue
417
+ ? inputValue[value.id]
418
+ : false
419
+ }
420
+ onChange={(e) => {
421
+ onChangeCheckboxManual(
422
+ value.id,
423
+ settings.id,
424
+ e.target.checked
425
+ );
426
+ }}
427
+ />
428
+ <label
429
+ className={
430
+ styles.fi__checkboxlabel
431
+ }
432
+ >
433
+ {value.label}
434
+ </label>
435
+ </div>
436
+ );
437
+ })
438
+ : null
439
+ : // When settings.mode is not 'useValue', loop through settings.options
440
+ settings.options?.length > 0 &&
441
+ settings.options.map((option, index) => (
442
+ <div
443
+ key={`${settings.id}-checkbox-option-${index}`}
444
+ className="fi__checkboxcontainer"
445
+ >
446
+ <input
447
+ name={settings.id}
448
+ data-name={settings.id}
449
+ type="checkbox"
450
+ className={styles.fi__customcheckbox}
451
+ value={option.label}
452
+ checked={
453
+ inputValue
454
+ ? inputValue[index]
455
+ : false
456
+ }
457
+ onChange={onChangeCheckbox}
458
+ />
459
+ <label
460
+ className={styles.fi__checkboxlabel}
461
+ >
462
+ {option.label}
463
+ </label>
464
+ </div>
465
+ ))}
413
466
  </div>
414
- ) : null;
467
+ );
415
468
  case 'colour':
416
469
  return (
417
470
  <div className="cpicker">
package/src/components/crm/Form.jsx CHANGED
@@ -162,6 +162,16 @@ function Form({
162
162
  }));
163
163
  };
164
164
 
165
+ const handleChangeCheckboxManual = (id, name, value) => {
166
+ setFormData((prevFormData) => ({
167
+ ...prevFormData,
168
+ [name]: {
169
+ ...prevFormData[name],
170
+ [id]: value, // Update the value for the key that matches 'id'
171
+ },
172
+ }));
173
+ };
174
+
165
175
  const handleChangeColour = (event, color, id) => {
166
176
  if (color && event && id) {
167
177
  setFormData((prevState) => ({
@@ -422,6 +432,10 @@ function Form({
422
432
  const renderInputValue = (i, f) => {
423
433
  let value = '';
424
434
 
435
+ if (i.id === 'event_detail.type_of_event') {
436
+ console.info(i, f);
437
+ }
438
+
425
439
  if (i.hasOwnProperty('parent') && i.parent) {
426
440
  if (f[i.parent]) {
427
441
  value = i.hasOwnProperty('key')
@@ -605,7 +619,7 @@ function Form({
605
619
  switch (formType) {
606
620
  case 'create':
607
621
  if (formSettings.json) {
608
- url += '/jsonStore';
622
+ url += '/json/store';
609
623
  }
610
624
  break;
611
625
  case 'update':
@@ -613,8 +627,8 @@ function Form({
613
627
  if (formSettings.json) {
614
628
  url +=
615
629
  formType === 'update'
616
- ? '/jsonUpdate'
617
- : `/jsonDelete/${
630
+ ? '/json/update'
631
+ : `/json/delete/${
618
632
  formData[
619
633
  formSettings.primaryKey
620
634
  ]
@@ -759,7 +773,11 @@ function Form({
759
773
  let newValue = value;
760
774
 
761
775
  if (urlParam) {
762
- newValue = paramValue;
776
+ if (urlParam === 'userProfile.id') {
777
+ newValue = userProfile.id || 0;
778
+ } else {
779
+ newValue = paramValue;
780
+ }
763
781
  }
764
782
 
765
783
  if (parent) {
@@ -808,9 +826,13 @@ function Form({
808
826
  ) {
809
827
  let dataId = getDataId();
810
828
 
811
- urlSuffix = '/jsonGet';
829
+ urlSuffix = '/json/get';
812
830
  method = 'POST';
813
- payload = { id: columnId, dataId };
831
+ payload = {
832
+ id: columnId,
833
+ dataId,
834
+ key: formSettings.jsonKey || '',
835
+ };
814
836
  } else {
815
837
  urlSuffix = `/${columnId}`;
816
838
  method = 'GET';
@@ -1172,6 +1194,9 @@ function Form({
1172
1194
  mapbox={mapbox}
1173
1195
  onChange={handleChange}
1174
1196
  onChangeCheckbox={handleChangeCheckbox}
1197
+ onChangeCheckboxManual={
1198
+ handleChangeCheckboxManual
1199
+ }
1175
1200
  onChangeDate={handleChangeDate}
1176
1201
  onChangeNumberFormat={
1177
1202
  handleChangeNumberFormat
@@ -1319,6 +1344,9 @@ function Form({
1319
1344
  onChangeCheckbox={
1320
1345
  handleChangeCheckbox
1321
1346
  }
1347
+ onChangeCheckboxManual={
1348
+ handleChangeCheckboxManual
1349
+ }
1322
1350
  onChangeColour={handleChangeColour}
1323
1351
  onChangeDate={handleChangeDate}
1324
1352
  onChangeNumberFormat={
package/src/components/crm/generic/GenericDetail.jsx CHANGED
@@ -1156,6 +1156,7 @@ function GenericDetail({
1156
1156
  userProfile?.settings
1157
1157
  ?.style || {}
1158
1158
  }
1159
+ userProfile={userProfile}
1159
1160
  />
1160
1161
  </div>
1161
1162
  </div>
@@ -1494,6 +1495,7 @@ function GenericDetail({
1494
1495
  formType={formType}
1495
1496
  style={userProfile?.settings?.style || {}}
1496
1497
  updateForm={setFormData}
1498
+ userProfile={userProfile}
1497
1499
  />
1498
1500
  </Popup>
1499
1501
  </>
package/src/components/crm/generic/GenericSort.jsx CHANGED
@@ -83,7 +83,7 @@ const GenericSort = ({ category = false, layout = 'full' }) => {
83
83
  let payload = {};
84
84
 
85
85
  if (form?.json) {
86
- fetchUrl = fetchUrl + '/jsonSortList';
86
+ fetchUrl = fetchUrl + '/json/sortList';
87
87
  payload.id = paramValue;
88
88
  } else {
89
89
  fetchUrl = fetchUrl + '/sort_list';
@@ -104,7 +104,7 @@ const GenericSort = ({ category = false, layout = 'full' }) => {
104
104
  };
105
105
 
106
106
  if (form?.json) {
107
- fetchUrl = fetchUrl + '/jsonSortUpdate';
107
+ fetchUrl = fetchUrl + '/json/sortUpdate';
108
108
  payload.id = paramValue;
109
109
  } else {
110
110
  fetchUrl = fetchUrl + '/sort_update';
package/src/components/crm/styles/Field.module.scss CHANGED
@@ -81,6 +81,26 @@
81
81
  top: -5px;
82
82
  }
83
83
 
84
+ .fi__optionscontainer {
85
+ display: flex;
86
+ flex-wrap: wrap; // Allows options to wrap if they exceed the container's width
87
+ gap: 10px; // Adds space between checkboxes
88
+ margin-top: 8px; // Adjust as needed to create space between the label and checkboxes
89
+ }
90
+
91
+ .fi__checkboxcontainer {
92
+ display: flex;
93
+ align-items: center;
94
+ }
95
+
96
+ .fi__customcheckbox {
97
+ margin-right: 5px; // Space between checkbox and its label
98
+ }
99
+
100
+ .fi__checkboxlabel {
101
+ user-select: none; // Improves UX by preventing text selection
102
+ }
103
+
84
104
  input:not(:placeholder-shown) + .fi__span,
85
105
  textarea:not(:placeholder-shown) + .fi__span,
86
106
  select:not(:placeholder-shown) + .fi__span {