@esri/solutions-components 0.11.21 → 0.11.22

package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js

@@ -61,6 +61,8 @@ export class CrowdsourceReporter {
         this.zoomToScale = undefined;
         this.floorLevel = undefined;
         this.showFullCommentTitle = true;
+        this.filterByMapExtent = false;
+        this.sortOption = "newest";
         this._featureCreationFailedErrorMsg = undefined;
         this._filterActive = false;
         this._flowItems = [];
@@ -74,9 +76,10 @@ export class CrowdsourceReporter {
         this._translations = undefined;
         this._updatedProgressBarStatus = 25;
         this._updatedSorting = undefined;
-        this._updatedSortOption = "sortNewest";
+        this._updatedSortOption = "newest";
         this._commentSubmitted = false;
         this._addingCommentFailed = false;
+        this._filterOpen = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -238,8 +241,17 @@ export class CrowdsourceReporter {
     /**
      * Called each time the mapView prop is changed.
      */
-    async isMobileWatchHandler() {
+    async isMobileWatchHandler(isMobile) {
         this.updatePanelState(false, this._showFullPanel);
+        if (isMobile && this._flowItems[this._flowItems.length - 1] === "filter-panel") {
+            // while switching always first take back from filter panel to store currentLayerExpressions to restore the filter applied
+            await this.backFromFilterPanel();
+            this._filterOpen = true;
+        }
+        else if (!isMobile && this._filterOpen) {
+            await this._closeFilter();
+            this._flowItems = [...this._flowItems, "filter-panel"];
+        }
     }
     /**
      * Fetch translations when the locale is updated
@@ -289,17 +301,15 @@ export class CrowdsourceReporter {
     async showMyReportsOnlyWatchHandler() {
         if (this._editableLayerIds) {
             await this._updateFeatures();
-            setTimeout(() => {
-                // refresh layer list when user is on layer list panel
-                if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
-                    void this._layerList.refresh();
-                }
-                if (this._featureList) {
-                    void this._featureList.refresh();
-                }
-            }, 50);
+            this.refreshLists();
         }
     }
+    /**
+     * Called each time the filterByMapExtent prop is changed
+     */
+    filterByMapExtentChangeWatchHandler() {
+        this.refreshLists();
+    }
     /**
      * Called each time the layerExpressions prop is changed
     */
@@ -371,7 +381,7 @@ export class CrowdsourceReporter {
     * Update the filter list's initial definition expressions when the filter list component is available
     */
     componentWillRender() {
-        if (this._flowItems.includes('filter-panel')) {
+        if (this._flowItems.includes('filter-panel') || this._filterOpen) {
             void this._filterList?.updateInitDefExpressions({ initDefExpressions: this._initDefExpressions });
         }
     }
@@ -380,7 +390,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'b97883be773d948b75e6df1be453cde018a0dba1' }, this._reportSubmitted && h("calcite-alert", { key: '5fd17c13a0d4dc3c7fed1bb253e9196b83c20e1d', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '5c7a00cb3eaaaeb3a0501324c10b407746ecca46', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'd83c690d60c2e6f12a5ec356c5ae67185edc6a1e', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '9cbac1cf8698f1f918004764e4e43c25af766e4a', slot: "title" }, this._translations.error), h("div", { key: 'b4dbe07b4af7ab6c543596c6a3374b785fac4c7e', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'cde843955c6538ea857a0a187c995062efd777e7', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '86e3d820aa0d4362c07470bd60d8f0efd0614bc2', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'a0bdeec1bb3a33f3bfa938c0a1f4e631c6a76399', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b161d8e42a078d961ec4e42888d26f4314e9d5a4', slot: "title" }, this._translations.error), h("div", { key: 'cf3908f91448dfbb7cf6ec78b413eaa3327372be', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '42e2c8abaf43d6a587729229347efb2836827b98' }, h("calcite-shell", { key: '9e3174a699c37be8f20f4609f52c94ecb95d599f', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: 'e9a4807ce84ddb099c3f25f562b03c178b69d91f' }, this._reportSubmitted && h("calcite-alert", { key: '4eb1a05f3bdb3abb65d34a59e7452b1cbb2aa011', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'b6b1cb628e7a6695230e11c0320a60eb7ac8c77e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '3e5b98d155cb91950989229c54b58166d4072ba9', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '3ec867d92d44fc808415dbcf11cc0d4f64410ca1', slot: "title" }, this._translations.error), h("div", { key: 'b08a281438504605b23236622decfc632f5e980b', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '700ce59b43b4bcf5b3b5f269a05b7916aab03119', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'e3a853126b97fe73275b2908b7735dae0d8bacc4', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'af903aa26896dfbbe1deeac12aee1a6777e2c352', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'c88a104fbe9f0266c77c25a7067cfd4836e4ac81', slot: "title" }, this._translations.error), h("div", { key: 'a34b0543199de865a65ae426e49aa3cd13128126', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '0bf41b76dcd6e0c6c26b7e4ac03b2a6a100aacfb' }, h("calcite-shell", { key: '0e7c0a7f15a15677c73ea8a087f77332b34583cc', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -467,6 +477,36 @@ export class CrowdsourceReporter {
             ? h("calcite-flow", null, renderLists?.length > 0 && renderLists)
             : h("calcite-loader", { label: "", scale: "m" })));
     }
+    /**
+     * Show filter component in modal
+     * @returns node to interact with any configured filters for the current layer
+     */
+    filterModal() {
+        //get layer expression for current selected layer
+        const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
+        return (currentLayersExpressions.length > 0 &&
+            h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => {
+                    this._filterActive = false;
+                    void this._featureList.refresh();
+                }, onFilterUpdate: () => this._handleFilterUpdate(this._filterList?.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: true, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+    }
+    /**
+     * When true the filter modal will be displayed
+     * @protected
+     */
+    _toggleFilter() {
+        this._filterOpen = !this._filterOpen;
+    }
+    /**
+     * Close the filter modal
+     * @protected
+     */
+    async _closeFilter() {
+        this._filterOpen = false;
+        if (this._filterList != null) {
+            this._currentLayerExpressions = await this._filterList.getCurrentLayerExpressions();
+        }
+    }
     /**
      * On sort option click update the sort field and sort order
      * @param sortField sort field
@@ -487,8 +527,8 @@ export class CrowdsourceReporter {
     _toggleSort() {
         const canSortByVotes = this.reportingOptions && this.reportingOptions[this._selectedLayerId] &&
             this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "bottom-start", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { label: "", "selection-mode": "single" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "sortNewest"); }, selected: this._updatedSortOption === "sortNewest", value: "sortNewest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "sortOldest"); }, selected: this._updatedSortOption === "sortOldest", value: "sortOldest" }), canSortByVotes &&
-            h(Fragment, null, 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" }), 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" })))));
+        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "bottom-start", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { label: "", "selection-mode": "single-persist" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "newest"); }, selected: this._updatedSortOption === "newest", value: "newest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "oldest"); }, selected: this._updatedSortOption === "oldest", value: "oldest" }), canSortByVotes &&
+            h(Fragment, null, h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "highestVoted"); }, selected: this._updatedSortOption === "highestVoted", value: "highestVoted" }), h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "lowestVoted"); }, selected: this._updatedSortOption === "lowestVoted", value: "lowestVoted" })))));
     }
     /**
      * Reset the filter
@@ -515,7 +555,7 @@ export class CrowdsourceReporter {
      */
     getLayerListFlowItem() {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader, selected: this._flowItems[this._flowItems.length - 1] === "layer-list" }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", filterByMapExtent: this.filterByMapExtent, layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -702,32 +742,36 @@ export class CrowdsourceReporter {
      * @protected
      */
     async layerListLoaded(evt) {
-        const layersListed = evt.detail;
-        //consider only the layers listed in the layer-list component
-        const allMapLayers = await getAllLayers(this.mapView);
-        const reportingEnabledLayerIds = [];
-        this._validLayers = [];
-        this._nonVisibleValidLayers = [];
-        allMapLayers.forEach((eachLayer) => {
-            if (layersListed.includes(eachLayer.id)) {
-                this._validLayers.push(eachLayer);
-                if (!eachLayer.visible) {
-                    this._nonVisibleValidLayers.push(eachLayer);
-                }
-                //create list of reporting enabled layers
-                if (this._getLayersConfig(eachLayer.id)?.reporting && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
-                    reportingEnabledLayerIds.push(eachLayer.id);
+        // Check if user is present on the layer panel or if first component is feature list then only allow to store the non-reporting valid layers to avoid the feature visbility issue on map 
+        const presentOnLayerListPanel = this._layerList && this._flowItems[this._flowItems.length - 1] === "layer-list" || this._flowItems[0] === "feature-list";
+        if (presentOnLayerListPanel) {
+            const layersListed = evt.detail;
+            //consider only the layers listed in the layer-list component
+            const allMapLayers = await getAllLayers(this.mapView);
+            const reportingEnabledLayerIds = [];
+            this._validLayers = [];
+            this._nonVisibleValidLayers = [];
+            allMapLayers.forEach((eachLayer) => {
+                if (layersListed.includes(eachLayer.id)) {
+                    this._validLayers.push(eachLayer);
+                    if (!eachLayer.visible) {
+                        this._nonVisibleValidLayers.push(eachLayer);
+                    }
+                    //create list of reporting enabled layers
+                    if (this._getLayersConfig(eachLayer.id)?.reporting && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
+                        reportingEnabledLayerIds.push(eachLayer.id);
+                    }
                 }
+            });
+            //handleMap click on layer list loaded
+            this.handleMapClick();
+            //When we have any reporting layer then only show the create report button on layerList
+            this._hasValidLayers = reportingEnabledLayerIds.length > 0;
+            //navigate to the feature details if URL params found
+            if (!this._urlParamsLoaded) {
+                this._urlParamsLoaded = true;
+                await this.loadFeatureFromURLParams();
             }
-        });
-        //handleMap click on layer list loaded
-        this.handleMapClick();
-        //When we have any reporting layer then only show the create report button on layerList
-        this._hasValidLayers = reportingEnabledLayerIds.length > 0;
-        //navigate to the feature details if URL params found
-        if (!this._urlParamsLoaded) {
-            this._urlParamsLoaded = true;
-            await this.loadFeatureFromURLParams();
         }
     }
     /**
@@ -736,16 +780,27 @@ export class CrowdsourceReporter {
      * @protected
      */
     async displayFeaturesList(evt) {
-        this._updatedSorting = {
-            field: '',
-            order: 'desc'
-        };
-        this._updatedSortOption = "sortNewest";
         await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        void this.updateSortingOptions();
         void this.handleSelectedLayersFilter();
         this._flowItems = [...this._flowItems, "feature-list"];
         this._prevSelectedLayerId = this._selectedLayerId;
     }
+    /**
+     * Updates the sorting options based on the selected sort preference.
+     * @protected
+     */
+    updateSortingOptions() {
+        const sortingOption = this.sortOption === "" ? "newest" : this.sortOption;
+        const sortOrder = sortingOption === "oldest" || sortingOption === "lowestVoted" ? "asc" : "desc";
+        const likeField = this.reportingOptions?.[this._selectedLayerId]?.like ? this.reportingOptions?.[this._selectedLayerId]?.likeField : "";
+        const sortField = (sortingOption === "newest" || sortingOption === "oldest") ? this._selectedLayer.objectIdField : likeField;
+        this._updatedSorting = {
+            field: sortField,
+            order: sortOrder
+        };
+        this._updatedSortOption = !likeField && (sortingOption === "highestVoted" || sortingOption === "lowestVoted") ? "newest" : sortingOption;
+    }
     /**
      * On back from filter panel get the filter's init state
      * @protected
@@ -870,8 +925,8 @@ export class CrowdsourceReporter {
     getFeatureListFlowItem(layerId, layerName) {
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = this._currentLayerExpressions?.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-list" }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && 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 &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, locale: this.locale, 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 }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: !this.isMobile && this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-list" }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this.isMobile ? this._toggleFilter() : 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 &&
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", filterByMapExtent: this.filterByMapExtent, highlightOnHover: true, locale: this.locale, 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 }))));
     }
     /**
      * Returns the calcite-flow item for filter
@@ -879,7 +934,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFilterPanel() {
-        return (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), selected: this._flowItems[this._flowItems.length - 1] === "filter-panel" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+        return (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), selected: this._flowItems[this._flowItems.length - 1] === "filter-panel" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList?.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -1137,6 +1192,22 @@ export class CrowdsourceReporter {
             return prev;
         }, []);
     }
+    /**
+     * Refreshes the layer and feature list
+     * @protected
+     */
+    refreshLists() {
+        // added setTimeout for when the value of prop is updated then refresh the lists
+        setTimeout(() => {
+            // refresh layer list when user is on layer list panel
+            if (this._layerList && this._flowItems[this._flowItems.length - 1] === "layer-list") {
+                void this._layerList.refresh();
+            }
+            if (this._featureList) {
+                void this._featureList.refresh();
+            }
+        }, 50);
+    }
     /**
      * updates the features for layer/feature list
      * @protected
@@ -1197,6 +1268,7 @@ export class CrowdsourceReporter {
         };
         await this.layerListLoaded(evt);
         await this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        void this.updateSortingOptions();
         void this.handleSelectedLayersFilter();
     }
     /**
@@ -2096,6 +2168,46 @@ export class CrowdsourceReporter {
                 "attribute": "show-full-comment-title",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "filterByMapExtent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true only the features from current extent will be shown"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filter-by-map-extent",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "sortOption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: sorting option to show the feature list"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "sort-option",
+                "reflect": false,
+                "defaultValue": "\"newest\""
             }
         };
     }
@@ -2116,7 +2228,8 @@ export class CrowdsourceReporter {
             "_updatedSorting": {},
             "_updatedSortOption": {},
             "_commentSubmitted": {},
-            "_addingCommentFailed": {}
+            "_addingCommentFailed": {},
+            "_filterOpen": {}
         };
     }
     static get events() {
@@ -2184,6 +2297,9 @@ export class CrowdsourceReporter {
             }, {
                 "propName": "showMyReportsOnly",
                 "methodName": "showMyReportsOnlyWatchHandler"
+            }, {
+                "propName": "filterByMapExtent",
+                "methodName": "filterByMapExtentChangeWatchHandler"
             }, {
                 "propName": "layerExpressions",
                 "methodName": "layerExpressionsWatchHandler"

package/dist/collection/components/feature-list/feature-list.js

@@ -42,6 +42,7 @@ export class FeatureList {
         this.applyLayerViewFilter = false;
         this.reportingOptions = undefined;
         this.showFullTitle = true;
+        this.filterByMapExtent = false;
         this._featureItems = [];
         this._featuresCount = 0;
         this._isLoading = false;
@@ -75,6 +76,10 @@ export class FeatureList {
      * Symbol utils
      */
     symbolUtils;
+    /**
+     * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+     */
+    reactiveUtils;
     /**
      * IPopupUtils: To fetch the list label using popup titles
      */
@@ -87,6 +92,10 @@ export class FeatureList {
      * __esri.Handle: Highlight handle of the selections
      */
     _highlightHandle;
+    /**
+     * __esri.Handle: Handle for filter by map extent
+     */
+    _filterByMapExtentHandle;
     /**
      * __esri.Collection: Highlight options for the selected layer
      */
@@ -147,6 +156,17 @@ export class FeatureList {
     async whereClauseHandler() {
         await this.initializeFeatureItems();
     }
+    /**
+     * Watch for filterByMapExtent change and update the features list
+     */
+    async filterByMapExtentHandler(enabled) {
+        if (enabled) {
+            this.initializeMapExtentFilter();
+        }
+        else if (this._filterByMapExtentHandle) {
+            this._filterByMapExtentHandle.remove();
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -200,6 +220,9 @@ export class FeatureList {
             this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId);
             this._getFullTextSearchInfo();
         }
+        if (this.filterByMapExtent) {
+            this.initializeMapExtentFilter();
+        }
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -212,10 +235,10 @@ export class FeatureList {
      */
     render() {
         const showSearch = this._canShowFullTextSearch();
-        return (h("calcite-panel", { key: '56599be334eec65be00681d415db28917133b0c1', "full-height": true, "full-width": true }, showSearch &&
-            h("calcite-input", { key: '6de9873f6b7ab961dffe1334d2fc20b4322d8ea8', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: '4189b0d6c2a85116d529f5b7844c1f2d41657350', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '7f2e8276ad5345e21667b2dedc7e23f5c34672f5', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '63d44ac906c8d5584aac2cfbeec4cf0962d61abe', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '5843f8d7ca994cb799a9be0ab2f43a8f1e407e9a', class: this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : '', label: "", ref: el => this._calciteList = el, "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: '288364bc505fe6bce8b1260dce5173163a795330', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'e30e2d46a0005dd3e0d289deb4721b9155d4df29', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: '465989fd2befec544d5a49a355a70dc13b6962dc', "full-height": true, "full-width": true }, showSearch &&
+            h("calcite-input", { key: 'b09776016a6d854336b44bbfcb98eabbd50d1e95', class: "search", clearable: true, icon: "search", onCalciteInputChange: this._searchTextChanged.bind(this), placeholder: this._searchPlaceHolder, title: '', type: "search" }), this._isLoading && h("calcite-loader", { key: 'ac945c628e55c6dff43701c39d33c6a3a9ff8874', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: '00cb64af86c8cd8600cdf435f918131cc3e66a38', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '29b8bd85b3cb55c6bfb6adc282f8e69a7f9ea2ce', slot: "message" }, this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '002f3171e10af68d189c71dbd9fa86d3106f13a2', class: this.textSize === 'small' && !this.showFullTitle ? 'overflow-hidden' : '', label: "", ref: el => this._calciteList = el, "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '3df744fa6f86db8c092e10dee631907516985fc5', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: '0221928e0266e4b57c7ce5a34aa8ec758864312f', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -228,14 +251,16 @@ export class FeatureList {
      * @protected
      */
     async initModules() {
-        const [Color, esriConfig, symbolUtils] = await loadModules([
+        const [Color, esriConfig, symbolUtils, reactiveUtils] = await loadModules([
             "esri/Color",
             "esri/config",
-            "esri/symbols/support/symbolUtils"
+            "esri/symbols/support/symbolUtils",
+            "esri/core/reactiveUtils"
         ]);
         this.Color = Color;
         this.esriConfig = esriConfig;
         this.symbolUtils = symbolUtils;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Return the where condition string considering the defined where clause and layer's definition expression
@@ -272,12 +297,23 @@ export class FeatureList {
             this._featureItems = await this.queryPage(0);
             const whereCondition = await this.getWhereCondition();
             const query = {
-                where: whereCondition
+                where: whereCondition,
+                geometry: this.filterByMapExtent ? this.mapView.extent : null
             };
             this._featuresCount = await this._selectedLayer.queryFeatureCount(query);
             this._isLoading = false;
         }
     }
+    /**
+     * Updates the feature list based on map view extent
+     */
+    initializeMapExtentFilter() {
+        this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+            void this.initializeFeatureItems();
+        }, {
+            initial: true
+        });
+    }
     /**
      * On page change get the next updated feature list
      * @param event page change event
@@ -476,7 +512,8 @@ export class FeatureList {
             outFields: ["*"],
             returnGeometry: true,
             where: whereCondition,
-            outSpatialReference: this.mapView.spatialReference.toJSON()
+            outSpatialReference: this.mapView.spatialReference.toJSON(),
+            geometry: this.filterByMapExtent ? this.mapView.extent : null
         };
         //sort only when sort field and order is valid
         if (sortField && sortOrder) {
@@ -612,8 +649,8 @@ export class FeatureList {
                     if (width > 30) {
                         imgOrSvgElm.setAttribute('width', '30');
                     }
-                    else if (width < 19) {
-                        imgOrSvgElm.setAttribute('width', '20');
+                    if (height > 30) {
+                        imgOrSvgElm.setAttribute('height', '30');
                     }
                     imgOrSvgElm.setAttribute('viewBox', `0 0 ${width} ${height}`);
                 }
@@ -986,6 +1023,26 @@ export class FeatureList {
                 "attribute": "show-full-title",
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "filterByMapExtent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: when true the feature from map view extent will shown"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "filter-by-map-extent",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -1067,6 +1124,9 @@ export class FeatureList {
             }, {
                 "propName": "whereClause",
                 "methodName": "whereClauseHandler"
+            }, {
+                "propName": "filterByMapExtent",
+                "methodName": "filterByMapExtentHandler"
             }];
     }
 }