diff --git a/web/client/components/misc/enhancers/localizeStringMap.js b/web/client/components/misc/enhancers/localizeStringMap.js index 541732b5e6..7b9d2ed495 100644 --- a/web/client/components/misc/enhancers/localizeStringMap.js +++ b/web/client/components/misc/enhancers/localizeStringMap.js @@ -8,10 +8,9 @@ const PropTypes = require('prop-types'); -const { castArray, isObject } = require('lodash'); +const {castArray} = require('lodash'); const {getContext, mapProps, compose} = require('recompose'); - -const getLocalizedProp = (locale, prop) => isObject(prop) ? prop[locale] || prop.default : prop; +const {getLocalizedProp} = require('../../../utils/LocaleUtils'); const accumulate = (props, locale) => (acc = {}, propName) => ({ ...acc, diff --git a/web/client/plugins/FloatingLegend.jsx b/web/client/plugins/FloatingLegend.jsx index c090d8afd9..ae15daef4b 100644 --- a/web/client/plugins/FloatingLegend.jsx +++ b/web/client/plugins/FloatingLegend.jsx @@ -11,7 +11,7 @@ const PropTypes = require('prop-types'); const assign = require('object-assign'); const {connect} = require('react-redux'); const {createSelector} = require('reselect'); -const {reverse, head, get, isObject} = require('lodash'); +const {reverse, head, get} = require('lodash'); const {updateNode} = require('../actions/layers'); const {resizeLegend, expandLegend} = require('../actions/floatinglegend'); const {layersSelector} = require('../selectors/layers'); @@ -22,6 +22,7 @@ const {isFeatureGridOpen} = require('../selectors/featuregrid'); const {legendSizeSelector, legendExpandedSelector} = require('../selectors/floatinglegend'); const FloatingLegend = require('../components/TOC/FloatingLegend'); const {parseLayoutValue, getScales} = require('../utils/MapUtils'); +const {getLocalizedProp} = require('../utils/LocaleUtils'); /** * FloatingLegend plugin. @@ -70,8 +71,6 @@ class FloatingLegendComponent extends React.Component { } } -const parseTitleObject = (title, currentLocale) => title && isObject(title) && (title[currentLocale] || title.default) || title || ''; - const floatingLegendSelector = createSelector( [ layersSelector, @@ -87,7 +86,7 @@ const floatingLegendSelector = createSelector( layers: featuredGridOpen && [] || layers && reverse([ ...layers .filter(layer => layer && layer.group !== 'background' && !layer.loadingError) - .map(({title, ...layer}) => ({...layer, title: parseTitleObject(title, currentLocale)})) + .map(({title, ...layer}) => ({...layer, title: getLocalizedProp(currentLocale, title)})) ]) || [], title: map && map.info && map.info.name || '', height: size.height || 300, diff --git a/web/client/selectors/queryform.js b/web/client/selectors/queryform.js index e176516bd3..f0fa6cf86e 100644 --- a/web/client/selectors/queryform.js +++ b/web/client/selectors/queryform.js @@ -3,9 +3,13 @@ const {createSelector} = require('reselect'); const {layersSelector} = require('./layers'); +const {currentLocaleSelector} = require('./locale'); + +const {getLocalizedProp} = require('../utils/LocaleUtils'); + const crossLayerFilterSelector = state => get(state, "queryform.crossLayerFilter"); // TODO we should also check if the layer are from the same source to allow cross layer filtering -const availableCrossLayerFilterLayersSelector = state =>(layersSelector(state) || []).filter(({type} = {}) => type === "wms"); +const availableCrossLayerFilterLayersSelector = state =>(layersSelector(state) || []).filter(({type} = {}) => type === "wms").map(({title, ...layer}) => ({...layer, title: getLocalizedProp(currentLocaleSelector(state), title)})); const spatialFieldGeomSelector = state => get(state, "queryform.spatialField.geometry"); const spatialFieldSelector = state => get(state, "queryform.spatialField"); const attributePanelExpandedSelector = state => get(state, "queryform.attributePanelExpanded"); diff --git a/web/client/utils/LocaleUtils.js b/web/client/utils/LocaleUtils.js index 923569c693..0b93a4823c 100644 --- a/web/client/utils/LocaleUtils.js +++ b/web/client/utils/LocaleUtils.js @@ -6,7 +6,7 @@ * LICENSE file in the root directory of this source tree. */ const url = require('url'); - +const {isObject} = require('lodash'); const {addLocaleData} = require('react-intl'); const en = require('react-intl/locale-data/en'); @@ -151,7 +151,14 @@ const LocaleUtils = { title: 'errorTitleDefault', message: 'errorDefault' }; - } + }, + /** + * Retrieve localized string from object of translations + * @param {string} locale code of locale, eg. en-US + * @param {string|object} prop source of translation + * @returns {string} localized string + */ + getLocalizedProp: (locale, prop) => isObject(prop) ? prop[locale] || prop.default : prop || '' }; module.exports = LocaleUtils; diff --git a/web/client/utils/__tests__/LocaleUtils-test.js b/web/client/utils/__tests__/LocaleUtils-test.js index ce9b6d3d7e..39406880e2 100644 --- a/web/client/utils/__tests__/LocaleUtils-test.js +++ b/web/client/utils/__tests__/LocaleUtils-test.js @@ -72,4 +72,12 @@ describe('LocaleUtils', () => { message: 'errorDefault' }); }); + it('getLocalizedProp', () => { + expect(LocaleUtils.getLocalizedProp()).toBe(''); + const stringProp = 'title'; + expect(LocaleUtils.getLocalizedProp(undefined, stringProp)).toBe('title'); + const localizedObjectProp = {'it-IT': 'titolo', 'default': 'title'}; + expect(LocaleUtils.getLocalizedProp('it-IT', localizedObjectProp)).toBe('titolo'); + expect(LocaleUtils.getLocalizedProp('fr-FR', localizedObjectProp)).toBe('title'); + }); });