@esri/solutions-components 0.6.2 → 0.6.3

package/dist/collection/components/layer-table/layer-table.js

@@ -18,22 +18,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getLocaleComponentStrings } from "../../utils/locale";
-import { getMapLayerView, goToSelection, getMapLayerIds } from "../../utils/mapViewUtils";
-import { queryAllFeatures } from "../../utils/queryUtils";
+import { getMapLayerView, getMapLayerIds } from "../../utils/mapViewUtils";
+import { queryFeaturesByID, queryAllIds } from "../../utils/queryUtils";
 import * as downloadUtils from "../../utils/downloadUtils";
 export class LayerTable {
   constructor() {
     /**
-     * string[]: List of field names to display
+     * number[]: A list of all IDs for the current layer
      */
-    this._fieldNames = [];
-    /**
-     * esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
-     */
-    this._graphics = [];
+    this._allIds = [];
     /**
      * Store a reference to the table node after it's first created
      * and initializes the FeatureTable
@@ -45,8 +41,11 @@ export class LayerTable {
       this._getTable(node);
     };
     this.mapView = undefined;
+    this._alertOpen = false;
+    this._fetchingData = false;
     this._layerView = undefined;
     this._selectedIndexes = [];
+    this._showOnlySelected = false;
     this._translations = undefined;
   }
   //--------------------------------------------------------------------------
@@ -54,20 +53,41 @@ export class LayerTable {
   //  Watch handlers
   //
   //--------------------------------------------------------------------------
+  /**
+   * watch for changes in map view and get the first layer
+   */
   async mapViewWatchHandler() {
+    this._fetchingData = true;
     const mapLayerIds = await getMapLayerIds(this.mapView);
     this._layerView = await getMapLayerView(this.mapView, mapLayerIds[0]);
+    this._resetTable();
+    this.reactiveUtils.on(() => this.mapView, "click", (event) => {
+      void this._mapClicked(event);
+    });
+    this._fetchingData = false;
+  }
+  /**
+   * watch for changes in layer view and verify if it has editing enabled
+   */
+  async _layerViewWatchHandler() {
+    this._fetchingData = true;
+    this._resetTable();
+    this._fetchingData = false;
   }
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
   //
   //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Events (public)
-  //
-  //--------------------------------------------------------------------------
+  /**
+   * Get the selected graphics
+   *
+   * @returns Promise that resolves when the operation is complete
+   */
+  async getSelectedGraphics() {
+    return this._selectedIndexes.length > 0 ?
+      await this._getGraphics(this._selectedIndexes) : [];
+  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -89,7 +109,10 @@ export class LayerTable {
     if (!this._layerView) {
       return null;
     }
-    return (h(Host, null, this._getTableControlRow(), h("div", { class: "table-div width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("div", { ref: this.onTableNodeCreate }))), h("edit-record-modal", { ref: (el) => this._editMultipleMpdal = el })));
+    const tableNodeClass = this._fetchingData ? "display-none" : "";
+    const loadingClass = this._fetchingData ? "" : "display-none";
+    const alertActionClass = this._alertShowAction ? "" : "display-none";
+    return (h(Host, null, h("calcite-shell", null, this._getTableControlRow("header"), h("div", { class: "height-full width-full" }, h("calcite-panel", { class: "height-full width-full" }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { class: tableNodeClass, ref: this.onTableNodeCreate }))), h("calcite-alert", { icon: this._alertIcon, kind: this._alertKind, label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._alertTitle), h("div", { slot: "message" }, this._alertMessage), h("calcite-link", { class: alertActionClass, onClick: this._alertActionFunction, slot: "link" }, this._alertActionText)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -104,20 +127,22 @@ export class LayerTable {
    * @protected
    */
   async _initModules() {
-    const [FeatureTable] = await loadModules([
-      "esri/widgets/FeatureTable"
+    const [FeatureTable, reactiveUtils] = await loadModules([
+      "esri/widgets/FeatureTable",
+      "esri/core/reactiveUtils"
     ]);
     this.FeatureTable = FeatureTable;
+    this.reactiveUtils = reactiveUtils;
   }
   /**
    * Gets a row of controls that can be used for various interactions with the table
    *
    * @returns The dom node that contains the controls
    */
-  _getTableControlRow() {
+  _getTableControlRow(slot) {
     const featuresSelected = this._selectedIndexes.length > 0;
-    const multiFeaturesSelected = this._selectedIndexes.length > 1;
-    return (h("div", { class: "display-flex table-border" }, h("map-layer-picker", { mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt) }), h("div", null, h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !featuresSelected, iconStart: 'magnifying-glass', onClick: () => this._zoom() }, this._translations.zoom), h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !multiFeaturesSelected, iconStart: 'pencil', onClick: () => this._editMultiple() }, this._translations.editMultiple), h("calcite-button", { appearance: 'transparent', color: 'neutral', disabled: !featuresSelected, iconStart: 'trash', onClick: () => this._delete() }, this._translations.delete), h("calcite-split-button", { appearance: "transparent", color: "neutral", "primary-text": this._translations.more }, h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: 'list-check-all', onClick: () => this._selectAll(true) }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: 'selected-items-filter', onClick: () => this._showSelected() }, this._translations.showSelected), h("calcite-dropdown-item", { iconStart: 'erase', onClick: () => this._clearSelection() }, this._translations.clearSelection), h("calcite-dropdown-item", { iconStart: 'refresh', onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: 'export', onClick: () => this._exportToCSV() }, this._translations.exportCSV))))));
+    return (h("div", { class: "display-flex table-border height-51", slot: slot }, h("calcite-action-bar", { expandDisabled: true, expanded: true, layout: "horizontal" }, h("div", { class: "border-end" }, h("map-layer-picker", { appearance: "transparent", mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), placeholderIcon: "layers", scale: "l", type: "dropdown" })), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, icon: "magnifying-glass", id: "magnifying-glass", label: this._translations.zoom, onClick: () => this._zoom(), text: this._translations.zoom, textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "magnifying-glass" }, h("span", null, this._translations.zoom)), h("calcite-action", { appearance: "solid", icon: "filter", id: "filter", onClick: () => this._filter(), text: this._translations.filters, "text-enabled": "true", textEnabled: true }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "filter" }, h("span", null, this._translations.filters)), h("calcite-action", { appearance: "solid", disabled: !featuresSelected, id: "trash", onClick: () => this._delete(), text: "" }, h("calcite-button", { appearance: "transparent", iconStart: "trash", kind: "danger" }, this._translations.delete)), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "trash" }, h("span", null, this._translations.delete))), h("calcite-dropdown", null, h("calcite-action", { appearance: "solid", label: "", slot: "trigger", text: "" }, h("calcite-button", { appearance: "transparent", iconEnd: "chevron-down", kind: "neutral" }, this._translations.more)), h("calcite-dropdown-group", { "selection-mode": "none" }, h("calcite-dropdown-item", { iconStart: "list-check-all", onClick: () => this._selectAll() }, this._translations.selectAll), h("calcite-dropdown-item", { iconStart: "selected-items-filter", onClick: () => this._showSelected() }, this._showOnlySelected ? this._translations.showAll :
+      this._translations.showSelected), h("calcite-dropdown-item", { iconStart: "erase", onClick: () => this._clearSelection() }, this._translations.clearSelection), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._switchSelected() }, this._translations.switchSelected), h("calcite-dropdown-item", { iconStart: "refresh", onClick: () => this._refresh() }, this._translations.refresh), h("calcite-dropdown-item", { iconStart: "export", onClick: () => void this._exportToCSV() }, this._translations.exportCSV)))));
   }
   /**
    * Initialize the FeatureTable
@@ -130,7 +155,7 @@ export class LayerTable {
       this._table = new this.FeatureTable({
         layer: this._layerView.layer,
         view: this.mapView,
-        editingEnabled: true,
+        //editingEnabled: this._editEnabled,
         highlightOnRowSelectEnabled: true,
         multiSortEnabled: false,
         visibleElements: {
@@ -139,8 +164,62 @@ export class LayerTable {
         },
         container: node
       });
+      this._table.highlightIds.on("change", () => {
+        this._selectedIndexes = this._table.highlightIds.toArray();
+        this.featureSelectionChange.emit(this._selectedIndexes);
+      });
+    }
+  }
+  /**
+   * Reset basic table props
+   *
+   * @returns void
+   */
+  _resetTable() {
+    var _a;
+    if (((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer) && this._table) {
+      this._table.layer = this._layerView.layer;
+      this._editEnabled = this._layerView.layer.editingEnabled;
+      this._table.view = this.mapView;
+      this._table.editingEnabled = this._editEnabled;
+      this._table.clearSelectionFilter();
+      this._showOnlySelected = false;
+    }
+  }
+  /**
+   * Handle map click events to keep table and map click selection in sync
+   *
+   * @returns void
+   */
+  async _mapClicked(evt) {
+    const opts = {
+      include: this._layerView.layer
+    };
+    const hitTestResult = await this.mapView.hitTest(evt.screenPoint, opts);
+    if (hitTestResult.results.length > 0) {
+      hitTestResult.results.forEach((result) => {
+        const id = result.graphic.getObjectId();
+        const index = this._table.highlightIds.indexOf(id);
+        if (index > -1) {
+          this._table.highlightIds.removeAt(index);
+        }
+        else {
+          this._table.highlightIds.add(id);
+        }
+      });
+      if (this._showOnlySelected) {
+        this._table.filterBySelection();
+      }
     }
   }
+  /**
+   * Set the alertOpen member to false when the alert is closed
+   *
+   * @returns void
+   */
+  _alertClosed() {
+    this._alertOpen = false;
+  }
   /**
    * Select or deselect all rows
    *
@@ -148,12 +227,25 @@ export class LayerTable {
    *
    * @returns void
    */
-  _selectAll(checked) {
-    this._selectedIndexes = checked ? this._graphics.map((_g, i) => i) : [];
+  _selectAll() {
+    const ids = this._allIds;
+    this._table.highlightIds.addMany(ids);
+    this._selectedIndexes = ids;
   }
-  // need to discuss with team
+  /**
+   * Toggle the show only selected flag
+   *  When showOnly is true only the selected features will be shown in the table
+   *
+   * @returns void
+   */
   _showSelected() {
-    console.log("_showSelected");
+    this._showOnlySelected = !this._showOnlySelected;
+    if (this._showOnlySelected) {
+      this._table.filterBySelection();
+    }
+    else {
+      this._table.clearSelectionFilter();
+    }
   }
   /**
    * Clears the selected indexes
@@ -162,6 +254,10 @@ export class LayerTable {
    */
   _clearSelection() {
     this._selectedIndexes = [];
+    this._table.highlightIds.removeAll();
+  }
+  _filter() {
+    alert("do whatever this button is supposed to do");
   }
   /**
    * Select all rows that are not currently selectd
@@ -170,52 +266,75 @@ export class LayerTable {
    */
   _switchSelected() {
     const currentIndexes = [...this._selectedIndexes];
-    this._selectedIndexes = this._graphics.reduce((prev, _cur, i) => {
+    this._selectedIndexes = this._allIds.reduce((prev, _cur, i) => {
       if (currentIndexes.indexOf(i) < 0) {
         prev.push(i);
       }
       return prev;
     }, []);
+    this._table.highlightIds.removeAll();
+    this._table.highlightIds.addMany(this._selectedIndexes);
   }
   /**
    * Export all selected rows as CSV
    *
    * @returns a promise that will resolve when the operation is complete
    */
-  _exportToCSV() {
+  async _exportToCSV() {
     const exportInfos = {};
+    const ids = this._table.highlightIds.toArray();
     exportInfos[this._layerView.layer.id] = {
       selectionSetNames: [],
-      ids: this._getSelectedIds(),
+      ids,
       layerView: this._layerView
     };
     void downloadUtils.downloadCSV(exportInfos, false, // formatUsingLayerPopup
     true);
   }
   /**
-   * Zoom to all selected features
+   * Refreshes the table and maintains the curent scroll position
    *
-   * @returns a promise that will resolve when the operation is complete
+   * @returns void
    */
-  _zoom() {
-    const ids = this._getSelectedIds();
-    void goToSelection(ids, this._layerView, this.mapView, true);
+  _refresh() {
+    void this._table.refresh();
   }
   /**
-   * Open the edit multiple modal
+   * Zoom to all selected features
    *
-   * @returns void
+   * @returns a promise that will resolve when the operation is complete
    */
-  _editMultiple() {
-    this._editMultipleMpdal.open = true;
+  _zoom() {
+    this._table.zoomToSelection();
   }
   /**
-   * Delete all selected records
+   * Delete all selected records or shows an alert if the layer does not have editing enabled
    *
    * @returns a promise that will resolve when the operation is complete
    */
   _delete() {
-    console.log("delete");
+    if (this._editEnabled) {
+      this._alertIcon = "trash";
+      this._alertTitle = this._translations.deleteRows;
+      this._alertActionText = this._translations.delete;
+      this._alertShowAction = true;
+      this._alertMessage = this._translations.confirm;
+      this._alertKind = "danger";
+      this._alertActionFunction = () => {
+        void this._layerView.layer.applyEdits({
+          deleteFeatures: this._table.highlightIds.toArray()
+        });
+        this._alertOpen = false;
+      };
+    }
+    else {
+      this._alertIcon = "layer-broken";
+      this._alertTitle = this._translations.deleteDisabled;
+      this._alertShowAction = false;
+      this._alertMessage = this._translations.enableEditing;
+      this._alertKind = "warning";
+    }
+    this._alertOpen = true;
   }
   /**
    * Get the graphics for all selected indexes
@@ -224,34 +343,8 @@ export class LayerTable {
    *
    * @returns An array of selected graphics
    */
-  _getGraphics(indexes) {
-    return this._graphics.filter((_g, i) => indexes.indexOf(i) > -1);
-  }
-  /**
-   * Gets the object ids for all selected rows
-   *
-   * @returns An array of object ids
-   */
-  _getSelectedIds() {
-    const graphics = this._getGraphics(this._selectedIndexes);
-    return graphics.map(g => g.getObjectId());
-  }
-  /**
-   * Update the selected indexes based on the current row
-   *
-   * @param index the index of the selected row
-   *
-   * @returns void
-   */
-  _rowSelected(index) {
-    const indexOfSelected = this._selectedIndexes.indexOf(index);
-    if (indexOfSelected > -1) {
-      this._selectedIndexes.splice(indexOfSelected, 1);
-      this._selectedIndexes = [...this._selectedIndexes];
-    }
-    else {
-      this._selectedIndexes = [...this._selectedIndexes, index];
-    }
+  async _getGraphics(ids) {
+    return ids.length > 0 ? queryFeaturesByID(ids, this._table.layer, [], false, this.mapView.spatialReference) : [];
   }
   /**
    * Handles layer selection change to show new table
@@ -259,14 +352,18 @@ export class LayerTable {
    * @returns a promise that will resolve when the operation is complete
    */
   async _layerSelectionChanged(evt) {
-    const layerName = evt.detail[0];
-    this._layerView = await getMapLayerView(this.mapView, layerName);
-    // TODO rethink this...when we use later we need to be able to lookup with name
-    this._fieldNames = this._layerView.layer.fields.map(f => f.alias || f.name);
-    this._graphics = await queryAllFeatures(0, this._layerView.layer, []);
-    this._selectedIndexes = [];
-    this._table.layer = this._layerView.layer;
-    this._table.render();
+    var _a;
+    const id = evt.detail[0];
+    if (id !== ((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer.id) || this._allIds.length === 0) {
+      this._fetchingData = true;
+      this._table.highlightIds.removeAll();
+      this._layerView = await getMapLayerView(this.mapView, id);
+      this._allIds = await queryAllIds(this._layerView.layer);
+      this._selectedIndexes = [];
+      this._table.layer = this._layerView.layer;
+      this._table.render();
+      this._fetchingData = false;
+    }
   }
   /**
    * Fetches the component's translations
@@ -314,16 +411,66 @@ export class LayerTable {
   }
   static get states() {
     return {
+      "_alertOpen": {},
+      "_fetchingData": {},
       "_layerView": {},
       "_selectedIndexes": {},
+      "_showOnlySelected": {},
       "_translations": {}
     };
   }
+  static get events() {
+    return [{
+        "method": "featureSelectionChange",
+        "name": "featureSelectionChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on demand when a layer is selected"
+        },
+        "complexType": {
+          "original": "number[]",
+          "resolved": "number[]",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "getSelectedGraphics": {
+        "complexType": {
+          "signature": "() => Promise<__esri.Graphic[]>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "___esri": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<Graphic[]>"
+        },
+        "docs": {
+          "text": "Get the selected graphics",
+          "tags": [{
+              "name": "returns",
+              "text": "Promise that resolves when the operation is complete"
+            }]
+        }
+      }
+    };
+  }
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
         "propName": "mapView",
         "methodName": "mapViewWatchHandler"
+      }, {
+        "propName": "_layerView",
+        "methodName": "_layerViewWatchHandler"
       }];
   }
 }

package/dist/collection/components/map-card/map-card.css

@@ -21,7 +21,7 @@
 }
 
 .action-bar-size {
-  height: 3.5rem;
+  height: 51px;
   width: 100%;
 }
 
@@ -80,7 +80,6 @@
 
 .map-list {
   position: absolute;
-  inset: 3.5rem 0 0 0;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -110,3 +109,10 @@
 /* .block-button:focus {
   @apply bg-foreground-2 text-color-1 fill-color-1 focus-inset;
 } */
+
+.map-tools {
+  position: absolute;
+  top: 40px;
+  right: 0px;
+  padding: 1rem;
+}