dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added calculated field responsive styles

Browse Source
This commit is contained in:
mpetrov 2025-02-12 15:57:12 +02:00
parent 722c707591
commit e542267295
11 changed files with 120 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.html
View File

@ -18,19 +18,19 @@
<div class="flex flex-col gap-3">
<div class="tb-form-table">
<div class="tb-form-table-header">
<div class="tb-form-table-header-cell w-1/6">{{ 'calculated-fields.argument-name' | translate }}</div>
<div class="tb-form-table-header-cell w-1/3">{{ 'calculated-fields.datasource' | translate }}</div>
<div class="tb-form-table-header-cell w-1/6">{{ 'common.type' | translate }}</div>
<div class="tb-form-table-header-cell w-1/6">{{ 'entity.key' | translate }}</div>
<div class="tb-form-table-header-cell w-1/6 lt-sm:!w-1/3 lt-md:w-1/4" tbTruncateWithTooltip>{{ 'calculated-fields.argument-name' | translate }}</div>
<div class="tb-form-table-header-cell w-1/3 lt-sm:hidden">{{ 'calculated-fields.datasource' | translate }}</div>
<div class="tb-form-table-header-cell w-1/6 lt-md:hidden">{{ 'common.type' | translate }}</div>
<div class="tb-form-table-header-cell w-1/6 lt-sm:w-1/3">{{ 'entity.key' | translate }}</div>
<div class="tb-form-table-header-cell w-24 min-w-24"></div>
</div>
<div class="tb-form-table-body">
@for (group of argumentsFormArray.controls; track group) {
<div [formGroup]="group" class="tb-form-table-row">
<mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic">
<mat-form-field appearance="outline" class="tb-inline-field w-1/6 lt-sm:!w-1/3 lt-md:w-1/4" subscriptSizing="dynamic">
<input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}">
</mat-form-field>
<section class="flex w-1/3 gap-2">
<section class="flex w-1/3 gap-2 lt-sm:hidden">
@if (group.get('refEntityId')?.get('id')?.value) {
<ng-container [formGroup]="group.get('refEntityId')">
<mat-form-field appearance="outline" class="tb-inline-field flex-1" subscriptSizing="dynamic">
@ -63,7 +63,7 @@
}
</section>
<ng-container [formGroup]="group.get('refEntityKey')">
<mat-form-field appearance="outline" class="tb-inline-field w-1/6" subscriptSizing="dynamic">
<mat-form-field appearance="outline" class="tb-inline-field w-1/6 lt-md:hidden" subscriptSizing="dynamic">
@if (group.get('refEntityKey').get('type').value; as type) {
<mat-select [value]="type" formControlName="type">
<mat-option [value]="type">
@ -72,9 +72,9 @@
</mat-select>
}
</mat-form-field>
<mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6">
<mat-chip-listbox formControlName="key" class="tb-inline-field w-1/6 lt-sm:w-1/3">
<mat-chip>
<div tbTruncateWithTooltip class="max-w-25">
<div tbTruncateWithTooltip>
{{ group.get('refEntityKey').get('key').value }}
</div>
</mat-chip>

6
ui-ngx/src/app/modules/home/components/calculated-fields/components/arguments-table/calculated-field-arguments-table.component.scss
View File

@ -27,4 +27,10 @@
font-size: 14px;
}
}
.mat-mdc-standard-chip {
.mdc-evolution-chip__cell--primary, .mdc-evolution-chip__action--primary, .mdc-evolution-chip__text-label {
overflow: hidden;
}
}
}

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div class="w-screen max-w-5xl">
<div class="debug-dialog-container flex max-w-5xl flex-col lt-sm:h-full lt-sm:!w-full">
<mat-toolbar color="primary">
<h2>{{ 'calculated-fields.debugging' | translate}}</h2>
<span class="flex-1"></span>
@ -25,7 +25,7 @@
<mat-icon class="material-icons">close</mat-icon>
</button>
</mat-toolbar>
<div mat-dialog-content class="tb-form-panel stroked debug-dialog-content">
<div mat-dialog-content class="tb-form-panel stroked debug-dialog-content lt-sm:flex-1">
<tb-event-table
[tenantId]="data.tenantId"
[debugEventTypes]="[debugEventTypes.DEBUG_CALCULATED_FIELD]"

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/debug-dialog/calculated-field-debug-dialog.component.scss
View File

@ -14,8 +14,12 @@
* limitations under the License.
*/
:host {
.debug-dialog-container {
width: 80vw;
.debug-dialog-content {
height: 65vh;
border-radius: 0;
}
}
}

2
ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<div [formGroup]="fieldFormGroup" class="h-full w-screen min-w-80 max-w-4xl">
<div [formGroup]="fieldFormGroup" class="max-w-4xl">
<mat-toolbar color="primary">
<h2>{{ 'entity.type-calculated-field' | translate}}</h2>
<span class="flex-1"></span>

4
ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.html
View File

@ -19,7 +19,7 @@
<div>{{ 'calculated-fields.arguments' | translate }}</div>
<div class="tb-form-table">
<div class="tb-form-table-header">
<div class="tb-form-table-header-cell w-1/4">{{ 'calculated-fields.argument-name' | translate }}</div>
<div class="tb-form-table-header-cell w-1/4" tbTruncateWithTooltip>{{ 'calculated-fields.argument-name' | translate }}</div>
<div class="tb-form-table-header-cell flex-1">{{ 'common.value' | translate }}</div>
</div>
<div class="tb-form-table-body">
@ -28,7 +28,7 @@
<mat-form-field appearance="outline" class="tb-inline-field w-1/4" subscriptSizing="dynamic">
<input matInput formControlName="argumentName" placeholder="{{ 'action.set' | translate }}">
</mat-form-field>
<tb-value-input class="flex-1" [required]="false" formControlName="value"/>
<tb-value-input class="flex-1 argument-value" [required]="false" formControlName="value"/>
</div>
}
</div>

29
ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.scss Normal file
View File

@ -0,0 +1,29 @@
/**
* Copyright © 2016-2024 The Thingsboard Authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use '../../../../../../../scss/constants' as constants;
:host::ng-deep {
.tb-form-table-row {
.argument-value {
.tb-value-type.row {
@media #{constants.$mat-lt-sm} {
width: 100px;
min-width: 100px;
}
}
}
}
}

1
ui-ngx/src/app/modules/home/components/calculated-fields/components/test-arguments/calculated-field-test-arguments.component.ts
View File

@ -30,6 +30,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
selector: 'tb-calculated-field-test-arguments',
templateUrl: './calculated-field-test-arguments.component.html',
styleUrls: ['./calculated-field-test-arguments.component.scss'],
providers: [
{
provide: NG_VALUE_ACCESSOR,

6
ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
View File

@ -15,7 +15,7 @@
limitations under the License.
-->
<form class="test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
<form #testScriptContainer class="test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
<mat-toolbar class="flex justify-between" color="primary">
<h2>{{ 'calculated-fields.test-script-function' | translate }} ({{ 'api-usage.tbel' | translate }})</h2>
<button mat-icon-button
@ -26,7 +26,7 @@
</mat-toolbar>
<div mat-dialog-content class="relative">
<div class="tb-absolute-fill">
<div class="tb-fullscreen-panel flex size-full flex-row">
<div class="tb-fullscreen-panel flex size-full flex-row lt-md:flex-col">
<div #leftPanel class="test-block-content overflow-hidden">
<div class="relative size-full min-w-64">
<div class="block-label-container left">
@ -47,7 +47,7 @@
</div>
<div #rightPanel>
<div #topRightPanel class="test-block-content">
<div class="relative flex size-full min-w-96 gap-2">
<div class="relative flex size-full min-w-80 gap-2">
<div class="block-label-container right-top">
<span class="block-label">{{ 'calculated-fields.arguments' | translate }}</span>
</div>

63
ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts
View File

@ -51,6 +51,7 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
@ViewChild('rightPanel', {static: true}) rightPanelElmRef: ElementRef<HTMLElement>;
@ViewChild('topRightPanel', {static: true}) topRightPanelElmRef: ElementRef<HTMLElement>;
@ViewChild('bottomRightPanel', {static: true}) bottomRightPanelElmRef: ElementRef<HTMLElement>;
@ViewChild('testScriptContainer', {static: true}) testScriptContainer: ElementRef<HTMLElement>;
@ViewChild('expressionContent', {static: true}) expressionContent: JsonContentComponent;
@ -64,6 +65,9 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
readonly ScriptLanguage = ScriptLanguage;
readonly functionArgs = Object.keys(this.data.arguments);
private testScriptResize: ResizeObserver;
private splitObjects: SplitObject[] = [];
constructor(protected store: Store<AppState>,
protected router: Router,
@Inject(MAT_DIALOG_DATA) public data: CalculatedFieldTestScriptDialogData,
@ -80,12 +84,7 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
}
ngAfterViewInit(): void {
this.initSplitLayout(
this.leftPanelElmRef.nativeElement,
this.rightPanelElmRef.nativeElement,
this.topRightPanelElmRef.nativeElement,
this.bottomRightPanelElmRef.nativeElement
);
this.observeResize();
}
cancel(): void {
@ -140,18 +139,58 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
return !this.calculatedFieldScriptTestFormGroup.get('expression').invalid;
}
private initSplitLayout(leftPanel, rightPanel, topRightPanel, bottomRightPanel): void {
Split([leftPanel, rightPanel], {
sizes: [50, 50],
gutterSize: 8,
cursor: 'col-resize'
private observeResize(): void {
this.testScriptResize = new ResizeObserver(() => {
this.updateSizes();
});
this.testScriptResize.observe(this.testScriptContainer.nativeElement);
}
private updateSizes(): void {
this.initSplitLayout(this.testScriptContainer.nativeElement.clientWidth <= 960);
}
private initSplitLayout(smallMode = false): void {
const [leftPanel, rightPanel, topRightPanel, bottomRightPanel] = [
this.leftPanelElmRef.nativeElement,
this.rightPanelElmRef.nativeElement,
this.topRightPanelElmRef.nativeElement,
this.bottomRightPanelElmRef.nativeElement
] as unknown as string[];
this.splitObjects.forEach(obj => obj.destroy());
this.splitObjects = [];
if (smallMode) {
this.splitObjects.push(
Split([leftPanel, rightPanel], {
sizes: [33, 67],
gutterSize: 8,
cursor: 'row-resize',
direction: 'vertical'
}),
Split([topRightPanel, bottomRightPanel], {
sizes: [50, 50],
gutterSize: 8,
cursor: 'row-resize',
direction: 'vertical'
});
}),
);
} else {
this.splitObjects.push(
Split([leftPanel, rightPanel], {
sizes: [50, 50],
gutterSize: 8,
cursor: 'col-resize'
}),
Split([topRightPanel, bottomRightPanel], {
sizes: [50, 50],
gutterSize: 8,
cursor: 'row-resize',
direction: 'vertical'
})
);
}
}
}

8
ui-ngx/src/app/modules/home/components/event/event-table-config.ts
View File

@ -380,7 +380,7 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
}
),
new EntityTableColumn<Event>('messageId', 'event.message-id', '85px',
(entity) => `<span style="display: inline-block; width: 9ch">${entity.body.msgId?.substring(0, 8)}…</span>`,
(entity) => entity.body.msgId ? `<span style="display: inline-block; width: 9ch">${entity.body.msgId?.substring(0, 8)}…</span>` : '-',
() => ({padding: '0 12px 0 0'}),
false,
() => ({padding: '0 12px 0 0'}),
@ -394,13 +394,13 @@ export class EventTableConfig extends EntityTableConfig<Event, TimePageLink> {
'font-size': '16px',
color: 'rgba(0,0,0,.87)'
},
isEnabled: () => true,
onAction: ($event, entity) => entity.body.msgId,
isEnabled: (entity) => !!entity.body.msgId,
onAction: (_, entity) => entity.body.msgId,
type: CellActionDescriptorType.COPY_BUTTON
}
),
new EntityTableColumn<Event>('messageType', 'event.message-type', '100px',
(entity) => entity.body.msgType,
(entity) => entity.body.msgType ?? '-',
() => ({padding: '0 12px 0 0'}),
false
),