Merge pull request #8266 from rusikv/feature/sparkplug-ui

Sparkplug ui

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html

@@ -21,24 +21,15 @@
   </mat-checkbox>
   <div *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
        class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-hint' | translate }}"></div>
-  <mat-form-field floatLabel="always" class="mat-block" style="padding-top: 8px;"
-                  *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
-    <mat-label translate>device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names</mat-label>
-    <mat-chip-grid #attrMetricNamesChipList formControlName="sparkplugAttributesMetricNames">
-      <mat-chip-row
-        *ngFor="let name of mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').value;"
-        (removed)="removeAttributeMetricName(name)">
-        {{name}}
-        <mat-icon matChipRemove>close</mat-icon>
-      </mat-chip-row>
-      <input matInput type="text" placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
-             [matChipInputFor]="attrMetricNamesChipList"
-             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-             matChipInputAddOnBlur
-             (matChipInputTokenEnd)="addAttributeMetricName($event)">
-    </mat-chip-grid>
-    <mat-hint innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"></mat-hint>
-  </mat-form-field>
+  <tb-string-items-list *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
+                        editable
+                        label="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate }}"
+                        placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
+                        hint="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"
+                        floatLabel="always"
+                        subscriptSizing="dynamic"
+                        formControlName="sparkplugAttributesMetricNames">
+  </tb-string-items-list>
 </form>
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
   <fieldset class="fields-group">

ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts

@@ -41,8 +41,6 @@ import {
 import { isDefinedAndNotNull } from '@core/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
-import { MatChipInputEvent } from '@angular/material/chips';
 
 @Component({
   selector: 'tb-mqtt-device-profile-transport-configuration',
@@ -79,8 +77,6 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
 
   private propagateChange = (v: any) => { };
 
-  separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
-
   constructor(private store: Store<AppState>,
               private fb: UntypedFormBuilder) {
   }
@@ -175,34 +171,6 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
     }
   }
 
-  removeAttributeMetricName(name: string): void {
-    const names: string[] = this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').value;
-    const index = names.indexOf(name);
-    if (index >= 0) {
-      names.splice(index, 1);
-      this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').setValue(names);
-    }
-  }
-
-  addAttributeMetricName(event: MatChipInputEvent): void {
-    const input = event.input;
-    let value = event.value;
-    if ((value || '').trim()) {
-      value = value.trim();
-      let names: string[] = this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').value;
-      if (!names || names.indexOf(value) === -1) {
-        if (!names) {
-          names = [];
-        }
-        names.push(value);
-        this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').setValue(names, {emitEvent: true});
-      }
-    }
-    if (input) {
-      input.value = '';
-    }
-  }
-
   private updateModel() {
     let configuration: DeviceProfileTransportConfiguration = null;
     if (this.mqttDeviceProfileTransportConfigurationFormGroup.valid) {

ui-ngx/src/app/shared/components/string-items-list.component.html

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="stringItemsForm">
-  <mat-form-field fxFlex class="mat-block" [floatLabel]="floatLabel" [appearance]="appearance">
+  <mat-form-field fxFlex class="mat-block" [floatLabel]="floatLabel" [appearance]="appearance" [subscriptSizing]="subscriptSizing">
     <mat-label *ngIf="label">{{ label }}</mat-label>
     <mat-chip-grid #itemsChipList formControlName="items" [required]="required">
       <mat-chip-row *ngFor="let item of stringItemsList"

ui-ngx/src/app/shared/components/string-items-list.component.ts

@@ -18,7 +18,7 @@ import { Component, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
-import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
+import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coerce-boolean';
 
 @Component({
@@ -79,6 +79,9 @@ export class StringItemsListComponent implements ControlValueAccessor{
   @coerceBoolean()
   editable = false;
 
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed'
+
   private propagateChange = (v: any) => { };
 
   constructor(private fb: FormBuilder) {