@esri/solutions-components 0.10.12 → 0.10.13

Sign up to get free protection for your applications and to get access to all the features.
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;