@esri/solutions-components 0.10.12 → 0.10.13

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 (52) hide show
  1. package/dist/cjs/calcite-alert_4.cjs.entry.js +1 -1
  2. package/dist/cjs/calcite-flow_6.cjs.entry.js +103 -7
  3. package/dist/cjs/crowdsource-reporter.cjs.entry.js +173 -43
  4. package/dist/cjs/feature-list.cjs.entry.js +110 -17
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/{popupUtils-92e52dbf.js → popupUtils-47bd97e7.js} +1 -1
  7. package/dist/cjs/solutions-components.cjs.js +1 -1
  8. package/dist/collection/assets/t9n/crowdsource-reporter/resources.json +3 -1
  9. package/dist/collection/assets/t9n/crowdsource-reporter/resources_en.json +3 -1
  10. package/dist/collection/assets/t9n/feature-list/resources.json +3 -1
  11. package/dist/collection/assets/t9n/feature-list/resources_en.json +3 -1
  12. package/dist/collection/components/create-feature/create-feature.js +145 -2
  13. package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +227 -43
  14. package/dist/collection/components/feature-list/feature-list.css +16 -1
  15. package/dist/collection/components/feature-list/feature-list.js +165 -15
  16. package/dist/collection/components/layer-list/layer-list.js +35 -6
  17. package/dist/collection/demos/crowdsource-reporter.html +2 -0
  18. package/dist/collection/utils/popupUtils.js +1 -1
  19. package/dist/collection/utils/popupUtils.ts +1 -1
  20. package/dist/components/create-feature2.js +91 -3
  21. package/dist/components/crowdsource-reporter.js +178 -45
  22. package/dist/components/feature-list2.js +152 -50
  23. package/dist/components/layer-list2.js +18 -6
  24. package/dist/components/popupUtils.js +1 -1
  25. package/dist/esm/calcite-alert_4.entry.js +1 -1
  26. package/dist/esm/calcite-flow_6.entry.js +104 -8
  27. package/dist/esm/crowdsource-reporter.entry.js +173 -43
  28. package/dist/esm/feature-list.entry.js +110 -17
  29. package/dist/esm/loader.js +1 -1
  30. package/dist/esm/{popupUtils-00c655fb.js → popupUtils-349a26e6.js} +1 -1
  31. package/dist/esm/solutions-components.js +1 -1
  32. package/dist/solutions-components/assets/t9n/crowdsource-reporter/resources.json +3 -1
  33. package/dist/solutions-components/assets/t9n/crowdsource-reporter/resources_en.json +3 -1
  34. package/dist/solutions-components/assets/t9n/feature-list/resources.json +3 -1
  35. package/dist/solutions-components/assets/t9n/feature-list/resources_en.json +3 -1
  36. package/dist/solutions-components/demos/crowdsource-reporter.html +2 -0
  37. package/dist/solutions-components/p-40e305b4.entry.js +17 -0
  38. package/dist/solutions-components/p-4d44410b.entry.js +6 -0
  39. package/dist/solutions-components/{p-900fee65.js → p-5a473f0d.js} +1 -1
  40. package/dist/solutions-components/p-9b83e593.entry.js +6 -0
  41. package/dist/solutions-components/{p-cde8d6e5.entry.js → p-f6bc95b3.entry.js} +1 -1
  42. package/dist/solutions-components/solutions-components.esm.js +1 -1
  43. package/dist/solutions-components/utils/popupUtils.ts +1 -1
  44. package/dist/types/components/create-feature/create-feature.d.ts +34 -0
  45. package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +80 -21
  46. package/dist/types/components/feature-list/feature-list.d.ts +49 -7
  47. package/dist/types/components/layer-list/layer-list.d.ts +4 -0
  48. package/dist/types/components.d.ts +77 -0
  49. package/package.json +1 -1
  50. package/dist/solutions-components/p-064e43e0.entry.js +0 -6
  51. package/dist/solutions-components/p-2d1afda0.entry.js +0 -17
  52. package/dist/solutions-components/p-c9260b4c.entry.js +0 -6
@@ -17,7 +17,7 @@ const t9n = require('./t9n-42ba6ea3.js');
17
17
  const resources = require('./resources-ed5f0434.js');
18
18
  const locale$1 = require('./locale-a09603ee.js');
19
19
  const mapViewUtils = require('./mapViewUtils-8d4da732.js');
20
- const popupUtils = require('./popupUtils-92e52dbf.js');
20
+ const popupUtils = require('./popupUtils-47bd97e7.js');
21
21
  require('./guid-02e5380f.js');
22
22
  require('./resources-dfe71ff2.js');
23
23
  require('./browser-69696af0.js');
@@ -368,6 +368,8 @@ const CreateFeature = class {
368
368
  this.customizeSubmit = false;
369
369
  this.searchConfiguration = undefined;
370
370
  this.isMobile = undefined;
371
+ this.floorLevel = undefined;
372
+ this.formElements = undefined;
371
373
  this._editorLoading = false;
372
374
  this._showSearchWidget = undefined;
373
375
  }
@@ -382,6 +384,20 @@ const CreateFeature = class {
382
384
  * The Editor constructor
383
385
  */
384
386
  Editor;
387
+ /**
388
+ * esri/form/ExpressionInfo: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-ExpressionInfo.html
389
+ * The ExpressionInfo constructor
390
+ */
391
+ ExpressionInfo;
392
+ /**
393
+ * esri/form/elements/FieldElement: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-elements-FieldElement.html
394
+ * The FieldElement constructor
395
+ */
396
+ FieldElement;
397
+ /**
398
+ * esri/form/FormTemplate: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html
399
+ */
400
+ FormTemplate;
385
401
  /**
386
402
  * esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
387
403
  * The Editor instance
@@ -487,6 +503,15 @@ const CreateFeature = class {
487
503
  this._editor.viewModel.featureFormViewModel.submit();
488
504
  }
489
505
  }
506
+ /**
507
+ * refresh the feature form
508
+ * @returns Promise that resolves when the operation is complete
509
+ */
510
+ async refresh(floorLevel) {
511
+ if (this._editor) {
512
+ void this._setFloorLevel(floorLevel);
513
+ }
514
+ }
490
515
  //--------------------------------------------------------------------------
491
516
  //
492
517
  // Events (public)
@@ -542,7 +567,7 @@ const CreateFeature = class {
542
567
  const loaderClass = this._editorLoading ? "" : "display-none";
543
568
  const featureFormClass = this._editorLoading ? "display-none" : "";
544
569
  const mobileMapClass = this.isMobile ? "show-map" : "display-none";
545
- return (index.h(index.Fragment, { key: '8adaa70257dfef9632f82be75dbdff572e2c39b3' }, index.h("calcite-loader", { key: 'e1a1aba8613d9cea1033513748dd21b7f27f9806', class: loaderClass, label: "", scale: "s" }), index.h("div", { key: 'e1089ffe60d079f345d358aac7ae1a6bd59a55df', class: featureFormClass, id: "feature-form" }), index.h("div", { key: '52274b6cd4c9f6886293f858caac9e572697da25', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), index.h("div", { key: '64108cfa3bb57f9739bfb4951352c5523c194761', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
570
+ return (index.h(index.Fragment, { key: '47d29e529402482acf3811c37c0cd5a426ed40ed' }, index.h("calcite-loader", { key: '283b2c6a0f1722c9a8d955e11390e65e6041b247', class: loaderClass, label: "", scale: "s" }), index.h("div", { key: 'bb596467d5da22882932259db6a9e8029717850b', class: featureFormClass, id: "feature-form" }), index.h("div", { key: 'c3887f5c5aa92efdcf588da4918933dadb87937f', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), index.h("div", { key: '566069a6202053468a3cf7a221feb071491eabb4', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
546
571
  }
547
572
  //--------------------------------------------------------------------------
548
573
  //
@@ -565,15 +590,21 @@ const CreateFeature = class {
565
590
  * @protected
566
591
  */
567
592
  async initModules() {
568
- const [Editor, reactiveUtils, Search, MapView] = await locale$1.loadModules([
593
+ const [Editor, reactiveUtils, Search, ExpressionInfo, FieldElement, FormTemplate, MapView] = await locale$1.loadModules([
569
594
  "esri/widgets/Editor",
570
595
  "esri/core/reactiveUtils",
571
596
  "esri/widgets/Search",
597
+ "esri/form/ExpressionInfo",
598
+ "esri/form/elements/FieldElement",
599
+ "esri/form/FormTemplate",
572
600
  "esri/views/MapView"
573
601
  ]);
574
602
  this.Editor = Editor;
575
603
  this.reactiveUtils = reactiveUtils;
576
604
  this.Search = Search;
605
+ this.ExpressionInfo = ExpressionInfo;
606
+ this.FieldElement = FieldElement;
607
+ this.FormTemplate = FormTemplate;
577
608
  this.MapView = MapView;
578
609
  }
579
610
  /**
@@ -664,6 +695,7 @@ const CreateFeature = class {
664
695
  const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (state) => {
665
696
  if (state === 'ready') {
666
697
  this._mapViewContainer?.classList?.replace("show-map", "hide-map");
698
+ void this._setFloorLevel(this.floorLevel);
667
699
  this._showSearchWidget = false;
668
700
  this.progressStatus.emit(1);
669
701
  this.drawComplete.emit();
@@ -808,6 +840,59 @@ const CreateFeature = class {
808
840
  }
809
841
  return searchConfiguration;
810
842
  }
843
+ /**
844
+ * Add the floor level value to form
845
+ * @param level selected floor level
846
+ *
847
+ * @protected
848
+ */
849
+ async _setFloorLevel(level) {
850
+ if (!level) {
851
+ return;
852
+ }
853
+ const layer = await mapViewUtils.getLayerOrTable(this._updatedMapView, this.selectedLayerId);
854
+ if (layer?.floorInfo?.floorField) {
855
+ const layerField = layer.fields.find((field) => field.name === layer.floorInfo.floorField);
856
+ // if layer field is present and form template is not present only then we can set value of floorfield into feature form otherwise create a mannual formtemplate to add the floorfeild element
857
+ if (layerField && !layer?.formTemplate) {
858
+ this._editor.viewModel.featureFormViewModel.setValue(layerField.name, level);
859
+ layerField.editable = false;
860
+ }
861
+ else if (layer.formTemplate && this.formElements) {
862
+ const floorInfoExpression = new this.ExpressionInfo({
863
+ expression: `"${level}"`,
864
+ name: "floor-info-test",
865
+ title: "Floor Info",
866
+ returnType: "string"
867
+ });
868
+ const levelIdFieldElement = new this.FieldElement({
869
+ label: layer.floorInfo.floorField,
870
+ editableExpression: 'false',
871
+ fieldName: layer.floorInfo.floorField,
872
+ input: {
873
+ type: "text-box",
874
+ maxLength: 50,
875
+ minLength: 0
876
+ },
877
+ valueExpression: floorInfoExpression.name
878
+ });
879
+ this._updatedMapView.map.editableLayers.forEach((layer) => {
880
+ const orgElements = this.formElements.orgElements;
881
+ const orgExpressionInfos = this.formElements.orgExpressionInfos;
882
+ const elements = [...orgElements];
883
+ elements.push(levelIdFieldElement);
884
+ // Creating formtemplate
885
+ const floorInfoTemplate = new this.FormTemplate({
886
+ title: layer.formTemplate.title,
887
+ description: layer.formTemplate.description,
888
+ elements,
889
+ expressionInfos: [floorInfoExpression].concat(orgExpressionInfos)
890
+ });
891
+ layer.formTemplate = floorInfoTemplate;
892
+ });
893
+ }
894
+ }
895
+ }
811
896
  /**
812
897
  * Hides the elements of editor widget
813
898
  * @protected
@@ -1636,6 +1721,7 @@ const LayerList = class {
1636
1721
  this.layers = undefined;
1637
1722
  this.showFeatureCount = true;
1638
1723
  this.showNextIcon = false;
1724
+ this.applyLayerViewFilter = false;
1639
1725
  this._noLayersToDisplay = false;
1640
1726
  this._mapLayerIds = [];
1641
1727
  this._isLoading = false;
@@ -1706,9 +1792,9 @@ const LayerList = class {
1706
1792
  * Renders the component.
1707
1793
  */
1708
1794
  render() {
1709
- return (index.h(index.Fragment, { key: '9366302a704c1dbdd7a65aef5c43d0ad84a44b23' }, this._isLoading && index.h("calcite-loader", { key: '69974a23fd42bc37ef13816efbe6d06e28cb2749', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
1710
- index.h("calcite-notice", { key: 'a93abb55b4db09727b3634cb1935e482c377d662', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, index.h("div", { key: 'b9046685353b8894e6c6094cff47fab7a8e07ffa', slot: "title" }, this._translations.error), index.h("div", { key: '90a052e1d80779a09a32fdd35563a1ce21d582e0', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
1711
- index.h("calcite-list", { key: '709c1b8edd5710a2476ecef638199c2f929b4165', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
1795
+ return (index.h(index.Fragment, { key: '19f68b9a5d0b6c85832544e4281e1c4a1707ba86' }, this._isLoading && index.h("calcite-loader", { key: 'c908f311165f8f520f267a0dcde0bd954863ba6b', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
1796
+ index.h("calcite-notice", { key: '56dfb252f998333ed6a671cccddd5683f08ad63d', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, index.h("div", { key: 'a27ad45ac2b1984152af5a80da36583f7c375be6', slot: "title" }, this._translations.error), index.h("div", { key: 'a9466cb560b6ee2c72ebd18130ce21371f9e7cdf', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
1797
+ index.h("calcite-list", { key: '40e54ba92d2f48a97dd0987808f4b7fdefd266bb', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
1712
1798
  }
1713
1799
  //--------------------------------------------------------------------------
1714
1800
  //
@@ -1735,10 +1821,20 @@ const LayerList = class {
1735
1821
  this._layerItemsHash = await mapViewUtils.getMapLayerHash(this.mapView, true);
1736
1822
  const allMapLayers = await mapViewUtils.getAllLayers(this.mapView);
1737
1823
  // eslint-disable-next-line @typescript-eslint/no-misused-promises
1738
- allMapLayers.forEach(async (eachLayer) => {
1824
+ for (const eachLayer of allMapLayers) {
1739
1825
  if (eachLayer?.type === "feature") {
1740
1826
  if (this.showFeatureCount) {
1741
1827
  const q = eachLayer.createQuery();
1828
+ //if layer has definitionExpression append it to the where clause
1829
+ if (eachLayer?.definitionExpression) {
1830
+ q.where = q.where + ' AND ' + eachLayer.definitionExpression;
1831
+ }
1832
+ if (this.applyLayerViewFilter) {
1833
+ const featureLayerView = await mapViewUtils.getFeatureLayerView(this.mapView, eachLayer.id);
1834
+ if (featureLayerView?.filter?.where) {
1835
+ q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;
1836
+ }
1837
+ }
1742
1838
  const result = eachLayer.queryFeatureCount(q);
1743
1839
  def.push(result);
1744
1840
  void result.then(async (resCount) => {
@@ -1751,7 +1847,7 @@ const LayerList = class {
1751
1847
  });
1752
1848
  }
1753
1849
  }
1754
- });
1850
+ }
1755
1851
  await Promise.all(def).then(() => {
1756
1852
  const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
1757
1853
  this._mapLayerIds = editableLayerIds.reverse();
@@ -47,11 +47,13 @@ const CrowdsourceReporter = class {
47
47
  this.searchConfiguration = undefined;
48
48
  this.showComments = undefined;
49
49
  this.showUserImageInCommentsList = false;
50
+ this.showFeatureSymbol = false;
51
+ this.showMyReportsOnly = false;
50
52
  this.theme = "light";
51
53
  this.zoomToScale = undefined;
54
+ this.floorLevel = undefined;
52
55
  this._featureCreationFailedErrorMsg = undefined;
53
56
  this._filterActive = false;
54
- this._filterOpen = false;
55
57
  this._flowItems = [];
56
58
  this._hasValidLayers = false;
57
59
  this._loadingFeatureDetails = undefined;
@@ -146,6 +148,11 @@ const CrowdsourceReporter = class {
146
148
  * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
147
149
  */
148
150
  reactiveUtils;
151
+ /**
152
+ * "esri/layers/support/FeatureFilter": https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureFilter.html
153
+ * Esri FeatureFilter
154
+ */
155
+ FeatureFilter;
149
156
  /**
150
157
  * __esri.Graphic: The selected feature
151
158
  */
@@ -182,6 +189,22 @@ const CrowdsourceReporter = class {
182
189
  * boolean: when true allow panel to show in full height
183
190
  */
184
191
  _showFullPanel;
192
+ /**
193
+ * string: The current floor expression
194
+ */
195
+ _floorExpression;
196
+ /**
197
+ * _esri.Element: form elements of the selected layer
198
+ */
199
+ _formElements = [];
200
+ /**
201
+ * string[]: URL params set by using filters.
202
+ */
203
+ _filterUrlParams;
204
+ /**
205
+ * FilterInitState: filter's init state
206
+ */
207
+ _filterInitState;
185
208
  //--------------------------------------------------------------------------
186
209
  //
187
210
  // Watch handlers
@@ -201,6 +224,30 @@ const CrowdsourceReporter = class {
201
224
  await this.setMapView();
202
225
  });
203
226
  }
227
+ /**
228
+ * Called each time the floorLevel prop is changed.
229
+ */
230
+ async floorLevelWatchHandler() {
231
+ if (this._editableLayerIds) {
232
+ // updates all layer's defination expression when floorLevel is changed
233
+ // then refresh the components to update features
234
+ for (const layerId of this._editableLayerIds) {
235
+ const layer = await mapViewUtils.getLayerOrTable(this.mapView, layerId);
236
+ if (layer.floorInfo?.floorField) {
237
+ this._updateFloorDefinitionExpression(layer);
238
+ }
239
+ }
240
+ }
241
+ if (this._layerList) {
242
+ await this._layerList.refresh();
243
+ }
244
+ if (this._featureList) {
245
+ void this._featureList.refresh();
246
+ }
247
+ if (this._createFeature) {
248
+ void this._createFeature.refresh(this.floorLevel);
249
+ }
250
+ }
204
251
  //--------------------------------------------------------------------------
205
252
  //
206
253
  // Methods (public)
@@ -242,7 +289,7 @@ const CrowdsourceReporter = class {
242
289
  */
243
290
  render() {
244
291
  const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
245
- return (index.h(index.Host, { key: 'e4d2d075e2667ba3e396178e4b820658655813d3' }, this._reportSubmitted && index.h("calcite-alert", { key: '0cc4678edca8993e529aed1f328816f7ff00e565', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: 'cb1bc1c8bed7db3d4535542e7cd6c42119fe1ac3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: '83693e1946d2825cf57f6d8ae5ca5a21a0cc7bfc', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: 'c8477c3bcbee4a71ba5169cf80895702bd2adf16', slot: "title" }, this._translations.error), index.h("div", { key: '30722d6036a5634269cd3e485c94e55a06d008a2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.h("calcite-alert", { key: '373b8130788f65dd55106ea3be7fe17aecf80ebb', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '999471c510f95a9699fcb84307bd7daca608725a', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '72accc95ed73545157141ae82b1be1ff0b407a26', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: 'b8beab27be23c9c7f3a9a4a0e839090e63ed9916', slot: "title" }, this._translations.error), index.h("div", { key: '60d4db0311c00b9bf4ccf56bed1c4d40e003d30d', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '4bcca25c6f33c79eeb013cb469dd4e650bc649fb' }, index.h("calcite-shell", { key: '5d68b182b17c9a09671f73ec477efd0bf5badcfb', "content-behind": true }, this._getReporter())), this.filterModal()));
292
+ return (index.h(index.Host, { key: '57ea463ae2d3eac3a23e63ed8702f5fde3743e09' }, this._reportSubmitted && index.h("calcite-alert", { key: '4082ad71fa4d6c3a01ec0ac6477e81b3d3bc40e1', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '9e042989b10a7d68347b7f34b9f31957ede3ca37', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: '573dc6a472b00191a1822c95ba0ee2192c486612', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: 'f3799e01a09ccbeec651762833783d3200729f1b', slot: "title" }, this._translations.error), index.h("div", { key: 'cd80f9a2c8df9a4c7b5b517a9e98ce4622e230c2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.h("calcite-alert", { key: '1137ce7794f36419d20a5b5d2d1f390e72713155', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '24a0604c3be1cab965c48ab46435c349a7d67f65', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '86112e4c449e1061fa436822670dc93cb3bfe949', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: '94be8a14c1bf22127f8018dfe3a92304870ce70d', slot: "title" }, this._translations.error), index.h("div", { key: '6b30463e2ee941834fcad93e4cbe32e5a65d592d', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '9b928eab61af6ed84a0059dbc04c633c131f879b' }, index.h("calcite-shell", { key: 'e07ac5d7d6d8e8c8fd0001586448ab13733e2ed5', "content-behind": true }, this._getReporter()))));
246
293
  }
247
294
  //--------------------------------------------------------------------------
248
295
  //
@@ -257,10 +304,12 @@ const CrowdsourceReporter = class {
257
304
  * @protected
258
305
  */
259
306
  async _initModules() {
260
- const [reactiveUtils] = await locale.loadModules([
261
- "esri/core/reactiveUtils"
307
+ const [reactiveUtils, FeatureFilter] = await locale.loadModules([
308
+ "esri/core/reactiveUtils",
309
+ "esri/layers/support/FeatureFilter"
262
310
  ]);
263
311
  this.reactiveUtils = reactiveUtils;
312
+ this.FeatureFilter = FeatureFilter;
264
313
  }
265
314
  /**
266
315
  * Set the selected layer id and layer name
@@ -299,6 +348,10 @@ const CrowdsourceReporter = class {
299
348
  case "feature-list":
300
349
  renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName));
301
350
  break;
351
+ case "filter-panel":
352
+ renderLists.push(this.getFilterPanel());
353
+ void this._restoreFilters();
354
+ break;
302
355
  case "feature-details":
303
356
  renderLists.push(this.getFeatureDetailsFlowItem());
304
357
  break;
@@ -321,32 +374,6 @@ const CrowdsourceReporter = class {
321
374
  ? index.h("calcite-flow", null, renderLists?.length > 0 && renderLists)
322
375
  : index.h("calcite-loader", { label: "", scale: "m" })));
323
376
  }
324
- /**
325
- * Show filter component in modal
326
- * @returns node to interact with any configured filters for the current layer
327
- */
328
- filterModal() {
329
- //get layer expression for current selected layer
330
- const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
331
- return (currentLayersExpressions.length > 0 &&
332
- index.h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName)), index.h("div", { slot: "content" }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
333
- }
334
- /**
335
- * Close the filter modal
336
- * @protected
337
- */
338
- _closeFilter() {
339
- if (this._filterOpen) {
340
- this._filterOpen = false;
341
- }
342
- }
343
- /**
344
- * When true the filter modal will be displayed
345
- * @protected
346
- */
347
- _toggleFilter() {
348
- this._filterOpen = !this._filterOpen;
349
- }
350
377
  /**
351
378
  * On sort option click update the sort field and sort order
352
379
  * @param sortField sort field
@@ -371,14 +398,27 @@ const CrowdsourceReporter = class {
371
398
  index.h(index.Fragment, null, index.h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "sortHighestVoted"); }, selected: this._updatedSortOption === "sortHighestVoted", value: "sortHighestVoted" }), index.h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "sortLowestVoted"); }, selected: this._updatedSortOption === "sortLowestVoted", value: "sortLowestVoted" })))));
372
399
  }
373
400
  /**
374
- * Reset the filter active prop
401
+ * Restores the applied filters
402
+ * @protected
403
+ */
404
+ _restoreFilters() {
405
+ // call the restore function when instant-apps-filter-list is ready
406
+ setTimeout(() => {
407
+ const canRestoreFilter = this._filterList && this._filterUrlParams && this._filterInitState;
408
+ if (canRestoreFilter) {
409
+ void this._filterList.restoreFilters(this._filterUrlParams[0], this._filterInitState);
410
+ }
411
+ }, 200);
412
+ }
413
+ /**
414
+ * Reset the filter
375
415
  * @protected
376
416
  */
377
- _handleFilterListReset() {
378
- //on reset filter list reset the filter active state
417
+ async _handleFilterListReset() {
418
+ //on reset filter list reset the filter states
379
419
  this._filterActive = false;
380
- //reset the features list to reflect the applied filters
381
- void this._featureList.refresh();
420
+ this._filterUrlParams = null;
421
+ this._filterInitState = null;
382
422
  }
383
423
  /**
384
424
  * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
@@ -388,8 +428,7 @@ const CrowdsourceReporter = class {
388
428
  //if filter are applied the url params will be generated
389
429
  //set the filter active state based on the length of applied filters
390
430
  this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
391
- //reset the features list to reflect the applied filters
392
- void this._featureList.refresh();
431
+ this._filterUrlParams = this._filterList.urlParams.getAll('filter');
393
432
  }
394
433
  /**
395
434
  * Get the feature layer list
@@ -398,7 +437,7 @@ const CrowdsourceReporter = class {
398
437
  */
399
438
  getLayerListFlowItem() {
400
439
  return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
401
- index.h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("layer-list", { class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
440
+ index.h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
402
441
  }
403
442
  /**
404
443
  * Get the layer list for creating a report
@@ -417,7 +456,7 @@ const CrowdsourceReporter = class {
417
456
  * @protected
418
457
  */
419
458
  getFeatureCreateFlowItem() {
420
- return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.h("create-feature", { customizeSubmit: true, isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
459
+ return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.h("create-feature", { customizeSubmit: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
421
460
  }
422
461
  /**
423
462
  * Update the progress bar status when editor panel changes
@@ -554,8 +593,10 @@ const CrowdsourceReporter = class {
554
593
  */
555
594
  async navigateToCreateFeature(evt) {
556
595
  if (evt.detail.layerId && evt.detail.layerName) {
557
- void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
596
+ await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
558
597
  }
598
+ // get the form template elements to pass in create-feature to create a LEVELID field in feature-form
599
+ this._getFormElements();
559
600
  this._showSubmitCancelButton = false;
560
601
  this.updatePanelState(false, true);
561
602
  this._flowItems = [...this._flowItems, "feature-create"];
@@ -612,6 +653,15 @@ const CrowdsourceReporter = class {
612
653
  void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
613
654
  this._flowItems = [...this._flowItems, "feature-list"];
614
655
  }
656
+ /**
657
+ * On back from filter panel get the filter's init state
658
+ * @protected
659
+ */
660
+ async backFromFilterPanel() {
661
+ this._filterInitState = await this._filterList.getFilterInitState();
662
+ void this._featureList.refresh();
663
+ this.backFromSelectedPanel();
664
+ }
615
665
  /**
616
666
  * On back from selected panel navigate to the previous panel
617
667
  * @protected
@@ -629,6 +679,10 @@ const CrowdsourceReporter = class {
629
679
  (updatedFlowItems[0] === 'feature-list' || updatedFlowItems[updatedFlowItems.length - 2] === 'feature-list'))) {
630
680
  this.updatePanelState(this._sidePanelCollapsed, false);
631
681
  }
682
+ // Coming back from feature details refresh the feature list to update the like count
683
+ if (this.reportingOptions && this.reportingOptions[this._selectedLayerId]?.like && updatedFlowItems[updatedFlowItems.length - 1] === 'feature-details') {
684
+ void this._featureList.refresh();
685
+ }
632
686
  updatedFlowItems.pop();
633
687
  //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
634
688
  if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
@@ -716,8 +770,19 @@ const CrowdsourceReporter = class {
716
770
  const layerExpressions = this.layerExpressions?.filter((exp) => exp.id === this._selectedLayerId);
717
771
  const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
718
772
  const showFilterIcon = layerExpressions?.length > 0;
719
- return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), index.h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && index.h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: this._toggleFilter.bind(this), slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
720
- index.h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true }, index.h("feature-list", { class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, selectedLayerId: layerId, sortingInfo: this._updatedSorting }))));
773
+ return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), index.h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && index.h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
774
+ index.h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true }, index.h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
775
+ }
776
+ /**
777
+ * Get Filter page for apllying filter
778
+ * @param layerId Layer id
779
+ * @param layerName Layer name
780
+ * @returns feature list node
781
+ * @protected
782
+ */
783
+ getFilterPanel() {
784
+ const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
785
+ return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), index.h("calcite-panel", { "full-height": true }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
721
786
  }
722
787
  /**
723
788
  * Returns the calcite-flow item for feature details
@@ -821,6 +886,8 @@ const CrowdsourceReporter = class {
821
886
  */
822
887
  async setMapView() {
823
888
  await this.getLayersToShowInList();
889
+ // filter/update the feature(s) if any filter/condition is already applied
890
+ await this._updateFeatures();
824
891
  // if only one valid layer is present then directly render features list
825
892
  if (this._editableLayerIds?.length === 1) {
826
893
  await this.renderFeaturesList();
@@ -922,6 +989,39 @@ const CrowdsourceReporter = class {
922
989
  const messages = await locale.getLocaleComponentStrings(this.el);
923
990
  this._translations = messages[0];
924
991
  }
992
+ /**
993
+ * Applies a definition expression when floor field and level are available
994
+ *
995
+ * @returns boolean
996
+ * @protected
997
+ */
998
+ _updateFloorDefinitionExpression(layer) {
999
+ const floorField = layer.floorInfo.floorField;
1000
+ // update the layer defination expression
1001
+ const floorExp = `${floorField} = '${this.floorLevel}'`;
1002
+ const defExp = layer.definitionExpression;
1003
+ layer.definitionExpression = defExp?.indexOf(this._floorExpression) > -1 ?
1004
+ defExp.replace(this._floorExpression, floorExp) : floorExp;
1005
+ this._floorExpression = floorExp;
1006
+ }
1007
+ /**
1008
+ * Gets the form template elements
1009
+ * @protected
1010
+ */
1011
+ _getFormElements() {
1012
+ const layer = this._selectedLayer;
1013
+ const floorField = layer?.floorInfo?.floorField;
1014
+ if (floorField && this.floorLevel && layer?.formTemplate) {
1015
+ const formElement = this._formElements.find((elm) => elm.id === layer.id);
1016
+ if (this._formElements.length === 0 || !formElement) {
1017
+ this._formElements.push({
1018
+ id: layer.id,
1019
+ orgElements: layer.formTemplate.elements,
1020
+ orgExpressionInfos: layer.formTemplate.expressionInfos
1021
+ });
1022
+ }
1023
+ }
1024
+ }
925
1025
  /**
926
1026
  * Returns the ids of all OR configured layers that support edits with the update capability
927
1027
  * @param hash each layer item details
@@ -939,6 +1039,35 @@ const CrowdsourceReporter = class {
939
1039
  return prev;
940
1040
  }, []);
941
1041
  }
1042
+ /**
1043
+ * updates the features for layer/feature list
1044
+ * @protected
1045
+ */
1046
+ async _updateFeatures() {
1047
+ for (const eachLayerId of this._editableLayerIds) {
1048
+ const featureLayerView = await mapViewUtils.getFeatureLayerView(this.mapView, eachLayerId);
1049
+ // In case of show my features add filter for Featurelayerview
1050
+ await this._showMyFeaturesOnly(featureLayerView);
1051
+ const floorField = featureLayerView.layer?.floorInfo?.floorField;
1052
+ if (floorField && this.floorLevel) {
1053
+ // Update the layer's defination as per selected floor level from map for all editable layers
1054
+ this._updateFloorDefinitionExpression(featureLayerView.layer);
1055
+ }
1056
+ }
1057
+ }
1058
+ /**
1059
+ * Show only loggedIn user's features
1060
+ * @protected
1061
+ */
1062
+ async _showMyFeaturesOnly(featureLayerView) {
1063
+ const loggedInUserName = this.mapView.map.portalItem.portal?.credential?.userId;
1064
+ if (loggedInUserName) {
1065
+ const creatorField = featureLayerView.layer.editFieldsInfo?.creatorField.toLowerCase();
1066
+ featureLayerView.filter = this.showMyReportsOnly && creatorField ? new this.FeatureFilter({
1067
+ where: creatorField + "='" + loggedInUserName + "'"
1068
+ }) : null;
1069
+ }
1070
+ }
942
1071
  /**
943
1072
  * Creates the list of layers to be listed in layer list
944
1073
  * @protected
@@ -1026,7 +1155,8 @@ const CrowdsourceReporter = class {
1026
1155
  }
1027
1156
  static get watchers() { return {
1028
1157
  "isMobile": ["isMobileWatchHandler"],
1029
- "mapView": ["mapViewWatchHandler"]
1158
+ "mapView": ["mapViewWatchHandler"],
1159
+ "floorLevel": ["floorLevelWatchHandler"]
1030
1160
  }; }
1031
1161
  };
1032
1162
  CrowdsourceReporter.style = CrowdsourceReporterStyle0;