@esri/solutions-components 0.7.31 → 0.7.32

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

@@ -18,6 +18,33 @@
   display: block;
 }
 
+/* Override to hide Editor settings panel collapsible */
 .esri-editor__panel-toolbar {
   display: none !important;
 }
+
+/* Override to hide the Select section from Editor template */
+.esri-editor__update-actions {
+  display: none !important;
+}
+
+/* Override to reduce the padding of panel content*/
+.esri-editor__panel-content {
+  padding-block: 0px !important;
+}
+
+/* Override to hide header */
+.esri-editor .esri-item-list__group__header {
+  display: none !important;
+}
+
+/* Override to hide the create feature heading title */
+.esri-editor__panel-content__section .esri-widget__heading {
+  display: none !important;
+}
+
+/* Override to reduce padding for the template filter*/
+.esri-editor .esri-item-list__filter-container--sticky {
+  padding-block: 0px !important;
+  padding-inline: 10px !important;
+}

package/dist/collection/components/create-feature/create-feature.js

@@ -20,11 +20,12 @@
  */
 import { Host, h } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
-import { getLayerOrTable } from "../../utils/mapViewUtils";
+import { getAllLayers } from "../../utils/mapViewUtils";
 export class CreateFeature {
     constructor() {
         this.mapView = undefined;
         this.selectedLayerId = undefined;
+        this.customizeSubmit = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -95,18 +96,8 @@ export class CreateFeature {
      * Init Editor widget and starts the create workflow
      */
     async init() {
-        if (this.mapView) {
-            if (this.mapView && this.selectedLayerId) {
-                await getLayerOrTable(this.mapView, this.selectedLayerId);
-                await this.createEditorWidget();
-                await this.startCreate();
-                this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
-                setTimeout(() => {
-                    var _a, _b;
-                    this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article').querySelector('header').setAttribute('style', 'display: none');
-                    (_b = (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article')) === null || _a === void 0 ? void 0 : _a.querySelector('footer')) === null || _b === void 0 ? void 0 : _b.setAttribute('style', 'display: none');
-                }, 700);
-            }
+        if (this.mapView && this.selectedLayerId) {
+            await this.createEditorWidget();
         }
     }
     /**
@@ -115,10 +106,12 @@ export class CreateFeature {
      * @protected
      */
     async initModules() {
-        const [Editor] = await loadModules([
-            "esri/widgets/Editor"
+        const [Editor, reactiveUtils] = await loadModules([
+            "esri/widgets/Editor",
+            "esri/core/reactiveUtils"
         ]);
         this.Editor = Editor;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Display editor widget to create the new feature
@@ -128,51 +121,105 @@ export class CreateFeature {
         if (this._editor) {
             this._editor.destroy();
         }
+        const layerInfos = [];
         const container = document.createElement("div");
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        const selectedLayer = {
-            layer: layer
-        };
+        const allMapLayers = await getAllLayers(this.mapView);
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        allMapLayers.forEach(async (eachLayer) => {
+            layerInfos.push({
+                layer: eachLayer,
+                enabled: (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.type) === "feature" && (eachLayer === null || eachLayer === void 0 ? void 0 : eachLayer.id) === this.selectedLayerId,
+                addEnabled: true,
+                updateEnabled: false,
+                deleteEnabled: false // default is true, set to false to disable the ability to delete features
+            });
+        });
         this._editor = new this.Editor({
             allowedWorkflows: "create-features",
             view: this.mapView,
-            layerInfos: [selectedLayer],
+            layerInfos: layerInfos,
             visibleElements: {
-                snappingControls: false,
-                snappingControlsElements: {
-                    featureEnabledToggle: false,
-                    layerList: false,
-                    enabledToggle: false
-                }
+                snappingControls: false
             },
-            container,
+            container
         });
         this.el.appendChild(container);
+        //Add handle to watch if attachments are added/edited
+        const attachmentHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
+            if (state === 'adding-attachment' || state === 'editing-attachment') {
+                this._addingAttachment = true;
+                this.editingAttachment.emit(true);
+            }
+            else {
+                if (this._addingAttachment) {
+                    this.editingAttachment.emit(false);
+                    this._addingAttachment = false;
+                }
+            }
+        });
+        this._editor.viewModel.addHandles(attachmentHandle);
+        //Add handle to watch featureTemplatesViewModel ready state and then start the creation
+        const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
+            if (state === 'ready') {
+                void this.startCreate();
+            }
+        });
+        this._editor.viewModel.addHandles(handle);
     }
     /**
      * Start creating the feature
      * @protected
      */
     async startCreate() {
-        var _a, _b;
-        const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-        if (layer) {
-            let template = layer.templates && layer.templates.length ? layer.templates[0] : {};
-            if (((_a = layer.sourceJSON) === null || _a === void 0 ? void 0 : _a.types.length) && ((_b = layer.sourceJSON.types[0].templates) === null || _b === void 0 ? void 0 : _b.length)) {
-                template = layer.sourceJSON.types[0].templates[0];
-            }
-            const creationInfo = {
-                layer: layer,
-                template: template
-            };
-            await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
-            this._editor.viewModel.sketchViewModel.on("create", (evt) => {
-                if (evt.state === "complete") {
-                    this.drawComplete.emit();
-                }
+        var _a;
+        if ((_a = this._editor.viewModel.featureTemplatesViewModel.items) === null || _a === void 0 ? void 0 : _a.length) {
+            const items = this._editor.viewModel.featureTemplatesViewModel.items[0].get("items");
+            //once the feature template is selected handle the event for formSubmit and sketch complete
+            //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
+            this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
+                setTimeout(() => {
+                    //on form submit 
+                    this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
+                    //on sketch complete emit the event
+                    this._editor.viewModel.sketchViewModel.on("create", (evt) => {
+                        if (evt.state === "complete") {
+                            this.drawComplete.emit();
+                        }
+                    });
+                    this.hideEditorsElements();
+                }, 700);
+                this.hideEditorsElements();
             });
+            //if only one feature template then directly start geometry creation for that
+            //else allow feature template selection to user
+            if (items.length === 1) {
+                this._editor.viewModel.featureTemplatesViewModel.select(items[0]);
+            }
+            //hides the header and footer elements in editor widget
+            this.hideEditorsElements();
         }
     }
+    /**
+     * Hides the elements of editor widget
+     * @protected
+     */
+    hideEditorsElements() {
+        if (!this.customizeSubmit) {
+            return;
+        }
+        setTimeout(() => {
+            var _a;
+            //hides the header and footer on the featureForm
+            (_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null || _a === void 0 ? void 0 : _a.forEach((flowItem) => {
+                var _a, _b, _c, _d, _e;
+                const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
+                //hide the header
+                (_d = article === null || article === void 0 ? void 0 : article.querySelector('header')) === null || _d === void 0 ? void 0 : _d.setAttribute('style', 'display: none');
+                //hide the footer
+                (_e = article === null || article === void 0 ? void 0 : article.querySelector('footer')) === null || _e === void 0 ? void 0 : _e.setAttribute('style', 'display: none');
+            });
+        }, 700);
+    }
     /**
      * On creation of feature emit the event that the feature is created
      * @param evt feature submit event
@@ -180,9 +227,12 @@ export class CreateFeature {
      */
     async submitted(evt) {
         var _a;
+        //return if any attribute is invalid , focus will be shifted to the invalid attribute in feature form
         if (evt.invalid.length) {
             return;
         }
+        //Submit only when valid attributes
+        //emit success or fail based on the result
         if (evt.valid.length) {
             try {
                 await this._editor.activeWorkflow.commit();
@@ -251,6 +301,24 @@ export class CreateFeature {
                 },
                 "attribute": "selected-layer-id",
                 "reflect": false
+            },
+            "customizeSubmit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "boolean: Set this to true when have a custom submit button in the app.\r\nThis will hide the header and footer elements of the editor and user needs to execute the submit method manually."
+                },
+                "attribute": "customize-submit",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -305,6 +373,21 @@ export class CreateFeature {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "editingAttachment",
+                "name": "editingAttachment",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when editing attachments"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
             }];
     }
     static get methods() {

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

@@ -88,6 +88,7 @@ export class CrowdsourceReporter {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        this._urlParamsLoaded = false;
         await this._initModules();
         await this._getTranslations();
     }
@@ -124,6 +125,11 @@ export class CrowdsourceReporter {
     setSelectedLayer(layerId, layerName) {
         this._selectedLayerId = layerId;
         this._selectedLayerName = layerName;
+        //show only current layer on map and hide other valid editable layers
+        //if layerId is empty then show all the layers on map
+        this._validLayers.forEach(layer => {
+            layer.set('visible', !layerId || (layer.id === layerId));
+        });
     }
     /**
      * Get the reporter app functionality
@@ -180,15 +186,22 @@ export class CrowdsourceReporter {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "secondary", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.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("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { mapView: this.mapView, onDrawComplete: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.navigateHomePage.bind(this), ref: el => this._createFeature = el, selectedLayerId: this._selectedLayerId }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "secondary", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.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("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onDrawComplete.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, selectedLayerId: this._selectedLayerId }))));
     }
     /**
      * When drawing of incident location completed on map show the submit and cancel button
      * @protected
      */
-    showSubmitCancelButton() {
+    onDrawComplete() {
         this._showSubmitCancelButton = true;
     }
+    /**
+     * When Add attachment panel is enabled hide the submit and cancel button
+     * @protected
+     */
+    showSubmitCancelButton(evt) {
+        this._showSubmitCancelButton = !evt.detail;
+    }
     /**
      * On back from create feature, call submit editor to destroy the Editor widget instance
      * @protected
@@ -221,11 +234,22 @@ export class CrowdsourceReporter {
      * On submit report navigate to the layer list home page and refresh the layer list
      * @protected
      */
-    navigateHomePage() {
+    onReportSubmitted() {
         this._reportSubmitted = true;
+        this.navigateToHomePage();
+    }
+    /**
+     * Navigates to layer-list
+     * @protected
+     */
+    navigateToHomePage() {
+        if (this._createFeature) {
+            this._createFeature.close();
+        }
         if (this._layerList) {
             this._layerList.refresh();
         }
+        this.setSelectedFeatures([]);
         this._flowItems = ["layer-list"];
     }
     /**
@@ -271,7 +295,10 @@ export class CrowdsourceReporter {
         //update the has valid layer state
         this._hasValidLayers = layersListed.length > 0;
         //navigate to the feature details if URL params found
-        await this.loadFeatureFromURLParams();
+        if (!this._urlParamsLoaded) {
+            this._urlParamsLoaded = true;
+            await this.loadFeatureFromURLParams();
+        }
     }
     /**On click of layer list item show feature list
      * @param evt Event which has details of selected layerId and layerName
@@ -288,10 +315,10 @@ export class CrowdsourceReporter {
     backFromSelectedPanel() {
         const updatedFlowItems = [...this._flowItems];
         updatedFlowItems.pop();
-        //clear the selected layer and feature when back to layer list
+        //Back to layer list, and return as the flowItems will be reset in navigateToHomePage
         if (updatedFlowItems.length === 1) {
-            this.setSelectedLayer('', '');
-            this.setSelectedFeatures([]);
+            this.navigateToHomePage();
+            return;
         }
         this._flowItems = [...updatedFlowItems];
     }
@@ -440,7 +467,6 @@ export class CrowdsourceReporter {
     }
     /**
      * Updates the share url for current selected feature
-     * @returns
      * @protected
     */
     _updateShareURL() {
@@ -469,6 +495,7 @@ export class CrowdsourceReporter {
     }
     /**
      * Navigates to selected features detail based on the URL params
+     * @protected
      */
     async loadFeatureFromURLParams() {
         if (this.layerId && this.objectId) {

package/dist/collection/demos/create-feature.html

@@ -0,0 +1,90 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <title>Create Feature</title>
+    <!--
+      | Copyright 2022 Esri
+      |
+      | Licensed under the Apache License, Version 2.0 (the "License");
+      | you may not use this file except in compliance with the License.
+      | You may obtain a copy of the License at
+      |
+      |    http://www.apache.org/licenses/LICENSE-2.0
+      |
+      | Unless required by applicable law or agreed to in writing, software
+      | distributed under the License is distributed on an "AS IS" BASIS,
+      | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+      | See the License for the specific language governing permissions and
+      | limitations under the License.
+      -->
+    <style>
+      #viewDiv {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        width: calc(100% - 402px);
+      }
+
+      .over-map {
+        position: absolute;
+        top: 0;
+        right: 0px;
+        background-color: var(--calcite-color-foreground-1);
+      }
+
+      .column {
+        width: 400px;
+        height: 100%;
+        border: 1px solid var(--calcite-color-border-2);
+      }
+
+      .column[dir="rtl"] {
+        float: left;
+      }
+
+      .full-height {
+        height: 100%;
+      }
+    </style>
+
+    <link rel="stylesheet" href="https://jsdev.arcgis.com/4.29/esri/themes/light/main.css" />
+    <link rel="stylesheet" href="https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css" />
+    <link rel="stylesheet" href="../solutions-components.css" type="text/css">
+    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.0.0/calcite.css" />
+
+    <script src="https://jsdev.arcgis.com/4.29/"></script>
+    <script type="module" src="../solutions-components.esm.js"></script>
+
+    <script>
+      require(["esri/WebMap", "esri/views/MapView"], (
+        WebMap,
+        MapView
+      ) => {
+        var webMap = new WebMap({
+          portalItem: {
+            id: "024e8a5e73a34c5aade9632d651c5750"
+          }
+        });
+        var view = new MapView({
+          container: "viewDiv",
+          map: webMap
+        });
+
+        view.when(function () {
+          const demo = document.getElementById("demo");
+          demo.mapView = view;
+          demo.selectedLayerId = 'SE_attch_7327';
+        })
+      });
+    </script>
+  </head>
+
+  <body>
+    <div id="viewDiv"></div>
+    <create-feature id="demo" class="over-map column full-height"></create-feature>
+  </body>
+</html>