From 9e805dcd4c31c101ab0620abdce3df0157046a08 Mon Sep 17 00:00:00 2001
From: John Hauck <jhauck@esri.com>
Date: Wed, 17 Jan 2024 09:05:29 -0700
Subject: [PATCH 1/3] mapView only

---
 src/components.d.ts                           |   8 +
 .../crowdsource-reporter.tsx                  | 147 ++++--------------
 src/components/crowdsource-reporter/readme.md |  67 +++-----
 src/components/map-card/readme.md             |   2 -
 src/demos/crowdsource-reporter.html           | 141 +++++++++++------
 5 files changed, 159 insertions(+), 206 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index 2341ea0f9..a4550f9a1 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -253,6 +253,10 @@ export namespace Components {
           * IMapInfo[]: array of map infos (name and id)
          */
         "mapInfos": IMapInfo[];
+        /**
+          * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+         */
+        "mapView": __esri.MapView;
         /**
           * string: The word(s) to display in the reports submit button
          */
@@ -2218,6 +2222,10 @@ declare namespace LocalJSX {
           * IMapInfo[]: array of map infos (name and id)
          */
         "mapInfos"?: IMapInfo[];
+        /**
+          * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+         */
+        "mapView"?: __esri.MapView;
         /**
           * string: The word(s) to display in the reports submit button
          */
diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.tsx b/src/components/crowdsource-reporter/crowdsource-reporter.tsx
index 03d242032..a984f2790 100644
--- a/src/components/crowdsource-reporter/crowdsource-reporter.tsx
+++ b/src/components/crowdsource-reporter/crowdsource-reporter.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, Element, Host, h, Prop, VNode, State, Listen } from "@stencil/core";
+import { Component, Element, Host, h, Prop, VNode, State, Watch } from "@stencil/core";
 import { IMapChange, IMapInfo, ISearchConfiguration, theme } from "../../utils/interfaces";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import CrowdsourceReporter_T9n from "../../assets/t9n/crowdsource-reporter/resources.json";
@@ -79,6 +79,11 @@ export class CrowdsourceReporter {
    */
   @Prop() loginTitle: string;
 
+  /**
+   * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+   */
+  @Prop() mapView: __esri.MapView;
+
   /**
    * string: The word(s) to display in the reports submit button
    */
@@ -145,11 +150,6 @@ export class CrowdsourceReporter {
    */
   @State() _mapInfo: IMapInfo;
 
-  /**
-   * __esri.MapView: Stores the current map view
-   */
-  @State() _mapView: __esri.MapView;
-
   /**
    * boolean: When true the application will be in mobile mode, controls the mobile or desktop view
    */
@@ -217,6 +217,16 @@ export class CrowdsourceReporter {
   //
   //--------------------------------------------------------------------------
 
+  /**
+   * Called each time the mapView prop is changed.
+   */
+  @Watch("mapView")
+  async mapViewWatchHandler(): Promise<void> {
+    await this.mapView.when(async () => {
+      await this.setMapView();
+    });
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
@@ -229,18 +239,6 @@ export class CrowdsourceReporter {
   //
   //--------------------------------------------------------------------------
 
-  /**
-   * Listen for mapChanged event to be fired then store the new mapView so components will be updated
-   */
-  @Listen("mapChanged", { target: "window" })
-  async mapChanged(
-    evt: CustomEvent
-  ): Promise<void> {
-    this._mapChange = evt.detail;
-    await this._mapChange.mapView.when(async () => {
-      await this.setMapView();
-    });
-  }
   //--------------------------------------------------------------------------
   //
   //  Functions (lifecycle)
@@ -267,26 +265,23 @@ export class CrowdsourceReporter {
    * Renders the component.
    */
   render() {
-    let  validConfiguration = true;
+    // const  validConfiguration = true;
     //Check if webMap id is configured
-    if(!this.mapInfos || this.mapInfos.length<=0  || (this.mapInfos?.length>0 && !this.mapInfos[0]?.id)){
-      validConfiguration = false
-    }
+    // if(!this.mapInfos || this.mapInfos.length<=0  || (this.mapInfos?.length>0 && !this.mapInfos[0]?.id)){
+    //   validConfiguration = false
+    // }
     return (
       <Host>
         <div>
-          {validConfiguration &&
-            <calcite-shell content-behind >
-              {this._getReporter()}
-              {this._getMapNode()}
-            </calcite-shell>
-          }
-          {!validConfiguration &&
+          <calcite-shell content-behind >
+            {this._getReporter()}
+          </calcite-shell>
+          {/* {!validConfiguration &&
             <calcite-notice class="error-msg" icon="configure" kind="danger" open>
               <div slot="title">{this._translations.error}</div>
               <div slot="message">{ this._translations.invalidConfigurationErrorMsg}</div>
             </calcite-notice>
-          }
+          } */}
         </div>
       </Host>
     );
@@ -315,7 +310,7 @@ export class CrowdsourceReporter {
           case "feature-details":
             renderLists.push(this.getFeatureDetailsFlowItem());
             break;
-          
+
       }
     });
     let sidePanelClass = "side-panel";
@@ -326,7 +321,7 @@ export class CrowdsourceReporter {
     const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
     return (
       <calcite-panel class={sidePanelClass + " " + themeClass}>
-        {this._mapView
+        {this.mapView
           ? <calcite-flow>
             {renderLists?.length > 0 && renderLists}
           </calcite-flow>
@@ -354,7 +349,7 @@ export class CrowdsourceReporter {
         <calcite-panel full-height full-width>
           <layer-list class="height-full"
             layers={this.layers}
-            mapView={this._mapView}
+            mapView={this.mapView}
             noLayerErrorMsg={this._translations.noLayerToDisplayErrorMsg}
             onLayerSelect={this.displayFeaturesList.bind(this)}
             onLayersListLoaded={this.layerListLoaded.bind(this)} />
@@ -429,7 +424,7 @@ export class CrowdsourceReporter {
         <calcite-panel full-height>
           {<feature-list class="height-full"
             highlightOnMap
-            mapView={this._mapView}
+            mapView={this.mapView}
             noFeaturesFoundMsg={this._translations.featureErrorMsg}
             onFeatureSelect={this.onFeatureSelectFromList.bind(this)}
             pageSize={100}
@@ -454,7 +449,7 @@ export class CrowdsourceReporter {
             graphics={this._selectedFeature}
             isLoading={false}
             isMobile={false}
-            mapView={this._mapView}
+            mapView={this.mapView}
             zoomAndScrollToSelected={true}
           />
         </calcite-panel>
@@ -472,76 +467,14 @@ export class CrowdsourceReporter {
     );
   }
 
-  /**
-   * Get the map node based for the current layout options
-   * @returns the map node
-   * @protected
-   */
-  protected _getMapNode(): VNode {
-    let mapContainerClass = "overflow-hidden map-container";
-    if (this._isMobile) {
-      if (this._sidePanelCollapsed) {
-        mapContainerClass += " map-container-mobile";
-      }
-    } else {
-      mapContainerClass += " height-full";
-    }
-    
-    return (
-      <div class={mapContainerClass}>
-        <map-card
-          class="width-full"
-          defaultWebmapId={this.defaultWebmap}
-          enableBasemap={false}
-          enableFloorFilter={false}
-          enableFullscreen={false}
-          enableHome={this.enableHome}
-          enableLegend={true}
-          enableSearch={this.enableSearch}
-          enableSingleExpand={false}
-          hidden={false}
-          homeZoomIndex={0}
-          homeZoomPosition={"top-left"}
-          homeZoomToolsSize={"s"}
-          mapInfos={this.mapInfos?.filter(mapInfo => mapInfo.visible !== false)}
-          mapWidgetsIndex={this.enableHome ? 4 : 3}
-          mapWidgetsPosition={"top-left"}
-          mapWidgetsSize={"s"}
-          stackTools={false}
-          theme={this.theme}
-          toolOrder={["search", "legend", "fullscreen", "basemap", "floorfilter"]}
-        />
-      </div>);
-  }
-
-  /**
-   * Get the current map info (configuration details) when maps change
-   * @param id Id of the map to be returned
-   * @returns IMapInfo for the provided id
-   * @protected
-   */
-  protected getMapInfo(id: string): IMapInfo {
-    let mapInfo: IMapInfo;
-    this.mapInfos.some(mi => {
-      if (mi.id === id) {
-        mapInfo = mi;
-        return true;
-      }
-    })
-    return { ...mapInfo };
-  }
-
   /**
    * Set the current map info when maps change
    * @protected
    */
   protected async setMapView(): Promise<void> {
-    this._mapInfo = this.getMapInfo(this._mapChange.id);
-    this._mapView = this._mapChange.mapView;
-    this.initMapZoom();
-    this._mapView.popupEnabled = false;
+    this.mapView.popupEnabled = false;
     if (this._defaultCenter && this._defaultLevel) {
-      await this._mapView.goTo({
+      await this.mapView.goTo({
         center: this._defaultCenter,
         zoom: this._defaultLevel
       });
@@ -550,22 +483,6 @@ export class CrowdsourceReporter {
     }
   }
 
-  /**
-   * Add/remove zoom tools based on enableZoom prop
-   * @protected
-   */
-  protected initMapZoom(): void {
-    if (!this.enableZoom) {
-      this._mapView.ui.remove("zoom");
-    } else if (this.enableZoom) {
-      this._mapView.ui.add({
-        component: "zoom",
-        position: "top-left",
-        index: 0
-      });
-    }
-  }
-
   /**
    * Fetches the component's translations
    * @returns Promise when complete
diff --git a/src/components/crowdsource-reporter/readme.md b/src/components/crowdsource-reporter/readme.md
index ad50893ce..777a6742f 100644
--- a/src/components/crowdsource-reporter/readme.md
+++ b/src/components/crowdsource-reporter/readme.md
@@ -7,27 +7,28 @@
 
 ## Properties
 
-| Property                  | Attribute                   | Description                                                                           | Type                   | Default     |
-| ------------------------- | --------------------------- | ------------------------------------------------------------------------------------- | ---------------------- | ----------- |
-| `defaultWebmap`           | `default-webmap`            | string: Item ID of the web map that should be selected by default                     | `string`               | `""`        |
-| `description`             | `description`               | string: The text that will display under the title on the landing page                | `string`               | `undefined` |
-| `enableAnonymousAccess`   | `enable-anonymous-access`   | boolean: When true the anonymous users will be allowed to submit reports and comments | `boolean`              | `undefined` |
-| `enableAnonymousComments` | `enable-anonymous-comments` | boolean: When true the anonymous users will be allowed to submit comments             | `boolean`              | `undefined` |
-| `enableComments`          | `enable-comments`           | boolean: When true the user will be allowed to submit comments                        | `boolean`              | `undefined` |
-| `enableHome`              | `enable-home`               | boolean: when true the home widget will be available                                  | `boolean`              | `true`      |
-| `enableLogin`             | `enable-login`              | boolean: When true the user will be provided a login page                             | `boolean`              | `undefined` |
-| `enableNewReports`        | `enable-new-reports`        | boolean: When true the user will be allowed to submit new reports                     | `boolean`              | `undefined` |
-| `enableSearch`            | `enable-search`             | boolean: when true the search widget will be available                                | `boolean`              | `true`      |
-| `enableZoom`              | `enable-zoom`               | boolean: when true the zoom widget will be available                                  | `boolean`              | `true`      |
-| `layers`                  | --                          | string[]: list of layer ids                                                           | `string[]`             | `undefined` |
-| `loginTitle`              | `login-title`               | string: The text that will display at the top of the landing page                     | `string`               | `undefined` |
-| `mapInfos`                | --                          | IMapInfo[]: array of map infos (name and id)                                          | `IMapInfo[]`           | `[]`        |
-| `reportButtonText`        | `report-button-text`        | string: The word(s) to display in the reports submit button                           | `string`               | `undefined` |
-| `reportSubmittedMessage`  | `report-submitted-message`  | string: The message to display when the report has been submitted                     | `string`               | `undefined` |
-| `reportsHeader`           | `reports-header`            | string: The word(s) to display in the reports header                                  | `string`               | `undefined` |
-| `searchConfiguration`     | --                          | ISearchConfiguration: Configuration details for the Search widget                     | `ISearchConfiguration` | `undefined` |
-| `showComments`            | `show-comments`             | boolean: When true the comments from all users will be visible                        | `boolean`              | `undefined` |
-| `theme`                   | `theme`                     | theme: "light" \| "dark" theme to be used                                             | `"dark" \| "light"`    | `"light"`   |
+| Property                  | Attribute                   | Description                                                                                               | Type                   | Default     |
+| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- |
+| `defaultWebmap`           | `default-webmap`            | string: Item ID of the web map that should be selected by default                                         | `string`               | `""`        |
+| `description`             | `description`               | string: The text that will display under the title on the landing page                                    | `string`               | `undefined` |
+| `enableAnonymousAccess`   | `enable-anonymous-access`   | boolean: When true the anonymous users will be allowed to submit reports and comments                     | `boolean`              | `undefined` |
+| `enableAnonymousComments` | `enable-anonymous-comments` | boolean: When true the anonymous users will be allowed to submit comments                                 | `boolean`              | `undefined` |
+| `enableComments`          | `enable-comments`           | boolean: When true the user will be allowed to submit comments                                            | `boolean`              | `undefined` |
+| `enableHome`              | `enable-home`               | boolean: when true the home widget will be available                                                      | `boolean`              | `true`      |
+| `enableLogin`             | `enable-login`              | boolean: When true the user will be provided a login page                                                 | `boolean`              | `undefined` |
+| `enableNewReports`        | `enable-new-reports`        | boolean: When true the user will be allowed to submit new reports                                         | `boolean`              | `undefined` |
+| `enableSearch`            | `enable-search`             | boolean: when true the search widget will be available                                                    | `boolean`              | `true`      |
+| `enableZoom`              | `enable-zoom`               | boolean: when true the zoom widget will be available                                                      | `boolean`              | `true`      |
+| `layers`                  | --                          | string[]: list of layer ids                                                                               | `string[]`             | `undefined` |
+| `loginTitle`              | `login-title`               | string: The text that will display at the top of the landing page                                         | `string`               | `undefined` |
+| `mapInfos`                | --                          | IMapInfo[]: array of map infos (name and id)                                                              | `IMapInfo[]`           | `[]`        |
+| `mapView`                 | --                          | esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html | `MapView`              | `undefined` |
+| `reportButtonText`        | `report-button-text`        | string: The word(s) to display in the reports submit button                                               | `string`               | `undefined` |
+| `reportSubmittedMessage`  | `report-submitted-message`  | string: The message to display when the report has been submitted                                         | `string`               | `undefined` |
+| `reportsHeader`           | `reports-header`            | string: The word(s) to display in the reports header                                                      | `string`               | `undefined` |
+| `searchConfiguration`     | --                          | ISearchConfiguration: Configuration details for the Search widget                                         | `ISearchConfiguration` | `undefined` |
+| `showComments`            | `show-comments`             | boolean: When true the comments from all users will be visible                                            | `boolean`              | `undefined` |
+| `theme`                   | `theme`                     | theme: "light" \| "dark" theme to be used                                                                 | `"dark" \| "light"`    | `"light"`   |
 
 
 ## Dependencies
@@ -35,7 +36,6 @@
 ### Depends on
 
 - calcite-shell
-- calcite-notice
 - calcite-panel
 - calcite-flow
 - calcite-loader
@@ -45,13 +45,11 @@
 - [layer-list](../layer-list)
 - [feature-list](../feature-list)
 - [info-card](../info-card)
-- [map-card](../map-card)
 
 ### Graph
 ```mermaid
 graph TD;
   crowdsource-reporter --> calcite-shell
-  crowdsource-reporter --> calcite-notice
   crowdsource-reporter --> calcite-panel
   crowdsource-reporter --> calcite-flow
   crowdsource-reporter --> calcite-loader
@@ -61,8 +59,6 @@ graph TD;
   crowdsource-reporter --> layer-list
   crowdsource-reporter --> feature-list
   crowdsource-reporter --> info-card
-  crowdsource-reporter --> map-card
-  calcite-notice --> calcite-icon
   calcite-panel --> calcite-action
   calcite-panel --> calcite-action-menu
   calcite-panel --> calcite-scrim
@@ -82,6 +78,7 @@ graph TD;
   layer-list --> calcite-list
   layer-list --> calcite-list-item
   layer-list --> calcite-icon
+  calcite-notice --> calcite-icon
   calcite-list --> calcite-scrim
   calcite-list --> calcite-stack
   calcite-list --> calcite-filter
@@ -119,24 +116,6 @@ graph TD;
   calcite-alert --> calcite-icon
   calcite-alert --> calcite-chip
   calcite-chip --> calcite-icon
-  map-card --> map-picker
-  map-card --> map-tools
-  map-picker --> calcite-button
-  map-picker --> calcite-tooltip
-  map-picker --> calcite-action-bar
-  map-picker --> calcite-list
-  map-picker --> calcite-list-item
-  calcite-action-bar --> calcite-action-group
-  calcite-action-group --> calcite-action-menu
-  calcite-action-group --> calcite-action
-  map-tools --> basemap-gallery
-  map-tools --> map-search
-  map-tools --> map-legend
-  map-tools --> map-fullscreen
-  map-tools --> floor-filter
-  map-tools --> calcite-action
-  map-tools --> calcite-icon
-  map-tools --> calcite-tooltip
   style crowdsource-reporter fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/map-card/readme.md b/src/components/map-card/readme.md
index 97fda650d..02af7cb89 100644
--- a/src/components/map-card/readme.md
+++ b/src/components/map-card/readme.md
@@ -45,7 +45,6 @@
 ### Used by
 
  - [crowdsource-manager](../crowdsource-manager)
- - [crowdsource-reporter](../crowdsource-reporter)
 
 ### Depends on
 
@@ -93,7 +92,6 @@ graph TD;
   map-tools --> calcite-icon
   map-tools --> calcite-tooltip
   crowdsource-manager --> map-card
-  crowdsource-reporter --> map-card
   style map-card fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/demos/crowdsource-reporter.html b/src/demos/crowdsource-reporter.html
index 1afa7d54c..c2eb4fc8c 100644
--- a/src/demos/crowdsource-reporter.html
+++ b/src/demos/crowdsource-reporter.html
@@ -22,9 +22,34 @@
     | limitations under the License.
     -->
     <style>
-      .reporter {
-        height: 100vh;
-        width: 100vw;
+      #viewDiv {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 390px;
+      }
+      #viewDiv[dir="rtl"] {
+        right: 390px;
+        left: 0px;
+      }
+      .over-map {
+        position: absolute;
+        left: 0px;
+        background-color: var(--calcite-color-foreground-1);
+      }
+      .over-map[dir="rtl"] {
+        right: 0px;
+      }
+      .column {
+        width: 360px;
+        padding: 1rem;
+        border: 1px solid var(--calcite-color-border-2);
+        height: -webkit-fill-available;
+        height: 100%;
+      }
+      .column[dir="rtl"] {
+        float: right;
       }
     </style>
 
@@ -37,64 +62,90 @@
     <script type="module" src="../solutions-components.esm.js"></script>
 
     <script>
-      function addValues() {
+      require(["esri/WebMap", "esri/views/MapView", "esri/widgets/Legend", "esri/config"], (
+        WebMap,
+        MapView,
+        Legend,
+        esriConfig
+      ) => {
         const demo = document.getElementById("demo");
 
-        let headerSet = false;
-        let custom = [];
-        let portal;
-        //Support id and portal URL parameter
-        var vars = window.location.search.substring(1).split("&");
-        vars.forEach((param) => {
-          let vals = param.split("=");
-          const v = vals[1];
-          switch (vals[0]) {
-            case "id":
-              custom = [{
-                id: v,
-                name: "Map from URL"
-              }];
-              break;
-            case "portal":
-              portal = v;
-            default:
-              break;
+        // let headerSet = false;
+        // let custom = [];
+        // let portal;
+        // //Support id and portal URL parameter
+        // var vars = window.location.search.substring(1).split("&");
+        // vars.forEach((param) => {
+        //   let vals = param.split("=");
+        //   const v = vals[1];
+        //   switch (vals[0]) {
+        //     case "id":
+        //       custom = [{
+        //         id: v,
+        //         name: "Map from URL"
+        //       }];
+        //       break;
+        //     case "portal":
+        //       portal = v;
+        //     default:
+        //       break;
+        //   }
+        // });
+
+        // if (portal) {
+        //   esriConfig.portalUrl = portal;
+        // }
+
+        // demo.mapInfos = [{
+        //   //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
+        //   //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
+        //   //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
+        //   //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
+        //   //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
+        //   id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
+        // }];
+        // //if id is passed in the url parameter use that mapInfos
+        // if (custom?.length > 0) {
+        //   demo.mapInfos = custom;
+        // }
+
+        //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com";
+        var webMap = new WebMap({
+          portalItem: {
+            id: "b5bdcb1e5d684dd3b21a2d44b8e4f928"
           }
         });
 
-        if (portal) {
-          esriConfig.portalUrl = portal;
-        }
+        demo.mapView = new MapView({
+          container: "viewDiv",
+          map: webMap
+        });
+
+        demo.mapView.when(() => {
+        //   const legend = new Legend({
+        //     view: demo.mapView
+        //   });
+        //   demo.mapView.ui.add(legend, "top-left");
+        });
 
-        demo.mapInfos = [{
-          //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers
-          //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping
-          //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers
-          //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features
-          //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers
-          id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content
-        }];
-        //if id is passed in the url parameter use that mapInfos
-        if (custom?.length > 0) {
-          demo.mapInfos = custom;
-        }
-        demo.enableHome = true;
-        demo.enableSearch = true;
-        demo.enableZoom = true;
+        // demo.enableHome = true;
+        // demo.enableSearch = true;
+        // demo.enableZoom = true;
         demo.reportsHeader = "Reports";
         demo.reportButtonText = "Report an incident";
         demo.enableNewReports = true;
-        //Select reporting layers - 
+        //Select reporting layers -
         //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853'];
         //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers
         demo.theme = "light";
         demo.reportSubmittedMessage = "Thank you";
-      }
+      });
     </script>
   </head>
 
   <!-- <body class="calcite-mode-dark"> -->
-  <body onload="addValues()">
-    <crowdsource-reporter id="demo" class="reporter"></crowdsource-reporter>
+  <body>
+    <div id="viewDiv"></div>
+    <crowdsource-reporter id="demo" class="over-map column"></crowdsource-reporter>
   </body>
 </html>

From d3e874d5cfb3c59e5810de8e1366d9071e184503 Mon Sep 17 00:00:00 2001
From: John Hauck <jhauck@esri.com>
Date: Wed, 17 Jan 2024 13:10:53 -0700
Subject: [PATCH 2/3] add isMobile prop

---
 src/components.d.ts                           |  8 +++
 .../crowdsource-reporter.css                  | 27 --------
 .../crowdsource-reporter.tsx                  | 68 ++++++++-----------
 src/components/crowdsource-reporter/readme.md |  1 +
 4 files changed, 39 insertions(+), 65 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index a4550f9a1..a066aaf63 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -241,6 +241,10 @@ export namespace Components {
           * boolean: when true the zoom widget will be available
          */
         "enableZoom": boolean;
+        /**
+          * boolean: When true the application will be in mobile mode, controls the mobile or desktop view
+         */
+        "isMobile": boolean;
         /**
           * string[]: list of layer ids
          */
@@ -2210,6 +2214,10 @@ declare namespace LocalJSX {
           * boolean: when true the zoom widget will be available
          */
         "enableZoom"?: boolean;
+        /**
+          * boolean: When true the application will be in mobile mode, controls the mobile or desktop view
+         */
+        "isMobile"?: boolean;
         /**
           * string[]: list of layer ids
          */
diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.css b/src/components/crowdsource-reporter/crowdsource-reporter.css
index 72e3a2463..da65e6c5e 100644
--- a/src/components/crowdsource-reporter/crowdsource-reporter.css
+++ b/src/components/crowdsource-reporter/crowdsource-reporter.css
@@ -63,30 +63,3 @@
 .error-msg{
   padding: 10px;
 }
-
-@media screen and (max-width: 600px) {
-  .map-container {
-    left: 0;
-    height: 50%;
-    width: 100%;
-  }
-
-  .map-container-mobile {
-    height:  calc(100% - 100px);
-  }
-
-  .side-panel {
-    padding: 2px;
-    width: 100%;
-    height: 50%;
-    position: absolute;
-    top: 50%;
-    left: 0;
-    z-index: 60;
-  }
-
-  .collapsed-side-panel {
-    top: calc(100% - 100px);
-    height: 100px;
-  }
-}
diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.tsx b/src/components/crowdsource-reporter/crowdsource-reporter.tsx
index a984f2790..b4a960943 100644
--- a/src/components/crowdsource-reporter/crowdsource-reporter.tsx
+++ b/src/components/crowdsource-reporter/crowdsource-reporter.tsx
@@ -44,6 +44,11 @@ export class CrowdsourceReporter {
    */
   @Prop() description: string;
 
+  /**
+   * boolean: When true the application will be in mobile mode, controls the mobile or desktop view
+   */
+  @Prop() isMobile: boolean;
+
   /**
    * boolean: When true the anonymous users will be allowed to submit reports and comments
    */
@@ -150,11 +155,6 @@ export class CrowdsourceReporter {
    */
   @State() _mapInfo: IMapInfo;
 
-  /**
-   * boolean: When true the application will be in mobile mode, controls the mobile or desktop view
-   */
-  @State() _isMobile = false;
-
   /**
    * string[]: Reporter flow items list
    */
@@ -217,6 +217,16 @@ export class CrowdsourceReporter {
   //
   //--------------------------------------------------------------------------
 
+  /**
+   * Called each time the mapView prop is changed.
+   */
+  @Watch("isMobile")
+  async isMobileWatchHandler(): Promise<void> {
+    if (this.isMobile) {
+      this._sidePanelCollapsed = false;
+    }
+  }
+
   /**
    * Called each time the mapView prop is changed.
    */
@@ -252,36 +262,18 @@ export class CrowdsourceReporter {
    */
   async componentWillLoad(): Promise<void> {
     await this._getTranslations();
-    const mediaQueryList = window.matchMedia("screen and (max-width: 600px)");
-    this._isMobile = mediaQueryList.matches;
-    //on change update the state for is mobile and the sidePanelCollapsed
-    mediaQueryList.onchange = (e) => {
-      this._isMobile = e.matches;
-      this._sidePanelCollapsed = false;
-    }
   }
 
   /**
    * Renders the component.
    */
   render() {
-    // const  validConfiguration = true;
-    //Check if webMap id is configured
-    // if(!this.mapInfos || this.mapInfos.length<=0  || (this.mapInfos?.length>0 && !this.mapInfos[0]?.id)){
-    //   validConfiguration = false
-    // }
     return (
       <Host>
         <div>
           <calcite-shell content-behind >
             {this._getReporter()}
           </calcite-shell>
-          {/* {!validConfiguration &&
-            <calcite-notice class="error-msg" icon="configure" kind="danger" open>
-              <div slot="title">{this._translations.error}</div>
-              <div slot="message">{ this._translations.invalidConfigurationErrorMsg}</div>
-            </calcite-notice>
-          } */}
         </div>
       </Host>
     );
@@ -315,7 +307,7 @@ export class CrowdsourceReporter {
     });
     let sidePanelClass = "side-panel";
     //in case of mobile handle for collapsed styles of the panel
-    if (this._isMobile && this._sidePanelCollapsed) {
+    if (this.isMobile && this._sidePanelCollapsed) {
       sidePanelClass += " collapsed-side-panel";
     }
     const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
@@ -337,12 +329,12 @@ export class CrowdsourceReporter {
    */
   protected getLayerListFlowItem(): Node {
     return (
-      <calcite-flow-item collapsed={this._isMobile && this._sidePanelCollapsed} heading={this.reportsHeader}>
-        {this._hasValidLayers && <calcite-action icon="sort-ascending-arrow" slot={this._isMobile ? "header-menu-actions" : "header-actions-end"}
-          text={this._translations.sort} text-enabled={this._isMobile} />}
-        {this._hasValidLayers && <calcite-action icon="filter" slot={this._isMobile ? "header-menu-actions" : "header-actions-end"}
-          text={this._translations.filter} text-enabled={this._isMobile} />}
-        {this._isMobile && this.getActionToExpandCollapsePanel()}
+      <calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={this.reportsHeader}>
+        {this._hasValidLayers && <calcite-action icon="sort-ascending-arrow" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
+          text={this._translations.sort} text-enabled={this.isMobile} />}
+        {this._hasValidLayers && <calcite-action icon="filter" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
+          text={this._translations.filter} text-enabled={this.isMobile} />}
+        {this.isMobile && this.getActionToExpandCollapsePanel()}
         {this._hasValidLayers && this.enableNewReports && <calcite-button appearance="secondary" slot="footer" width="full">
           {this.reportButtonText}
         </calcite-button>}
@@ -412,12 +404,12 @@ export class CrowdsourceReporter {
    */
   protected getFeatureListFlowItem(layerId: string, layerName: string): Node {
     return (
-      <calcite-flow-item collapsed={this._isMobile && this._sidePanelCollapsed} heading={layerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
-        <calcite-action icon="sort-ascending-arrow" slot={this._isMobile ? "header-menu-actions" : "header-actions-end"}
-          text={this._translations.sort} text-enabled={this._isMobile} />
-        <calcite-action icon="filter" slot={this._isMobile ? "header-menu-actions" : "header-actions-end"}
-          text={this._translations.filter} text-enabled={this._isMobile} />
-        {this._isMobile && this.getActionToExpandCollapsePanel()}
+      <calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={layerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
+        <calcite-action icon="sort-ascending-arrow" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
+          text={this._translations.sort} text-enabled={this.isMobile} />
+        <calcite-action icon="filter" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
+          text={this._translations.filter} text-enabled={this.isMobile} />
+        {this.isMobile && this.getActionToExpandCollapsePanel()}
         {this.enableNewReports && <calcite-button appearance="secondary" slot="footer" width="full">
           {this.reportButtonText}
         </calcite-button>}
@@ -440,8 +432,8 @@ export class CrowdsourceReporter {
    */
   protected getFeatureDetailsFlowItem(): Node {
     return (
-      <calcite-flow-item collapsed={this._isMobile && this._sidePanelCollapsed} heading={this._selectedLayerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
-        {this._isMobile && this.getActionToExpandCollapsePanel()}
+      <calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={this._selectedLayerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
+        {this.isMobile && this.getActionToExpandCollapsePanel()}
         <calcite-action icon="share" slot={"header-actions-end"} text={this._translations.share} />
         <calcite-panel full-height>
           <info-card
diff --git a/src/components/crowdsource-reporter/readme.md b/src/components/crowdsource-reporter/readme.md
index 777a6742f..2964d784f 100644
--- a/src/components/crowdsource-reporter/readme.md
+++ b/src/components/crowdsource-reporter/readme.md
@@ -19,6 +19,7 @@
 | `enableNewReports`        | `enable-new-reports`        | boolean: When true the user will be allowed to submit new reports                                         | `boolean`              | `undefined` |
 | `enableSearch`            | `enable-search`             | boolean: when true the search widget will be available                                                    | `boolean`              | `true`      |
 | `enableZoom`              | `enable-zoom`               | boolean: when true the zoom widget will be available                                                      | `boolean`              | `true`      |
+| `isMobile`                | `is-mobile`                 | boolean: When true the application will be in mobile mode, controls the mobile or desktop view            | `boolean`              | `undefined` |
 | `layers`                  | --                          | string[]: list of layer ids                                                                               | `string[]`             | `undefined` |
 | `loginTitle`              | `login-title`               | string: The text that will display at the top of the landing page                                         | `string`               | `undefined` |
 | `mapInfos`                | --                          | IMapInfo[]: array of map infos (name and id)                                                              | `IMapInfo[]`           | `[]`        |

From 3348ec714dc70d6706e09ffc92e1c21ce4bb4c03 Mon Sep 17 00:00:00 2001
From: John Hauck <jhauck@esri.com>
Date: Wed, 17 Jan 2024 14:18:07 -0700
Subject: [PATCH 3/3] css update

---
 .../crowdsource-reporter/crowdsource-reporter.css        | 9 +++++++--
 .../crowdsource-reporter/crowdsource-reporter.tsx        | 2 +-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.css b/src/components/crowdsource-reporter/crowdsource-reporter.css
index da65e6c5e..bce60a699 100644
--- a/src/components/crowdsource-reporter/crowdsource-reporter.css
+++ b/src/components/crowdsource-reporter/crowdsource-reporter.css
@@ -21,7 +21,7 @@
 }
 
 .width-full {
-  width: 100%;
+  width: 100% !important;
 }
 
 .width-0 {
@@ -29,7 +29,7 @@
 }
 
 .height-full {
-  height: 100%;
+  height: 100% !important;
 }
 
 .height-0 {
@@ -63,3 +63,8 @@
 .error-msg{
   padding: 10px;
 }
+
+.collapsed-side-panel {
+  top: calc(100% - 55px);
+  height: 54px;
+}
diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.tsx b/src/components/crowdsource-reporter/crowdsource-reporter.tsx
index b4a960943..eff4b6d78 100644
--- a/src/components/crowdsource-reporter/crowdsource-reporter.tsx
+++ b/src/components/crowdsource-reporter/crowdsource-reporter.tsx
@@ -312,7 +312,7 @@ export class CrowdsourceReporter {
     }
     const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
     return (
-      <calcite-panel class={sidePanelClass + " " + themeClass}>
+      <calcite-panel class={sidePanelClass + " width-full " + themeClass}>
         {this.mapView
           ? <calcite-flow>
             {renderLists?.length > 0 && renderLists}