From 2d11bb3af88025a43918a8319a1063ea038853be Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 26 Jul 2024 17:32:22 +0300 Subject: [PATCH] UI: Refactoring gateway components --- .../broker-config-control.component.ts | 2 +- .../mapping-table.component.html | 2 +- .../modbus-basic-config.component.scss | 24 +++++++++++++++++++ .../modbus-basic-config.component.ts | 12 +--------- .../modbus-data-keys-panel.component.ts | 2 +- .../modbus-slave-config.component.scss | 1 - .../modbus-slave-config.component.ts | 4 ++-- .../modbus-slave-dialog.component.scss | 21 ++++++++++++++++ .../modbus-slave-dialog.component.ts | 10 ++------ .../modbus-values.component.scss | 24 +++++++++++++++++++ .../modbus-values/modbus-values.component.ts | 12 +--------- .../opc-server-config.component.html | 12 +++++----- .../workers-config-control.component.html | 4 ++-- .../gateway}/pipes/gateway-help-link.pipe.ts | 0 .../pipes/gateway-port-tooltip.pipe.ts | 0 .../widget/widget-components.module.ts | 2 +- .../directives/truncate-tooltip.directive.ts | 17 +++++++++---- 17 files changed, 99 insertions(+), 50 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss create mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss rename ui-ngx/src/app/modules/home/{ => components/widget/lib/gateway}/pipes/gateway-help-link.pipe.ts (100%) rename ui-ngx/src/app/modules/home/{ => components/widget/lib/gateway}/pipes/gateway-port-tooltip.pipe.ts (100%) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.ts index 13cf1f4f13..f7d37b167e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.ts @@ -36,7 +36,7 @@ import { CommonModule } from '@angular/common'; import { TranslateService } from '@ngx-translate/core'; import { generateSecret } from '@core/utils'; import { Subject } from 'rxjs'; -import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe'; +import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe'; import { SecurityConfigComponent } from '../security-config/security-config.component'; @Component({ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html index 7ebfb700bf..9f0566b566 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html @@ -64,7 +64,7 @@ [class.request-column]="mappingType === mappingTypeEnum.REQUESTS"> {{ column.title | translate }} - {{ mapping[column.def] }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss new file mode 100644 index 0000000000..b70fe42401 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss @@ -0,0 +1,24 @@ +/** + * 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. + */ +:host { + height: 100%; +} + +:host ::ng-deep { + .mat-mdc-tab-body-content { + overflow: hidden !important; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts index 12143fb6db..1fca768980 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts @@ -58,17 +58,7 @@ import { ModbusMasterTableComponent } from '../modbus-master-table/modbus-master ModbusMasterTableComponent, EllipsisChipListDirective, ], - styles: [` - :host { - height: 100%; - } - - :host ::ng-deep { - .mat-mdc-tab-body-content { - overflow: hidden !important; - } - } - `] + styleUrls: ['./modbus-basic-config.component.scss'], }) export class ModbusBasicConfigComponent implements ControlValueAccessor, Validator, OnDestroy { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts index f1919e7a57..5b312f52c8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts @@ -35,7 +35,7 @@ import { } from '@home/components/widget/lib/gateway/gateway-widget.models'; import { CommonModule } from '@angular/common'; import { SharedModule } from '@shared/shared.module'; -import { GatewayHelpLinkPipe } from '@home/pipes/gateway-help-link.pipe'; +import { GatewayHelpLinkPipe } from '@home/components/widget/lib/gateway/pipes/gateway-help-link.pipe'; import { generateSecret } from '@core/utils'; import { coerceBoolean } from '@shared/decorators/coercion'; import { takeUntil } from 'rxjs/operators'; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.scss index 0c2f9240be..a464832202 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.scss @@ -16,7 +16,6 @@ $server-config-header-height: 132px; :host { - .slave-content { height: calc(100% - #{$server-config-header-height}); overflow: auto; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts index 05083a087d..2a8488a2d4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts @@ -44,7 +44,7 @@ import { SharedModule } from '@shared/shared.module'; import { CommonModule } from '@angular/common'; import { Subject } from 'rxjs'; import { startWith, takeUntil } from 'rxjs/operators'; -import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe'; +import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe'; import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component'; import { ModbusValuesComponent, } from '../modbus-values/modbus-values.component'; import { isEqual } from '@core/utils'; @@ -73,7 +73,7 @@ import { isEqual } from '@core/utils'; ModbusSecurityConfigComponent, GatewayPortTooltipPipe, ], - styleUrls: ['modbus-slave-config.component.scss'], + styleUrls: ['./modbus-slave-config.component.scss'], }) export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validator, OnDestroy { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss new file mode 100644 index 0000000000..8cea184957 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss @@ -0,0 +1,21 @@ +/** + * 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. + */ +:host { + .slaves-config-container { + width: 80vw; + max-width: 900px; + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts index cbfc7cc8c2..a00a488aa0 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts @@ -49,7 +49,7 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { Router } from '@angular/router'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe'; +import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe'; import { takeUntil } from 'rxjs/operators'; import { isEqual } from '@core/utils'; @@ -77,13 +77,7 @@ import { isEqual } from '@core/utils'; ModbusSecurityConfigComponent, GatewayPortTooltipPipe, ], - styles: [` - :host { - .slaves-config-container { - width: 80vw; - max-width: 900px; } - } - `], + styleUrls: ['./modbus-slave-dialog.component.scss'], }) export class ModbusSlaveDialogComponent extends DialogComponent implements OnDestroy { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss new file mode 100644 index 0000000000..2d0782e6a5 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss @@ -0,0 +1,24 @@ +/** + * 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. + */ +:host { + .mat-mdc-tab-body-wrapper { + min-height: 320px; + } +} + +::ng-deep .mdc-evolution-chip-set__chips { + align-items: center; +} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts index caff181b6a..6bfc07c130 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts @@ -79,17 +79,7 @@ import { coerceBoolean } from '@shared/decorators/coercion'; SharedModule, EllipsisChipListDirective, ], - styles: [` - :host { - .mat-mdc-tab-body-wrapper { - min-height: 320px; - } - } - - ::ng-deep .mdc-evolution-chip-set__chips { - align-items: center; - } - `] + styleUrls: ['./modbus-values.component.scss'] }) export class ModbusValuesComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.html index ddff8f4945..4c992c0e21 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.html @@ -17,7 +17,7 @@ -->
-
gateway.server-url
+
gateway.server-url
@@ -35,7 +35,7 @@
-
{{ 'gateway.timeout' | translate }}
+
{{ 'gateway.timeout' | translate }}
@@ -54,7 +54,7 @@
-
gateway.security
+
gateway.security
@@ -65,7 +65,7 @@
-
{{ 'gateway.scan-period' | translate }}
+
{{ 'gateway.scan-period' | translate }}
@@ -86,7 +86,7 @@
-
{{ 'gateway.sub-check-period' | translate }}
+
{{ 'gateway.sub-check-period' | translate }}
@@ -108,7 +108,7 @@
-
{{ 'gateway.enable-subscription' | translate }}
+
{{ 'gateway.enable-subscription' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html index b348b49252..0a3bd4e6f3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html @@ -19,7 +19,7 @@
-
{{ 'gateway.max-number-of-workers' | translate }}
+
{{ 'gateway.max-number-of-workers' | translate }}
@@ -41,7 +41,7 @@
-
{{ 'gateway.max-messages-queue-for-worker' | translate }}
+
{{ 'gateway.max-messages-queue-for-worker' | translate }}
diff --git a/ui-ngx/src/app/modules/home/pipes/gateway-help-link.pipe.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-help-link.pipe.ts similarity index 100% rename from ui-ngx/src/app/modules/home/pipes/gateway-help-link.pipe.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-help-link.pipe.ts diff --git a/ui-ngx/src/app/modules/home/pipes/gateway-port-tooltip.pipe.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe.ts similarity index 100% rename from ui-ngx/src/app/modules/home/pipes/gateway-port-tooltip.pipe.ts rename to ui-ngx/src/app/modules/home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts index 504f98420e..51d82dece9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts @@ -109,7 +109,7 @@ import { import { NotificationTypeFilterPanelComponent } from '@home/components/widget/lib/cards/notification-type-filter-panel.component'; -import { GatewayHelpLinkPipe } from '@home/pipes/gateway-help-link.pipe'; +import { GatewayHelpLinkPipe } from '@home/components/widget/lib/gateway/pipes/gateway-help-link.pipe'; import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive'; import { BrokerConfigControlComponent diff --git a/ui-ngx/src/app/shared/directives/truncate-tooltip.directive.ts b/ui-ngx/src/app/shared/directives/truncate-tooltip.directive.ts index bf08780e11..95ec9fcf63 100644 --- a/ui-ngx/src/app/shared/directives/truncate-tooltip.directive.ts +++ b/ui-ngx/src/app/shared/directives/truncate-tooltip.directive.ts @@ -26,17 +26,24 @@ import { import { fromEvent, Subject } from 'rxjs'; import { filter, takeUntil, tap } from 'rxjs/operators'; import { MatTooltip, TooltipPosition } from '@angular/material/tooltip'; +import { coerceBoolean } from '@shared/decorators/coercion'; @Directive({ standalone: true, - selector: '[tbTruncateTooltip]', + selector: '[tbTruncateWithTooltip]', providers: [MatTooltip], - }) export class TruncateTooltipDirective implements OnInit, AfterViewInit, OnDestroy { - @Input('tbTruncateTooltip') text: string; - @Input() tooltipEnabled = true; - @Input() position: TooltipPosition = 'above'; + + @Input('tbTruncateWithTooltip') + text: string; + + @Input() + @coerceBoolean() + tooltipEnabled = true; + + @Input() + position: TooltipPosition = 'above'; private destroy$ = new Subject();