@esri/solutions-components 0.11.17 → 0.11.19

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

@@ -23,6 +23,65 @@ import { getLocaleComponentStrings } from "../../utils/locale";
 import { ELayoutMode } from "../../utils/interfaces";
 import { getLayerOrTable } from "../../utils/mapViewUtils";
 export class CrowdsourceManager {
+    constructor() {
+        this.appLayout = undefined;
+        this.appProxies = undefined;
+        this.basemapConfig = undefined;
+        this.coverPageEnabled = undefined;
+        this.customInfoText = undefined;
+        this.defaultAppLayout = undefined;
+        this.defaultCenter = "";
+        this.defaultGlobalId = "";
+        this.defaultLayer = "";
+        this.defaultLevel = "";
+        this.defaultOid = "";
+        this.defaultWebmap = "";
+        this.honorMapFieldSettings = false;
+        this.introductionWindowEnabled = false;
+        this.enableAutoRefresh = false;
+        this.enableBasemap = true;
+        this.enableColumnReorder = true;
+        this.enableCSV = true;
+        this.enableFloorFilter = true;
+        this.enableFullscreen = true;
+        this.enableHome = true;
+        this.enableLegend = true;
+        this.enableSearch = true;
+        this.enableShare = false;
+        this.enableZoom = true;
+        this.locale = undefined;
+        this.mapInfos = [];
+        this.onlyShowUpdatableLayers = true;
+        this.popupHeaderColor = undefined;
+        this.popupHeaderHoverColor = undefined;
+        this.popupHeaderHoverTextColor = undefined;
+        this.popupHeaderTextColor = undefined;
+        this.searchConfiguration = undefined;
+        this.shareIncludeEmbed = undefined;
+        this.shareIncludeSocial = undefined;
+        this.showNewestFirst = true;
+        this.theme = "light";
+        this.zoomAndScrollToSelected = false;
+        this.zoomToScale = undefined;
+        this._deleteDialogOpen = false;
+        this._enableCreateFeatures = true;
+        this._hideFooter = false;
+        this._hideTable = false;
+        this._isMobile = false;
+        this._isPortraitMobile = false;
+        this._translations = undefined;
+        this._layer = undefined;
+        this._layoutMode = ELayoutMode.GRID;
+        this._mapInfo = undefined;
+        this._mapView = undefined;
+        this._panelOpen = true;
+        this._numSelected = 0;
+        this._filterOpen = false;
+        this._showInformationHeader = true;
+        this._layerIds = undefined;
+        this._isLoading = true;
+        this._mapExtentFilterChecked = undefined;
+    }
     //--------------------------------------------------------------------------
     //
     //  Host element access
@@ -31,251 +90,6 @@ export class CrowdsourceManager {
     el;
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * AppLayout: The type of layout the application should use.
-     * Valid values: "mapView" or "tableView" or "splitView"
-     */
-    appLayout;
-    /**
-     * Array of objects containing proxy information for premium platform services.
-     */
-    appProxies;
-    /**
-     * IBasemapConfig: List of any basemaps to filter out from the basemap widget
-     */
-    basemapConfig;
-    /**
-     * boolean: When true a cover page has been enabled in the consuming application.
-     * Also when true a floating button will be shown in the lower right of the window that
-     * will emit an event when clicked that the consuming application can respond to that will open the cover page.
-     */
-    coverPageEnabled;
-    /**
-     * string: custom notification text to display in the card manager
-     */
-    customInfoText;
-    /**
-     * string: default layout the application should use
-     */
-    defaultAppLayout;
-    /**
-     * string: default center point values for the map
-     * ; delimited x;y pair
-     */
-    defaultCenter = "";
-    /**
-     * string: Global ID of the feature to select
-     */
-    defaultGlobalId = "";
-    /**
-     * string: when provided this layer ID will be used when the app loads
-     */
-    defaultLayer = "";
-    /**
-     * string: default zoom level
-     */
-    defaultLevel = "";
-    /**
-     * string: Object ID of feature to select
-     */
-    defaultOid = "";
-    /**
-     * string: Item ID of the web map that should be selected by default
-     */
-    defaultWebmap = "";
-    /**
-     * boolean: when true we will honor field order and visibility that may have been defined
-     * in the map viewer if no field order is defined in the mapInfo.
-     *
-     * Field order defined in the mapInfo as would be the case for Instant App configurations
-     * will always override this map level setting.
-     */
-    honorMapFieldSettings = false;
-    /**
-     * boolean: When true a introduction window has been enabled in the consuming application.
-     * Also when true a floating button will be shown in the lower right of the window that
-     * will emit an event when clicked that the consuming application can respond to that will open the introduction window.
-     */
-    introductionWindowEnabled = false;
-    /**
-     * boolean: when true the layer table will auto refresh the data
-     */
-    enableAutoRefresh = false;
-    /**
-     * boolean: when true the basemap widget will be available
-     */
-    enableBasemap = true;
-    /**
-     * boolean: when true the layer table will support drag/drop of columns to adjust order
-     */
-    enableColumnReorder = true;
-    /**
-     * boolean: when true the export to csv button will be available
-     */
-    enableCSV = true;
-    /**
-     * boolean: when true the fullscreen widget will be available
-     */
-    enableFloorFilter = true;
-    /**
-     * boolean: when true the fullscreen widget will be available
-     */
-    enableFullscreen = true;
-    /**
-     * boolean: when true the home widget will be available
-     */
-    enableHome = true;
-    /**
-     * boolean: when true the legend widget will be available
-     */
-    enableLegend = true;
-    /**
-     * boolean: when true the search widget will be available
-     */
-    enableSearch = true;
-    /**
-     * boolean: when true the share widget will be available
-     */
-    enableShare = false;
-    /**
-     * boolean: when true the zoom widget will be available
-     */
-    enableZoom = true;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * IMapInfo[]: array of map infos (name and id)
-     */
-    mapInfos = [];
-    /**
-     * boolean: When true only editable layers that support the update capability will be available
-     */
-    onlyShowUpdatableLayers = true;
-    /**
-     * string: The background color to apply to the popup header
-     */
-    popupHeaderColor;
-    /**
-     * string: The color that will be displayed on hover when expanding the popup header
-     */
-    popupHeaderHoverColor;
-    /**
-     * string: The font color that will be displayed on hover when expanding the popup header
-     */
-    popupHeaderHoverTextColor;
-    /**
-     * string: The font color to apply to the popup header
-     */
-    popupHeaderTextColor;
-    /**
-     * ISearchConfiguration: Configuration details for the Search widget
-     */
-    searchConfiguration;
-    /**
-     * boolean: When true the share options will include embed option
-     */
-    shareIncludeEmbed;
-    /**
-     * boolean: When true the share options will include social media sharing
-     */
-    shareIncludeSocial;
-    /**
-     * boolean: when true the table will be sorted by objectid in descending order by default
-     */
-    showNewestFirst = true;
-    /**
-     * theme: "light" | "dark" theme to be used
-     */
-    theme = "light";
-    /**
-     * boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table
-     */
-    zoomAndScrollToSelected = false;
-    /**
-     * number: default scale to zoom to when zooming to a single point feature
-     */
-    zoomToScale;
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: When true the delete dialog will be shown
-     */
-    _deleteDialogOpen = false;
-    /**
-     * boolean: when true the users can have the option to create features
-     */
-    _enableCreateFeatures = true;
-    /**
-     * When true the mobile footer will be hidden
-     */
-    _hideFooter = false;
-    /**
-     * When true the table will be hidden
-     */
-    _hideTable = false;
-    /**
-     * When true the component will render an optimized view for mobile devices
-     */
-    _isMobile = false;
-    /**
-     * When true the component will render an optimized view for mobile devices
-     */
-    _isPortraitMobile = false;
-    /**
-     * Contains the translations for this component.
-     * All UI strings should be defined here.
-     */
-    _translations;
-    /**
-     * esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
-     */
-    _layer;
-    /**
-     * Controls the layout of the application
-     */
-    _layoutMode = ELayoutMode.GRID;
-    /**
-     * IMapInfo: The current map info stores configuration details
-     */
-    _mapInfo;
-    /**
-     * Stores the current map view
-     */
-    _mapView;
-    /**
-     * Controls the layout of the application
-     */
-    _panelOpen = true;
-    /**
-     * Number of selected features in the table
-     */
-    _numSelected = 0;
-    /**
-     * boolean: When true the filter component will be displayed
-     */
-    _filterOpen = false;
-    /**
-     * boolean: When true information header will be displayed
-     */
-    _showInformationHeader = true;
-    /**
-     * boolean: list of layer ids
-     */
-    _layerIds;
-    /**
-     * boolean: if true panel will be in loading state
-     */
-    _isLoading = true;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
@@ -340,6 +154,8 @@ export class CrowdsourceManager {
      */
     appLayoutWatchHandler(newAppLayout, oldAppLayout) {
         if (newAppLayout !== oldAppLayout) {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            this._layerTable.validateTableUpdate(newAppLayout === 'splitView');
             this._setActiveLayout(newAppLayout);
             // update the layer if table selected while switching to map view
             if (this.appLayout === "mapView" && this._layer?.isTable) {
@@ -425,6 +241,7 @@ export class CrowdsourceManager {
             }
             this._layer = layer;
             this._initLayerExpressions();
+            this._handleFilterListReset();
             this._isLoading = false;
         });
     }
@@ -461,7 +278,7 @@ export class CrowdsourceManager {
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '24b7324257b94560153db83dd6b29730bef8f38f' }, h("calcite-shell", { key: 'c7a445ffdf9fa59c7bd1aff125a77e811f6ce736', class: "position-relative" }, h("calcite-panel", { key: '81598a858cfbdfcb6346bc3efa6eb55699d2c5ff', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal(), this._deleteModal()));
+        return (h(Host, { key: 'ae34199751802f20ad97e947a54a123e86c6449c' }, h("calcite-shell", { key: 'cec5041ec6e1683e38a714694a3a6d097f268ec8', class: "position-relative" }, h("calcite-panel", { key: 'feca859563d97e7b536aff264a64480c769ee1c0', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal(), this._deleteModal()));
     }
     /**
      * Called after each render
@@ -742,6 +559,20 @@ export class CrowdsourceManager {
     _deleteModal() {
         return (h("delete-dialog", { id: "deleteDialogId", ids: this._deleteIds, layer: this._layer, locale: this.locale, onDeleteDialogClose: () => this._deleteDialogOpen = false, open: this._deleteDialogOpen }));
     }
+    /**
+     * Shows the map extent filter
+     * @returns map extent filter
+     * @protected
+     */
+    _mapExtentFilter() {
+        const showButtons = this._layerExpressions?.length === 0;
+        return (h("calcite-panel", null, h("div", null, h("calcite-block", { class: this.theme === "dark" ? "background-dark" : "", heading: '', "menu-placement": 'bottom-end', open: true }, h("div", { class: "filter-extent-container" }, h("div", { class: "filter-extent-message" }, h("span", null, this._translations.filterByExtentMsg, " "), h("calcite-icon", { icon: "information", id: "filter-message-info", scale: "s" }), h("calcite-tooltip", { overlayPositioning: "fixed", placement: "top", "reference-element": "filter-message-info" }, this._translations.filterByExtentTooltipMsg)), h("calcite-switch", { checked: this._mapExtentFilterChecked, onCalciteSwitchChange: (e) => {
+                const active = e.target.checked || this._filterList?.filterCount > 0;
+                void this._layerTable.filterUpdate(active, e.target.checked);
+                this._mapExtentFilterChecked = e.target.checked;
+            }, scale: "m" }))), showButtons &&
+            h("div", { class: "filter-modal-buttons", slot: "footer" }, h("calcite-button", { appearance: "outline", onClick: this._handleFilterListReset.bind(this), width: "full" }, this._translations.Resetfilter), h("calcite-button", { onClick: this._closeFilter.bind(this), width: "full" }, this._translations.close)))));
+    }
     /**
      * Show filter component in modal
      *
@@ -749,10 +580,12 @@ export class CrowdsourceManager {
      * @protected
      */
     _filterModal() {
-        return (h("calcite-dialog", { class: "filter-content-space", heading: this._translations?.filter?.replace("{{title}}", this._layer?.title), id: "solutions-filter-dialog", kind: "brand", modal: true, onCalciteDialogClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => {
-                this._handleFilterListReset();
-                void this._mapCard.resetFilter();
-            }, onFilterUpdate: () => void this._updateFilter(), ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false })));
+        const showFilterModal = this._layerExpressions?.length > 0;
+        return (h("calcite-dialog", { class: "filter-content-space", heading: this._translations?.filter?.replace("{{title}}", this._layer?.title), id: "solutions-filter-dialog", kind: "brand", modal: true, onCalciteDialogClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, this._mapExtentFilter(), showFilterModal && h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: this._handleFilterListReset.bind(this), onFilterUpdate: async () => {
+                const active = this._filterList.filterCount > 0 || this._mapExtentFilterChecked;
+                await this._layerTable?.filterUpdate(active);
+                await this._mapCard.updateFilterState(active);
+            }, ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false })));
     }
     /**
      * Store any filters for the current layer.
@@ -763,7 +596,6 @@ export class CrowdsourceManager {
     _initLayerExpressions() {
         const layerExpressions = this._mapInfo?.filterConfig?.layerExpressions;
         this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer?.id) : [];
-        this._filterList.layerExpressions = this._layerExpressions;
         this._layerExpressions.filter(lyrExp => {
             return lyrExp.expressions.filter(exp => exp.active).length > 0;
         }).length > 0;
@@ -777,11 +609,13 @@ export class CrowdsourceManager {
         this._filterOpen = !this._filterOpen;
     }
     /**
-     * Reset the filter active prop
+     * Reset the applied filters
      *
      * @protected
      */
     _handleFilterListReset() {
+        this._mapExtentFilterChecked = false;
+        void this._mapCard.resetFilter();
         void this._layerTable.filterReset();
     }
     /**
@@ -795,16 +629,6 @@ export class CrowdsourceManager {
             void this._layerTable.closeFilter();
         }
     }
-    /**
-     * Update the filter state
-     *
-     * @protected
-     */
-    async _updateFilter() {
-        const active = this._filterList.filterCount > 0;
-        await this._layerTable?.filterUpdate(active);
-        await this._mapCard.updateFilterState(active);
-    }
     /**
      * Update the component layout when its size changes
      *
@@ -1768,7 +1592,8 @@ export class CrowdsourceManager {
             "_filterOpen": {},
             "_showInformationHeader": {},
             "_layerIds": {},
-            "_isLoading": {}
+            "_isLoading": {},
+            "_mapExtentFilterChecked": {}
         };
     }
     static get events() {