Merge pull request #966 from Esri/CT-Manager-AGOL-2024.RO3

Delivery for Reporter AGOL-2024.R03 - UAT

src/components/create-feature/create-feature.css

@@ -60,8 +60,9 @@
 
 .show-map {
   padding: 10px !important;
-  position: absolute;
+  position: absolute !important;
   bottom: 0;
+  height: auto !important;
   width: calc(100% - 22px);
 }
 

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

@@ -566,7 +566,9 @@ export class CreateFeature {
         if (state === 'ready') {
           this._mapViewContainer?.classList?.replace("show-map", "hide-map");
           this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
-          void this._setFloorLevel(this.floorLevel);
+          setTimeout(() => {
+            void this._setFloorLevel(this.floorLevel);
+          }, 50);
           this._currentPage = 'featureForm';
           this.progressStatus.emit(1);
           this.drawComplete.emit();

src/components/crowdsource-reporter/crowdsource-reporter.tsx

@@ -512,7 +512,8 @@ export class CrowdsourceReporter {
         }
       }
     }
-    if (this._layerList) {
+    // refresh layer list when user is on layer list panel
+    if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
       await this._layerList.refresh();
     }
     if (this._featureList) {
@@ -531,7 +532,8 @@ export class CrowdsourceReporter {
     if (this._editableLayerIds) {
       await this._updateFeatures();
       setTimeout(() => {
-        if (this._layerList) {
+        // refresh layer list when user is on layer list panel 
+        if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
           void this._layerList.refresh();
         }
         if (this._featureList) {
@@ -818,6 +820,7 @@ export class CrowdsourceReporter {
       if (canRestoreFilter) {
         void this._filterList.restoreFilters(this._filterUrlParams[0], this._filterInitState);
       }
+      this._filterInitState = null;
     }, 200);
   }
 
@@ -830,12 +833,6 @@ export class CrowdsourceReporter {
     this._filterActive = false;
     this._filterUrlParams = null;
     this._filterInitState = null;
-    if (this._featureList) {
-      await this._featureList.refresh();
-    }
-    if (this._layerList) {
-      await this._layerList.refresh();
-    }
   }
 
   /**
@@ -848,11 +845,7 @@ export class CrowdsourceReporter {
     //set the filter active state based on the length of applied filters
     this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
     this._filterUrlParams = this._filterList.urlParams.getAll('filter');
-    this._filterInitState = await this._filterList.getFilterInitState();
     await this._featureList.refresh();
-    if (this._layerList) {
-      await this._layerList.refresh();
-    }
     this._showLoadingIndicator = false;
   }
 
@@ -1068,15 +1061,15 @@ export class CrowdsourceReporter {
    * On submit report navigate to the layer list home page and refresh the layer list
    * @protected
    */
-  protected onReportSubmitted(): void {
-    //on report submit form will be closed, so update the form state
-    if (this._showFullPanel) {
-      this.updatePanelState(this._sidePanelCollapsed, false);
-    }
+  protected async onReportSubmitted(): Promise<void> {
     void this.updateNonVisibleLayersOnMap(false);
+    await this.navigateToHomePage();
     this._reportSubmitted = true;
     this._updatedProgressBarStatus = 0.25;
-    void this.navigateToHomePage();
+     //on report submit form will be closed, so update the form state
+    if (this._showFullPanel) {
+      this.updatePanelState(this._sidePanelCollapsed, false);
+    }
   }
 
   /**
@@ -1109,11 +1102,11 @@ export class CrowdsourceReporter {
    * @protected
    */
   protected async navigateToHomePage(): Promise<void> {
+    // set the selected features and then refresh the layer list to maintain the layer's visibility state
+    await this.setSelectedFeatures([]);
     if (this._layerList) {
-      void this._layerList.refresh();
+      await this._layerList.refresh();
     }
-    await this.setSelectedFeatures([]);
-
     if (this._editableLayerIds.length === 1) {
       await this._featureList.refresh();
       this._flowItems = ["feature-list"];
@@ -1228,6 +1221,16 @@ export class CrowdsourceReporter {
     void this._handleFilterListReset();
   }
 
+  /**
+   * On back from filter panel get the filter's init state
+   * @protected
+   */
+  protected async backFromFilterPanel(): Promise<void> {
+    this._filterInitState = await this._filterList.getFilterInitState();
+    await this._featureList.refresh();
+    this.backFromSelectedPanel();
+  }
+
   /**
    * On back from selected panel navigate to the previous panel
    * @protected
@@ -1415,7 +1418,7 @@ export class CrowdsourceReporter {
         collapsed={this.isMobile && this._sidePanelCollapsed}
         heading={this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName)}
         loading={this._showLoadingIndicator}
-        onCalciteFlowItemBack={this.backFromSelectedPanel.bind(this)}>
+        onCalciteFlowItemBack={this.backFromFilterPanel.bind(this)}>
         {this.isMobile && this.getActionToExpandCollapsePanel()}
         <div class={"width-full"}
           slot="footer">
@@ -1432,7 +1435,7 @@ export class CrowdsourceReporter {
             <calcite-button
               appearance="outline"
               class={"footer-button"}
-              onClick={this.backFromSelectedPanel.bind(this)}
+              onClick={this.backFromFilterPanel.bind(this)}
               width="full">
               {this._translations.close}
             </calcite-button>

src/components/feature-details/feature-details.tsx

@@ -366,11 +366,13 @@ export class FeatureDetails {
    * @protected
    */
   protected async getCompleteGraphic(graphic: __esri.Graphic): Promise<void> {
-    const layer = graphic.layer as __esri.FeatureLayer
-    const query = layer.createQuery();
-    query.objectIds = [graphic.getObjectId()];
-    const completeGraphic = await layer.queryFeatures(query);
-    this._selectedGraphic = completeGraphic.features[0];
+    if (graphic) {
+      const layer = graphic.layer as __esri.FeatureLayer;
+      const query = layer.createQuery();
+      query.objectIds = [graphic.getObjectId()];
+      const completeGraphic = await layer.queryFeatures(query);
+      this._selectedGraphic = completeGraphic.features[0];
+    }
   }
 
   /**

src/components/feature-list/feature-list.tsx

@@ -607,7 +607,7 @@ export class FeatureList {
         {this.showFeatureSymbol &&
           <div
             class={'feature-symbol'}
-            ref={(el) => el && el.appendChild(featureSymbol)}
+            ref={(el) => el && el.replaceChildren(featureSymbol)}
             slot="content-start" />}
 
         <div

src/components/layer-list/layer-list.tsx

@@ -163,15 +163,13 @@ export class LayerList {
    */
   async componentWillLoad(): Promise<void> {
     await this._getTranslations();
-    this._isLoading = true;
   }
 
   /**
    * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
    */
   async componentDidLoad() {
     await this.setLayers();
-    this._isLoading = false;
   }
 
   /**
@@ -213,7 +211,9 @@ export class LayerList {
    */
   async setLayers(): Promise<void> {
     if (this.mapView) {
+      this._isLoading = true;
       await this.initLayerHash();
+      this._isLoading = false;
     }
   }