From 2f380a2d44c1f3e1c27cd68f8efe492adae5f5a5 Mon Sep 17 00:00:00 2001 From: bra11311 Date: Fri, 15 Nov 2024 12:05:24 -0800 Subject: [PATCH] fix: watch for changes to layerExpressions prop and handle translation updates --- CHANGELOG.md | 4 ++ package-lock.json | 18 +++--- package.json | 4 +- src/components.d.ts | 4 ++ .../crowdsource-reporter.tsx | 58 ++++++++++++++++++- src/components/crowdsource-reporter/readme.md | 19 ++++++ 6 files changed, 94 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 78ef29bad..60131e2fa 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index cf2263925..9337daecd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@esri/solutions-components", - "version": "0.10.46", + "version": "0.10.47", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@esri/solutions-components", - "version": "0.10.46", + "version": "0.10.47", "license": "Apache-2.0", "dependencies": { "@arcgis/core": "^4.31.2", @@ -36,7 +36,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", @@ -3923,9 +3923,9 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/@esri/instant-apps-components": { - "version": "1.0.0-beta.294", - "resolved": "https://registry.npmjs.org/@esri/instant-apps-components/-/instant-apps-components-1.0.0-beta.294.tgz", - "integrity": "sha512-8Ah+qE1GnqTgc2P9qWk147FKJdYh0yWjcvY2G0k+IevVm+gKdxZ+YxzydFAJYh2uZSt5GrgWB/niM8qyKPPkgQ==", + "version": "1.0.0-beta.300", + "resolved": "https://registry.npmjs.org/@esri/instant-apps-components/-/instant-apps-components-1.0.0-beta.300.tgz", + "integrity": "sha512-8fh9UKeFnSDMNFgW8YUj9iNKPFq7RbFr8xRIuTiPqza6hcYILoA82+lIA3f+fXV+n5NMXF6t9fO9Biba8HIkUg==", "dev": true, "dependencies": { "@a11y/focus-trap": "^1.0.5", @@ -19669,9 +19669,9 @@ } }, "@esri/instant-apps-components": { - "version": "1.0.0-beta.294", - "resolved": "https://registry.npmjs.org/@esri/instant-apps-components/-/instant-apps-components-1.0.0-beta.294.tgz", - "integrity": "sha512-8Ah+qE1GnqTgc2P9qWk147FKJdYh0yWjcvY2G0k+IevVm+gKdxZ+YxzydFAJYh2uZSt5GrgWB/niM8qyKPPkgQ==", + "version": "1.0.0-beta.300", + "resolved": "https://registry.npmjs.org/@esri/instant-apps-components/-/instant-apps-components-1.0.0-beta.300.tgz", + "integrity": "sha512-8fh9UKeFnSDMNFgW8YUj9iNKPFq7RbFr8xRIuTiPqza6hcYILoA82+lIA3f+fXV+n5NMXF6t9fO9Biba8HIkUg==", "dev": true, "requires": { "@a11y/focus-trap": "^1.0.5", diff --git a/package.json b/package.json index 2c60f7e23..58bceb903 100644 --- a/package.json +++ b/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", diff --git a/src/components.d.ts b/src/components.d.ts index 78479c32d..9830ea786 100644 --- a/src/components.d.ts +++ b/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; /** * number: default scale to zoom to when zooming to a single point feature */ diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.tsx b/src/components/crowdsource-reporter/crowdsource-reporter.tsx index 06048838c..0faa77581 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, 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 { + 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 { + 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 { 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; + } + }); + } + }); + } } diff --git a/src/components/crowdsource-reporter/readme.md b/src/components/crowdsource-reporter/readme.md index 7cb95094c..a316690ce 100644 --- a/src/components/crowdsource-reporter/readme.md +++ b/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` + +Method to update layerExpressions with the translated values + +#### Parameters + +| Name | Type | Description | +| --------------------- | -------------------- | ----------- | +| `t9nLayerExpressions` | `ILayerExpression[]` | | + +#### Returns + +Type: `Promise` + + + + ## Dependencies ### Depends on