UI: Rename unit settings panel; Clear translate

This commit is contained in:
Vladyslav_Prykhodko 2025-05-14 14:47:38 +03:00
parent 59f23ba25d
commit be4407c3ca
22 changed files with 69 additions and 87 deletions

View File

@ -117,7 +117,7 @@ export class FilterUserInfoDialogComponent extends
this.submitted = true;
if (this.filterUserInfoFormGroup.valid) {
const keyFilterPredicateUserInfo: KeyFilterPredicateUserInfo = this.filterUserInfoFormGroup.getRawValue();
keyFilterPredicateUserInfo.autogeneratedLabel = !keyFilterPredicateUserInfo.autogeneratedLabel;;
keyFilterPredicateUserInfo.autogeneratedLabel = !keyFilterPredicateUserInfo.autogeneratedLabel;
this.dialogRef.close(keyFilterPredicateUserInfo);
}
}

View File

@ -16,7 +16,7 @@
-->
<mat-form-field appearance="outline" class="tb-inline-field tb-suffix-show-on-hover w-full flex-1" subscriptSizing="dynamic"
(click)="openConvertSettingsPopup($event)">
(click)="openUnitSettingsPopup($event)">
<input matInput #unitInput [formControl]="unitsFormControl"
placeholder="{{ 'widget-config.set' | translate }}"
[class.!pointer-events-none]="disabled"
@ -40,7 +40,7 @@
<tb-icon matSuffix
[color]="disabled ? null : 'primary'"
matTooltipPosition="above"
[matTooltip]="'unit.conversion.set-unit-conversion' | translate"
[matTooltip]="'unit.set-unit-conversion' | translate"
*ngIf="supportsUnitConversion && isUnitMapping" class="material-icons tb-suffix-show-always mr-2 !p-0">
mdi:swap-vertical-circle-outline
</tb-icon>

View File

@ -42,7 +42,7 @@ import {
import { map, mergeMap } from 'rxjs/operators';
import { UnitService } from '@core/services/unit.service';
import { TbPopoverService } from '@shared/components/popover.service';
import { ConvertUnitSettingsPanelComponent } from '@shared/components/convert-unit-settings-panel.component';
import { UnitSettingsPanelComponent } from '@shared/components/unit-settings-panel.component';
import { isDefinedAndNotNull, isEqual, isNotEmptyStr } from '@core/utils';
@Component({
@ -183,7 +183,7 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit, OnChang
}, 0);
}
openConvertSettingsPopup($event: Event) {
openUnitSettingsPopup($event: Event) {
if (!this.supportsUnitConversion) {
return;
}
@ -196,7 +196,7 @@ export class UnitInputComponent implements ControlValueAccessor, OnInit, OnChang
const popover = this.popoverService.displayPopover({
trigger,
renderer: this.renderer,
componentType: ConvertUnitSettingsPanelComponent,
componentType: UnitSettingsPanelComponent,
hostView: this.viewContainerRef,
preferredPlacement: ['left', 'bottom', 'top'],
context: {

View File

@ -16,29 +16,29 @@
-->
<div class="tb-convert-settings-panel">
<div class="tb-convert-settings-title" translate>unit.conversion.unit-settings</div>
<div class="tb-convert-settings-panel-content" [formGroup]="convertUnitForm">
<div class="tb-convert-settings-title" translate>unit.unit-settings.unit-settings</div>
<div class="tb-convert-settings-panel-content" [formGroup]="unitSettingForm">
<div class="tb-form-row">
<div class="min-w-44"
[class.tb-disabled-label]="convertUnitForm.get('from').disabled"
tb-hint-tooltip-icon="{{ 'unit.conversion.source-unit-hint' | translate }}"
translate>unit.conversion.source-unit</div>
<tb-unit-input #unitFrom class="flex-1" [required]="required" formControlName="from"
[class.tb-disabled-label]="unitSettingForm.get('from').disabled"
tb-hint-tooltip-icon="{{ 'unit.unit-settings.source-unit-hint' | translate }}"
translate>unit.unit-settings.source-unit</div>
<tb-unit-input class="flex-1" [required]="required" formControlName="from"
[measure]="measure" [tagFilter]="tagFilter"></tb-unit-input>
</div>
<div class="tb-form-panel stroked">
<mat-slide-toggle class="mat-slide" formControlName="convertUnit">
<div tb-hint-tooltip-icon="{{ 'unit.conversion.enable-unit-conversion-hint' | translate }}">
{{ 'unit.conversion.enable-unit-conversion' | translate }}
<div tb-hint-tooltip-icon="{{ 'unit.unit-settings.enable-unit-conversion-hint' | translate }}">
{{ 'unit.unit-settings.enable-unit-conversion' | translate }}
</div>
</mat-slide-toggle>
<div class="tb-form-row">
<div class="min-w-44"
[class.tb-disabled-label]="convertUnitForm.get('METRIC').disabled"
tb-hint-tooltip-icon="{{ 'unit.conversion.target-metric-unit-hint' | translate }}"
translate>unit.conversion.target-metric-unit</div>
[class.tb-disabled-label]="unitSettingForm.get('METRIC').disabled"
tb-hint-tooltip-icon="{{ 'unit.unit-settings.target-metric-unit-hint' | translate }}"
translate>unit.unit-settings.target-metric-unit</div>
<tb-unit-input class="flex-1"
onlySystemUnits
onlySystemUnits="true"
formControlName="METRIC"
[tagFilter]="tagFilter"
[unitSystem]="UnitSystem.METRIC"
@ -47,11 +47,11 @@
</div>
<div class="tb-form-row">
<div class="min-w-44"
[class.tb-disabled-label]="convertUnitForm.get('IMPERIAL').disabled"
tb-hint-tooltip-icon="{{ 'unit.conversion.target-imperial-unit-hint' | translate }}"
translate>unit.conversion.target-imperial-unit</div>
[class.tb-disabled-label]="unitSettingForm.get('IMPERIAL').disabled"
tb-hint-tooltip-icon="{{ 'unit.unit-settings.target-imperial-unit-hint' | translate }}"
translate>unit.unit-settings.target-imperial-unit</div>
<tb-unit-input class="flex-1"
onlySystemUnits
onlySystemUnits="true"
formControlName="IMPERIAL"
[tagFilter]="tagFilter"
[unitSystem]="UnitSystem.IMPERIAL"
@ -60,11 +60,11 @@
</div>
<div class="tb-form-row">
<div class="min-w-44"
[class.tb-disabled-label]="convertUnitForm.get('HYBRID').disabled"
tb-hint-tooltip-icon="{{ 'unit.conversion.target-hybrid-unit-hint' | translate }}"
translate>unit.conversion.target-hybrid-unit</div>
[class.tb-disabled-label]="unitSettingForm.get('HYBRID').disabled"
tb-hint-tooltip-icon="{{ 'unit.unit-settings.target-hybrid-unit-hint' | translate }}"
translate>unit.unit-settings.target-hybrid-unit</div>
<tb-unit-input class="flex-1"
onlySystemUnits
onlySystemUnits="true"
[tagFilter]="tagFilter"
formControlName="HYBRID"
[measure]="targetMeasure">
@ -78,7 +78,7 @@
type="button"
*ngIf="!disabled"
(click)="clearUnit()"
[disabled]="!(!!convertUnitForm.value.from || convertUnitForm.value.convertUnit)">
[disabled]="!(!!unitSettingForm.value.from || unitSettingForm.value.convertUnit)">
{{ 'action.clear' | translate }}
</button>
<span class="flex-1"></span>
@ -93,7 +93,7 @@
type="button"
*ngIf="!disabled"
(click)="applyUnitSettings()"
[disabled]="convertUnitForm.invalid || convertUnitForm.pristine">
[disabled]="unitSettingForm.invalid || unitSettingForm.pristine">
{{ 'action.apply' | translate }}
</button>
</div>

View File

@ -14,26 +14,23 @@
/// limitations under the License.
///
import { Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
import { AllMeasures, isNotEmptyTbUnits, TbUnit, UnitInfo, UnitSystem } from '@shared/models/unit.models';
import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { AllMeasures, TbUnit, UnitInfo, UnitSystem } from '@shared/models/unit.models';
import { TbPopoverComponent } from '@shared/components/popover.component';
import { FormBuilder, Validators } from '@angular/forms';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { UnitService } from '@core/services/unit.service';
import { debounceTime, first } from 'rxjs/operators';
import { debounceTime } from 'rxjs/operators';
import { isUndefinedOrNull } from '@core/utils';
import type { UnitInputComponent } from '@shared/components/unit-input.component';
@Component({
selector: 'tb-covert-unit-settings-panel',
templateUrl: './convert-unit-settings-panel.component.html',
styleUrls: ['./convert-unit-settings-panel.component.scss'],
templateUrl: './unit-settings-panel.component.html',
styleUrls: ['./unit-settings-panel.component.scss'],
providers: [],
encapsulation: ViewEncapsulation.None
})
export class ConvertUnitSettingsPanelComponent implements OnInit {
@ViewChild('unitFrom', {static: true}) unitFrom: UnitInputComponent;
export class UnitSettingsPanelComponent implements OnInit {
@Input()
unit: TbUnit;
@ -57,7 +54,7 @@ export class ConvertUnitSettingsPanelComponent implements OnInit {
targetMeasure: AllMeasures;
convertUnitForm = this.fb.group({
unitSettingForm = this.fb.group({
from: [''],
convertUnit: [true],
METRIC: [''],
@ -66,32 +63,32 @@ export class ConvertUnitSettingsPanelComponent implements OnInit {
})
constructor(
private popover: TbPopoverComponent<ConvertUnitSettingsPanelComponent>,
private popover: TbPopoverComponent<UnitSettingsPanelComponent>,
private fb: FormBuilder,
private unitService: UnitService
) {
this.convertUnitForm.get('from').valueChanges.pipe(
this.unitSettingForm.get('from').valueChanges.pipe(
debounceTime(200),
takeUntilDestroyed()
).subscribe(unit => {
const unitDescription = this.unitService.getUnitInfo(unit);
const units = unitDescription ? this.unitService.getUnits(unitDescription.measure) : [];
if (unitDescription && units.length > 1) {
this.convertUnitForm.get('convertUnit').enable({emitEvent: true});
this.unitSettingForm.get('convertUnit').enable({emitEvent: true});
this.targetMeasure = unitDescription.measure;
if (unitDescription.system === UnitSystem.IMPERIAL) {
this.convertUnitForm.get('METRIC').setValue(this.unitService.getDefaultUnit(this.targetMeasure, UnitSystem.METRIC), {emitEvent: false});
this.convertUnitForm.get('IMPERIAL').setValue(unit, {emitEvent: false});
this.convertUnitForm.get('HYBRID').setValue(unit, {emitEvent: false});
this.unitSettingForm.get('METRIC').setValue(this.unitService.getDefaultUnit(this.targetMeasure, UnitSystem.METRIC), {emitEvent: false});
this.unitSettingForm.get('IMPERIAL').setValue(unit, {emitEvent: false});
this.unitSettingForm.get('HYBRID').setValue(unit, {emitEvent: false});
} else {
this.convertUnitForm.get('METRIC').setValue(unit, {emitEvent: false});
this.convertUnitForm.get('IMPERIAL').setValue(this.unitService.getDefaultUnit(this.targetMeasure, UnitSystem.IMPERIAL), {emitEvent: false});
this.convertUnitForm.get('HYBRID').setValue(unit, {emitEvent: false});
this.unitSettingForm.get('METRIC').setValue(unit, {emitEvent: false});
this.unitSettingForm.get('IMPERIAL').setValue(this.unitService.getDefaultUnit(this.targetMeasure, UnitSystem.IMPERIAL), {emitEvent: false});
this.unitSettingForm.get('HYBRID').setValue(unit, {emitEvent: false});
}
} else {
this.convertUnitForm.get('convertUnit').setValue(false, {onlySelf: true});
this.convertUnitForm.get('convertUnit').disable({emitEvent: false});
this.convertUnitForm.patchValue({
this.unitSettingForm.get('convertUnit').setValue(false, {onlySelf: true});
this.unitSettingForm.get('convertUnit').disable({emitEvent: false});
this.unitSettingForm.patchValue({
METRIC: '',
IMPERIAL: '',
HYBRID: ''
@ -99,17 +96,17 @@ export class ConvertUnitSettingsPanelComponent implements OnInit {
}
})
this.convertUnitForm.get('convertUnit').valueChanges.pipe(
this.unitSettingForm.get('convertUnit').valueChanges.pipe(
takeUntilDestroyed()
).subscribe(value => {
if (value) {
this.convertUnitForm.get('METRIC').enable({emitEvent: false});
this.convertUnitForm.get('IMPERIAL').enable({emitEvent: false});
this.convertUnitForm.get('HYBRID').enable({emitEvent: false});
this.unitSettingForm.get('METRIC').enable({emitEvent: false});
this.unitSettingForm.get('IMPERIAL').enable({emitEvent: false});
this.unitSettingForm.get('HYBRID').enable({emitEvent: false});
} else {
this.convertUnitForm.get('METRIC').disable({emitEvent: false});
this.convertUnitForm.get('IMPERIAL').disable({emitEvent: false});
this.convertUnitForm.get('HYBRID').disable({emitEvent: false});
this.unitSettingForm.get('METRIC').disable({emitEvent: false});
this.unitSettingForm.get('IMPERIAL').disable({emitEvent: false});
this.unitSettingForm.get('HYBRID').disable({emitEvent: false});
}
});
}
@ -117,27 +114,27 @@ export class ConvertUnitSettingsPanelComponent implements OnInit {
ngOnInit() {
let unitDescription: UnitInfo;
if (this.required) {
this.convertUnitForm.get('from').setValidators(Validators.required);
this.unitSettingForm.get('from').setValidators(Validators.required);
}
if (typeof this.unit === 'string') {
this.convertUnitForm.get('convertUnit').setValue(false, {onlySelf: true});
this.convertUnitForm.get('from').setValue(this.unit);
this.unitSettingForm.get('convertUnit').setValue(false, {onlySelf: true});
this.unitSettingForm.get('from').setValue(this.unit);
unitDescription = this.unitService.getUnitInfo(this.unit);
} else if (isUndefinedOrNull(this.unit)) {
this.convertUnitForm.get('convertUnit').setValue(false, {onlySelf: true});
this.convertUnitForm.get('from').setValue(null);
this.unitSettingForm.get('convertUnit').setValue(false, {onlySelf: true});
this.unitSettingForm.get('from').setValue(null);
} else {
this.convertUnitForm.patchValue(this.unit, {emitEvent: false});
this.unitSettingForm.patchValue(this.unit, {emitEvent: false});
unitDescription = this.unitService.getUnitInfo(this.unit.from);
}
if (unitDescription?.measure) {
this.targetMeasure = unitDescription.measure;
} else {
this.convertUnitForm.get('convertUnit').disable({emitEvent: false});
this.unitSettingForm.get('convertUnit').disable({emitEvent: false});
}
if (this.disabled) {
this.convertUnitForm.disable({emitEvent: false});
this.unitSettingForm.disable({emitEvent: false});
}
}
@ -150,12 +147,12 @@ export class ConvertUnitSettingsPanelComponent implements OnInit {
}
applyUnitSettings() {
if (this.convertUnitForm.value.convertUnit) {
const formValue = this.convertUnitForm.value;
if (this.unitSettingForm.value.convertUnit) {
const formValue = this.unitSettingForm.value;
delete formValue.convertUnit;
this.unitSettingsApplied.emit(formValue as TbUnit);
} else {
this.unitSettingsApplied.emit(this.convertUnitForm.value.from);
this.unitSettingsApplied.emit(this.unitSettingForm.value.from);
}
}
}

View File

@ -185,7 +185,7 @@ import { ToggleHeaderComponent, ToggleOption } from '@shared/components/toggle-h
import { RuleChainSelectComponent } from '@shared/components/rule-chain/rule-chain-select.component';
import { ToggleSelectComponent } from '@shared/components/toggle-select.component';
import { UnitInputComponent } from '@shared/components/unit-input.component';
import { ConvertUnitSettingsPanelComponent } from '@shared/components/convert-unit-settings-panel.component';
import { UnitSettingsPanelComponent } from '@shared/components/unit-settings-panel.component';
import { MaterialIconsComponent } from '@shared/components/material-icons.component';
import { ColorPickerPanelComponent } from '@shared/components/color-picker/color-picker-panel.component';
import { TbIconComponent } from '@shared/components/icon.component';
@ -414,7 +414,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
ToggleOption,
ToggleSelectComponent,
UnitInputComponent,
ConvertUnitSettingsPanelComponent,
UnitSettingsPanelComponent,
StringAutocompleteComponent,
MaterialIconsComponent,
RuleChainSelectComponent,

View File

@ -3105,7 +3105,6 @@
"filter-user-params": "معلمات مستخدم الفلتر الفعلي",
"user-parameters": "معلمات المستخدم",
"display-label": "تسمية للعرض",
"autogenerated-label": "إنشاء تسمية تلقائية",
"order-priority": "أولوية ترتيب الحقل",
"key-filter": "فلتر المفتاح",
"key-filters": "فلاتر المفاتيح",

View File

@ -2637,7 +2637,6 @@
"filter-user-params": "Filtre de paràmetres d'usuari (predicado)",
"user-parameters": "Paràmetres d'usuari",
"display-label": "Etiqueta a mostrar",
"autogenerated-label": "Auto generar etiqueta",
"order-priority": "Prioritat orden de campos",
"key-filter": "Filtres (clau)",
"key-filters": "Filtres (claus)",

View File

@ -1972,7 +1972,6 @@
"filter-user-params": "Filtr predikátu parametrů uživatele",
"user-parameters": "Parametry uživatele",
"display-label": "Zobrazované označení",
"autogenerated-label": "Automaticky vygenerovat označení",
"order-priority": "Priority pořadí polí",
"key-filter": "Klíčový filtr",
"key-filters": "Klíčové filtry",

View File

@ -1912,7 +1912,6 @@
"filter-user-params": "Filtrerprædikat for brugerparametre",
"user-parameters": "Brugerparametre",
"display-label": "Etiket, der skal vises",
"autogenerated-label": "Generer automatisk etiket",
"order-priority": "Prioritet af feltrækkefølge",
"key-filter": "Nøglefilter",
"key-filters": "Nøglefiltre",

View File

@ -2991,7 +2991,6 @@
"filter-user-params": "Filter predicate user parameters",
"user-parameters": "User parameters",
"display-label": "Label to display",
"autogenerated-label": "Auto generate label",
"custom-label": "Custom label",
"custom-label-hint": "Enable to set your own label for the filter. When disabled, a label will be generated automatically.",
"order-priority": "Display order",
@ -5856,8 +5855,8 @@
"background-blur": "Background blur"
},
"unit": {
"conversion": {
"set-unit-conversion": "Set unit conversion",
"unit-settings": {
"unit-settings": "Unit settings",
"source-unit": "Source unit",
"source-unit-hint": "This is the unit of the stored value. The unit youre converting from. Enter the symbol your source data uses (e.g. m, km, ft, in).",

View File

@ -2573,7 +2573,6 @@
"filter-user-params": "Filtro de parámetros de usuario (predicado)",
"user-parameters": "Parámetros de usuario",
"display-label": "Etiqueta a mostrar",
"autogenerated-label": "Auto generar etiqueta",
"order-priority": "Prioridad orden de campos",
"key-filter": "Filtros (clave)",
"key-filters": "Filtros (claves)",

View File

@ -1535,7 +1535,6 @@
"filter-user-params": "Filter predicate user parameters",
"user-parameters": "User parameters",
"display-label": "Label to display",
"autogenerated-label": "Auto generate label",
"order-priority": "Field order priority",
"key-filter": "Key filter",
"key-filters": "Key filters",

View File

@ -3073,7 +3073,6 @@
"filter-user-params": "Filter predicate user parameters",
"user-parameters": "User parameters",
"display-label": "Label to display",
"autogenerated-label": "Auto generate label",
"order-priority": "Field order priority",
"key-filter": "Key filter",
"key-filters": "Key filters",

View File

@ -2992,7 +2992,6 @@
"filter-user-params": "Gebruikersparameters voor predicaten filteren",
"user-parameters": "Parameters van de gebruiker",
"display-label": "Label om weer te geven",
"autogenerated-label": "Automatisch label genereren",
"order-priority": "Prioriteit voor veldorders",
"key-filter": "Toets filter",
"key-filters": "Belangrijkste filters",

View File

@ -3082,7 +3082,6 @@
"filter-user-params": "Filtruj parametry użytkownika predykatu",
"user-parameters": "Parametry użytkownika",
"display-label": "Etykieta do wyświetlenia",
"autogenerated-label": "Automatyczne generowanie etykiety",
"order-priority": "Priorytet zamówienia pola",
"key-filter": "Filtr kluczowy",
"key-filters": "Kluczowe filtry",

View File

@ -1212,7 +1212,6 @@
"edit-filter-user-params": "Editar parâmetros de usuário de predicado de filtro",
"user-parameters": "Parâmetros de usuário",
"display-label": "Etiqueta para exibição",
"autogenerated-label": "Gerar etiqueta automaticamente",
"order-priority": "Prioridade de ordem de campo",
"key-filter": "Filtro chave",
"key-filters": "Filtros chave",

View File

@ -1535,7 +1535,6 @@
"filter-user-params": "Filter predicate user parameters",
"user-parameters": "Uporabniški parametri",
"display-label": "Oznaka za prikaz",
"autogenerated-label": "Samodejno ustvari oznako",
"order-priority": "Prednostni vrstni red",
"key-filter": "Ključni filter",
"key-filters": "Ključni filtri",

View File

@ -1987,7 +1987,6 @@
"filter-user-params": "Filtre belirteci kullanıcı parametreleri",
"user-parameters": "Kullanıcı parametreleri",
"display-label": "Görüntülenecek etiket",
"autogenerated-label": "Otomatik etiket oluştur",
"order-priority": "Alan sırası önceliği",
"key-filter": "Anahtar filtresi",
"key-filters": "Anahtar filtreleri",

View File

@ -2878,7 +2878,6 @@
"filter-user-params": "过滤谓词用户参数",
"user-parameters": "用户参数",
"display-label": "要显示的标签",
"autogenerated-label": "自动生成标签",
"order-priority": "字段顺序优先级",
"key-filter": "键名筛选器",
"key-filters": "键名筛选器",

View File

@ -2198,7 +2198,6 @@
"filter-user-params": "過濾謂詞用戶參數",
"user-parameters": "用戶參數",
"display-label": "要顯示的標籤",
"autogenerated-label": "自動生成標籤",
"order-priority": "字段順序優先級",
"key-filter": "關鍵過濾器",
"key-filters": "關鍵過濾器",