From cfd0fd83336e05fd5c8ab02d72ffb3926d41ee52 Mon Sep 17 00:00:00 2001 From: CamilleLegeron Date: Wed, 24 Apr 2024 15:22:25 +0200 Subject: [PATCH 1/8] add translation of vue types when added --- app/client/ui/widgetTypesMap.ts | 17 ++++++++++------- static/locales/en.client.json | 9 +++++++++ 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/app/client/ui/widgetTypesMap.ts b/app/client/ui/widgetTypesMap.ts index cbd5a48d..db2db472 100644 --- a/app/client/ui/widgetTypesMap.ts +++ b/app/client/ui/widgetTypesMap.ts @@ -3,15 +3,18 @@ import {ViewSectionRec} from "app/client/models/entities/ViewSectionRec"; import {IPageWidget} from "app/client/ui/PageWidgetPicker"; import {IconName} from "app/client/ui2018/IconList"; import {IWidgetType} from "app/common/widgetTypes"; +import {makeT} from "../lib/localization"; + +const t = makeT('WidgetTypesMap'); export const widgetTypesMap = new Map([ - ['record', {label: 'Table', icon: 'TypeTable'}], - ['single', {label: 'Card', icon: 'TypeCard'}], - ['detail', {label: 'Card List', icon: 'TypeCardList'}], - ['chart', {label: 'Chart', icon: 'TypeChart'}], - ['form', {label: 'Form', icon: 'Board'}], - ['custom', {label: 'Custom', icon: 'TypeCustom'}], - ['custom.calendar', {label: 'Calendar', icon: 'TypeCalendar'}], + ['record', {label: t('Table'), icon: 'TypeTable'}], + ['single', {label: t('Card'), icon: 'TypeCard'}], + ['detail', {label: t('Card List'), icon: 'TypeCardList'}], + ['chart', {label: t('Chart'), icon: 'TypeChart'}], + ['form', {label: t('Form'), icon: 'Board'}], + ['custom', {label: t('Custom'), icon: 'TypeCustom'}], + ['custom.calendar', {label: t('Calendar'), icon: 'TypeCalendar'}], ]); // Widget type info. diff --git a/static/locales/en.client.json b/static/locales/en.client.json index d20814e8..c9c39792 100644 --- a/static/locales/en.client.json +++ b/static/locales/en.client.json @@ -1499,5 +1499,14 @@ "Checkbox": "Checkbox", "Field Format": "Field Format", "Switch": "Switch" + }, + "widgetTypesMap": { + "Calendar": "Calendar", + "Card": "Card", + "Card List": "Card List", + "Chart": "Chart", + "Custom": "Custom", + "Form": "Form", + "Table": "Table" } } From 8712f94619aada64d07d293563579614ffbe46c6 Mon Sep 17 00:00:00 2001 From: CamilleLegeron Date: Wed, 24 Apr 2024 15:28:33 +0200 Subject: [PATCH 2/8] correct import --- app/client/ui/widgetTypesMap.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/ui/widgetTypesMap.ts b/app/client/ui/widgetTypesMap.ts index db2db472..75c9199c 100644 --- a/app/client/ui/widgetTypesMap.ts +++ b/app/client/ui/widgetTypesMap.ts @@ -3,7 +3,7 @@ import {ViewSectionRec} from "app/client/models/entities/ViewSectionRec"; import {IPageWidget} from "app/client/ui/PageWidgetPicker"; import {IconName} from "app/client/ui2018/IconList"; import {IWidgetType} from "app/common/widgetTypes"; -import {makeT} from "../lib/localization"; +import {makeT} from 'app/client/lib/localization'; const t = makeT('WidgetTypesMap'); From 0fe099f887b7a5f39c65ac7931007be3ea82f3ba Mon Sep 17 00:00:00 2001 From: CamilleLegeron Date: Wed, 24 Apr 2024 16:28:05 +0200 Subject: [PATCH 3/8] correct translation --- app/client/models/entities/ViewSectionRec.ts | 6 ++++-- app/client/ui/PageWidgetPicker.ts | 9 +++++---- app/client/ui/RightPanel.ts | 7 ++++--- app/client/ui/widgetTypesMap.ts | 20 ++++++++++++-------- static/locales/en.client.json | 2 +- 5 files changed, 26 insertions(+), 18 deletions(-) diff --git a/app/client/models/entities/ViewSectionRec.ts b/app/client/models/entities/ViewSectionRec.ts index 729f79de..2eeca6a7 100644 --- a/app/client/models/entities/ViewSectionRec.ts +++ b/app/client/models/entities/ViewSectionRec.ts @@ -20,7 +20,7 @@ import {BEHAVIOR} from 'app/client/models/entities/ColumnRec'; import * as modelUtil from 'app/client/models/modelUtil'; import {removeRule, RuleOwner} from 'app/client/models/RuleOwner'; import {LinkConfig} from 'app/client/ui/selectBy'; -import {getWidgetTypes} from "app/client/ui/widgetTypesMap"; +import {getWidgetTypesLabelTranslation} from "app/client/ui/widgetTypesMap"; import {FilterColValues} from "app/common/ActiveDocAPI"; import {AccessLevel, ICustomWidget} from 'app/common/CustomWidget'; import {UserAction} from 'app/common/DocActions'; @@ -460,7 +460,9 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel): // - Widget type description (if not grid) // All concatenated separated by space. this.defaultWidgetTitle = this.autoDispose(ko.pureComputed(() => { - const widgetTypeDesc = this.parentKey() !== 'record' ? `${getWidgetTypes(this.parentKey.peek() as any).label}` : ''; + const widgetTypeDesc = this.parentKey() !== 'record' + ? `${getWidgetTypesLabelTranslation(this.parentKey.peek() as any)}` + : ''; const table = this.table(); return [ table.tableNameDef()?.toUpperCase(), // Due to ACL this can be null. diff --git a/app/client/ui/PageWidgetPicker.ts b/app/client/ui/PageWidgetPicker.ts index fed425f4..ce7363ca 100644 --- a/app/client/ui/PageWidgetPicker.ts +++ b/app/client/ui/PageWidgetPicker.ts @@ -6,7 +6,7 @@ import {ColumnRec, TableRec, ViewSectionRec} from 'app/client/models/DocModel'; import {PERMITTED_CUSTOM_WIDGETS} from "app/client/models/features"; import {linkId, NoLink} from 'app/client/ui/selectBy'; import {overflowTooltip, withInfoTooltip} from 'app/client/ui/tooltips'; -import {getWidgetTypes} from "app/client/ui/widgetTypesMap"; +import {getWidgetTypes, getWidgetTypesLabelTranslation} from "app/client/ui/widgetTypesMap"; import {bigPrimaryButton} from "app/client/ui2018/buttons"; import {theme, vars} from "app/client/ui2018/cssVars"; import {icon} from "app/client/ui2018/icons"; @@ -205,7 +205,7 @@ export function buildPageWidgetPicker( // If savePromise throws an error, before or after timeout, we let the error propagate as it // should be handle by the caller. if (await isLongerThan(savePromise, DELAY_BEFORE_SPINNER_MS)) { - const label = getWidgetTypes(type).label; + const label = getWidgetTypesLabelTranslation(type); await spinnerModal(t("Building {{- label}} widget", { label }), savePromise); } } @@ -317,12 +317,13 @@ export class PageWidgetSelect extends Disposable { cssPanel( header(t("Select Widget")), sectionTypes.map((value) => { - const {label, icon: iconName} = getWidgetTypes(value); + const {icon: iconName} = getWidgetTypes(value); + const tLabel = getWidgetTypesLabelTranslation(value); const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid)); return cssEntry( dom.autoDispose(disabled), cssTypeIcon(iconName), - label, + tLabel, dom.on('click', () => !disabled.get() && this._selectType(value)), cssEntry.cls('-selected', (use) => use(this._value.type) === value), cssEntry.cls('-disabled', disabled), diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 4ff41a60..5154bc87 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -38,7 +38,7 @@ import {PredefinedCustomSectionConfig} from "app/client/ui/PredefinedCustomSecti import {cssLabel} from 'app/client/ui/RightPanelStyles'; import {linkId, NoLink, selectBy} from 'app/client/ui/selectBy'; import {VisibleFieldsConfig} from 'app/client/ui/VisibleFieldsConfig'; -import {getTelemetryWidgetTypeFromVS, widgetTypesMap} from "app/client/ui/widgetTypesMap"; +import {getTelemetryWidgetTypeFromVS, getWidgetTypesLabelTranslation, widgetTypesMap} from "app/client/ui/widgetTypesMap"; import {basicButton, primaryButton} from 'app/client/ui2018/buttons'; import {buttonSelect} from 'app/client/ui2018/buttonSelect'; import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox'; @@ -220,10 +220,11 @@ export class RightPanel extends Disposable { private _buildStandardHeader() { return dom.maybe(this._pageWidgetType, (type) => { - const widgetInfo = widgetTypesMap.get(type) || {label: 'Table', icon: 'TypeTable'}; + const widgetIcon = widgetTypesMap.get(type)?.icon || 'TypeTable'; + const widgetLabel = getWidgetTypesLabelTranslation(type); const fieldInfo = getFieldType(type); return [ - cssTopBarItem(cssTopBarIcon(widgetInfo.icon), widgetInfo.label, + cssTopBarItem(cssTopBarIcon(widgetIcon), widgetLabel, cssTopBarItem.cls('-selected', (use) => use(this._topTab) === 'pageWidget'), dom.on('click', () => this._topTab.set("pageWidget")), testId('right-tab-pagewidget')), diff --git a/app/client/ui/widgetTypesMap.ts b/app/client/ui/widgetTypesMap.ts index 75c9199c..00e739e5 100644 --- a/app/client/ui/widgetTypesMap.ts +++ b/app/client/ui/widgetTypesMap.ts @@ -5,16 +5,16 @@ import {IconName} from "app/client/ui2018/IconList"; import {IWidgetType} from "app/common/widgetTypes"; import {makeT} from 'app/client/lib/localization'; -const t = makeT('WidgetTypesMap'); +const t = makeT('widgetTypesMap'); export const widgetTypesMap = new Map([ - ['record', {label: t('Table'), icon: 'TypeTable'}], - ['single', {label: t('Card'), icon: 'TypeCard'}], - ['detail', {label: t('Card List'), icon: 'TypeCardList'}], - ['chart', {label: t('Chart'), icon: 'TypeChart'}], - ['form', {label: t('Form'), icon: 'Board'}], - ['custom', {label: t('Custom'), icon: 'TypeCustom'}], - ['custom.calendar', {label: t('Calendar'), icon: 'TypeCalendar'}], + ['record', {label: 'Table', icon: 'TypeTable'}], + ['single', {label: 'Card', icon: 'TypeCard'}], + ['detail', {label: 'Card List', icon: 'TypeCardList'}], + ['chart', {label: 'Chart', icon: 'TypeChart'}], + ['form', {label: 'Form', icon: 'Board'}], + ['custom', {label: 'Custom', icon: 'TypeCustom'}], + ['custom.calendar', {label: 'Calendar', icon: 'TypeCalendar'}], ]); // Widget type info. @@ -28,6 +28,10 @@ export function getWidgetTypes(sectionType: IWidgetType | null): IWidgetTypeInfo return widgetTypesMap.get(sectionType || 'record') || widgetTypesMap.get('record')!; } +export function getWidgetTypesLabelTranslation(sectionType: IWidgetType | null) { + return t(getWidgetTypes(sectionType).label); +} + export interface GetTelemetryWidgetTypeOptions { /** Defaults to `false`. */ isSummary?: boolean; diff --git a/static/locales/en.client.json b/static/locales/en.client.json index c9c39792..d9ebea92 100644 --- a/static/locales/en.client.json +++ b/static/locales/en.client.json @@ -1509,4 +1509,4 @@ "Form": "Form", "Table": "Table" } -} +} \ No newline at end of file From 2d538deb402e53df8ce53cb4910cd6369f285145 Mon Sep 17 00:00:00 2001 From: CamilleLegeron Date: Wed, 24 Apr 2024 16:32:50 +0200 Subject: [PATCH 4/8] refactor --- app/client/ui/PageWidgetPicker.ts | 9 +++++---- app/client/ui/RightPanel.ts | 5 +++-- app/client/ui/widgetTypesMap.ts | 4 ++-- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/app/client/ui/PageWidgetPicker.ts b/app/client/ui/PageWidgetPicker.ts index ce7363ca..02e392bb 100644 --- a/app/client/ui/PageWidgetPicker.ts +++ b/app/client/ui/PageWidgetPicker.ts @@ -205,7 +205,8 @@ export function buildPageWidgetPicker( // If savePromise throws an error, before or after timeout, we let the error propagate as it // should be handle by the caller. if (await isLongerThan(savePromise, DELAY_BEFORE_SPINNER_MS)) { - const label = getWidgetTypesLabelTranslation(type); + const widget = getWidgetTypes(type); + const label = getWidgetTypesLabelTranslation(widget); await spinnerModal(t("Building {{- label}} widget", { label }), savePromise); } } @@ -317,12 +318,12 @@ export class PageWidgetSelect extends Disposable { cssPanel( header(t("Select Widget")), sectionTypes.map((value) => { - const {icon: iconName} = getWidgetTypes(value); - const tLabel = getWidgetTypesLabelTranslation(value); + const widget = getWidgetTypes(value); + const tLabel = getWidgetTypesLabelTranslation(widget); const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid)); return cssEntry( dom.autoDispose(disabled), - cssTypeIcon(iconName), + cssTypeIcon(widget.icon), tLabel, dom.on('click', () => !disabled.get() && this._selectType(value)), cssEntry.cls('-selected', (use) => use(this._value.type) === value), diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 5154bc87..8655b126 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -220,8 +220,9 @@ export class RightPanel extends Disposable { private _buildStandardHeader() { return dom.maybe(this._pageWidgetType, (type) => { - const widgetIcon = widgetTypesMap.get(type)?.icon || 'TypeTable'; - const widgetLabel = getWidgetTypesLabelTranslation(type); + const widget = widgetTypesMap.get(type) || {label: 'Table', icon: 'TypeTable'}; + const widgetIcon = widget.icon || 'TypeTable'; + const widgetLabel = getWidgetTypesLabelTranslation(widget); const fieldInfo = getFieldType(type); return [ cssTopBarItem(cssTopBarIcon(widgetIcon), widgetLabel, diff --git a/app/client/ui/widgetTypesMap.ts b/app/client/ui/widgetTypesMap.ts index 00e739e5..4e68fe87 100644 --- a/app/client/ui/widgetTypesMap.ts +++ b/app/client/ui/widgetTypesMap.ts @@ -28,8 +28,8 @@ export function getWidgetTypes(sectionType: IWidgetType | null): IWidgetTypeInfo return widgetTypesMap.get(sectionType || 'record') || widgetTypesMap.get('record')!; } -export function getWidgetTypesLabelTranslation(sectionType: IWidgetType | null) { - return t(getWidgetTypes(sectionType).label); +export function getWidgetTypesLabelTranslation(widgetType: IWidgetTypeInfo) { + return t(widgetType.label); } export interface GetTelemetryWidgetTypeOptions { From dc5afb68bce6e0770b8a32559ec391ef085b8ca6 Mon Sep 17 00:00:00 2001 From: CamilleLegeron Date: Wed, 24 Apr 2024 16:35:23 +0200 Subject: [PATCH 5/8] rename widget info --- app/client/ui/PageWidgetPicker.ts | 10 +++++----- app/client/ui/RightPanel.ts | 6 +++--- static/locales/en.client.json | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/app/client/ui/PageWidgetPicker.ts b/app/client/ui/PageWidgetPicker.ts index 02e392bb..bd8df61d 100644 --- a/app/client/ui/PageWidgetPicker.ts +++ b/app/client/ui/PageWidgetPicker.ts @@ -205,8 +205,8 @@ export function buildPageWidgetPicker( // If savePromise throws an error, before or after timeout, we let the error propagate as it // should be handle by the caller. if (await isLongerThan(savePromise, DELAY_BEFORE_SPINNER_MS)) { - const widget = getWidgetTypes(type); - const label = getWidgetTypesLabelTranslation(widget); + const widgetInfo = getWidgetTypes(type); + const label = getWidgetTypesLabelTranslation(widgetInfo); await spinnerModal(t("Building {{- label}} widget", { label }), savePromise); } } @@ -318,12 +318,12 @@ export class PageWidgetSelect extends Disposable { cssPanel( header(t("Select Widget")), sectionTypes.map((value) => { - const widget = getWidgetTypes(value); - const tLabel = getWidgetTypesLabelTranslation(widget); + const widgetInfo = getWidgetTypes(value); + const tLabel = getWidgetTypesLabelTranslation(widgetInfo); const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid)); return cssEntry( dom.autoDispose(disabled), - cssTypeIcon(widget.icon), + cssTypeIcon(widgetInfo.icon), tLabel, dom.on('click', () => !disabled.get() && this._selectType(value)), cssEntry.cls('-selected', (use) => use(this._value.type) === value), diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 8655b126..2c782584 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -220,9 +220,9 @@ export class RightPanel extends Disposable { private _buildStandardHeader() { return dom.maybe(this._pageWidgetType, (type) => { - const widget = widgetTypesMap.get(type) || {label: 'Table', icon: 'TypeTable'}; - const widgetIcon = widget.icon || 'TypeTable'; - const widgetLabel = getWidgetTypesLabelTranslation(widget); + const widgetInfo = widgetTypesMap.get(type) || {label: 'Table', icon: 'TypeTable'}; + const widgetIcon = widgetInfo.icon || 'TypeTable'; + const widgetLabel = getWidgetTypesLabelTranslation(widgetInfo); const fieldInfo = getFieldType(type); return [ cssTopBarItem(cssTopBarIcon(widgetIcon), widgetLabel, diff --git a/static/locales/en.client.json b/static/locales/en.client.json index d9ebea92..c9c39792 100644 --- a/static/locales/en.client.json +++ b/static/locales/en.client.json @@ -1509,4 +1509,4 @@ "Form": "Form", "Table": "Table" } -} \ No newline at end of file +} From 232d0cca1b666e61e51c3c9bad9a8f23ec0ac233 Mon Sep 17 00:00:00 2001 From: CamilleLegeron Date: Wed, 24 Apr 2024 16:39:27 +0200 Subject: [PATCH 6/8] cut line --- app/client/ui/RightPanel.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 2c782584..32340f0f 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -38,7 +38,11 @@ import {PredefinedCustomSectionConfig} from "app/client/ui/PredefinedCustomSecti import {cssLabel} from 'app/client/ui/RightPanelStyles'; import {linkId, NoLink, selectBy} from 'app/client/ui/selectBy'; import {VisibleFieldsConfig} from 'app/client/ui/VisibleFieldsConfig'; -import {getTelemetryWidgetTypeFromVS, getWidgetTypesLabelTranslation, widgetTypesMap} from "app/client/ui/widgetTypesMap"; +import { + getTelemetryWidgetTypeFromVS, + getWidgetTypesLabelTranslation, + widgetTypesMap +} from "app/client/ui/widgetTypesMap"; import {basicButton, primaryButton} from 'app/client/ui2018/buttons'; import {buttonSelect} from 'app/client/ui2018/buttonSelect'; import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox'; From 213b903a536b550a56a76a978b78a925a672a232 Mon Sep 17 00:00:00 2001 From: CamilleLegeron Date: Tue, 30 Apr 2024 10:05:30 +0200 Subject: [PATCH 7/8] use widgetTypesMap functions --- app/client/ui/RightPanel.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/client/ui/RightPanel.ts b/app/client/ui/RightPanel.ts index 32340f0f..2f99c1ed 100644 --- a/app/client/ui/RightPanel.ts +++ b/app/client/ui/RightPanel.ts @@ -40,8 +40,8 @@ import {linkId, NoLink, selectBy} from 'app/client/ui/selectBy'; import {VisibleFieldsConfig} from 'app/client/ui/VisibleFieldsConfig'; import { getTelemetryWidgetTypeFromVS, + getWidgetTypes, getWidgetTypesLabelTranslation, - widgetTypesMap } from "app/client/ui/widgetTypesMap"; import {basicButton, primaryButton} from 'app/client/ui2018/buttons'; import {buttonSelect} from 'app/client/ui2018/buttonSelect'; @@ -224,12 +224,11 @@ export class RightPanel extends Disposable { private _buildStandardHeader() { return dom.maybe(this._pageWidgetType, (type) => { - const widgetInfo = widgetTypesMap.get(type) || {label: 'Table', icon: 'TypeTable'}; - const widgetIcon = widgetInfo.icon || 'TypeTable'; + const widgetInfo = getWidgetTypes(type); const widgetLabel = getWidgetTypesLabelTranslation(widgetInfo); const fieldInfo = getFieldType(type); return [ - cssTopBarItem(cssTopBarIcon(widgetIcon), widgetLabel, + cssTopBarItem(cssTopBarIcon(widgetInfo.icon), widgetLabel, cssTopBarItem.cls('-selected', (use) => use(this._topTab) === 'pageWidget'), dom.on('click', () => this._topTab.set("pageWidget")), testId('right-tab-pagewidget')), From 428994ce73dc5581891ca34dcd2c99c81d8395e8 Mon Sep 17 00:00:00 2001 From: CamilleLegeron Date: Tue, 30 Apr 2024 13:33:17 +0200 Subject: [PATCH 8/8] fix: getWidgetType before translate label --- app/client/models/entities/ViewSectionRec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/client/models/entities/ViewSectionRec.ts b/app/client/models/entities/ViewSectionRec.ts index 2eeca6a7..3f100ddb 100644 --- a/app/client/models/entities/ViewSectionRec.ts +++ b/app/client/models/entities/ViewSectionRec.ts @@ -20,7 +20,7 @@ import {BEHAVIOR} from 'app/client/models/entities/ColumnRec'; import * as modelUtil from 'app/client/models/modelUtil'; import {removeRule, RuleOwner} from 'app/client/models/RuleOwner'; import {LinkConfig} from 'app/client/ui/selectBy'; -import {getWidgetTypesLabelTranslation} from "app/client/ui/widgetTypesMap"; +import {getWidgetTypes, getWidgetTypesLabelTranslation} from "app/client/ui/widgetTypesMap"; import {FilterColValues} from "app/common/ActiveDocAPI"; import {AccessLevel, ICustomWidget} from 'app/common/CustomWidget'; import {UserAction} from 'app/common/DocActions'; @@ -461,7 +461,7 @@ export function createViewSectionRec(this: ViewSectionRec, docModel: DocModel): // All concatenated separated by space. this.defaultWidgetTitle = this.autoDispose(ko.pureComputed(() => { const widgetTypeDesc = this.parentKey() !== 'record' - ? `${getWidgetTypesLabelTranslation(this.parentKey.peek() as any)}` + ? `${getWidgetTypesLabelTranslation(getWidgetTypes(this.parentKey.peek() as any))}` : ''; const table = this.table(); return [