Merge branch 'task/4098-modbus-tabs-validation' into improvements/050824-gateway

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

@@ -23,6 +23,16 @@
     <tb-modbus-master-table formControlName="master"></tb-modbus-master-table>
   </mat-tab>
   <mat-tab label="{{ 'gateway.server-config' | translate }}">
+    <div class="tb-form-panel no-border no-padding padding-top">
+      <div class="tb-form-hint tb-primary-fill tb-flex center">{{ 'gateway.hints.modbus-server' | translate }}</div>
+      <div class="tb-form-row" fxLayoutAlign="space-between center">
+        <mat-slide-toggle class="mat-slide" [formControl]="enableSlaveControl">
+          <mat-label>
+            {{ 'gateway.enable' | translate }}
+          </mat-label>
+        </mat-slide-toggle>
+      </div>
+    </div>
     <tb-modbus-slave-config formControlName="slave"></tb-modbus-slave-config>
   </mat-tab>
 </mat-tab-group>

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

@@ -16,9 +16,3 @@
 :host {
   height: 100%;
 }
-
-:host ::ng-deep {
-  .mat-mdc-tab-body-content {
-    overflow: hidden !important;
-  }
-}

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

@@ -18,13 +18,15 @@ import { ChangeDetectionStrategy, Component, forwardRef, Input, OnDestroy, Templ
 import {
   ControlValueAccessor,
   FormBuilder,
+  FormControl,
   FormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
+  UntypedFormControl,
   ValidationErrors,
   Validator,
 } from '@angular/forms';
-import { ConnectorType, ModbusBasicConfig } from '@home/components/widget/lib/gateway/gateway-widget.models';
+import { 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';
@@ -33,6 +35,7 @@ import { Subject } from 'rxjs';
 import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive';
 import { ModbusSlaveConfigComponent } from '../modbus-slave-config/modbus-slave-config.component';
 import { ModbusMasterTableComponent } from '../modbus-master-table/modbus-master-table.component';
+import { isEqual } from '@core/utils';
 
 @Component({
   selector: 'tb-modbus-basic-config',
@@ -66,6 +69,7 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat
   @Input() generalTabContent: TemplateRef<any>;
 
   basicFormGroup: FormGroup;
+  enableSlaveControl: FormControl<boolean>;
 
   onChange: (value: ModbusBasicConfig) => void;
   onTouched: () => void;
@@ -77,6 +81,7 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat
       master: [],
       slave: [],
     });
+    this.enableSlaveControl = new FormControl(false);
 
     this.basicFormGroup.valueChanges
       .pipe(takeUntil(this.destroy$))
@@ -84,6 +89,13 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat
         this.onChange(value);
         this.onTouched();
       });
+
+    this.enableSlaveControl.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(enable => {
+        this.updateSlaveEnabling(enable);
+        this.basicFormGroup.get('slave').updateValueAndValidity({emitEvent: !!this.onChange});
+      });
   }
 
   ngOnDestroy(): void {
@@ -106,11 +118,25 @@ export class ModbusBasicConfigComponent implements ControlValueAccessor, Validat
     };
 
     this.basicFormGroup.setValue(editedBase, {emitEvent: false});
+    this.enableSlaveControl.setValue(!!basicConfig.slave && !isEqual(basicConfig.slave, {}));
   }
 
-  validate(): ValidationErrors | null {
+  validate(basicFormControl: UntypedFormControl): ValidationErrors | null {
-    return this.basicFormGroup.valid ? null : {
+    const { master, slave } = basicFormControl.value;
-      basicFormGroup: {valid: false}
+    const isEmpty = !master?.slaves?.length && (isEqual(slave, {}) || !slave);
-    };
+    if (!this.basicFormGroup.valid || isEmpty) {
+      return {
+        basicFormGroup: {valid: false}
+      };
+    }
+    return null;
+  }
+
+  private updateSlaveEnabling(isEnabled: boolean): void {
+    if (isEnabled) {
+      this.basicFormGroup.get('slave').enable({emitEvent: false});
+    } else {
+      this.basicFormGroup.get('slave').disable({emitEvent: false});
+    }
   }
 }

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

@@ -34,18 +34,15 @@ import {
   ControlValueAccessor,
   FormArray,
   FormBuilder,
-  NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   UntypedFormGroup,
-  ValidationErrors,
-  Validator,
 } from '@angular/forms';
 import {
   ModbusMasterConfig,
   ModbusProtocolLabelsMap,
   SlaveConfig
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
-import { isDefinedAndNotNull, isUndefinedOrNull } from '@core/utils';
+import { isDefinedAndNotNull } from '@core/utils';
 import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { ModbusSlaveDialogComponent } from '../modbus-slave-dialog/modbus-slave-dialog.component';
@@ -62,16 +59,11 @@ import { TbTableDatasource } from '@shared/components/table/table-datasource.abs
       useExisting: forwardRef(() => ModbusMasterTableComponent),
       multi: true
     },
-    {
-      provide: NG_VALIDATORS,
-      useExisting: forwardRef(() => ModbusMasterTableComponent),
-      multi: true
-    }
   ],
   standalone: true,
   imports: [CommonModule, SharedModule]
 })
-export class ModbusMasterTableComponent implements ControlValueAccessor, Validator, AfterViewInit, OnInit, OnDestroy {
+export class ModbusMasterTableComponent implements ControlValueAccessor, AfterViewInit, OnInit, OnDestroy {
 
   @ViewChild('searchInput') searchInputField: ElementRef;
 
@@ -138,12 +130,6 @@ export class ModbusMasterTableComponent implements ControlValueAccessor, Validat
     this.pushDataAsFormArrays(master.slaves);
   }
 
-  validate(): ValidationErrors | null {
-    return this.slaves.controls.length ? null : {
-      slavesFormGroup: {valid: false}
-    };
-  }
-
   enterFilterMode(): void {
     this.textSearchMode = true;
     this.cdr.detectChanges();

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

@@ -16,16 +16,6 @@
 
 -->
 <div [formGroup]="slaveConfigFormGroup" class="slave-container">
-  <div class="tb-form-panel no-border no-padding padding-top">
-    <div class="tb-form-hint tb-primary-fill tb-flex center">{{ 'gateway.hints.modbus-server' | translate }}</div>
-    <div class="tb-form-row" fxLayoutAlign="space-between center">
-      <mat-slide-toggle class="mat-slide" formControlName="sendDataToThingsBoard">
-        <mat-label>
-          {{ 'gateway.enable' | translate }}
-        </mat-label>
-      </mat-slide-toggle>
-    </div>
-  </div>
   <div class="slave-content tb-form-panel no-border no-padding padding-top" >
     <div class="tb-flex row space-between align-center no-gap fill-width">
       <div class="fixed-title-width" translate>gateway.server-slave-config</div>
@@ -178,6 +168,13 @@
         </mat-form-field>
       </div>
     </div>
+    <div class="tb-form-row" fxLayoutAlign="space-between center">
+      <mat-slide-toggle class="mat-slide" formControlName="sendDataToThingsBoard">
+        <mat-label>
+          {{ 'gateway.send-data-TB' | translate }}
+        </mat-label>
+      </mat-slide-toggle>
+    </div>
     <div class="tb-form-panel stroked">
       <mat-expansion-panel class="tb-settings">
         <mat-expansion-panel-header>

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

@@ -1,27 +0,0 @@
-/**
- * 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.
- */
-$server-config-header-height: 132px;
-
-:host {
-  .slave-content {
-    height: calc(100% - #{$server-config-header-height});
-    overflow: auto;
-  }
-
-  .slave-container {
-    display: inherit;
-  }
-}

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

@@ -43,7 +43,7 @@ import {
 import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs';
-import { startWith, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 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';
@@ -73,7 +73,6 @@ import { isEqual } from '@core/utils';
     ModbusSecurityConfigComponent,
     GatewayPortTooltipPipe,
   ],
-  styleUrls: ['./modbus-slave-config.component.scss'],
 })
 export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validator, OnDestroy {
 
@@ -90,6 +89,7 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat
   readonly ModbusProtocolType = ModbusProtocolType;
   readonly modbusBaudrates = ModbusBaudrates;
 
+  private isSlaveEnabled = false;
   private readonly serialSpecificControlKeys = ['serialPort', 'baudrate'];
   private readonly tcpUdpSpecificControlKeys = ['port', 'security', 'host'];
 
@@ -126,14 +126,9 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat
 
     this.observeValueChanges();
     this.observeTypeChange();
-    this.observeFormEnable();
     this.observeShowSecurity();
   }
 
-  get isSlaveEnabled(): boolean {
-    return this.slaveConfigFormGroup.get('sendDataToThingsBoard').value;
-  }
-
   get protocolType(): ModbusProtocolType {
     return this.slaveConfigFormGroup.get('type').value;
   }
@@ -160,7 +155,11 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat
   writeValue(slaveConfig: ModbusSlave): void {
     this.showSecurityControl.patchValue(!!slaveConfig.security && !isEqual(slaveConfig.security, {}));
     this.updateSlaveConfig(slaveConfig);
-    this.updateFormEnableState(slaveConfig.sendDataToThingsBoard);
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.isSlaveEnabled = !isDisabled;
+    this.updateFormEnableState();
   }
 
   private observeValueChanges(): void {
@@ -180,7 +179,7 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat
     this.slaveConfigFormGroup.get('type').valueChanges
       .pipe(takeUntil(this.destroy$))
       .subscribe(type => {
-        this.updateFormEnableState(this.isSlaveEnabled);
+        this.updateFormEnableState();
         this.updateMethodType(type);
       });
   }
@@ -196,22 +195,15 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat
     }
   }
 
-  private observeFormEnable(): void {
+  private updateFormEnableState(): void {
-    this.slaveConfigFormGroup.get('sendDataToThingsBoard').valueChanges
+    if (this.isSlaveEnabled) {
-      .pipe(startWith(this.isSlaveEnabled), takeUntil(this.destroy$))
-      .subscribe(value => this.updateFormEnableState(value));
-  }
-
-  private updateFormEnableState(enabled: boolean): void {
-    if (enabled) {
       this.slaveConfigFormGroup.enable({emitEvent: false});
       this.showSecurityControl.enable({emitEvent: false});
     } else {
       this.slaveConfigFormGroup.disable({emitEvent: false});
       this.showSecurityControl.disable({emitEvent: false});
-      this.slaveConfigFormGroup.get('sendDataToThingsBoard').enable({emitEvent: false});
     }
-    this.updateEnablingByProtocol(this.protocolType);
+    this.updateEnablingByProtocol();
     this.updateSecurityEnable(this.showSecurityControl.value);
   }
 
@@ -229,9 +221,10 @@ export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validat
     }
   }
 
-  private updateEnablingByProtocol(type: ModbusProtocolType): void {
+  private updateEnablingByProtocol(): void {
-    const enableKeys = type === ModbusProtocolType.Serial ? this.serialSpecificControlKeys : this.tcpUdpSpecificControlKeys;
+    const isSerial = this.protocolType === ModbusProtocolType.Serial;
-    const disableKeys = type === ModbusProtocolType.Serial ? this.tcpUdpSpecificControlKeys : this.serialSpecificControlKeys;
+    const enableKeys = isSerial ? this.serialSpecificControlKeys : this.tcpUdpSpecificControlKeys;
+    const disableKeys = isSerial ? this.tcpUdpSpecificControlKeys : this.serialSpecificControlKeys;
 
     if (this.isSlaveEnabled) {
       enableKeys.forEach(key => this.slaveConfigFormGroup.get(key)?.enable({ emitEvent: false }));