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

Delivery for Reporter AGOL-2024.R03 - Sprint3

src/assets/t9n/create-feature/resources.json

@@ -0,0 +1,5 @@
+{
+  "chooseCategoryMsg": "Make a selection from the list below.",
+  "provideDetailsMsg": "Please provide the details.",
+  "provideLocationMsg": "Enter an address or click on the map to create a feature."
+}

src/assets/t9n/create-feature/resources_en.json

@@ -0,0 +1,5 @@
+{
+  "chooseCategoryMsg": "Make a selection from the list below.",
+  "provideDetailsMsg": "Please provide the details.",
+  "provideLocationMsg": "Enter an address or click on the map to create a feature."
+}

src/assets/t9n/create-related-feature/resources.json

@@ -0,0 +1,3 @@
+{
+  "provideDetailsMsg": "Please provide the details."
+}

src/assets/t9n/create-related-feature/resources_en.json

@@ -0,0 +1,3 @@
+{
+  "provideDetailsMsg": "Please provide the details."
+}

src/assets/t9n/crowdsource-reporter/resources.json

@@ -13,7 +13,6 @@
   "invalidConfigurationErrorMsg": "Invalid configuration",
   "chooseCategoryMsg": "Make a selection from the list below.",
   "featureErrorMsg": "No records found.",
-  "featureEditFormInfoMsg": "Please provide the details.",
   "currentLocationMsg": "Use my current location",
   "addLocationMsg": "Please add a location.",
   "submitMsg": "Thank you! Your report was successfully submitted.",

src/assets/t9n/crowdsource-reporter/resources_en.json

@@ -13,7 +13,6 @@
   "invalidConfigurationErrorMsg": "Invalid configuration",
   "chooseCategoryMsg": "Make a selection from the list below.",
   "featureErrorMsg": "No records found.",
-  "featureEditFormInfoMsg": "Please provide the details.",
   "currentLocationMsg": "Use my current location",
   "addLocationMsg": "Please add a location.",
   "submitMsg": "Thank you! Your report was successfully submitted.",

src/components.d.ts

@@ -165,6 +165,10 @@ export namespace Components {
           * string: Layer id of the feature layer in which the new feature is to be created
          */
         "selectedLayerId": string;
+        /**
+          * boolean: When true the notice message with the current state should be shown
+         */
+        "showGuidingMsg"?: boolean;
         /**
           * Submit the created feature
           * @returns Promise that resolves when the operation is complete
@@ -188,6 +192,10 @@ export namespace Components {
           * __esri.Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
          */
         "selectedFeature": __esri.Graphic;
+        /**
+          * boolean: When true the notice message should be shown
+         */
+        "showGuidingMsg"?: boolean;
         /**
           * Submit the comment
          */
@@ -593,9 +601,10 @@ export namespace Components {
         "pageSize"?: number;
         /**
           * Refresh the feature list which will fetch the latest features and update the features list
+          * @param maintainPageState If true feature list page state will be maintained
           * @returns Promise that resolves when the operation is complete
          */
-        "refresh": () => Promise<void>;
+        "refresh": (maintainPageState?: boolean) => Promise<void>;
         /**
           * IReportingOptions: Key options for reporting
          */
@@ -2054,6 +2063,8 @@ declare global {
     interface HTMLFeatureDetailsElementEventMap {
         "loadingStatus": boolean;
         "commentSelect": __esri.Graphic;
+        "addComment": void;
+        "likeOrDislikeClicked": void;
         "featureSelectionChange": { selectedFeature: __esri.Graphic[], selectedFeatureIndex: number };
     }
     interface HTMLFeatureDetailsElement extends Components.FeatureDetails, HTMLStencilElement {
@@ -2780,6 +2791,10 @@ declare namespace LocalJSX {
           * string: Layer id of the feature layer in which the new feature is to be created
          */
         "selectedLayerId"?: string;
+        /**
+          * boolean: When true the notice message with the current state should be shown
+         */
+        "showGuidingMsg"?: boolean;
     }
     interface CreateRelatedFeature {
         /**
@@ -2810,6 +2825,10 @@ declare namespace LocalJSX {
           * __esri.Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
          */
         "selectedFeature"?: __esri.Graphic;
+        /**
+          * boolean: When true the notice message should be shown
+         */
+        "showGuidingMsg"?: boolean;
         /**
           * __esri.FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
          */
@@ -3188,6 +3207,10 @@ declare namespace LocalJSX {
           * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
          */
         "mapView"?: __esri.MapView;
+        /**
+          * Emitted on demand when comment icon is clicked
+         */
+        "onAddComment"?: (event: FeatureDetailsCustomEvent<void>) => void;
         /**
           * Emitted on demand when comment is selected using the feature-list
          */
@@ -3196,6 +3219,10 @@ declare namespace LocalJSX {
           * Emitted on demand when the selected index changes
          */
         "onFeatureSelectionChange"?: (event: FeatureDetailsCustomEvent<{ selectedFeature: __esri.Graphic[], selectedFeatureIndex: number }>) => void;
+        /**
+          * Emitted on demand when like or dislike button is clicked
+         */
+        "onLikeOrDislikeClicked"?: (event: FeatureDetailsCustomEvent<void>) => void;
         /**
           * Emitted on demand when like or dislike button is clicked
          */

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

@@ -46,7 +46,7 @@
 
 .search-widget {
   width: 92% !important;
-  margin: 5px 0 20px 14px;
+  margin: 5px 14px 20px 14px;
 }
 
 .display-none {
@@ -66,6 +66,11 @@
   height: 50%;
 }
 
+.notice-msg {
+  padding: 10px;
+  width: calc(100% - 20px);
+}
+
 /* override the padding of the feature form */
 .esri-editor__panel-content {
   padding-block: 10px !important;

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

@@ -17,7 +17,9 @@
 import { Component, Element, EventEmitter, Prop, Fragment, h, Event, Watch, Method, State } from "@stencil/core";
 import { loadModules } from "../../utils/loadModules";
 import { getAllLayers, getLayerOrTable } from "../../utils/mapViewUtils";
+import CreateFeature_T9n from "../../assets/t9n/create-feature/resources.json";
 import { ILayerSourceConfigItem, ILocatorSourceConfigItem, ISearchConfiguration } from "../../utils/interfaces";
+import { getLocaleComponentStrings } from "../../utils/locale";
 
 @Component({
   tag: "create-feature",
@@ -80,6 +82,11 @@ export class CreateFeature {
    */
   @Prop() enableSearch?: boolean = false;
 
+  /**
+   * boolean: When true the notice message with the current state should be shown
+   */
+  @Prop() showGuidingMsg?: boolean = true;
+
   //--------------------------------------------------------------------------
   //
   //  State (internal)
@@ -96,6 +103,12 @@ export class CreateFeature {
    */
   @State() _showSearchWidget: boolean;
 
+  /**
+   * Contains the translations for this component.
+   * All UI strings should be defined here.
+   */
+  @State() _translations: typeof CreateFeature_T9n;
+
   //--------------------------------------------------------------------------
   //
   //  Properties (protected)
@@ -191,6 +204,11 @@ export class CreateFeature {
    */
   protected _selectedLayer: __esri.FeatureLayer;
 
+  /**
+   * boolean: flag to maintain if user is on template picker page
+   */
+  protected _isTemplatePickerPage = true;
+
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -325,6 +343,7 @@ export class CreateFeature {
    * @returns Promise when complete
    */
   async componentWillLoad(): Promise<void> {
+    await this._getTranslations();
     await this.initModules();
   }
 
@@ -343,8 +362,21 @@ export class CreateFeature {
     const loaderClass = this._editorLoading ? "" : "display-none";
     const featureFormClass = this._editorLoading ? "display-none" : "";
     const mobileMapClass = this.isMobile ? "show-map" : "display-none";
+    let guidingMsg = this._translations.provideDetailsMsg;
+    if (this._isTemplatePickerPage) {
+      guidingMsg = this._translations.chooseCategoryMsg;
+    } else if (this._showSearchWidget) {
+      guidingMsg = this._translations.provideLocationMsg;
+    }
     return (
       <Fragment>
+        {this.showGuidingMsg && <calcite-notice
+          class="notice-msg"
+          icon="lightbulb"
+          kind="success"
+          open>
+          <div slot="message">{guidingMsg}</div>
+        </calcite-notice>}
         <calcite-loader
           class={loaderClass}
           label=""
@@ -505,6 +537,7 @@ export class CreateFeature {
           this._mapViewContainer?.classList?.replace("show-map", "hide-map");
           this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
           void this._setFloorLevel(this.floorLevel);
+          this._isTemplatePickerPage = false;
           this._showSearchWidget = false;
           this.progressStatus.emit(1);
           this.drawComplete.emit();
@@ -518,7 +551,10 @@ export class CreateFeature {
       (state) => {
         if (state === 'creating-features') {
           this._mapViewContainer?.classList?.replace("hide-map", "show-map");
-          this._showSearchWidget = true;
+          this._isTemplatePickerPage = false;
+          if (this._selectedLayer && !this._selectedLayer.isTable) {
+            this._showSearchWidget = true;
+          }
         }
       });
     this._editor.viewModel.addHandles(createFeatureHandle);
@@ -773,4 +809,14 @@ export class CreateFeature {
   protected timeout(delay: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, delay));
   }
+
+  /**
+   * Fetches the component's translations
+   * @returns Promise when complete
+   * @protected
+   */
+  protected async _getTranslations(): Promise<void> {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0] as typeof CreateFeature_T9n;
+  }
 }

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

@@ -9,4 +9,14 @@
 
 .display-none {
   display: none !important;
+}
+
+/* override the padding of the feature form */
+.esri-editor__panel-content {
+  padding-block: 10px !important;
+}
+
+.notice-msg {
+  padding: 10px;
+  width: calc(100% - 20px);
 }

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

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 
-import { Component, h, Prop, Element, Event, EventEmitter, Method, Watch, State } from '@stencil/core';
+import { Component, h, Prop, Element, Event, EventEmitter, Method, Watch, State, Fragment} from '@stencil/core';
+import CreateRelatedFeature_T9n from "../../assets/t9n/create-related-feature/resources.json";
 import { loadModules } from "../../utils/loadModules";
+import { getLocaleComponentStrings } from '../../utils/locale';
 
 @Component({
   tag: 'create-related-feature',
@@ -59,6 +61,11 @@ export class CreateRelatedFeature {
    */
   @Prop() customizeSubmit?: boolean = false;
 
+  /**
+   * boolean: When true the notice message should be shown
+   */
+  @Prop() showGuidingMsg?: boolean = true;
+
   //--------------------------------------------------------------------------
   //
   //  State (internal)
@@ -70,6 +77,12 @@ export class CreateRelatedFeature {
    */
   @State() _editorLoading = false;
 
+  /**
+   * Contains the translations for this component.
+   * All UI strings should be defined here.
+   */
+  @State() _translations: typeof CreateRelatedFeature_T9n;
+
   //--------------------------------------------------------------------------
   //
   //  Properties (protected)
@@ -199,6 +212,7 @@ export class CreateRelatedFeature {
    * @returns Promise when complete
    */
   async componentWillLoad(): Promise<void> {
+    await this._getTranslations();
     await this.initModules();
   }
 
@@ -228,11 +242,20 @@ export class CreateRelatedFeature {
   render() {
     const loaderClass = this._editorLoading ? "" : "display-none";
     return (
-      <calcite-loader
-        class={loaderClass}
-        label=""
-        scale="s"
-      />
+      <Fragment>
+        {this.showGuidingMsg && <calcite-notice
+          class="notice-msg"
+          icon="lightbulb"
+          kind="success"
+          open>
+          <div slot="message">{this._translations.provideDetailsMsg}</div>
+        </calcite-notice>}
+        <calcite-loader
+          class={loaderClass}
+          label=""
+          scale="s"
+        />
+      </Fragment>
     );
   }
 
@@ -419,4 +442,14 @@ export class CreateRelatedFeature {
   protected timeout(delay: number): Promise<void> {
     return new Promise(resolve => setTimeout(resolve, delay));
   }
+
+  /**
+   * Fetches the component's translations
+   * @returns Promise when complete
+   * @protected
+   */
+  protected async _getTranslations(): Promise<void> {
+    const messages = await getLocaleComponentStrings(this.el);
+    this._translations = messages[0] as typeof CreateRelatedFeature_T9n;
+  }
 }