@esri/solutions-components 0.6.6 → 0.6.8

package/dist/cjs/card-manager_4.cjs.entry.js

@@ -111,6 +111,10 @@ const LayerTable = class {
      * number[]: A list of all IDs for the current layer
      */
     this._allIds = [];
+    /**
+     * bool: When true the table is being sorted
+     */
+    this._tableSorting = false;
     /**
      * Store a reference to the table node after it's first created
      * and initializes the FeatureTable
@@ -121,15 +125,16 @@ const LayerTable = class {
      */
     this.onTableNodeCreate = (node) => {
       this._tableNode = node;
-      this._getTable(node);
     };
     this.mapView = undefined;
+    this.showNewestFirst = undefined;
     this.zoomAndScrollToSelected = undefined;
     this._alertOpen = false;
     this._fetchingData = false;
     this._layer = undefined;
     this._selectedIndexes = [];
     this._showOnlySelected = false;
+    this._sortActive = false;
     this._translations = undefined;
   }
   //--------------------------------------------------------------------------
@@ -144,7 +149,6 @@ const LayerTable = class {
     this._fetchingData = true;
     const mapLayerIds = await mapViewUtils.getMapLayerIds(this.mapView);
     this._layer = await mapViewUtils.getLayer(this.mapView, mapLayerIds[0]);
-    this._resetTable();
     this.reactiveUtils.on(() => this.mapView, "click", (event) => {
       void this._mapClicked(event);
     });
@@ -155,9 +159,17 @@ const LayerTable = class {
    */
   async _layerWatchHandler() {
     this._fetchingData = true;
-    this._resetTable();
+    await this._resetTable();
     this._fetchingData = false;
   }
+  /**
+   * When sortActive is false the user has not defined a sort and we should use the default sort
+   */
+  async _sortActiveWatchHandler() {
+    if (!this._sortActive) {
+      await this._sortTable();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
@@ -262,31 +274,39 @@ const LayerTable = class {
    *
    * @returns void
    */
-  _getTable(node) {
+  async _getTable(node) {
     if (this._layer) {
-      this._table = new this.FeatureTable({
-        layer: this._layer,
-        view: this.mapView,
-        //editingEnabled: this._editEnabled,
-        highlightEnabled: true,
-        multiSortEnabled: false,
-        visibleElements: {
-          header: false,
-          menu: false
-        },
-        container: node
-      });
-      this._table.highlightIds.on("change", () => {
-        this._selectedIndexes = this._table.highlightIds.toArray();
-        if (this._showOnlySelected) {
-          if (this._selectedIndexes.length > 0) {
-            this._table.filterBySelection();
-          }
-          else {
-            this._toggleShowSelected();
-          }
-        }
-        this.featureSelectionChange.emit(this._selectedIndexes);
+      await this._layer.when(async () => {
+        this._table = new this.FeatureTable({
+          layer: this._layer,
+          view: this.mapView,
+          //editingEnabled: this._editEnabled,
+          highlightEnabled: true,
+          multiSortEnabled: false,
+          visibleElements: {
+            header: false,
+            menu: false
+          },
+          container: node
+        });
+        await this._table.when(async () => {
+          this._table.highlightIds.on("change", () => {
+            this._selectedIndexes = this._table.highlightIds.toArray();
+            if (this._showOnlySelected) {
+              if (this._selectedIndexes.length > 0) {
+                this._table.filterBySelection();
+              }
+              else {
+                this._toggleShowSelected();
+              }
+            }
+            this.featureSelectionChange.emit(this._selectedIndexes);
+          });
+          this.reactiveUtils.watch(() => this._table.activeSortOrders, (sortOrders) => {
+            var _a, _b;
+            this._sortActive = sortOrders.length > 0 && ((_a = sortOrders[0]) === null || _a === void 0 ? void 0 : _a.direction) === "asc" || ((_b = sortOrders[0]) === null || _b === void 0 ? void 0 : _b.direction) === "desc";
+          });
+        });
       });
     }
   }
@@ -295,9 +315,10 @@ const LayerTable = class {
    *
    * @returns void
    */
-  _resetTable() {
+  async _resetTable() {
     if (this._layer && this._table) {
       this._clearSelection();
+      this._allIds = [];
       this.featureSelectionChange.emit(this._selectedIndexes);
       this._table.layer = this._layer;
       this._editEnabled = this._layer.editingEnabled;
@@ -305,6 +326,26 @@ const LayerTable = class {
       this._table.editingEnabled = this._editEnabled;
       this._table.clearSelectionFilter();
       this._showOnlySelected = false;
+      this._sortActive = false;
+      await this._sortTable();
+    }
+  }
+  /**
+   * Sort the objectid field in descending order
+   *
+   * @returns void
+   */
+  async _sortTable() {
+    if (this._table && this._layer && !this._sortActive) {
+      if (!this._tableSorting && this.showNewestFirst) {
+        this._tableSorting = true;
+        await this._table.when(async () => {
+          await this._layer.when(async () => {
+            this._table.sortColumn(this._layer.objectIdField, "desc");
+            this._tableSorting = false;
+          });
+        });
+      }
     }
   }
   /**
@@ -483,14 +524,21 @@ const LayerTable = class {
     const id = evt.detail[0];
     if (id !== this._layer.id || this._allIds.length === 0) {
       this._fetchingData = true;
-      this._table.highlightIds.removeAll();
       this._layer = await mapViewUtils.getLayer(this.mapView, id);
       this._allIds = await mapViewUtils.queryAllIds(this._layer);
+      if (!this._table) {
+        await this._getTable(this._tableNode);
+      }
+      await this._table.when(() => {
+        this._table.highlightIds.removeAll();
+      });
       this._selectedIndexes = [];
       this._table.layer = this._layer;
       this._table.render();
-      this._fetchingData = false;
     }
+    this._sortActive = false;
+    await this._sortTable();
+    this._fetchingData = false;
   }
   /**
    * Fetches the component's translations
@@ -505,7 +553,8 @@ const LayerTable = class {
   get el() { return index.getElement(this); }
   static get watchers() { return {
     "mapView": ["mapViewWatchHandler"],
-    "_layer": ["_layerWatchHandler"]
+    "_layer": ["_layerWatchHandler"],
+    "_sortActive": ["_sortActiveWatchHandler"]
   }; }
 };
 LayerTable.style = layerTableCss;
@@ -588,7 +637,7 @@ const LayoutManager = class {
 };
 LayoutManager.style = layoutManagerCss;
 
-const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 58px)}.esri-zoom{display:none !important}.map-tools{position:absolute;top:40px;right:0px;padding:1rem}";
+const mapCardCss = ":host{display:block;--calcite-label-margin-bottom:0;--calcite-block-padding:0}.map-height{height:calc(100% - 58px)}.esri-zoom{display:none !important}";
 
 const MapCard = class {
   constructor(hostRef) {
@@ -600,13 +649,14 @@ const MapCard = class {
     this._loadedId = "";
     this.mapInfos = [];
     this.mapView = undefined;
+    this._searchConfiguration = undefined;
     this._webMapInfo = undefined;
   }
   /**
    * Listen for changes to map info and load the appropriate map
    */
   async mapInfoChange(evt) {
-    this._loadMap(evt.detail);
+    await this._loadMap(evt.detail);
   }
   //--------------------------------------------------------------------------
   //
@@ -623,7 +673,7 @@ const MapCard = class {
    * Renders the component.
    */
   render() {
-    return (index.h(index.Host, null, index.h("map-picker", { mapInfos: this.mapInfos }), index.h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { class: "map-tools" })));
+    return (index.h(index.Host, null, index.h("map-picker", { mapInfos: this.mapInfos }), index.h("div", { class: "map-height", ref: (el) => (this._mapDiv = el) }), index.h("map-tools", { mapView: this.mapView, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration })));
   }
   //--------------------------------------------------------------------------
   //
@@ -654,7 +704,7 @@ const MapCard = class {
    *
    * @protected
    */
-  _loadMap(webMapInfo) {
+  async _loadMap(webMapInfo) {
     let id = webMapInfo === null || webMapInfo === void 0 ? void 0 : webMapInfo.id;
     // on the first render use the first child of the provided mapInfos
     this._webMapInfo = (id === "" || !id) && this.mapInfos.length > 0 ?
@@ -669,8 +719,12 @@ const MapCard = class {
         map: webMap,
         resizeAlign: "top-left"
       });
-      this._loadedId = id;
-      this.mapChanged.emit(this.mapView);
+      await this.mapView.when(() => {
+        this._loadedId = id;
+        this._searchConfiguration = this._webMapInfo.searchConfiguration;
+        this.mapChanged.emit(this.mapView);
+        this.mapView.ui.add(this._mapTools, { position: "top-right", index: 0 });
+      });
     }
   }
   get el() { return index.getElement(this); }

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -18,9 +18,11 @@ const CrowdsourceManager = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.classicGrid = false;
+    this.showNewestFirst = false;
     this.hideHeader = true;
     this.hideMap = false;
     this.mapInfos = [];
+    this.searchConfiguration = undefined;
     this.zoomAndScrollToSelected = false;
     this._translations = undefined;
     this._layoutMode = interfaces.ELayoutMode.GRID;
@@ -77,7 +79,7 @@ const CrowdsourceManager = class {
    * Renders the component.
    */
   render() {
-    return (index.h(index.Host, null, index.h("calcite-shell", null, index.h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (index.h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
+    return (index.h(index.Host, null, index.h("calcite-shell", { class: "position-relative" }, index.h("calcite-panel", { class: "width-full height-full", heading: this.hideHeader ? undefined : this._translations.header }, this.hideHeader ? undefined : (index.h("layout-manager", { slot: "header-actions-end" })), this._getBody(this._layoutMode, this._panelOpen, this.hideMap)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -243,7 +245,7 @@ const CrowdsourceManager = class {
     const toggleSlot = this.classicGrid && layoutMode !== interfaces.ELayoutMode.VERTICAL ? "footer" :
       this.classicGrid && layoutMode === interfaces.ELayoutMode.VERTICAL ? "panel-end" :
         layoutMode === interfaces.ELayoutMode.HORIZONTAL ? "header" : "panel-start";
-    return (index.h("calcite-shell", { class: tableSizeClass + " border-bottom" }, index.h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))), index.h("div", { class: "width-full height-full position-relative" }, index.h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+    return (index.h("calcite-shell", { class: tableSizeClass + " border-bottom" }, index.h("calcite-action-bar", { class: "border", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, index.h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), index.h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, index.h("span", null, tooltip))), index.h("div", { class: "width-full height-full position-relative" }, index.h("layer-table", { mapView: this === null || this === void 0 ? void 0 : this._mapView, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
   }
   /**
    * Open/Close the appropriate panel.