From 9ce24b8ee307ed5bdc0979b15d68f60b957646ff Mon Sep 17 00:00:00 2001 From: Dmitriymush Date: Mon, 29 Apr 2024 17:47:13 +0300 Subject: [PATCH] UI: gateway dashboard improvements for connectors config --- .../ellipsis-chip-list.directive.ts | 61 ++++++++++++------- .../mapping-data-keys-panel.component.html | 4 +- .../mapping-data-keys-panel.component.scss | 9 ++- .../dialog/mapping-dialog.component.html | 6 +- .../dialog/mapping-dialog.component.scss | 4 ++ .../gateway/gateway-connectors.component.html | 4 +- .../gateway/gateway-connectors.component.ts | 29 +++++---- 7 files changed, 77 insertions(+), 40 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts index ac9e976e50..fd7ed7e61e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/ellipsis-chip-list.directive.ts @@ -63,33 +63,52 @@ export class EllipsisChipListDirective implements OnDestroy { private adjustChips(): void { const chipListElement = this.el.nativeElement; - const ellipsisText = this.el.nativeElement.querySelector('.ellipsis-text'); - const chipNodes = chipListElement.querySelectorAll('mat-chip:not(.ellipsis-chip)'); const ellipsisChip = this.el.nativeElement.querySelector('.ellipsis-chip'); - this.renderer.setStyle(ellipsisChip,'display', 'inline-flex'); - ellipsisText.innerHTML = this.translate.instant('gateway.ellipsis-chips-text', - {count: (this.chipsValue.length)}); - const margin = parseFloat(this.window.getComputedStyle(ellipsisChip).marginLeft) || 0; - const availableWidth = chipListElement.offsetWidth - (ellipsisChip.offsetWidth + margin); - let usedWidth = 0; - let visibleChipsCount = 0; + const chipNodes = chipListElement.querySelectorAll('mat-chip:not(.ellipsis-chip)'); + + if (this.chipsValue.length > 1) { + const ellipsisText = this.el.nativeElement.querySelector('.ellipsis-text'); + this.renderer.setStyle(ellipsisChip, 'display', 'inline-flex'); + ellipsisText.innerHTML = this.translate.instant('gateway.ellipsis-chips-text', + {count: (this.chipsValue.length)}); - chipNodes.forEach((chip) => { - this.renderer.setStyle(chip, 'display', 'inline-flex'); - if ((usedWidth + (chip.offsetWidth + margin) <= availableWidth) && (visibleChipsCount < this.chipsValue.length)) { - visibleChipsCount++; - usedWidth += chip.offsetWidth + margin; - } else { - this.renderer.setStyle(chip, 'display', 'none'); + const availableWidth = chipListElement.offsetWidth - (ellipsisChip.offsetWidth + margin); + let usedWidth = 0; + let visibleChipsCount = 0; + + chipNodes.forEach((chip) => { + this.renderer.setStyle(chip, 'display', 'inline-flex'); + if ((usedWidth + (chip.offsetWidth + margin) <= availableWidth) && (visibleChipsCount < this.chipsValue.length)) { + visibleChipsCount++; + usedWidth += chip.offsetWidth + margin; + } else { + this.renderer.setStyle(chip, 'display', 'none'); + } + }); + + ellipsisText.innerHTML = this.translate.instant('gateway.ellipsis-chips-text', + {count: (this.chipsValue.length - visibleChipsCount)}); + + if (visibleChipsCount === this.chipsValue?.length) { + this.renderer.setStyle(ellipsisChip, 'display', 'none'); } - }); + } else if (this.chipsValue.length === 1) { + this.renderer.setStyle(ellipsisChip, 'display', 'none'); + const chipLabelContainer = chipNodes[0].querySelector('.mdc-evolution-chip__action'); + const textLabelContainer = chipLabelContainer.querySelector('.mdc-evolution-chip__text-label'); + const leftPadding = parseFloat(this.window.getComputedStyle(chipLabelContainer).paddingLeft) || 0; + const rightPadding = parseFloat(this.window.getComputedStyle(chipLabelContainer).paddingRight) || 0; - ellipsisText.innerHTML = this.translate.instant('gateway.ellipsis-chips-text', - {count: (this.chipsValue.length - visibleChipsCount)}); + const computedTextWidth = chipListElement.offsetWidth - margin - + (leftPadding + rightPadding); - if (visibleChipsCount === this.chipsValue?.length) { - this.renderer.setStyle(ellipsisChip,'display', 'none'); + 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'); + } else { + this.renderer.setStyle(ellipsisChip, 'display', 'none'); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.html index 95274d54e8..4c3a6434fd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.html @@ -26,7 +26,9 @@ - {{ keyControl.get('key').value + '-' + valueTitle(keyControl.get('value').value) }} +
{{ keyControl.get('key').value }}
+ {{ '-' }} +
{{ valueTitle(keyControl.get('value').value) }}
 diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss index 64233efc6f..7f6aef05c0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-data-keys-panel.component.scss @@ -16,9 +16,16 @@ :host { .tb-mapping-keys-panel { - min-width: 700px; + width: 77vw; max-width: 700px; + .title-container { + max-width: 14vw; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap + } + .key-panel { height: 500px; overflow: auto; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html index 083708ce4c..97366bd26b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.html @@ -98,7 +98,7 @@ *ngIf="converterType === ConvertorTypeEnum.BYTES || converterType === ConvertorTypeEnum.JSON">
gateway.attributes
-
+
{{ attribute }} @@ -118,7 +118,7 @@
gateway.timeseries
-
+
{{ telemetry }} @@ -163,7 +163,7 @@
{{ 'gateway.extension-configuration-hint' | translate }}
gateway.keys
-
+
{{ telemetry }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss index 8a35e7b17d..db98bc07cb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.scss @@ -36,6 +36,10 @@ max-height: 670px; height: 670px; } + + .ellipsis-chips-container { + max-width: 70%; + } } :host ::ng-deep { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html index a73015524d..3a7f5403b9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html @@ -317,7 +317,7 @@
+ placeholder="{{ 'gateway.set' | translate }}"/> + placeholder="{{ 'gateway.set' | translate }}"/> this.ctx.ngZone.run(() => { + onDataUpdated: () => this.ctx.ngZone.run(() => { this.onDataUpdated(); }), onDataUpdateError: (subscription, e) => this.ctx.ngZone.run(() => { @@ -363,17 +364,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie this.activeData = data.data.filter(value => this.activeConnectors.includes(value.key)); this.combineData(); this.generateSubscription(); - if (this.initialConnector) { - const clientConnectorData = data.data.find(attr => attr.key === this.initialConnector.name); - if (clientConnectorData) { - clientConnectorData.value = typeof clientConnectorData.value === 'string' ? - JSON.parse(clientConnectorData.value) : clientConnectorData.value; - - if (this.isConnectorSynced(clientConnectorData) && clientConnectorData.value.configurationJson) { - this.setFormValue(clientConnectorData.value); - } - } - } + this.setClientData(data); }); this.inactiveConnectorsDataSource.loadAttributes(this.device, AttributeScope.SHARED_SCOPE, this.pageLink, reload).subscribe(data => { this.sharedAttributeData = data.data.filter(value => this.activeConnectors.includes(value.key)); @@ -723,4 +714,18 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie this.connectorForm.patchValue(connector, {emitEvent: false}); this.connectorForm.markAsPristine(); } + + private setClientData(data: PageData): void { + if (this.initialConnector) { + const clientConnectorData = data.data.find(attr => attr.key === this.initialConnector.name); + if (clientConnectorData) { + clientConnectorData.value = typeof clientConnectorData.value === 'string' ? + JSON.parse(clientConnectorData.value) : clientConnectorData.value; + + if (this.isConnectorSynced(clientConnectorData) && clientConnectorData.value.configurationJson) { + this.setFormValue(clientConnectorData.value); + } + } + } + } }