@nys-cui/cui-formpill 0.2.7 → 0.2.9

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 +145 -8
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.7",
9
+ "version": "0.2.9",
10
10
  "scripts": {
11
11
  "clean": "rm -rf ./dist",
12
12
  "build": "npm run clean && cui --dep",
package/src/cui-formpill.js CHANGED
@@ -416,6 +416,34 @@ class CUI_FORMPILL extends HTMLElement {
416
416
 
417
417
  this.shadowRoot.innerHTML = `${this.sFieldLayout} `;
418
418
 
419
+
420
+ if (this._state.adPills.length > 0) {
421
+ for (let pill of this._state.adPills) {
422
+
423
+ let removedValue = pill._state.sValue1;
424
+
425
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
426
+
427
+
428
+ // Check if the item is already in criteriaList
429
+ if (!this._state.criteriaList.some(item => item.value === removedValue)) {
430
+ // Find the item in configData.filterCriteria.items
431
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
432
+ if (itemToAdd) {
433
+ // Insert the item at the same position as in _initialState
434
+ if (initialIndex !== -1) {
435
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
436
+ } else {
437
+ // If the item is not found in _initialState, default to adding at the end
438
+ this._state.criteriaList.push(itemToAdd);
439
+ }
440
+ }
441
+ }
442
+ }
443
+ }
444
+
445
+
446
+
419
447
  this._state.adPills = [];
420
448
 
421
449
  if (this._state.configData?.filterCriteria && !this._state.configData.filterCriteria.loadedPills) {
@@ -481,9 +509,26 @@ class CUI_FORMPILL extends HTMLElement {
481
509
  this.dispatchEvent(customEvent);
482
510
  this._state.adPills[i].addEventListener('pill_removed', (e) => {
483
511
  let removedValue = e.detail.state.sValue1;
512
+ // Find the index of the item in _initialState
513
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
514
+
515
+
516
+ // Check if the item is already in criteriaList
484
517
  if (!this._state.criteriaList.some(item => item.value === removedValue)) {
485
- this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
518
+ // Find the item in configData.filterCriteria.items
519
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
520
+ if (itemToAdd) {
521
+ // Insert the item at the same position as in _initialState
522
+ if (initialIndex !== -1) {
523
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
524
+ } else {
525
+ // If the item is not found in _initialState, default to adding at the end
526
+ this._state.criteriaList.push(itemToAdd);
527
+ }
528
+ }
486
529
  }
530
+
531
+
487
532
  const myEvent = new CustomEvent("pill-removed", {
488
533
  detail: { pill: e.detail }
489
534
  });
@@ -891,7 +936,7 @@ class CUI_FORMPILL extends HTMLElement {
891
936
  if (controls.value.control[i].validation) {
892
937
  this.field.setAttribute('validation', controls.value.control[i].validation)
893
938
  }
894
-
939
+
895
940
  this.field.setAttribute('componentKey', controls.value.control[i].componentKey);
896
941
  dPopoverBody.insertBefore(this.field, dPopoverFooter);
897
942
  this.adFields.push(this.field);
@@ -1030,9 +1075,31 @@ class CUI_FORMPILL extends HTMLElement {
1030
1075
 
1031
1076
  formPill.addEventListener('pill_removed', (e) => {
1032
1077
  let removedValue = e.detail.state.sValue1;
1078
+ // Find the index of the item in _initialState
1079
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
1080
+
1081
+
1082
+ // Check if the item is already in criteriaList
1033
1083
  if (!this._state.criteriaList.some(item => item.value === removedValue)) {
1034
- this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
1084
+ // Find the item in configData.filterCriteria.items
1085
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
1086
+ if (itemToAdd) {
1087
+ // Insert the item at the same position as in _initialState
1088
+ if (initialIndex !== -1) {
1089
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
1090
+ } else {
1091
+ // If the item is not found in _initialState, default to adding at the end
1092
+ this._state.criteriaList.push(itemToAdd);
1093
+ }
1094
+ }
1035
1095
  }
1096
+
1097
+
1098
+
1099
+
1100
+
1101
+
1102
+
1036
1103
  const myEvent = new CustomEvent("pill-removed", {
1037
1104
  detail: { pill: e.detail }
1038
1105
  });
@@ -1104,8 +1171,23 @@ class CUI_FORMPILL extends HTMLElement {
1104
1171
 
1105
1172
  formPill.addEventListener('pill_removed', (e) => {
1106
1173
  let removedValue = e.detail.state.sValue1;
1174
+ // Find the index of the item in _initialState
1175
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
1176
+
1177
+
1178
+ // Check if the item is already in criteriaList
1107
1179
  if (!this._state.criteriaList.some(item => item.value === removedValue)) {
1108
- this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
1180
+ // Find the item in configData.filterCriteria.items
1181
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
1182
+ if (itemToAdd) {
1183
+ // Insert the item at the same position as in _initialState
1184
+ if (initialIndex !== -1) {
1185
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
1186
+ } else {
1187
+ // If the item is not found in _initialState, default to adding at the end
1188
+ this._state.criteriaList.push(itemToAdd);
1189
+ }
1190
+ }
1109
1191
  }
1110
1192
 
1111
1193
 
@@ -1166,8 +1248,22 @@ class CUI_FORMPILL extends HTMLElement {
1166
1248
 
1167
1249
  formPill.addEventListener('pill_removed', (e) => {
1168
1250
  let removedValue = e.detail.state.sValue1;
1251
+ // Find the index of the item in _initialState
1252
+ const initialIndex = this._initialState.configData.filterCriteria.items.findIndex(item => item.value === removedValue);
1253
+
1254
+ // Check if the item is already in criteriaList
1169
1255
  if (!this._state.criteriaList.some(item => item.value === removedValue)) {
1170
- this._state.criteriaList.unshift(this._state.configData.filterCriteria.items.find(item => item.value === removedValue));
1256
+ // Find the item in configData.filterCriteria.items
1257
+ const itemToAdd = this._state.configData.filterCriteria.items.find(item => item.value === removedValue);
1258
+ if (itemToAdd) {
1259
+ // Insert the item at the same position as in _initialState
1260
+ if (initialIndex !== -1) {
1261
+ this._state.criteriaList.splice(initialIndex, 0, itemToAdd);
1262
+ } else {
1263
+ // If the item is not found in _initialState, default to adding at the end
1264
+ this._state.criteriaList.push(itemToAdd);
1265
+ }
1266
+ }
1171
1267
  }
1172
1268
 
1173
1269
 
@@ -1225,16 +1321,57 @@ class CUI_FORMPILL extends HTMLElement {
1225
1321
  for (const [k, v] of Object.entries(pill)) {
1226
1322
  formPill.setAttribute(k, v);
1227
1323
  }
1228
-
1324
+ // 'text': `${this.criteria._state.aItems.find(item => item.value === this.criteria.value)?.label}: ${this.dValueField.value}`
1229
1325
  let pillText;
1230
1326
 
1231
1327
  if (pill.value2 != null && pill.value3 != null) {
1232
1328
  pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}: ${pill.value3}`
1233
1329
  } else if (pill.values != null) {
1234
- pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}: ${pill.values}`
1330
+ const foundItem = this._state.configData.filterCriteria.items.find(item => item.value === pill.value1);
1331
+ if (foundItem) {
1332
+ const labelsArray = [];
1333
+
1334
+ // Loop through each value in pill.values
1335
+ for (const val of pill.values) {
1336
+ const option = foundItem.controls.value.options.find(opt => opt.value === val);
1337
+ if (option) {
1338
+ labelsArray.push(option.label);
1339
+ } else {
1340
+ // If label not found, use the original value
1341
+ labelsArray.push(val);
1342
+ }
1343
+ }
1344
+
1345
+ // Join the labels with commas
1346
+ const labelsString = labelsArray.join(', ');
1347
+
1348
+ // Assign the label string to pillText
1349
+ pillText = `${foundItem.label}: ${labelsString}`;
1350
+ }
1235
1351
  } else if (pill.value2 != null) {
1236
- pillText = `${this._state.configData.filterCriteria.items.find(item => item.value === pill.value1)?.label}: ${pill.value2}`
1352
+ const foundItem = this._state.configData.filterCriteria.items.find(item => item.value === pill.value1);
1353
+ if (foundItem) {
1354
+ // Split value2 by commas and trim whitespace
1355
+ const values = pill.value2.split(',').map(v => v.trim());
1356
+ const labelsArray = [];
1357
+
1358
+ // Loop through each value and find its label in options
1359
+ for (const val of values) {
1360
+ const option = foundItem.controls.value.options.find(opt => opt.value === val);
1361
+ if (option) {
1362
+ labelsArray.push(option.label);
1363
+ } else {
1364
+ // If label not found, use the original value
1365
+ labelsArray.push(val);
1366
+ }
1367
+ }
1237
1368
 
1369
+ // Join the found labels with commas
1370
+ const labelsString = labelsArray.join(', ');
1371
+
1372
+ // Assign the label string to pillText
1373
+ pillText = `${foundItem.label}: ${labelsString}`;
1374
+ }
1238
1375
  }
1239
1376
 
1240
1377
  formPill.setAttribute('text', pillText.slice(0, 30) + (pillText.length > 30 ? "..." : ""))