Added posibility of discrete value pick in OPC value type keys

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html

@@ -24,7 +24,7 @@
           <mat-expansion-panel class="tb-settings" [expanded]="last">
             <mat-expansion-panel-header fxLayout="row wrap">
               <mat-panel-title>
-                <div class="title-container">{{ valueTitle(keyControl.get('value').value) }}</div>
+                <div class="title-container" tbTruncateWithTooltip>{{ valueTitle(keyControl.get(keyControl.get('type').value).value) }}</div>
               </mat-panel-title>
             </mat-expansion-panel-header>
             <ng-template matExpansionPanelContent>
@@ -54,13 +54,24 @@
                 <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
                   <div class="fixed-title-width tb-required" translate>gateway.value</div>
                   <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic" class="tb-inline-field flex tb-suffix-absolute">
-                    <input matInput required formControlName="value"
-                           placeholder="{{ 'gateway.set' | translate }}"/>
+                    <ng-container [ngSwitch]="keyControl.get('type').value">
+                      <input *ngSwitchCase="MappingValueType.STRING" matInput required formControlName="string"
+                             placeholder="{{ 'gateway.set' | translate }}" />
+                      <input *ngSwitchCase="MappingValueType.INTEGER" matInput required formControlName="integer" type="number"
+                             placeholder="{{ 'gateway.set' | translate }}" />
+                      <input *ngSwitchCase="MappingValueType.DOUBLE" matInput required formControlName="double" type="number"
+                             placeholder="{{ 'gateway.set' | translate }}" />
+                      <mat-select *ngSwitchCase="MappingValueType.BOOLEAN" formControlName="boolean">
+                        <mat-option [value]="true">true</mat-option>
+                        <mat-option [value]="false">false</mat-option>
+                      </mat-select>
+                    </ng-container>
                     <mat-icon matSuffix
                               matTooltipPosition="above"
                               matTooltipClass="tb-error-tooltip"
                               [matTooltip]="('gateway.value-required') | translate"
-                              *ngIf="keyControl.get('value').hasError('required') && keyControl.get('value').touched"
+                              *ngIf="keyControl.get(keyControl.get('type').value).hasError('required')
+                              && keyControl.get(keyControl.get('type').value).touched"
                               class="tb-error">
                       warning
                     </mat-icon>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.scss

@@ -18,9 +18,6 @@
 
   .title-container {
     max-width: 11vw;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap
   }
 
   .key-panel {

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

@@ -18,6 +18,7 @@ import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
+  FormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   UntypedFormArray,
@@ -28,6 +29,7 @@ import {
 } from '@angular/forms';
 import { isDefinedAndNotNull } from '@core/utils';
 import {
+  integerRegex,
   MappingDataKey,
   MappingValueType,
   mappingValueTypesMap,
@@ -58,6 +60,7 @@ export class TypeValuePanelComponent implements ControlValueAccessor, Validator,
   valueTypeKeys: MappingValueType[] = Object.values(MappingValueType);
   valueTypes = mappingValueTypesMap;
   valueListFormArray: UntypedFormArray;
+  readonly MappingValueType = MappingValueType;
 
   private destroy$ = new Subject<void>();
   private propagateChange = (v: any) => {};
@@ -84,12 +87,26 @@ export class TypeValuePanelComponent implements ControlValueAccessor, Validator,
 
   addKey(): void {
     const dataKeyFormGroup = this.fb.group({
-      type: [MappingValueType.STRING, []],
-      value: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]]
+      type: [MappingValueType.STRING],
+      string: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+      integer: [{value: 0, disabled: true}, [Validators.required, Validators.pattern(integerRegex)]],
+      double: [{value: 0, disabled: true}, [Validators.required]],
+      boolean: [{value: false, disabled: true}, [Validators.required]],
     });
+    this.observeTypeChange(dataKeyFormGroup);
     this.valueListFormArray.push(dataKeyFormGroup);
   }
 
+  private observeTypeChange(dataKeyFormGroup: FormGroup): void {
+    dataKeyFormGroup.get('type').valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(type => {
+        dataKeyFormGroup.disable({emitEvent: false});
+        dataKeyFormGroup.get('type').enable({emitEvent: false});
+        dataKeyFormGroup.get(type).enable({emitEvent: false});
+      })
+  }
+
   deleteKey($event: Event, index: number): void {
     if ($event) {
       $event.stopPropagation();
@@ -116,10 +133,17 @@ export class TypeValuePanelComponent implements ControlValueAccessor, Validator,
 
   writeValue(deviceInfoArray: Array<MappingDataKey>): void {
     for (const deviceInfo of deviceInfoArray) {
-      const dataKeyFormGroup = this.fb.group({
-        type: [deviceInfo.type, []],
-        value: [deviceInfo.value, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]]
-      });
+      const config = {
+        type: [deviceInfo.type],
+        string: [{value: '', disabled: true}, [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
+        integer: [{value: 0, disabled: true}, [Validators.required, Validators.pattern(integerRegex)]],
+        double: [{value: 0, disabled: true}, [Validators.required]],
+        boolean: [{value: false, disabled: true}, [Validators.required]],
+      };
+      config[deviceInfo.type][0] = {value: deviceInfo.value, disabled: false};
+
+      const dataKeyFormGroup = this.fb.group(config);
+      this.observeTypeChange(dataKeyFormGroup);
       this.valueListFormArray.push(dataKeyFormGroup);
     }
   }
@@ -131,6 +155,6 @@ export class TypeValuePanelComponent implements ControlValueAccessor, Validator,
   }
 
   private updateView(value: any): void {
-    this.propagateChange(value);
+    this.propagateChange(value.map(({type, ...config}) => ({type, value: config[type]})));
   }
 }

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

@@ -19,6 +19,7 @@ import { Observable } from 'rxjs';
 import { ValueTypeData } from '@shared/models/constants';
 
 export const noLeadTrailSpacesRegex = /^(?! )[\S\s]*(?<! )$/;
+export const integerRegex = /^[-+]?\d+$/;
 
 export enum StorageTypes {
   MEMORY = 'memory',

ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts

@@ -141,6 +141,7 @@ import {
 import {
   TypeValuePanelComponent
 } from '@home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component';
+import { TruncateWithTooltipDirective } from '@shared/directives/truncate-with-tooltip.directive';
 
 @NgModule({
   declarations: [
@@ -227,6 +228,7 @@ import {
     KeyValueIsNotEmptyPipe,
     ModbusBasicConfigComponent,
     EllipsisChipListDirective,
+    TruncateWithTooltipDirective,
   ],
   exports: [
     EntitiesTableWidgetComponent,

ui-ngx/src/app/shared/directives/truncate-with-tooltip.directive.ts

@@ -59,10 +59,6 @@ export class TruncateWithTooltipDirective implements OnInit, AfterViewInit, OnDe
   }
 
   ngAfterViewInit(): void {
-    if (!this.text) {
-      this.text = this.elementRef.nativeElement.innerText;
-    }
-
     this.tooltip.position = this.position;
   }
 
@@ -104,7 +100,7 @@ export class TruncateWithTooltipDirective implements OnInit, AfterViewInit, OnDe
   }
 
   private showTooltip(): void {
-    this.tooltip.message = this.text;
+    this.tooltip.message = this.text || this.elementRef.nativeElement.innerText;
 
     this.renderer.setAttribute(this.elementRef.nativeElement, 'matTooltip', this.text);
     this.tooltip.show();