@nys-cui/cui-formpill 0.2.6 → 0.2.8

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/cui-formpill.js +140 -12
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  },
7
7
  "main": "./dist/js/cui-formpill.js",
8
8
  "type": "module",
9
- "version": "0.2.6",
9
+ "version": "0.2.8",
10
10
  "scripts": {
11
11
  "clean": "rm -rf ./dist",
12
12
  "build": "npm run clean && cui --dep",
package/src/cui-formpill.js CHANGED
@@ -481,9 +481,26 @@ class CUI_FORMPILL extends HTMLElement {
481
481
  this.dispatchEvent(customEvent);
482
482
  this._state.adPills[i].addEventListener('pill_removed', (e) => {
483
483
  let removedValue = e.detail.state.sValue1;
484
+ // Find the index of the item in _initialState
485
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
486
+
487
+
488
+ // Check if the item is already in criteriaList
484
489
  if (!this._state.criteriaList.some(item => item.value === removedValue)) {
485
- this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
490
+ // Find the item in configData.filterCriteria.items
491
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
492
+ if (itemToAdd) {
493
+ // Insert the item at the same position as in _initialState
494
+ if (initialIndex !== -1) {
495
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
496
+ } else {
497
+ // If the item is not found in _initialState, default to adding at the end
498
+ this._state.criteriaList.push(itemToAdd);
499
+ }
500
+ }
486
501
  }
502
+
503
+
487
504
  const myEvent = new CustomEvent("pill-removed", {
488
505
  detail: { pill: e.detail }
489
506
  });
@@ -828,6 +845,10 @@ class CUI_FORMPILL extends HTMLElement {
828
845
  this.dValueField = document.createElement('cui-date');
829
846
  }
830
847
 
848
+ if (controls.value.validation) {
849
+ this.dValueField.setAttribute('validation', controls.value.validation);
850
+ }
851
+
831
852
  this.dValueField.setState({ 'label': `${(controls.value.fieldLabel) ? controls.value.fieldLabel : 'Value'}` })
832
853
  this.dValueField.setAttribute('value', pill._state.sValue3)
833
854
  this.dValueField.setAttribute('required', '');
@@ -848,16 +869,23 @@ class CUI_FORMPILL extends HTMLElement {
848
869
  if (controls.value.search) {
849
870
  this.dValueField.setAttribute('search', true)
850
871
  }
872
+ if (pill?._state?.sValue2) {
873
+ if (pill._state.sValue2.indexOf(',') == -1) {
874
+ this.dValueField.setAttribute('value', pill._state.sValue2)
875
+ }
876
+ else {
851
877
 
852
- if (pill._state.sValue2.indexOf(',') == -1) {
853
- this.dValueField.setAttribute('value', pill._state.sValue2)
878
+ let aValues = pill._state.sValue2.split(',');
879
+ this.dValueField.setAttribute('value', aValues)
880
+ }
854
881
  }
855
- else {
856
882
 
857
- let aValues = pill._state.sValue2.split(',');
883
+ if (pill?._state?.asValues) {
884
+ let aValues = pill._state.asValues.split(',');
858
885
  this.dValueField.setAttribute('value', aValues)
859
886
  }
860
887
 
888
+
861
889
  this.dValueField.setAttribute('required', '');
862
890
  this.dValueField.setAttribute('componentKey', 'contextHeaderValue');
863
891
  dPopoverBody.insertBefore(this.dValueField, dPopoverFooter);
@@ -876,6 +904,11 @@ class CUI_FORMPILL extends HTMLElement {
876
904
  if (controls.value.control[i].required) {
877
905
  this.field.setAttribute('required', '');
878
906
  }
907
+
908
+ if (controls.value.control[i].validation) {
909
+ this.field.setAttribute('validation', controls.value.control[i].validation)
910
+ }
911
+
879
912
  this.field.setAttribute('componentKey', controls.value.control[i].componentKey);
880
913
  dPopoverBody.insertBefore(this.field, dPopoverFooter);
881
914
  this.adFields.push(this.field);
@@ -887,6 +920,9 @@ class CUI_FORMPILL extends HTMLElement {
887
920
 
888
921
  }
889
922
  }
923
+
924
+ const customEvent = new CustomEvent('filter-change', { detail: { value: selectedItem.value, label: selectedItem.label } });
925
+ this.dispatchEvent(customEvent);
890
926
  } else {
891
927
 
892
928
 
@@ -1011,9 +1047,31 @@ class CUI_FORMPILL extends HTMLElement {
1011
1047
 
1012
1048
  formPill.addEventListener('pill_removed', (e) => {
1013
1049
  let removedValue = e.detail.state.sValue1;
1050
+ // Find the index of the item in _initialState
1051
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
1052
+
1053
+
1054
+ // Check if the item is already in criteriaList
1014
1055
  if (!this._state.criteriaList.some(item => item.value === removedValue)) {
1015
- this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
1056
+ // Find the item in configData.filterCriteria.items
1057
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
1058
+ if (itemToAdd) {
1059
+ // Insert the item at the same position as in _initialState
1060
+ if (initialIndex !== -1) {
1061
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
1062
+ } else {
1063
+ // If the item is not found in _initialState, default to adding at the end
1064
+ this._state.criteriaList.push(itemToAdd);
1065
+ }
1066
+ }
1016
1067
  }
1068
+
1069
+
1070
+
1071
+
1072
+
1073
+
1074
+
1017
1075
  const myEvent = new CustomEvent("pill-removed", {
1018
1076
  detail: { pill: e.detail }
1019
1077
  });
@@ -1085,8 +1143,23 @@ class CUI_FORMPILL extends HTMLElement {
1085
1143
 
1086
1144
  formPill.addEventListener('pill_removed', (e) => {
1087
1145
  let removedValue = e.detail.state.sValue1;
1146
+ // Find the index of the item in _initialState
1147
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
1148
+
1149
+
1150
+ // Check if the item is already in criteriaList
1088
1151
  if (!this._state.criteriaList.some(item => item.value === removedValue)) {
1089
- this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
1152
+ // Find the item in configData.filterCriteria.items
1153
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
1154
+ if (itemToAdd) {
1155
+ // Insert the item at the same position as in _initialState
1156
+ if (initialIndex !== -1) {
1157
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
1158
+ } else {
1159
+ // If the item is not found in _initialState, default to adding at the end
1160
+ this._state.criteriaList.push(itemToAdd);
1161
+ }
1162
+ }
1090
1163
  }
1091
1164
 
1092
1165
 
@@ -1147,8 +1220,22 @@ class CUI_FORMPILL extends HTMLElement {
1147
1220
 
1148
1221
  formPill.addEventListener('pill_removed', (e) => {
1149
1222
  let removedValue = e.detail.state.sValue1;
1223
+ // Find the index of the item in _initialState
1224
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
1225
+
1226
+ // Check if the item is already in criteriaList
1150
1227
  if (!this._state.criteriaList.some(item => item.value === removedValue)) {
1151
- this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
1228
+ // Find the item in configData.filterCriteria.items
1229
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
1230
+ if (itemToAdd) {
1231
+ // Insert the item at the same position as in _initialState
1232
+ if (initialIndex !== -1) {
1233
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
1234
+ } else {
1235
+ // If the item is not found in _initialState, default to adding at the end
1236
+ this._state.criteriaList.push(itemToAdd);
1237
+ }
1238
+ }
1152
1239
  }
1153
1240
 
1154
1241
 
@@ -1206,16 +1293,57 @@ class CUI_FORMPILL extends HTMLElement {
1206
1293
  for (const [k, v] of Object.entries(pill)) {
1207
1294
  formPill.setAttribute(k, v);
1208
1295
  }
1209
-
1296
+ // 'text': `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}: ${this.dValueField.value}`
1210
1297
  let pillText;
1211
1298
 
1212
1299
  if (pill.value2 != null && pill.value3 != null) {
1213
1300
  pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}: ${pill.value3}`
1214
1301
  } else if (pill.values != null) {
1215
- pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}: ${pill.values}`
1302
+ const foundItem = this._state.configData.filterCriteria.items.find(item => item.value === pill.value1);
1303
+ if (foundItem) {
1304
+ const labelsArray = [];
1305
+
1306
+ // Loop through each value in pill.values
1307
+ for (const val of pill.values) {
1308
+ const option = foundItem.controls.value.options.find(opt => opt.value === val);
1309
+ if (option) {
1310
+ labelsArray.push(option.label);
1311
+ } else {
1312
+ // If label not found, use the original value
1313
+ labelsArray.push(val);
1314
+ }
1315
+ }
1316
+
1317
+ // Join the labels with commas
1318
+ const labelsString = labelsArray.join(', ');
1319
+
1320
+ // Assign the label string to pillText
1321
+ pillText = `${foundItem.label}: ${labelsString}`;
1322
+ }
1216
1323
  } else if (pill.value2 != null) {
1217
- pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}: ${pill.value2}`
1324
+ const foundItem = this._state.configData.filterCriteria.items.find(item => item.value === pill.value1);
1325
+ if (foundItem) {
1326
+ // Split value2 by commas and trim whitespace
1327
+ const values = pill.value2.split(',').map(v => v.trim());
1328
+ const labelsArray = [];
1329
+
1330
+ // Loop through each value and find its label in options
1331
+ for (const val of values) {
1332
+ const option = foundItem.controls.value.options.find(opt => opt.value === val);
1333
+ if (option) {
1334
+ labelsArray.push(option.label);
1335
+ } else {
1336
+ // If label not found, use the original value
1337
+ labelsArray.push(val);
1338
+ }
1339
+ }
1218
1340
 
1341
+ // Join the found labels with commas
1342
+ const labelsString = labelsArray.join(', ');
1343
+
1344
+ // Assign the label string to pillText
1345
+ pillText = `${foundItem.label}: ${labelsString}`;
1346
+ }
1219
1347
  }
1220
1348
 
1221
1349
  formPill.setAttribute('text', pillText.slice(0, 30) + (pillText.length > 30 ? "..." : ""))
@@ -1298,7 +1426,7 @@ class CUI_FORMPILL extends HTMLElement {
1298
1426
 
1299
1427
  if (this._state.dMenuPopover) {
1300
1428
  this._state.dMenuPopover.state.bOpen = false;
1301
- if(this._state.dMenuPopover.isConnected) {
1429
+ if (this._state.dMenuPopover.isConnected) {
1302
1430
  document.body.removeChild(this._state.dMenuPopover);
1303
1431
  }
1304
1432
  this._state.dMenuPopover = null;