feat: add translation of vue types when added (#946)

pull/994/head
CamilleLegeron 3 weeks ago committed by GitHub
parent 418ae03475
commit 6443c9f914
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -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'
? `${getWidgetTypes(this.parentKey.peek() as any).getLabel()}`
: '';
const table = this.table();
return [
table.tableNameDef()?.toUpperCase(), // Due to ACL this can be null.

@ -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 = getWidgetTypes(type).getLabel();
await spinnerModal(t("Building {{- label}} widget", { label }), savePromise);
}
}
@ -317,12 +317,12 @@ export class PageWidgetSelect extends Disposable {
cssPanel(
header(t("Select Widget")),
sectionTypes.map((value) => {
const {label, icon: iconName} = getWidgetTypes(value);
const widgetInfo = getWidgetTypes(value);
const disabled = computed(this._value.table, (use, tid) => this._isTypeDisabled(value, tid));
return cssEntry(
dom.autoDispose(disabled),
cssTypeIcon(iconName),
label,
cssTypeIcon(widgetInfo.icon),
widgetInfo.getLabel(),
dom.on('click', () => !disabled.get() && this._selectType(value)),
cssEntry.cls('-selected', (use) => use(this._value.type) === value),
cssEntry.cls('-disabled', disabled),

@ -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, getWidgetTypes} 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,10 @@ export class RightPanel extends Disposable {
private _buildStandardHeader() {
return dom.maybe(this._pageWidgetType, (type) => {
const widgetInfo = widgetTypesMap.get(type) || {label: 'Table', icon: 'TypeTable'};
const widgetInfo = getWidgetTypes(type);
const fieldInfo = getFieldType(type);
return [
cssTopBarItem(cssTopBarIcon(widgetInfo.icon), widgetInfo.label,
cssTopBarItem(cssTopBarIcon(widgetInfo.icon), widgetInfo.getLabel(),
cssTopBarItem.cls('-selected', (use) => use(this._topTab) === 'pageWidget'),
dom.on('click', () => this._topTab.set("pageWidget")),
testId('right-tab-pagewidget')),

@ -3,21 +3,25 @@ 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 'app/client/lib/localization';
const t = makeT('widgetTypesMap');
export const widgetTypesMap = new Map<IWidgetType, IWidgetTypeInfo>([
['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', {name: 'Table', icon: 'TypeTable', getLabel: () => t('Table')}],
['single', {name: 'Card', icon: 'TypeCard', getLabel: () => t('Card')}],
['detail', {name: 'Card List', icon: 'TypeCardList', getLabel: () => t('Card List')}],
['chart', {name: 'Chart', icon: 'TypeChart', getLabel: () => t('Chart')}],
['form', {name: 'Form', icon: 'Board', getLabel: () => t('Form')}],
['custom', {name: 'Custom', icon: 'TypeCustom', getLabel: () => t('Custom')}],
['custom.calendar', {name: 'Calendar', icon: 'TypeCalendar', getLabel: () => t('Calendar')}],
]);
// Widget type info.
export interface IWidgetTypeInfo {
label: string;
name: string;
icon: IconName;
getLabel: () => string;
}
// Returns the widget type info for sectionType, or the one for 'record' if sectionType is null.
@ -46,7 +50,7 @@ export function getTelemetryWidgetTypeFromPageWidget(widget: IPageWidget) {
}
function getTelemetryWidgetType(type: IWidgetType, options: GetTelemetryWidgetTypeOptions = {}) {
let telemetryWidgetType: string | undefined = widgetTypesMap.get(type)?.label;
let telemetryWidgetType: string | undefined = widgetTypesMap.get(type)?.name;
if (!telemetryWidgetType) { return undefined; }
if (options.isNewTable) {

@ -1578,5 +1578,14 @@
"Search": "Search",
"Select...": "Select...",
"Submit": "Submit"
},
"widgetTypesMap": {
"Calendar": "Calendar",
"Card": "Card",
"Card List": "Card List",
"Chart": "Chart",
"Custom": "Custom",
"Form": "Form",
"Table": "Table"
}
}

Loading…
Cancel
Save