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

UI: improvements for connectors config

Browse Source
This commit is contained in:
Dmitriymush 2024-05-02 16:57:25 +03:00
parent 46e92d699d
commit fb91898bd3
5 changed files with 35 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts
View File

@ -79,6 +79,10 @@ export class EllipsisChipListDirective implements OnDestroy {
chipNodes.forEach((chip) => {
this.renderer.setStyle(chip, 'display', 'inline-flex');
const textLabelContainer = chip.querySelector('.mdc-evolution-chip__text-label');
this.applyMaxChipTextWidth(textLabelContainer, (availableWidth / 3));
if ((usedWidth + (chip.offsetWidth + margin) <= availableWidth) && (visibleChipsCount < this.chipsValue.length)) {
visibleChipsCount++;
usedWidth += chip.offsetWidth + margin;
@ -104,15 +108,19 @@ export class EllipsisChipListDirective implements OnDestroy {
this.renderer.setStyle(ellipsisChip, 'display', 'none');
this.renderer.setStyle(chipNodes[0], 'display', 'inline-flex');
this.renderer.setStyle(textLabelContainer, 'max-width', computedTextWidth + 'px');
this.renderer.setStyle(textLabelContainer, 'overflow', 'hidden');
this.renderer.setStyle(textLabelContainer, 'text-overflow', 'ellipsis');
this.renderer.setStyle(textLabelContainer, 'white-space', 'nowrap');
this.applyMaxChipTextWidth(textLabelContainer, computedTextWidth);
} else {
this.renderer.setStyle(ellipsisChip, 'display', 'none');
}
}
private applyMaxChipTextWidth(element: HTMLElement, widthLimit: number): void {
this.renderer.setStyle(element, 'max-width', widthLimit + 'px');
this.renderer.setStyle(element, 'overflow', 'hidden');
this.renderer.setStyle(element, 'text-overflow', 'ellipsis');
this.renderer.setStyle(element, 'white-space', 'nowrap');
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();

2
ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss
View File

@ -20,7 +20,7 @@
max-width: 700px;
.title-container {
max-width: 14vw;
max-width: 11vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap

8
ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html
View File

@ -595,12 +595,14 @@
<div class="fixed-title-width tb-required" translate>gateway.response-timeout</div>
<div class="tb-flex no-gap">
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
<input matInput name="value" type="number" formControlName="responseTimeout" placeholder="{{ 'gateway.set' | translate }}"/>
<input matInput name="value" type="number" min="1" formControlName="responseTimeout"
placeholder="{{ 'gateway.set' | translate }}"/>
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="('gateway.response-timeout-required') | translate"
*ngIf="mappingForm.get('requestValue.serverSideRpc.responseTimeout').hasError('required') &&
[matTooltip]="responseTimeoutErrorTooltip"
*ngIf="(mappingForm.get('requestValue.serverSideRpc.responseTimeout').hasError('required') ||
mappingForm.get('requestValue.serverSideRpc.responseTimeout').hasError('min')) &&
mappingForm.get('requestValue.serverSideRpc.responseTimeout').touched"
class="tb-error">
warning

17
ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
View File

@ -50,6 +50,7 @@ import { startWith, takeUntil } from 'rxjs/operators';
import { MatButton } from '@angular/material/button';
import { TbPopoverService } from '@shared/components/popover.service';
import { MappingDataKeysPanelComponent } from '@home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'tb-mapping-dialog',
@ -105,7 +106,8 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
private fb: FormBuilder,
private popoverService: TbPopoverService,
private renderer: Renderer2,
private viewContainerRef: ViewContainerRef) {
private viewContainerRef: ViewContainerRef,
private translate: TranslateService) {
super(store, router, dialogRef);
this.createMappingForm();
@ -135,6 +137,17 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
return this.mappingForm.get('requestType').value;
}
get responseTimeoutErrorTooltip(): string {
const control = this.mappingForm.get('requestValue.serverSideRpc.responseTimeout');
if (control.hasError('required')) {
return this.translate.instant('gateway.response-timeout-required');
} else if (control.hasError('min')) {
return this.translate.instant('gateway.response-timeout-limits-error', {min: 1});
}
return '';
}
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
@ -215,7 +228,7 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
responseTopicExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
valueExpression: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
responseTopicQoS: [0, []],
responseTimeout: [10000, [Validators.required]],
responseTimeout: [10000, [Validators.required, Validators.min(1)]],
})
}));
this.mappingForm.get('requestType').valueChanges.pipe(

5
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3033,22 +3033,19 @@
"requests-mapping": "Requests mapping",
"requests-mapping-hint": "MQTT Connector requests allows you to connect, disconnect, process attribute requests from the device, handle attribute updates on the server and RPC processing configuration.",
"request-topic-expression": "Request topic expression",
"request-topic-expression-hint": "Request topic expression some hint",
"request-topic-expression-required": "Request topic expression is required.",
"response-timeout": "Response timeout (ms)",
"response-timeout-required": "Response timeout is required.",
"response-timeout-limits-error": "Timeout must be more then {{min}} ms.",
"response-topic-Qos": "Response topic QoS",
"response-topic-Qos-hint": "MQTT Quality of Service (QoS) is an agreement between the message sender and receiver that defines the level of delivery guarantee for a specific message.",
"response-topic-expression": "Response topic expression",
"response-topic-expression-hint": "Response topic expression hint",
"response-topic-expression-required": "Response topic expression is required.",
"response-value-expression": "Response value expression",
"response-value-expression-hint": "Response value expression hint",
"response-value-expression-required": "Response value expression is required.",
"value": "Value",
"value-required": "Value is required.",
"value-expression": "Value expression",
"value-expression-hint": "Value expression hint",
"value-expression-required": "Value expression is required.",
"with-response": "With response",
"without-response": "Without response",