review comments adjustments

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts

@@ -24,10 +24,7 @@ import {
   ValidationErrors,
   Validator,
 } from '@angular/forms';
-import {
-  ConnectorBaseConfig,
-  ConnectorType,
-} from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { ConnectorType, ModbusBasicConfig } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { takeUntil } from 'rxjs/operators';
@@ -112,7 +109,7 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat
     this.onTouched = fn;
   }
 
-  writeValue(basicConfig: ConnectorBaseConfig): void {
+  writeValue(basicConfig: ModbusBasicConfig): void {
     const editedBase = {
       slave: basicConfig.slave || {},
       master: basicConfig.master || {},

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.html

@@ -33,7 +33,7 @@
               </mat-expansion-panel-header>
               <ng-template matExpansionPanelContent>
                 <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                  <div class="fixed-title-width" translate>
+                  <div class="fixed-title-width tb-required" translate>
                     gateway.key
                   </div>
                   <div class="tb-flex no-gap">
@@ -98,10 +98,19 @@
                   </div>
                 </div>
                 <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-                  <div class="fixed-title-width" translate>gateway.value</div>
+                  <div class="fixed-title-width tb-required" translate>gateway.value</div>
                   <div class="tb-flex no-gap">
                     <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                       <input matInput name="value" formControlName="value" placeholder="{{ 'gateway.set' | translate }}"/>
+                      <mat-icon matSuffix
+                                matTooltipPosition="above"
+                                matTooltipClass="tb-error-tooltip"
+                                [matTooltip]="('gateway.value-required') | translate"
+                                *ngIf="keyControl.get('value').hasError('required') &&
+                                           keyControl.get('value').touched"
+                                class="tb-error">
+                        warning
+                      </mat-icon>
                     </mat-form-field>
                   </div>
                 </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.html

@@ -68,10 +68,21 @@
     </div>
     <ng-template #serialPort>
       <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-        <div class="fixed-title-width" translate>gateway.port</div>
+        <div class="fixed-title-width tb-required" translate>gateway.port</div>
         <div class="tb-flex no-gap">
           <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
             <input matInput name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
+            <mat-icon matSuffix
+                      matTooltipPosition="above"
+                      matTooltipClass="tb-error-tooltip"
+                      [matTooltip]="slaveConfigFormGroup.get('serialPort') | getGatewayPortTooltip"
+                      *ngIf="(slaveConfigFormGroup.get('serialPort').hasError('required') ||
+                                            slaveConfigFormGroup.get('serialPort').hasError('min') ||
+                                            slaveConfigFormGroup.get('serialPort').hasError('max')) &&
+                                            slaveConfigFormGroup.get('serialPort').touched"
+                      class="tb-error">
+              warning
+            </mat-icon>
           </mat-form-field>
         </div>
       </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.html

@@ -28,10 +28,19 @@
   </mat-toolbar>
   <div mat-dialog-content [formGroup]="slaveConfigFormGroup" class="tb-form-panel">
     <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-      <div class="fixed-title-width" translate>gateway.name</div>
+      <div class="fixed-title-width tb-required" translate>gateway.name</div>
       <div class="tb-flex no-gap">
         <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
           <input matInput name="value" formControlName="name" placeholder="{{ 'gateway.set' | translate }}"/>
+          <mat-icon matSuffix
+                    matTooltipPosition="above"
+                    matTooltipClass="tb-error-tooltip"
+                    [matTooltip]="('gateway.name-required') | translate"
+                    *ngIf="slaveConfigFormGroup.get('name').hasError('required') &&
+                                           slaveConfigFormGroup.get('name').touched"
+                    class="tb-error">
+            warning
+          </mat-icon>
         </mat-form-field>
       </div>
     </div>
@@ -89,10 +98,21 @@
           </div>
           <ng-template #serialPort>
             <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-              <div class="fixed-title-width" translate>gateway.port</div>
+              <div class="fixed-title-width tb-required" translate>gateway.port</div>
               <div class="tb-flex no-gap">
                 <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
                   <input matInput name="value" formControlName="serialPort" placeholder="{{ 'gateway.set' | translate }}"/>
+                  <mat-icon matSuffix
+                            matTooltipPosition="above"
+                            matTooltipClass="tb-error-tooltip"
+                            [matTooltip]="slaveConfigFormGroup.get('serialPort') | getGatewayPortTooltip"
+                            *ngIf="(slaveConfigFormGroup.get('serialPort').hasError('required') ||
+                                            slaveConfigFormGroup.get('serialPort').hasError('min') ||
+                                            slaveConfigFormGroup.get('serialPort').hasError('max')) &&
+                                            slaveConfigFormGroup.get('serialPort').touched"
+                            class="tb-error">
+                    warning
+                  </mat-icon>
                 </mat-form-field>
               </div>
             </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts

@@ -118,7 +118,7 @@ export class ModbusSlaveDialogComponent extends DialogComponent<ModbusSlaveDialo
       type: [ModbusProtocolType.TCP, [Validators.required]],
       host: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
       port: [null, [Validators.required, Validators.min(PortLimits.MIN), Validators.max(PortLimits.MAX)]],
-      serialPort: ['', [Validators.pattern(noLeadTrailSpacesRegex)]],
+      serialPort: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
       method: [ModbusMethodType.SOCKET, []],
       baudrate: [null, []],
       stopbits: [null, []],

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mqtt-basic-config/mqtt-basic-config.component.ts

@@ -25,8 +25,8 @@ import {
   Validator,
 } from '@angular/forms';
 import {
-  ConnectorBaseConfig,
   MappingType,
+  MQTTBasicConfig,
   RequestMappingData,
   RequestType,
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
@@ -112,7 +112,7 @@ export class MqttBasicConfigComponent implements ControlValueAccessor, Validator
     this.onTouched = fn;
   }
 
-  writeValue(basicConfig: ConnectorBaseConfig): void {
+  writeValue(basicConfig: MQTTBasicConfig): void {
     const editedBase = {
       workers: {
         maxNumberOfWorkers: basicConfig.broker?.maxNumberOfWorkers,

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-ua-basic-config/opc-ua-basic-config.component.ts

@@ -25,9 +25,9 @@ import {
   Validator,
 } from '@angular/forms';
 import {
-  ConnectorBaseConfig,
   ConnectorType,
   MappingType,
+  OPCBasicConfig,
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
@@ -109,7 +109,7 @@ export class OpcUaBasicConfigComponent implements ControlValueAccessor, Validato
     this.onTouched = fn;
   }
 
-  writeValue(basicConfig: ConnectorBaseConfig): void {
+  writeValue(basicConfig: OPCBasicConfig): void {
     const editedBase = {
       server: basicConfig.server || {},
       mapping: basicConfig.mapping || [],

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts

@@ -50,6 +50,7 @@ import { UtilsService } from '@core/services/utils.service';
 import { EntityType } from '@shared/models/entity-type.models';
 import {
   AddConnectorConfigData,
+  ConnectorBaseConfig,
   ConnectorConfigurationModes,
   ConnectorType,
   GatewayConnector,
@@ -720,7 +721,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
       connector.key = 'auto';
     }
     if (!connector.configurationJson) {
-      connector.configurationJson = {};
+      connector.configurationJson = {} as ConnectorBaseConfig;
     }
     connector.basicConfig = connector.configurationJson;
 

ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts

@@ -174,15 +174,23 @@ export interface ConnectorSecurity {
 
 export type ConnectorMapping = DeviceConnectorMapping | RequestMappingData | ConverterConnectorMapping;
 
-export interface ConnectorBaseConfig {
-  mapping?: DeviceConnectorMapping[];
-  dataMapping?: ConverterConnectorMapping[];
-  requestsMapping?: Record<RequestType, RequestMappingData> | RequestMappingData[];
-  server?: ServerConfig;
-  broker?: BrokerConfig;
-  workers?: WorkersConfig;
-  master?: ModbusMasterConfig;
-  slave?: ModbusSlave;
+export type ConnectorBaseConfig = MQTTBasicConfig | OPCBasicConfig | ModbusBasicConfig;
+
+export interface MQTTBasicConfig {
+  dataMapping: ConverterConnectorMapping[];
+  requestsMapping: Record<RequestType, RequestMappingData> | RequestMappingData[];
+  broker: BrokerConfig;
+  workers: WorkersConfig;
+}
+
+export interface OPCBasicConfig {
+  mapping: DeviceConnectorMapping[];
+  server: ServerConfig;
+}
+
+export interface ModbusBasicConfig {
+  master: ModbusMasterConfig;
+  slave: ModbusSlave;
 }
 
 export interface WorkersConfig {

ui-ngx/src/app/shared/abstract/datasource/datasource.abstract.ts

@@ -18,11 +18,11 @@ import { DataSource } from '@angular/cdk/collections';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
-export abstract class TbDatasource<DataType> implements DataSource<DataType> {
+export abstract class TbDatasource<T> implements DataSource<T> {
 
-  protected dataSubject = new BehaviorSubject<Array<DataType>>([]);
+  protected dataSubject = new BehaviorSubject<Array<T>>([]);
 
-  connect(): Observable<Array<DataType>> {
+  connect(): Observable<Array<T>> {
     return this.dataSubject.asObservable();
   }
 
@@ -30,19 +30,19 @@ export abstract class TbDatasource<DataType> implements DataSource<DataType> {
     this.dataSubject.complete();
   }
 
-  loadData(data: Array<DataType>): void {
+  loadData(data: Array<T>): void {
     this.dataSubject.next(data);
   }
 
   isEmpty(): Observable<boolean> {
     return this.dataSubject.pipe(
-      map((data: DataType[]) => !data.length)
+      map((data: T[]) => !data.length)
     );
   }
 
   total(): Observable<number> {
     return this.dataSubject.pipe(
-      map((data: DataType[]) => data.length)
+      map((data: T[]) => data.length)
     );
   }
 }

ui-ngx/src/app/shared/directives/ellipsis-chip-list/ellipsis-chip-list.directive.ts

@@ -21,7 +21,6 @@ import {
   Input,
   OnDestroy,
   Renderer2,
-  AfterViewInit,
 } from '@angular/core';
 import { isEqual } from '@core/utils';
 import { TranslateService } from '@ngx-translate/core';
@@ -34,7 +33,7 @@ import { takeUntil } from 'rxjs/operators';
   selector: '[tb-ellipsis-chip-list]',
   standalone: true,
 })
-export class EllipsisChipListDirective implements OnDestroy, AfterViewInit {
+export class EllipsisChipListDirective implements OnDestroy {
 
   chipsValue: string[];
 
@@ -70,9 +69,7 @@ export class EllipsisChipListDirective implements OnDestroy, AfterViewInit {
         }
       });
     });
-  }
 
-  ngAfterViewInit(): void {
     this.intersectionObserver.observe(this.el.nativeElement);
   }
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2852,8 +2852,8 @@
         "device-name-filter-hint": "This field supports Regular expressions to filter incoming data by device name.",
         "device-name-filter-required": "Device name filter is required.",
         "details": "Details",
-        "delete-mapping-title": "Delete mapping ?",
-        "delete-slave-title": "Delete slave ?",
+        "delete-mapping-title": "Delete mapping?",
+        "delete-slave-title": "Delete slave?",
         "download-configuration-file": "Download configuration file",
         "download-docker-compose": "Download docker-compose.yml for your gateway",
         "enable-remote-logging": "Enable remote logging",