@esri/solutions-components 0.10.12 → 0.10.13

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

@@ -51,11 +51,13 @@ export class CrowdsourceReporter {
         this.searchConfiguration = undefined;
         this.showComments = undefined;
         this.showUserImageInCommentsList = false;
+        this.showFeatureSymbol = false;
+        this.showMyReportsOnly = false;
         this.theme = "light";
         this.zoomToScale = undefined;
+        this.floorLevel = undefined;
         this._featureCreationFailedErrorMsg = undefined;
         this._filterActive = false;
-        this._filterOpen = false;
         this._flowItems = [];
         this._hasValidLayers = false;
         this._loadingFeatureDetails = undefined;
@@ -155,6 +157,11 @@ export class CrowdsourceReporter {
      * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
      */
     reactiveUtils;
+    /**
+     * "esri/layers/support/FeatureFilter": https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureFilter.html
+     * Esri FeatureFilter
+     */
+    FeatureFilter;
     /**
      * __esri.Graphic: The selected feature
      */
@@ -191,6 +198,22 @@ export class CrowdsourceReporter {
      * boolean: when true allow panel to show in full height
      */
     _showFullPanel;
+    /**
+     * string: The current floor expression
+     */
+    _floorExpression;
+    /**
+     * _esri.Element: form elements of the selected layer
+     */
+    _formElements = [];
+    /**
+     * string[]: URL params set by using filters.
+     */
+    _filterUrlParams;
+    /**
+     * FilterInitState: filter's init state
+     */
+    _filterInitState;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -210,6 +233,30 @@ export class CrowdsourceReporter {
             await this.setMapView();
         });
     }
+    /**
+     * Called each time the floorLevel prop is changed.
+     */
+    async floorLevelWatchHandler() {
+        if (this._editableLayerIds) {
+            // updates all layer's defination expression when floorLevel is changed
+            // then refresh the components to update features
+            for (const layerId of this._editableLayerIds) {
+                const layer = await getLayerOrTable(this.mapView, layerId);
+                if (layer.floorInfo?.floorField) {
+                    this._updateFloorDefinitionExpression(layer);
+                }
+            }
+        }
+        if (this._layerList) {
+            await this._layerList.refresh();
+        }
+        if (this._featureList) {
+            void this._featureList.refresh();
+        }
+        if (this._createFeature) {
+            void this._createFeature.refresh(this.floorLevel);
+        }
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -251,7 +298,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'e4d2d075e2667ba3e396178e4b820658655813d3' }, this._reportSubmitted && 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" }, h("div", { key: 'cb1bc1c8bed7db3d4535542e7cd6c42119fe1ac3', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '83693e1946d2825cf57f6d8ae5ca5a21a0cc7bfc', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'c8477c3bcbee4a71ba5169cf80895702bd2adf16', slot: "title" }, this._translations.error), h("div", { key: '30722d6036a5634269cd3e485c94e55a06d008a2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && 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" }, h("div", { key: '999471c510f95a9699fcb84307bd7daca608725a', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '72accc95ed73545157141ae82b1be1ff0b407a26', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b8beab27be23c9c7f3a9a4a0e839090e63ed9916', slot: "title" }, this._translations.error), h("div", { key: '60d4db0311c00b9bf4ccf56bed1c4d40e003d30d', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '4bcca25c6f33c79eeb013cb469dd4e650bc649fb' }, h("calcite-shell", { key: '5d68b182b17c9a09671f73ec477efd0bf5badcfb', "content-behind": true }, this._getReporter())), this.filterModal()));
+        return (h(Host, { key: '57ea463ae2d3eac3a23e63ed8702f5fde3743e09' }, this._reportSubmitted && 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" }, h("div", { key: '9e042989b10a7d68347b7f34b9f31957ede3ca37', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '573dc6a472b00191a1822c95ba0ee2192c486612', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f3799e01a09ccbeec651762833783d3200729f1b', slot: "title" }, this._translations.error), h("div", { key: 'cd80f9a2c8df9a4c7b5b517a9e98ce4622e230c2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && 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" }, h("div", { key: '24a0604c3be1cab965c48ab46435c349a7d67f65', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '86112e4c449e1061fa436822670dc93cb3bfe949', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '94be8a14c1bf22127f8018dfe3a92304870ce70d', slot: "title" }, this._translations.error), h("div", { key: '6b30463e2ee941834fcad93e4cbe32e5a65d592d', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '9b928eab61af6ed84a0059dbc04c633c131f879b' }, h("calcite-shell", { key: 'e07ac5d7d6d8e8c8fd0001586448ab13733e2ed5', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -266,10 +313,12 @@ export class CrowdsourceReporter {
      * @protected
      */
     async _initModules() {
-        const [reactiveUtils] = await loadModules([
-            "esri/core/reactiveUtils"
+        const [reactiveUtils, FeatureFilter] = await loadModules([
+            "esri/core/reactiveUtils",
+            "esri/layers/support/FeatureFilter"
         ]);
         this.reactiveUtils = reactiveUtils;
+        this.FeatureFilter = FeatureFilter;
     }
     /**
      * Set the selected layer id and layer name
@@ -308,6 +357,10 @@ export class CrowdsourceReporter {
                 case "feature-list":
                     renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName));
                     break;
+                case "filter-panel":
+                    renderLists.push(this.getFilterPanel());
+                    void this._restoreFilters();
+                    break;
                 case "feature-details":
                     renderLists.push(this.getFeatureDetailsFlowItem());
                     break;
@@ -330,32 +383,6 @@ 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: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
-    }
-    /**
-     * Close the filter modal
-     * @protected
-     */
-    _closeFilter() {
-        if (this._filterOpen) {
-            this._filterOpen = false;
-        }
-    }
-    /**
-     * When true the filter modal will be displayed
-     * @protected
-     */
-    _toggleFilter() {
-        this._filterOpen = !this._filterOpen;
-    }
     /**
      * On sort option click update the sort field and sort order
      * @param sortField sort field
@@ -380,14 +407,27 @@ export class CrowdsourceReporter {
             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" })))));
     }
     /**
-     * Reset the filter active prop
+     * Restores the applied filters
+     * @protected
+     */
+    _restoreFilters() {
+        // call the restore function when instant-apps-filter-list is ready
+        setTimeout(() => {
+            const canRestoreFilter = this._filterList && this._filterUrlParams && this._filterInitState;
+            if (canRestoreFilter) {
+                void this._filterList.restoreFilters(this._filterUrlParams[0], this._filterInitState);
+            }
+        }, 200);
+    }
+    /**
+     * Reset the filter
      * @protected
      */
-    _handleFilterListReset() {
-        //on reset filter list reset the filter active state
+    async _handleFilterListReset() {
+        //on reset filter list reset the filter states
         this._filterActive = false;
-        //reset the features list to reflect the applied filters
-        void this._featureList.refresh();
+        this._filterUrlParams = null;
+        this._filterInitState = null;
     }
     /**
      * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
@@ -397,8 +437,7 @@ export class CrowdsourceReporter {
         //if filter are applied the url params will be generated
         //set the filter active state based on the length of applied filters
         this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
-        //reset the features list to reflect the applied filters
-        void this._featureList.refresh();
+        this._filterUrlParams = this._filterList.urlParams.getAll('filter');
     }
     /**
      * Get the feature layer list
@@ -407,7 +446,7 @@ export class CrowdsourceReporter {
      */
     getLayerListFlowItem() {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, 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", { 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 }))));
+            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, 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
@@ -426,7 +465,7 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), 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 }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), 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 }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -563,8 +602,10 @@ export class CrowdsourceReporter {
      */
     async navigateToCreateFeature(evt) {
         if (evt.detail.layerId && evt.detail.layerName) {
-            void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+            await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
+        // get the form template elements to pass in create-feature to create a LEVELID field in feature-form
+        this._getFormElements();
         this._showSubmitCancelButton = false;
         this.updatePanelState(false, true);
         this._flowItems = [...this._flowItems, "feature-create"];
@@ -621,6 +662,15 @@ export class CrowdsourceReporter {
         void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         this._flowItems = [...this._flowItems, "feature-list"];
     }
+    /**
+     * On back from filter panel get the filter's init state
+     * @protected
+     */
+    async backFromFilterPanel() {
+        this._filterInitState = await this._filterList.getFilterInitState();
+        void this._featureList.refresh();
+        this.backFromSelectedPanel();
+    }
     /**
      * On back from selected panel navigate to the previous panel
      * @protected
@@ -638,6 +688,10 @@ export class CrowdsourceReporter {
             (updatedFlowItems[0] === 'feature-list' || updatedFlowItems[updatedFlowItems.length - 2] === 'feature-list'))) {
             this.updatePanelState(this._sidePanelCollapsed, false);
         }
+        // Coming back from feature details refresh the feature list to update the like count
+        if (this.reportingOptions && this.reportingOptions[this._selectedLayerId]?.like && updatedFlowItems[updatedFlowItems.length - 1] === 'feature-details') {
+            void this._featureList.refresh();
+        }
         updatedFlowItems.pop();
         //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
@@ -725,8 +779,19 @@ export class CrowdsourceReporter {
         const layerExpressions = this.layerExpressions?.filter((exp) => exp.id === this._selectedLayerId);
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = layerExpressions?.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, 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._toggleFilter.bind(this), 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", { 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 }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, 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, 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 }))));
+    }
+    /**
+     * Get Filter page for apllying filter
+     * @param layerId Layer id
+     * @param layerName Layer name
+     * @returns feature list node
+     * @protected
+     */
+    getFilterPanel() {
+        const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
+        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) }, 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", onClick: () => { void this._filterList?.forceReset(); }, 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: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -830,6 +895,8 @@ export class CrowdsourceReporter {
      */
     async setMapView() {
         await this.getLayersToShowInList();
+        // filter/update the feature(s) if any filter/condition is already applied
+        await this._updateFeatures();
         // if only one valid layer is present then directly render features list
         if (this._editableLayerIds?.length === 1) {
             await this.renderFeaturesList();
@@ -931,6 +998,39 @@ export class CrowdsourceReporter {
         const messages = await getLocaleComponentStrings(this.el);
         this._translations = messages[0];
     }
+    /**
+     * Applies a definition expression when floor field and level are available
+     *
+     * @returns boolean
+     * @protected
+     */
+    _updateFloorDefinitionExpression(layer) {
+        const floorField = layer.floorInfo.floorField;
+        // update the layer defination expression
+        const floorExp = `${floorField} = '${this.floorLevel}'`;
+        const defExp = layer.definitionExpression;
+        layer.definitionExpression = defExp?.indexOf(this._floorExpression) > -1 ?
+            defExp.replace(this._floorExpression, floorExp) : floorExp;
+        this._floorExpression = floorExp;
+    }
+    /**
+     * Gets the form template elements
+     * @protected
+     */
+    _getFormElements() {
+        const layer = this._selectedLayer;
+        const floorField = layer?.floorInfo?.floorField;
+        if (floorField && this.floorLevel && layer?.formTemplate) {
+            const formElement = this._formElements.find((elm) => elm.id === layer.id);
+            if (this._formElements.length === 0 || !formElement) {
+                this._formElements.push({
+                    id: layer.id,
+                    orgElements: layer.formTemplate.elements,
+                    orgExpressionInfos: layer.formTemplate.expressionInfos
+                });
+            }
+        }
+    }
     /**
      * Returns the ids of all OR configured layers that support edits with the update capability
      * @param hash each layer item details
@@ -948,6 +1048,35 @@ export class CrowdsourceReporter {
             return prev;
         }, []);
     }
+    /**
+     * updates the features for layer/feature list
+     * @protected
+     */
+    async _updateFeatures() {
+        for (const eachLayerId of this._editableLayerIds) {
+            const featureLayerView = await getFeatureLayerView(this.mapView, eachLayerId);
+            // In case of show my features add filter for Featurelayerview
+            await this._showMyFeaturesOnly(featureLayerView);
+            const floorField = featureLayerView.layer?.floorInfo?.floorField;
+            if (floorField && this.floorLevel) {
+                // Update the layer's defination as per selected floor level from map for all editable layers
+                this._updateFloorDefinitionExpression(featureLayerView.layer);
+            }
+        }
+    }
+    /**
+     * Show only loggedIn user's features
+     * @protected
+     */
+    async _showMyFeaturesOnly(featureLayerView) {
+        const loggedInUserName = this.mapView.map.portalItem.portal?.credential?.userId;
+        if (loggedInUserName) {
+            const creatorField = featureLayerView.layer.editFieldsInfo?.creatorField.toLowerCase();
+            featureLayerView.filter = this.showMyReportsOnly && creatorField ? new this.FeatureFilter({
+                where: creatorField + "='" + loggedInUserName + "'"
+            }) : null;
+        }
+    }
     /**
      * Creates the list of layers to be listed in layer list
      * @protected
@@ -1514,6 +1643,42 @@ export class CrowdsourceReporter {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "showFeatureSymbol": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: When true the feature symbology of the feature will shown in the features list"
+                },
+                "attribute": "show-feature-symbol",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showMyReportsOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: To show only those features which are created by the logged in user"
+                },
+                "attribute": "show-my-reports-only",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "theme": {
                 "type": "string",
                 "mutable": false,
@@ -1554,6 +1719,23 @@ export class CrowdsourceReporter {
                 },
                 "attribute": "zoom-to-scale",
                 "reflect": false
+            },
+            "floorLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "string: selected floor level"
+                },
+                "attribute": "floor-level",
+                "reflect": false
             }
         };
     }
@@ -1561,7 +1743,6 @@ export class CrowdsourceReporter {
         return {
             "_featureCreationFailedErrorMsg": {},
             "_filterActive": {},
-            "_filterOpen": {},
             "_flowItems": {},
             "_hasValidLayers": {},
             "_loadingFeatureDetails": {},
@@ -1605,6 +1786,9 @@ export class CrowdsourceReporter {
             }, {
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"
+            }, {
+                "propName": "floorLevel",
+                "methodName": "floorLevelWatchHandler"
             }];
     }
 }

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

@@ -53,4 +53,19 @@
 .profile-img {
   margin: 0 0.75rem;
   min-width: 32px;
-}
+}
+
+.like-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: gray !important;
+  font-style: italic;
+}
+
+.feature-symbol {
+  padding: 3px 10px;
+  min-width: 30px;
+  display: flex;
+  justify-content: center;
+}