@esri/solutions-components 0.7.31 → 0.7.32

package/dist/cjs/calcite-flow_5.cjs.entry.js

@@ -339,7 +339,7 @@ const FlowItem = class {
 };
 FlowItem.style = flowItemCss;
 
-const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}";
+const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__update-actions{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}";
 
 const CreateFeature = class {
     constructor(hostRef) {
@@ -347,8 +347,10 @@ const CreateFeature = class {
         this.success = index.createEvent(this, "success", 7);
         this.fail = index.createEvent(this, "fail", 7);
         this.drawComplete = index.createEvent(this, "drawComplete", 7);
+        this.editingAttachment = index.createEvent(this, "editingAttachment", 7);
         this.mapView = undefined;
         this.selectedLayerId = undefined;
+        this.customizeSubmit = false;
     }
     //--------------------------------------------------------------------------
     //
@@ -419,18 +421,8 @@ const CreateFeature = class {
      * Init Editor widget and starts the create workflow
      */
     async init() {
-        if (this.mapView) {
-            if (this.mapView && this.selectedLayerId) {
-                await mapViewUtils.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();
         }
     }
     /**
@@ -439,10 +431,12 @@ const CreateFeature = class {
      * @protected
      */
     async initModules() {
-        const [Editor] = await locale$1.loadModules([
-            "esri/widgets/Editor"
+        const [Editor, reactiveUtils] = await locale$1.loadModules([
+            "esri/widgets/Editor",
+            "esri/core/reactiveUtils"
         ]);
         this.Editor = Editor;
+        this.reactiveUtils = reactiveUtils;
     }
     /**
      * Display editor widget to create the new feature
@@ -452,50 +446,104 @@ const CreateFeature = class {
         if (this._editor) {
             this._editor.destroy();
         }
+        const layerInfos = [];
         const container = document.createElement("div");
-        const layer = await mapViewUtils.getLayerOrTable(this.mapView, this.selectedLayerId);
-        const selectedLayer = {
-            layer: layer
-        };
+        const allMapLayers = await mapViewUtils.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 mapViewUtils.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
@@ -504,9 +552,12 @@ const CreateFeature = class {
      */
     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();

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

@@ -83,6 +83,7 @@ const CrowdsourceReporter = class {
      * @returns Promise when complete
      */
     async componentWillLoad() {
+        this._urlParamsLoaded = false;
         await this._initModules();
         await this._getTranslations();
     }
@@ -119,6 +120,11 @@ const CrowdsourceReporter = class {
     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
@@ -175,15 +181,22 @@ const CrowdsourceReporter = class {
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "secondary", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.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 (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "secondary", class: "footer-top-button footer-button", onClick: this.onSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.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
@@ -216,11 +229,22 @@ const CrowdsourceReporter = class {
      * 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"];
     }
     /**
@@ -266,7 +290,10 @@ const CrowdsourceReporter = class {
         //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
@@ -283,10 +310,10 @@ const CrowdsourceReporter = class {
     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];
     }
@@ -435,7 +462,6 @@ const CrowdsourceReporter = class {
     }
     /**
      * Updates the share url for current selected feature
-     * @returns
      * @protected
     */
     _updateShareURL() {
@@ -464,6 +490,7 @@ const CrowdsourceReporter = class {
     }
     /**
      * Navigates to selected features detail based on the URL params
+     * @protected
      */
     async loadFeatureFromURLParams() {
         if (this.layerId && this.objectId) {