@esri/solutions-components 0.5.0 → 0.5.2

package/dist/components/layer-table2.js

@@ -0,0 +1,429 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { l as loadModules } from './loadModules.js';
+import { g as getLocaleComponentStrings } from './locale.js';
+import { b as getMapLayerIds, g as getMapLayerView, a as goToSelection, d as defineCustomElement$1 } from './map-layer-picker2.js';
+import { q as queryAllFeatures } from './queryUtils.js';
+import { d as downloadCSV } from './downloadUtils.js';
+import { d as defineCustomElement$n } from './action.js';
+import { d as defineCustomElement$m } from './action-menu.js';
+import { d as defineCustomElement$l } from './button.js';
+import { d as defineCustomElement$k } from './chip.js';
+import { d as defineCustomElement$j } from './combobox.js';
+import { d as defineCustomElement$i } from './combobox-item.js';
+import { d as defineCustomElement$h } from './dropdown.js';
+import { d as defineCustomElement$g } from './dropdown-group.js';
+import { d as defineCustomElement$f } from './dropdown-item.js';
+import { d as defineCustomElement$e } from './icon.js';
+import { d as defineCustomElement$d } from './input.js';
+import { d as defineCustomElement$c } from './label.js';
+import { d as defineCustomElement$b } from './loader.js';
+import { d as defineCustomElement$a } from './modal.js';
+import { d as defineCustomElement$9 } from './option.js';
+import { d as defineCustomElement$8 } from './panel.js';
+import { d as defineCustomElement$7 } from './popover.js';
+import { d as defineCustomElement$6 } from './progress.js';
+import { d as defineCustomElement$5 } from './scrim.js';
+import { d as defineCustomElement$4 } from './select.js';
+import { d as defineCustomElement$3 } from './split-button.js';
+import { d as defineCustomElement$2 } from './edit-record-modal2.js';
+
+const layerTableCss = ":host{display:block}.table-div{height:calc(100% - 35px)}.display-flex{display:flex}.table-border{border:1px solid var(--calcite-ui-border-2)}";
+
+const LayerTable = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * string[]: List of field names to display
+     */
+    this._fieldNames = [];
+    /**
+     * esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
+     */
+    this._graphics = [];
+    /**
+     * Store a reference to the table node after it's first created
+     * and initializes the FeatureTable
+     *
+     * @returns void
+     */
+    this.onTableNodeCreate = (node) => {
+      this._tableNode = node;
+      this._getTable(node);
+    };
+    this.mapView = undefined;
+    this._layerView = undefined;
+    this._selectedIndexes = [];
+    this._translations = undefined;
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Watch handlers
+  //
+  //--------------------------------------------------------------------------
+  async mapViewWatchHandler() {
+    const mapLayerIds = await getMapLayerIds(this.mapView);
+    this._layerView = await getMapLayerView(this.mapView, mapLayerIds[0]);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Methods (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Events (public)
+  //
+  //--------------------------------------------------------------------------
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (lifecycle)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * StencilJS: Called once just after the component is first connected to the DOM.
+   *
+   * @returns Promise when complete
+   */
+  async componentWillLoad() {
+    await this._getTranslations();
+    await this._initModules();
+  }
+  /**
+   * Renders the component.
+   */
+  render() {
+    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 })));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Functions (protected)
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+  async _initModules() {
+    const [FeatureTable] = await loadModules([
+      "esri/widgets/FeatureTable"
+    ]);
+    this.FeatureTable = FeatureTable;
+  }
+  /**
+   * Gets a row of controls that can be used for various interactions with the table
+   *
+   * @returns The dom node that contains the controls
+   */
+  _getTableControlRow() {
+    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))))));
+  }
+  /**
+   * Initialize the FeatureTable
+   *
+   * @returns void
+   */
+  _getTable(node) {
+    var _a;
+    if ((_a = this._layerView) === null || _a === void 0 ? void 0 : _a.layer) {
+      this._table = new this.FeatureTable({
+        layer: this._layerView.layer,
+        view: this.mapView,
+        editingEnabled: true,
+        highlightOnRowSelectEnabled: true,
+        multiSortEnabled: false,
+        visibleElements: {
+          header: false,
+          menu: false
+        },
+        container: node
+      });
+    }
+  }
+  /**
+   * Select or deselect all rows
+   *
+   * @param checked When true all rows will be selected
+   *
+   * @returns void
+   */
+  _selectAll(checked) {
+    this._selectedIndexes = checked ? this._graphics.map((_g, i) => i) : [];
+  }
+  // need to discuss with team
+  _showSelected() {
+    console.log("_showSelected");
+  }
+  /**
+   * Clears the selected indexes
+   *
+   * @returns void
+   */
+  _clearSelection() {
+    this._selectedIndexes = [];
+  }
+  /**
+   * Select all rows that are not currently selectd
+   *
+   * @returns void
+   */
+  _switchSelected() {
+    const currentIndexes = [...this._selectedIndexes];
+    this._selectedIndexes = this._graphics.reduce((prev, _cur, i) => {
+      if (currentIndexes.indexOf(i) < 0) {
+        prev.push(i);
+      }
+      return prev;
+    }, []);
+  }
+  /**
+   * Export all selected rows as CSV
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  async _exportToCSV() {
+    return downloadCSV([], this._layerView.layer, this._getSelectedIds(), false, // formatUsingLayerPopup
+    false, // removeDuplicates
+    true);
+  }
+  /**
+   * Zoom to all selected features
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _zoom() {
+    const ids = this._getSelectedIds();
+    void goToSelection(ids, this._layerView, this.mapView, true);
+  }
+  /**
+   * Open the edit multiple modal
+   *
+   * @returns void
+   */
+  _editMultiple() {
+    this._editMultipleMpdal.open = true;
+  }
+  /**
+   * Delete all selected records
+   *
+   * @returns a promise that will resolve when the operation is complete
+   */
+  _delete() {
+    console.log("delete");
+  }
+  /**
+   * Get the graphics for all selected indexes
+   *
+   * @param indexes the indexes for the graphics to fetch
+   *
+   * @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];
+    }
+  }
+  /**
+   * Handles layer selection change to show new table
+   *
+   * @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();
+  }
+  /**
+   * Fetches the component's translations
+   *
+   * @returns Promise when complete
+   * @protected
+   */
+  async _getTranslations() {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0];
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "mapView": ["mapViewWatchHandler"]
+  }; }
+  static get style() { return layerTableCss; }
+}, [0, "layer-table", {
+    "mapView": [16],
+    "_layerView": [32],
+    "_selectedIndexes": [32],
+    "_translations": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["layer-table", "calcite-action", "calcite-action-menu", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-icon", "calcite-input", "calcite-label", "calcite-loader", "calcite-modal", "calcite-option", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-select", "calcite-split-button", "edit-record-modal", "map-layer-picker"];
+  components.forEach(tagName => { switch (tagName) {
+    case "layer-table":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, LayerTable);
+      }
+      break;
+    case "calcite-action":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$n();
+      }
+      break;
+    case "calcite-action-menu":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$m();
+      }
+      break;
+    case "calcite-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$l();
+      }
+      break;
+    case "calcite-chip":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$k();
+      }
+      break;
+    case "calcite-combobox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$j();
+      }
+      break;
+    case "calcite-combobox-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$i();
+      }
+      break;
+    case "calcite-dropdown":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
+      }
+      break;
+    case "calcite-dropdown-group":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$g();
+      }
+      break;
+    case "calcite-dropdown-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$f();
+      }
+      break;
+    case "calcite-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$e();
+      }
+      break;
+    case "calcite-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
+      }
+      break;
+    case "calcite-label":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$c();
+      }
+      break;
+    case "calcite-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$b();
+      }
+      break;
+    case "calcite-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "calcite-option":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "calcite-panel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "calcite-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "calcite-progress":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "calcite-scrim":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "calcite-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-split-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "edit-record-modal":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "map-layer-picker":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { LayerTable as L, defineCustomElement as d };