Delivery for Reporter Instant App - Sprint3 - AGOL-2024.R01

src/components.d.ts

@@ -92,6 +92,10 @@ export namespace Components {
           * @returns Promise that resolves when the operation is complete
          */
         "close": () => Promise<void>;
+        /**
+          * boolean: Set this to true when have a custom submit button in the app. This will hide the header and footer elements of the editor and user needs to execute the submit method manually.
+         */
+        "customizeSubmit"?: boolean;
         /**
           * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
          */
@@ -1443,6 +1447,7 @@ declare global {
         "success": void;
         "fail": Error;
         "drawComplete": void;
+        "editingAttachment": boolean;
     }
     interface HTMLCreateFeatureElement extends Components.CreateFeature, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCreateFeatureElementEventMap>(type: K, listener: (this: HTMLCreateFeatureElement, ev: CreateFeatureCustomEvent<HTMLCreateFeatureElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2140,6 +2145,10 @@ declare namespace LocalJSX {
         "zoomAndScrollToSelected"?: boolean;
     }
     interface CreateFeature {
+        /**
+          * boolean: Set this to true when have a custom submit button in the app. This will hide the header and footer elements of the editor and user needs to execute the submit method manually.
+         */
+        "customizeSubmit"?: boolean;
         /**
           * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
          */
@@ -2148,6 +2157,10 @@ declare namespace LocalJSX {
           * Emitted on demand when drawing is completed
          */
         "onDrawComplete"?: (event: CreateFeatureCustomEvent<void>) => void;
+        /**
+          * Emitted on demand when editing attachments
+         */
+        "onEditingAttachment"?: (event: CreateFeatureCustomEvent<boolean>) => void;
         /**
           * Emitted on demand when the feature creation is failed
          */

src/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;
+}

src/components/create-feature/create-feature.tsx

@@ -16,7 +16,7 @@
 
 import { Component, Element, EventEmitter, Prop, Host, h, Event, Watch, Method } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
-import { getLayerOrTable } from "../../utils/mapViewUtils";
+import { getAllLayers } from "../../utils/mapViewUtils";
 
 @Component({
   tag: "create-feature",
@@ -48,6 +48,12 @@ export class CreateFeature {
    */
   @Prop() selectedLayerId: string;
 
+  /**
+   * boolean: Set this to true when have a custom submit button in the app.
+   * This will hide the header and footer elements of the editor and user needs to execute the submit method manually.
+   */
+  @Prop() customizeSubmit?: boolean = false;
+
   //--------------------------------------------------------------------------
   //
   //  State (internal)
@@ -73,9 +79,14 @@ export class CreateFeature {
   protected _editor: __esri.Editor;
 
   /**
-   * HTMLDivElement: https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement
-  */
-  protected _editContainer: HTMLDivElement;
+   * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
+   */
+  protected reactiveUtils: typeof import("esri/core/reactiveUtils");
+
+  /**
+   * boolean: Flag to maintain the add attachment
+   */
+  protected _addingAttachment: boolean
 
   //--------------------------------------------------------------------------
   //
@@ -141,6 +152,11 @@ export class CreateFeature {
    */
   @Event() drawComplete: EventEmitter<void>;
 
+  /**
+  * Emitted on demand when editing attachments
+  */
+  @Event() editingAttachment: EventEmitter<boolean>;
+
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -183,17 +199,8 @@ export class CreateFeature {
    * Init Editor widget and starts the create workflow
    */
   protected async init(): Promise<void> {
-    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(() => {
-          this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article').querySelector('header').setAttribute('style', 'display: none');
-          this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')[1].shadowRoot.querySelector('calcite-panel').shadowRoot.querySelector('article')?.querySelector('footer')?.setAttribute('style', 'display: none');
-        }, 700)
-      }
+    if (this.mapView && this.selectedLayerId) {
+      await this.createEditorWidget();
     }
   }
 
@@ -203,10 +210,12 @@ export class CreateFeature {
    * @protected
    */
   protected async initModules(): Promise<void> {
-    const [Editor] = await loadModules([
-      "esri/widgets/Editor"
+    const [Editor, reactiveUtils] = await loadModules([
+      "esri/widgets/Editor",
+      "esri/core/reactiveUtils"
     ]);
     this.Editor = Editor;
+    this.reactiveUtils = reactiveUtils;
   }
 
   /**
@@ -217,50 +226,109 @@ 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: __esri.FeatureLayer) => {
+      layerInfos.push({
+        layer: eachLayer,
+        enabled: eachLayer?.type === "feature" && eachLayer?.id === this.selectedLayerId,
+        addEnabled: true, // default is true, set to false to disable the ability to add a new feature
+        updateEnabled: false, // default is true, set to false to disable the ability to edit an existing feature
+        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, // removes "Feature to feature" toggle
-          layerList: false, // removes Snapping layers list
-          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
    */
   protected async startCreate(): Promise<void> {
-    const layer = await getLayerOrTable(this.mapView, this.selectedLayerId);
-    if (layer) {
-      let template = layer.templates && layer.templates.length ? layer.templates[0] : {} as __esri.FeatureTemplate;
-      if (layer.sourceJSON?.types.length && layer.sourceJSON.types[0].templates?.length) {
-        template = layer.sourceJSON.types[0].templates[0];
+    if (this._editor.viewModel.featureTemplatesViewModel.items?.length) {
+      const items: __esri.TemplateItem[] = 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]);
       }
-      const creationInfo: __esri.CreationInfo = {
-        layer: layer,
-        template: template
-      };
-      await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
-      this._editor.viewModel.sketchViewModel.on("create", (evt) => {
-        if (evt.state === "complete") {
-          this.drawComplete.emit();
-        }
-      })
+      //hides the header and footer elements in editor widget
+      this.hideEditorsElements()
+    }
+  }
+
+  /**
+   * Hides the elements of editor widget
+   * @protected
+   */
+  protected hideEditorsElements(): void {
+    if(!this.customizeSubmit){
+      return
     }
+    setTimeout(() => {
+      //hides the header and footer on the featureForm
+      this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')?.forEach((flowItem) => {
+        const article = flowItem.shadowRoot?.querySelector('calcite-panel')?.shadowRoot?.querySelector('article');
+        //hide the header
+        article?.querySelector('header')?.setAttribute('style', 'display: none');
+        //hide the footer
+        article?.querySelector('footer')?.setAttribute('style', 'display: none');
+      })
+    }, 700)
   }
 
   /**
@@ -269,9 +337,12 @@ export class CreateFeature {
    * @protected
    */
   protected async submitted(evt: any): Promise<void> {
+    //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();