Merge pull request #1019 from Esri/bcree/fix/crowdsource-layerExpress…

…ions-t9n

fix: watch for changes to layerExpressions prop and handle translation updates

CHANGELOG.md

@@ -6,6 +6,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+## [0.10.47] - November 15th 2024
+Watch for changes to layerExpressions prop.
+Handle translation updates to layerExpressions
+
 ## [0.10.46] - November 13th 2024
 Patch issue with setting enableLayerFeaturesOnLoad and enableSearchDistanceOnLoad from config
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/solutions-components",
-  "version": "0.10.46",
+  "version": "0.10.47",
   "description": "Web Components for Esri's Solutions Applications",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "@esri/calcite-components": "^2.13.0",
     "@esri/calcite-design-tokens": "^2.2.0",
     "@esri/eslint-plugin-calcite-components": "^1.2.1",
-    "@esri/instant-apps-components": "^1.0.0-beta.294",
+    "@esri/instant-apps-components": "^1.0.0-beta.300",
     "@esri/solution-common": "5.6.7",
     "@esri/telemetry": "8.0.0",
     "@esri/telemetry-amazon": "3.0.1",

src/components.d.ts

@@ -511,6 +511,10 @@ export namespace Components {
           * theme: "light" | "dark" theme to be used
          */
         "theme": theme;
+        /**
+          * Method to update layerExpressions with the translated values
+         */
+        "updateLayerExpressionsT9n": (t9nLayerExpressions: ILayerExpression[]) => Promise<void>;
         /**
           * number: default scale to zoom to when zooming to a single point feature
          */

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

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, Element, Host, h, Prop, VNode, State, Watch, Event, EventEmitter, Fragment } from "@stencil/core";
+import { Component, Element, Host, h, Prop, VNode, State, Watch, Event, EventEmitter, Fragment, Method } from "@stencil/core";
 import { ILayerExpression, IMapChange, IMapClick, IMapInfo, IReportingOption, IReportingOptions, ISearchConfiguration, ISortingInfo, theme } from "../../utils/interfaces";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { loadModules } from "../../utils/loadModules";
@@ -477,6 +477,11 @@ export class CrowdsourceReporter {
    */
   protected _initDefExpressions: { [key: string]: string };
 
+  /**
+   * ILayerExpression[]: translated values for layerExpressions
+   */
+  protected _t9nLayerExpressions: ILayerExpression[];
+
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -558,12 +563,38 @@ export class CrowdsourceReporter {
     }
   }
 
+  /**
+   * Called each time the layerExpressions prop is changed
+  */
+  @Watch('layerExpressions')
+    async layerExpressionsWatchHandler(): Promise<void> {
+      this.resetFilterList();
+      await this.handleSelectedLayersFilter();
+      await this._featureList?.refresh();
+    }
+
   //--------------------------------------------------------------------------
   //
   //  Methods (public)
   //
   //--------------------------------------------------------------------------
 
+  /**
+  * Method to update layerExpressions with the translated values
+  */
+  @Method()
+  async updateLayerExpressionsT9n(t9nLayerExpressions: ILayerExpression[]): Promise<void> {
+    this._t9nLayerExpressions = t9nLayerExpressions ? t9nLayerExpressions : this.layerExpressions;
+    if (this._filterList != null) {
+      await this._filterList.handleUpdatingT9nData(this._t9nLayerExpressions);
+    } else if (this._currentLayerExpressions != null) {
+      const currentLayerExpressions = structuredClone(this._currentLayerExpressions);
+      this.handleLayerExpressionsT9n(currentLayerExpressions, this._t9nLayerExpressions);
+      this._currentLayerExpressions = currentLayerExpressions;
+    }
+    return Promise.resolve();
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Events (public)
@@ -2021,7 +2052,11 @@ export class CrowdsourceReporter {
    */
   protected async handleSelectedLayersFilter(): Promise<void> {
     if (this._selectedLayer) {
-      this._currentLayerExpressions = this.layerExpressions ? this.layerExpressions.filter(exp => exp.id === this._selectedLayerId) : [];
+      const currentLayerExpressions = this.layerExpressions ? structuredClone(this.layerExpressions.filter(exp => exp.id === this._selectedLayerId)) : [];
+      if (this._t9nLayerExpressions != null) {
+        this.handleLayerExpressionsT9n(currentLayerExpressions, this._t9nLayerExpressions);
+      }
+      this._currentLayerExpressions = currentLayerExpressions;
       this.setActiveDefinitionExpressions();
     }
   }
@@ -2109,4 +2144,23 @@ export class CrowdsourceReporter {
       this._initDefExpressions[fl.id] = fl.definitionExpression;
     });
   }
+
+  /**
+   * Handles updating the layer expressions with the translated strings
+   * @protected
+   */
+  protected handleLayerExpressionsT9n(layerExpressions: ILayerExpression[], layerExpressionsT9n: ILayerExpression[]): void {
+    layerExpressions?.forEach(layerExpression => {
+      const t9nLayerExpression = layerExpressionsT9n?.find(t9nLayerExpression => t9nLayerExpression.id === layerExpression.id);
+      if (t9nLayerExpression != null) {
+        layerExpression.title = t9nLayerExpression.title;
+        layerExpression.expressions?.forEach(expression => {
+          const t9nExpression = t9nLayerExpression.expressions?.find(t9nExpression => t9nExpression.id === expression.id);
+          if (t9nExpression != null) {
+            expression.name = t9nExpression.name;
+          }
+        });
+      }
+    });
+  }
 }

src/components/crowdsource-reporter/readme.md

@@ -52,6 +52,25 @@
 | `togglePanel` | Emitted when toggle panel button is clicked in reporter | `CustomEvent<{ panelState: boolean; isFormOpen: boolean; }>` |
 
 
+## Methods
+
+### `updateLayerExpressionsT9n(t9nLayerExpressions: ILayerExpression[]) => Promise<void>`
+
+Method to update layerExpressions with the translated values
+
+#### Parameters
+
+| Name                  | Type                 | Description |
+| --------------------- | -------------------- | ----------- |
+| `t9nLayerExpressions` | `ILayerExpression[]` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+
 ## Dependencies
 
 ### Depends on