From 98dd608f5cf76a418950d4ea25106c38f74c362f Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Wed, 13 Dec 2023 12:10:54 +0100 Subject: [PATCH] localization of query builder --- .../query-builder-filter.element.ts | 49 +++++--- .../query-builder/query-builder.element.ts | 58 +++++---- .../templates/modals/query-builder/utils.ts | 115 ++++++++++++++++++ 3 files changed, 184 insertions(+), 38 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/utils.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder-filter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder-filter.element.ts index 659b618ac3..cc3739744d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder-filter.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder-filter.element.ts @@ -1,5 +1,14 @@ +import { localizeOperators, localizePropertyType } from './utils.js'; import { type UUIComboboxListElement } from '@umbraco-cms/backoffice/external/uui'; -import { PropertyValueMap, css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit'; +import { + PropertyValueMap, + css, + html, + customElement, + property, + state, + ifDefined, +} from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { OperatorModel, @@ -73,20 +82,23 @@ export class UmbQueryBuilderFilterElement extends UmbLitElement { } private _renderOperatorsDropdown() { - return html` + if (!this.settings?.operators) return; + const operators = localizeOperators(this.settings?.operators, this.currentPropertyType); + + return html` ${this.filter?.operator ?? ''} - ${this.settings?.operators + ${operators ?.filter((operator) => this.currentPropertyType ? operator.applicableTypes?.includes(this.currentPropertyType) : true, ) .map( (operator) => - html`${operator.operator}`, - )} + html` + ${operator.operator} + `, + )} + `; } @@ -104,26 +116,35 @@ export class UmbQueryBuilderFilterElement extends UmbLitElement { } render() { + const properties = localizePropertyType(this.settings?.properties); return html` ${this.unremovable ? this.localize.term('template_where') : this.localize.term('template_and')} ${this.filter?.propertyAlias ?? ''} - ${this.settings?.properties?.map( + ${properties?.map( (property) => - html`${property.alias}`, + html` + ${property.alias} + `, )} ${this.filter?.propertyAlias ? this._renderOperatorsDropdown() : ''} ${this.filter?.operator ? this._renderConstraintValueInput() : ''} - + - + diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts index 5ca702e0c9..0ea1d55436 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/query-builder.element.ts @@ -1,7 +1,8 @@ import { UmbTemplateRepository } from '../../repository/template.repository.js'; +import { localizePropertyType, localizeSort } from './utils.js'; import type { UmbQueryBuilderFilterElement } from './query-builder-filter.element.js'; import { UUIComboboxListElement } from '@umbraco-cms/backoffice/external/uui'; -import { css, html, customElement, state, query, queryAll } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state, query, queryAll, ifDefined } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalBaseElement, UMB_DOCUMENT_PICKER_MODAL, @@ -198,27 +199,33 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement }; render() { + const properties = localizePropertyType(this._queryBuilderSettings?.properties); + const sort = localizeSort(this._queryRequest.sort); return html`
- I want + I want - ${this._queryRequest?.contentTypeAlias ?? 'all content'} + + ${this._queryRequest?.contentTypeAlias ?? this.localize.term('template_allContent')} + all content ${this._queryBuilderSettings?.contentTypeAliases?.map( (alias) => - html`content of type "${alias}"`, + html` + + content of type "${alias}" + + `, )} - from - ${this._selectedRootContentName} + from + + ${this._selectedRootContentName}
@@ -231,30 +238,33 @@ export default class UmbChooseInsertTypeModalElement extends UmbModalBaseElement @remove-filter=${this.#removeFilter}>
- ordered by + order by ${this._queryRequest.sort?.propertyAlias ?? ''} - ${this._queryBuilderSettings?.properties?.map( + ${properties?.map( (property) => - html`${property.alias}`, + html` + ${property.alias} + `, )} - + + - ${this._queryRequest.sort?.propertyAlias - ? html`${this._queryRequest.sort.direction ?? this._defaultSortDirection}` + ${sort?.propertyAlias + ? html` + + ${sort.direction ?? this._defaultSortDirection} + + ` : ''}
- ${this._templateQuery?.resultCount ?? 0} items returned, in ${this._templateQuery?.executionTime ?? 0} - ms + + ${this._templateQuery?.resultCount ?? 0} + items returned, in + ${this._templateQuery?.executionTime ?? 0} ms +
${this._templateQuery?.queryExpression ?? ''} diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/utils.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/utils.ts new file mode 100644 index 0000000000..1ccd3bdbca --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/templating/templates/modals/query-builder/utils.ts @@ -0,0 +1,115 @@ +import { + OperatorModel, + TemplateQueryExecuteSortModel, + TemplateQueryOperatorModel, + TemplateQueryPropertyPresentationModel, + TemplateQueryPropertyTypeModel, + UserOrderModel, +} from '@umbraco-cms/backoffice/backend-api'; + +type TemplateOperatorModel = TemplateQueryOperatorModel & { localizeKey?: string }; +type TemplatePropertyModel = TemplateQueryPropertyPresentationModel & { localizeKey?: string }; +type TemplateSortModel = TemplateQueryExecuteSortModel & { localizeKey?: string }; + +export function localizeOperators( + operators: Array, + currentPropertyType: TemplateQueryPropertyTypeModel | null, +): Array { + switch (currentPropertyType) { + case TemplateQueryPropertyTypeModel.STRING: + return isString(operators); + case TemplateQueryPropertyTypeModel.INTEGER: + return isInteger(operators); + case TemplateQueryPropertyTypeModel.DATE_TIME: + return isDateTime(operators); + default: + return operators; + } +} + +export function localizePropertyType(propertyTypes?: Array) { + if (!propertyTypes) return; + return propertyTypes.map((propertyType): TemplatePropertyModel => { + switch (propertyType.alias) { + case UserOrderModel.NAME: + return { ...propertyType, localizeKey: 'template_name' }; + case UserOrderModel.ID: + return { ...propertyType, localizeKey: 'template_id' }; + case UserOrderModel.CREATE_DATE: + return { ...propertyType, localizeKey: 'template_createdDate' }; + case UserOrderModel.UPDATE_DATE: + return { ...propertyType, localizeKey: 'template_lastUpdatedDate' }; + default: + return propertyType; + } + }); +} + +export function localizeSort(sort?: TemplateQueryExecuteSortModel | null): TemplateSortModel | undefined { + if (!sort?.direction) return undefined; + switch (sort.direction) { + case 'ascending': + return { ...sort, localizeKey: 'template_ascending' }; + case 'descending': + return { ...sort, localizeKey: 'template_descending' }; + default: + return sort; + } +} + +// Following code is for localization of operators (checks on property type); + +function isString(operators: Array): Array { + return operators.map((operator): TemplateOperatorModel => { + switch (operator.operator) { + case OperatorModel.EQUALS: + return { ...operator, localizeKey: 'template_is' }; + case OperatorModel.NOT_EQUALS: + return { ...operator, localizeKey: 'template_isNot' }; + case OperatorModel.CONTAINS: + return { ...operator, localizeKey: 'template_contains' }; + case OperatorModel.NOT_CONTAINS: + return { ...operator, localizeKey: 'template_doesNotContain' }; + default: + return operator; + } + }); +} + +function isInteger(operators: Array): Array { + return operators.map((operator): TemplateOperatorModel => { + switch (operator.operator) { + case OperatorModel.EQUALS: + return { ...operator, localizeKey: 'template_equals' }; + case OperatorModel.NOT_EQUALS: + return { ...operator, localizeKey: 'template_doesNotEqual' }; + case OperatorModel.GREATER_THAN: + return { ...operator, localizeKey: 'template_greaterThan' }; + case OperatorModel.GREATER_THAN_EQUAL_TO: + return { ...operator, localizeKey: 'template_greaterThanEqual' }; + case OperatorModel.LESS_THAN: + return { ...operator, localizeKey: 'template_lessThan' }; + case OperatorModel.LESS_THAN_EQUAL_TO: + return { ...operator, localizeKey: 'template_lessThanEqual' }; + default: + return operator; + } + }); +} + +function isDateTime(operators: Array): Array { + return operators.map((operator): TemplateOperatorModel => { + switch (operator.operator) { + case OperatorModel.GREATER_THAN: + return { ...operator, localizeKey: 'template_before' }; + case OperatorModel.GREATER_THAN_EQUAL_TO: + return { ...operator, localizeKey: 'template_beforeIncDate' }; + case OperatorModel.LESS_THAN: + return { ...operator, localizeKey: 'template_after' }; + case OperatorModel.LESS_THAN_EQUAL_TO: + return { ...operator, localizeKey: 'template_afterIncDate' }; + default: + return operator; + } + }); +}