UI: Refactoring LWM2M device profile transport configuration attributes settings

@@ -24,10 +24,10 @@ public class ObjectAttributes {
 
     private Long dim;
     private String ver;
-    private Long pmin;
-    private Long pmax;
-    private Double gt;
-    private Double lt;
-    private Double st;
+    private Integer pmin;
+    private Integer pmax;
+    private Float gt;
+    private Float lt;
+    private Float st;
 
 }

@@ -15,12 +15,11 @@
     limitations under the License.
 
 -->
-<form [formGroup]="attributeLwm2mDialogFormGroup" (ngSubmit)="save()" style="width: 500px;">
+<form [formGroup]="attributeFormGroup" (ngSubmit)="save()" style="min-width: 500px;">
   <mat-toolbar color="primary">
-    <div fxFlex fxLayout="column" fxLayoutAlign="start">
-      <h2>{{ (readonly ? 'device-profile.lwm2m.attribute-lwm2m-toolbar-view' :
-        'device-profile.lwm2m.attribute-lwm2m-toolbar-edit') | translate }}</h2>
-    </div>
+    <h2>
+      {{ (readonly ? 'device-profile.lwm2m.view-attributes' : 'device-profile.lwm2m.edit-attributes') | translate : {name: name} }}
+    </h2>
     <span fxFlex></span>
     <button mat-icon-button
             (click)="cancel()"
@@ -32,8 +31,8 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <tb-lwm2m-attributes-key-list
-      formControlName="keyFilters"
-      titleText="{{data.destName}}">
+      [isResource]="isResource"
+      formControlName="attributes">
     </tb-lwm2m-attributes-key-list>
   </div>
   <div mat-dialog-actions fxLayoutAlign="end center">
@@ -46,7 +45,7 @@
     <button mat-raised-button color="primary"
             *ngIf="!readonly"
             type="submit"
-            [disabled]="(isLoading$ | async) || attributeLwm2mDialogFormGroup.invalid || !attributeLwm2mDialogFormGroup.dirty">
+            [disabled]="(isLoading$ | async) || attributeFormGroup.invalid || !attributeFormGroup.dirty">
       {{ 'action.save' | translate }}
     </button>
   </div>

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
+import { Component, Inject, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Store } from '@ngrx/store';
@@ -22,12 +22,13 @@ import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
-import { JsonObject } from '@angular/compiler-cli/ngcc/src/packages/entry_point';
+import { AttributesNameValueMap } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models';
 
 export interface Lwm2mAttributesDialogData {
   readonly: boolean;
-  attributeLwm2m: JsonObject;
-  destName: string;
+  attributes: AttributesNameValueMap;
+  modelName: string;
+  isResource: boolean;
 }
 
 @Component({
@@ -36,42 +37,37 @@ export interface Lwm2mAttributesDialogData {
   styleUrls: ['./lwm2m-attributes.component.scss'],
   providers: [{provide: ErrorStateMatcher, useExisting: Lwm2mAttributesDialogComponent}],
 })
-export class Lwm2mAttributesDialogComponent extends DialogComponent<Lwm2mAttributesDialogComponent, object>
-  implements OnInit, ErrorStateMatcher {
+export class Lwm2mAttributesDialogComponent
+  extends DialogComponent<Lwm2mAttributesDialogComponent, AttributesNameValueMap> implements ErrorStateMatcher {
 
-  readonly = this.data.readonly;
-
-  attributeLwm2m = this.data.attributeLwm2m;
-
-  submitted = false;
+  readonly: boolean;
+  name: string;
+  isResource: boolean;
 
-  dirtyValue = false;
+  private submitted = false;
 
-  attributeLwm2mDialogFormGroup: FormGroup;
+  attributeFormGroup: FormGroup;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
-              @Inject(MAT_DIALOG_DATA) public data: Lwm2mAttributesDialogData,
+              @Inject(MAT_DIALOG_DATA) private data: Lwm2mAttributesDialogData,
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
-              public dialogRef: MatDialogRef<Lwm2mAttributesDialogComponent, object>,
+              public dialogRef: MatDialogRef<Lwm2mAttributesDialogComponent, AttributesNameValueMap>,
               private fb: FormBuilder) {
     super(store, router, dialogRef);
 
-    this.attributeLwm2mDialogFormGroup = this.fb.group({
-      keyFilters: [{}, []]
-    });
-    this.attributeLwm2mDialogFormGroup.patchValue({keyFilters: this.attributeLwm2m});
-    this.attributeLwm2mDialogFormGroup.get('keyFilters').valueChanges.subscribe((attributes) => {
-      this.attributeLwm2m = attributes;
+    this.readonly = data.readonly;
+    this.name = data.modelName;
+    this.isResource = data.isResource;
+
+    this.attributeFormGroup = this.fb.group({
+      attributes: [data.attributes]
     });
     if (this.readonly) {
-      this.attributeLwm2mDialogFormGroup.disable({emitEvent: false});
+      this.attributeFormGroup.disable({emitEvent: false});
     }
   }
 
-  ngOnInit(): void {
-  }
-
   isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
     const originalErrorState = this.errorStateMatcher.isErrorState(control, form);
     const customErrorState = !!(control && control.invalid && this.submitted);
@@ -80,7 +76,7 @@ export class Lwm2mAttributesDialogComponent extends DialogComponent<Lwm2mAttribu
 
   save(): void {
     this.submitted = true;
-    this.dialogRef.close(this.attributeLwm2m);
+    this.dialogRef.close(this.attributeFormGroup.get('attributes').value);
   }
 
   cancel(): void {

@@ -15,69 +15,60 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" class="tb-kv-map" [formGroup]="kvListFormGroup">
-  <div>
-    <mat-label translate class="tb-title no-padding">device-profile.lwm2m.attribute-lwm2m-destination</mat-label>
-    <mat-label class="tb-editor-area-title-panel">{{ titleText }}</mat-label>
-  </div>
+<section fxLayout="column" class="name-value-map" [formGroup]="attributesValueFormGroup">
   <div fxLayout="row" fxLayoutGap="8px" style="max-height: 40px; margin-top: 8px;">
-    <mat-label fxFlex class="tb-title no-padding" translate>device-profile.lwm2m.attribute-lwm2m-name</mat-label>
-    <mat-label fxFlex class="tb-title no-padding" translate>device-profile.lwm2m.attribute-lwm2m-value</mat-label>
-    <div [fxShow]="!disabled" style="width: 40px;"></div>
+    <label fxFlex="40" class="tb-title no-padding" style="min-width: 230px;" translate>device-profile.lwm2m.attribute-name</label>
+    <label fxFlex="60" class="tb-title no-padding" translate>device-profile.lwm2m.attribute-value</label>
+    <span [fxShow]="!disabled" style="width: 40px;"></span>
   </div>
-  <div fxLayout="column" formArrayName="keyVals"
-       *ngFor="let keyValControl of keyValsFormArray().controls; let $index = index">
-    <div fxLayout="row"  fxLayoutAlign="start center" fxLayoutGap="8px">
-      <mat-form-field class="mat-block"  style="max-heights: 400px">
+  <div fxLayout="column" class="map-list"
+       *ngFor="let nameValueControl of attributesValueFormArray().controls; let $index = index"
+        [formGroup]="nameValueControl">
+    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+      <mat-form-field fxFlex="40" floatLabel="always" hideRequiredMarker>
         <mat-label></mat-label>
-        <mat-select [formControl]="keyValControl.get('key')">
-          <mat-option *ngFor="let attributeLwm2m of attrKeys"
-                      [value]="attributeLwm2m">
-            {{ attributeLwm2mMap.get(attrKey[attributeLwm2m]) }}
+        <mat-select formControlName="name" required>
+          <mat-option *ngFor="let attributeName of attributeNames" [value]="attributeName"
+                      [disabled]="isDisabledAttributeName(attributeName, $index)">
+            {{ attributeNameTranslationMap.get(attributeName) | translate }}
           </mat-option>
         </mat-select>
+        <mat-error *ngIf="nameValueControl.get('name').hasError('required')">
+          {{ 'device-profile.lwm2m.attribute-name-required' | translate }}
+        </mat-error>
       </mat-form-field>
-      <mat-form-field fxFlex floatLabel="always" hideRequiredMarker class="mat-block"
-                      style="max-height: 40px;">
+      <mat-form-field fxFlex="60" floatLabel="always" hideRequiredMarker>
         <mat-label></mat-label>
-        <input [formControl]="keyValControl.get('value')" matInput
-               placeholder="{{ ('key-val.value') | translate }}"/>
+        <input formControlName="value" matInput required
+               placeholder="{{ 'key-val.value' | translate }}">
+        <mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('required')">
+          {{ 'device-profile.lwm2m.attribute-value-required' | translate }}
+        </mat-error>
+        <mat-error fxLayout="row" *ngIf="nameValueControl.get('value').hasError('min') ||
+                                          nameValueControl.get('value').hasError('pattern')">
+          {{ 'device-profile.lwm2m.attribute-value-pattern' | translate }}
+        </mat-error>
       </mat-form-field>
-      <button mat-button mat-icon-button color="primary"
-              [fxShow]="!disabled"
+      <button *ngIf="!disabled"
+              mat-icon-button color="primary" style="min-width: 40px;"
               type="button"
               (click)="removeKeyVal($index)"
-              [disabled]="isLoading$ | async"
-              matTooltip="{{ 'device-profile.lwm2m.attribute-lwm2m-remove-tip' | translate }}"
+              matTooltip="{{ 'device-profile.lwm2m.remove-attribute' | translate }}"
               matTooltipPosition="above">
         <mat-icon>close</mat-icon>
       </button>
     </div>
-    <mat-error *ngIf="keyValControl.get('key').hasError('required')" style="font-size: smaller">
-      {{ 'device-profile.lwm2m.key-name' | translate }}
-      <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
-    </mat-error>
-    <mat-error fxLayout="row" *ngIf="keyValControl.get('key').hasError('validAttributeKey')"
-               style="font-size: smaller">
-      {{ 'device-profile.lwm2m.valid-attribute-lwm2m-key' | translate: {attrEnums: attrKeys} }}
-    </mat-error>
-    <mat-error fxLayout="row" *ngIf="keyValControl.get('value').hasError('validAttributeValue')"
-               style="font-size: smaller">
-      {{ 'device-profile.lwm2m.valid-attribute-lwm2m-value' | translate: {attrEnums: attrKeys} }}
-    </mat-error>
   </div>
-  <span [fxShow]="!keyValsFormArray().length"
-        fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-        class="no-data-found" translate>{{noDataText ? noDataText : 'device-profile.lwm2m.no-data'}}</span>
-  <div style="margin-top: 8px;">
-    <button mat-button mat-raised-button color="primary"
-            [fxShow]="!disabled"
+  <div [fxShow]="!attributesValueFormArray().length"
+        fxLayoutAlign="center center"
+        class="map-list" translate>device-profile.lwm2m.no-attributes-set</div>
+  <div style="margin-top: 9px;" *ngIf="!disabled && isAddEnabled">
+    <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
-            (click)="addKeyVal()"
             type="button"
-            matTooltip="{{ 'device-profile.lwm2m.attribute-lwm2m-add-tip' | translate }}"
-            matTooltipPosition="above">
-      {{ 'action.add' | translate }}
+            (click)="addKeyVal()">
+      <mat-icon class="button-icon">add_circle_outline</mat-icon>
+      {{ 'device-profile.lwm2m.add-attribute' | translate }}
     </button>
   </div>
 </section>

+/**
+ * Copyright © 2016-2021 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 {
+  .name-value-map {
+    span.no-data-found {
+      position: relative;
+      display: flex;
+      height: 40px;
+
+      &.disabled {
+        color: rgba(0, 0, 0, .38);
+      }
+    }
+
+    .map-list{
+      height: 45px;
+    }
+  }
+}
+
+:host ::ng-deep {
+  .mat-form-field-wrapper {
+    padding-bottom: 0;
+  }
+  .mat-form-field-infix {
+    border-top: 0;
+  }
+  .mat-form-field-underline {
+    bottom: 0;
+  }
+
+  .button-icon{
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+
+  .map-list {
+    mat-form-field {
+      .mat-form-field-wrapper {
+        padding-bottom: 0;
+        .mat-form-field-infix {
+          border-top-width: 0.2em;
+          width: auto;
+          min-width: auto;
+        }
+        .mat-form-field-underline {
+          bottom: 0;
+        }
+        .mat-form-field-subscript-wrapper{
+          margin-top: 1.8em;
+        }
+      }
+    }
+  }
+}

@@ -14,35 +14,36 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
   FormArray,
   FormBuilder,
-  FormControl,
   FormGroup,
   NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   Validator,
   Validators
 } from '@angular/forms';
-import { Subscription } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import {
-  ATTRIBUTE_KEYS,
-  ATTRIBUTE_LWM2M_ENUM,
-  ATTRIBUTE_LWM2M_MAP
+  AttributeName,
+  AttributeNameTranslationMap,
+  AttributesNameValue,
+  AttributesNameValueMap,
+  valueValidatorByAttributeName
 } from './lwm2m-profile-config.models';
-import { isDefinedAndNotNull, isEmpty, isEmptyStr, isUndefinedOrNull } from '@core/utils';
+import { isUndefinedOrNull } from '@core/utils';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { PageComponent } from '@shared/components/page.component';
-
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-lwm2m-attributes-key-list',
   templateUrl: './lwm2m-attributes-key-list.component.html',
-  styleUrls: ['./lwm2m-attributes.component.scss'],
+  styleUrls: ['./lwm2m-attributes-key-list.component.scss'],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -56,39 +57,46 @@ import { PageComponent } from '@shared/components/page.component';
     }
   ]
 })
-export class Lwm2mAttributesKeyListComponent extends PageComponent implements ControlValueAccessor, OnInit, Validator {
-
-  attrKeys = ATTRIBUTE_KEYS;
-
-  attrKey = ATTRIBUTE_LWM2M_ENUM;
+export class Lwm2mAttributesKeyListComponent extends PageComponent implements ControlValueAccessor, OnDestroy, OnDestroy, Validator {
 
-  attributeLwm2mMap = ATTRIBUTE_LWM2M_MAP;
+  attributeNames;
+  attributeNameTranslationMap = AttributeNameTranslationMap;
 
   @Input() disabled: boolean;
 
-  @Input() titleText: string;
+  @Input()
+  isResource = false;
 
-  @Input() noDataText: string;
-
-  kvListFormGroup: FormGroup;
+  attributesValueFormGroup: FormGroup;
 
   private propagateChange = null;
-
-  private valueChangeSubscription: Subscription = null;
+  private valueChange$: Subscription = null;
+  private destroy$ = new Subject();
+  private usedAttributesName: AttributeName[] = [];
 
   constructor(protected store: Store<AppState>,
               private fb: FormBuilder) {
     super(store);
+    this.attributesValueFormGroup = this.fb.group({
+      attributesValue: this.fb.array([])
+    });
   }
 
-  ngOnInit(): void {
-    this.kvListFormGroup = this.fb.group({});
-    this.kvListFormGroup.addControl('keyVals',
-      this.fb.array([]));
+  ngOnInit() {
+    if (this.isResource) {
+      this.attributeNames = Object.values(AttributeName);
+    } else {
+      this.attributeNames = Object.values(AttributeName)
+        .filter(item => ![AttributeName.lt, AttributeName.gt, AttributeName.st].includes(item));
+    }
   }
 
-  keyValsFormArray(): FormArray {
-    return this.kvListFormGroup.get('keyVals') as FormArray;
+  ngOnDestroy() {
+    if (this.valueChange$) {
+      this.valueChange$.unsubscribe();
+    }
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   registerOnChange(fn: any): void {
@@ -101,127 +109,111 @@ export class Lwm2mAttributesKeyListComponent extends PageComponent implements Co
   setDisabledState(isDisabled: boolean): void {
     this.disabled = isDisabled;
     if (this.disabled) {
-      this.kvListFormGroup.disable({emitEvent: false});
+      this.attributesValueFormGroup.disable({emitEvent: false});
     } else {
-      this.kvListFormGroup.enable({emitEvent: false});
+      this.attributesValueFormGroup.enable({emitEvent: false});
     }
   }
 
-  writeValue(keyValMap: { [key: string]: string }): void {
-    if (this.valueChangeSubscription) {
-      this.valueChangeSubscription.unsubscribe();
+  writeValue(keyValMap: AttributesNameValueMap): void {
+    if (this.valueChange$) {
+      this.valueChange$.unsubscribe();
     }
-    const keyValsControls: Array<AbstractControl> = [];
+    const attributesValueControls: Array<AbstractControl> = [];
     if (keyValMap) {
-      for (const property of Object.keys(keyValMap)) {
-        if (Object.prototype.hasOwnProperty.call(keyValMap, property)) {
-          keyValsControls.push(this.fb.group({
-            key: [property, [Validators.required, this.attributeLwm2mKeyValidator]],
-            value: [keyValMap[property], this.attributeLwm2mValueValidator(property)]
-          }));
-        }
-      }
+      (Object.keys(keyValMap) as AttributeName[]).forEach(name => {
+        attributesValueControls.push(this.createdFormGroup({name, value: keyValMap[name]}));
+      });
     }
-    this.kvListFormGroup.setControl('keyVals', this.fb.array(keyValsControls));
-    this.valueChangeSubscription = this.kvListFormGroup.valueChanges.subscribe(() => {
-      // this.updateValidate();
-      this.updateModel();
-    });
+    this.attributesValueFormGroup.setControl('attributesValue', this.fb.array(attributesValueControls));
     if (this.disabled) {
-      this.kvListFormGroup.disable({emitEvent: false});
+      this.attributesValueFormGroup.disable({emitEvent: false});
     } else {
-      this.kvListFormGroup.enable({emitEvent: false});
+      this.attributesValueFormGroup.enable({emitEvent: false});
     }
+    this.valueChange$ = this.attributesValueFormGroup.valueChanges.subscribe(() => {
+      this.updateModel();
+    });
+    this.updateUsedAttributesName();
+  }
+
+  attributesValueFormArray(): FormArray {
+    return this.attributesValueFormGroup.get('attributesValue') as FormArray;
   }
 
   public removeKeyVal(index: number) {
-    (this.kvListFormGroup.get('keyVals') as FormArray).removeAt(index);
+    this.attributesValueFormArray().removeAt(index);
   }
 
   public addKeyVal() {
-    const keyValsFormArray = this.kvListFormGroup.get('keyVals') as FormArray;
-    keyValsFormArray.push(this.fb.group({
-      key: ['', [Validators.required, this.attributeLwm2mKeyValidator]],
-      value: ['', []]
-    }));
-  }
-
-  public validate(c?: FormControl) {
-    const kvList: { key: string; value: string }[] = this.kvListFormGroup.get('keyVals').value;
-    let valid = true;
-    for (const entry of kvList) {
-      if (isUndefinedOrNull(entry.key) || isEmptyStr(entry.key) || !ATTRIBUTE_KEYS.includes(entry.key)) {
-        valid = false;
-        break;
-      }
-      if (entry.key !== 'ver' && isNaN(Number(entry.value))) {
-        valid = false;
-        break;
-      }
+    this.attributesValueFormArray().push(this.createdFormGroup());
+    this.attributesValueFormGroup.updateValueAndValidity({emitEvent: false});
+    if (this.attributesValueFormGroup.invalid) {
+      this.updateModel();
     }
-    return (valid) ? null : {
-      keyVals: {
-        valid: false,
-      },
-    };
   }
 
-  private updateValidate() {
-    const kvList = this.kvListFormGroup.get('keyVals') as FormArray;
-    kvList.controls.forEach(fg => {
-      if (fg.get('key').value === 'ver') {
-        fg.get('value').setValidators(null);
-        fg.get('value').setErrors(null);
-      }
-      else {
-        fg.get('value').setValidators(this.attributeLwm2mValueNumberValidator);
-        fg.get('value').setErrors(this.attributeLwm2mValueNumberValidator(fg.get('value')));
-      }
+  private createdFormGroup(value?: AttributesNameValue): FormGroup {
+    if (isUndefinedOrNull(value)) {
+      value = {
+        name: this.getFirstUnusedAttributesName(),
+        value: null
+      };
+    }
+    const form = this.fb.group({
+      name: [value.name, Validators.required],
+      value: [value.value, valueValidatorByAttributeName(value.name)]
     });
+    form.get('name').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(name => {
+      form.get('value').setValidators(valueValidatorByAttributeName(name));
+      form.get('value').updateValueAndValidity();
+    });
+    return form;
+  }
+
+  public validate() {
+    return this.attributesValueFormGroup.valid ? null : {
+      attributesValue: {
+        valid: false
+      }
+    };
   }
 
   private updateModel() {
-    this.updateValidate();
-    if (this.validate() === null) {
-      const kvList: { key: string; value: string }[] = this.kvListFormGroup.get('keyVals').value;
-      const keyValMap: { [key: string]: string | number } = {};
-      kvList.forEach((entry) => {
-        if (isUndefinedOrNull(entry.value) || entry.key === 'ver' || isEmptyStr(entry.value.toString())) {
-          keyValMap[entry.key] = entry.value.toString();
-        } else {
-          keyValMap[entry.key] = Number(entry.value);
-        }
-      });
-      this.propagateChange(keyValMap);
-    }
-    else {
-      this.propagateChange(null);
-    }
+    const value: AttributesNameValue[] = this.attributesValueFormGroup.get('attributesValue').value;
+    const attributesNameValueMap: AttributesNameValueMap = {};
+    value.forEach(attribute => {
+      attributesNameValueMap[attribute.name] = attribute.value;
+    });
+    this.updateUsedAttributesName();
+    this.propagateChange(attributesNameValueMap);
   }
 
+  public isDisabledAttributeName(type: AttributeName, index: number): boolean {
+    const usedIndex = this.usedAttributesName.indexOf(type);
+    return usedIndex > -1 && usedIndex !== index;
+  }
 
-  private attributeLwm2mKeyValidator = (control: AbstractControl) => {
-    const key = control.value as string;
-    if (isDefinedAndNotNull(key) && !isEmpty(key)) {
-      if (!ATTRIBUTE_KEYS.includes(key)) {
-        return {
-          validAttributeKey: true
-        };
+  private getFirstUnusedAttributesName(): AttributeName {
+    for (const attributeName of this.attributeNames) {
+      if (this.usedAttributesName.indexOf(attributeName) === -1) {
+        return attributeName;
       }
     }
     return null;
   }
 
-  private attributeLwm2mValueNumberValidator = (control: AbstractControl) => {
-    if (isNaN(Number(control.value)) || Number(control.value) < 0) {
-      return {
-        validAttributeValue: true
-      };
-    }
-    return null;
+  private updateUsedAttributesName() {
+    this.usedAttributesName = [];
+    const value: AttributesNameValue[] = this.attributesValueFormGroup.get('attributesValue').value;
+    value.forEach((attributesValue, index) => {
+      this.usedAttributesName[index] = attributesValue.name;
+    });
   }
 
-  private attributeLwm2mValueValidator = (property: string): object[] => {
-    return property === 'ver' ?  [] : [this.attributeLwm2mValueNumberValidator];
+  get isAddEnabled(): boolean {
+    return this.attributesValueFormArray().length !== this.attributeNames.length;
   }
 }

@@ -15,18 +15,14 @@
     limitations under the License.
 
 -->
-<div fxLayout="row" [formGroup]="attributeLwm2mFormGroup">
-  <div fxFlex fxLayout="column" class="resource-name-lw-end" fxLayoutAlign="center"
-       [matTooltip]="isToolTipLabel()" matTooltipPosition="above">
-    {{attributeLwm2mToString()}}
-  </div>
+<div fxLayout="row" [fxHide]="disabled && isEmpty()" fxLayoutAlign="end center" matTooltip="{{ tooltipSetAttributesTelemetry | translate }}" matTooltipPosition="above">
   <button type="button"
           [disabled]="isDisableBtn()"
           mat-button mat-icon-button
           (click)="editAttributesLwm2m($event)"
-          [matTooltip]="(isIconView() ? 'action.view' : isIconEditAdd()  ? 'action.edit' : 'action.add' ) | translate"
+          matTooltip="{{ tooltipButton |  translate }}"
           matTooltipPosition="above">
     <mat-icon
-      class="material-icons">{{isIconView() ? 'visibility' : isIconEditAdd() ? 'edit' : 'add' }}</mat-icon>
+      class="material-icons">{{ iconButton }}</mat-icon>
   </button>
 </div>

@@ -14,48 +14,20 @@
  * limitations under the License.
  */
 :host {
-  .tb-kv-map {
-    span.no-data-found {
-      position: relative;
-      display: flex;
-      height: 40px;
-
-      &.disabled {
-        color: rgba(0, 0, 0, .38);
-      }
-    }
+  .resource-name-lw-end{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align:end;
+    //width: 80px;
+    cursor: pointer;
   }
-}
 
-:host ::ng-deep {
-  .mat-form-field-wrapper {
-    padding-bottom: 0;
-  }
-  .mat-form-field-infix {
-    border-top: 0;
+  .resource-name-lw{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
   }
-  .mat-form-field-underline {
-    bottom: 0;
-  }
-}
-
-.vertical-padding {
-  padding: 0 0 10px 20px;
-}
-
-.resource-name-lw-end{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-align:end;
-  //width: 80px;
-  cursor: pointer;
-}
-
-.resource-name-lw{
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
 }
 

@@ -17,11 +17,10 @@
 import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { deepClone, isDefinedAndNotNull, isEmpty } from '@core/utils';
+import { isEmpty, isUndefinedOrNull } from '@core/utils';
 import { Lwm2mAttributesDialogComponent, Lwm2mAttributesDialogData } from './lwm2m-attributes-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
-import { TranslateService } from '@ngx-translate/core';
-import { ATTRIBUTE_LWM2M_LABEL } from './lwm2m-profile-config.models';
+import { AttributesNameValueMap } from './lwm2m-profile-config.models';
 
 
 @Component({
@@ -36,22 +35,21 @@ import { ATTRIBUTE_LWM2M_LABEL } from './lwm2m-profile-config.models';
 })
 export class Lwm2mAttributesComponent implements ControlValueAccessor {
   attributeLwm2mFormGroup: FormGroup;
-  attributeLwm2mLabel = ATTRIBUTE_LWM2M_LABEL;
 
   private requiredValue: boolean;
 
   @Input()
-  attributeLwm2m: {};
-
-  @Input()
   isAttributeTelemetry: boolean;
 
   @Input()
-  destName: string;
+  modelName: string;
 
   @Input()
   disabled: boolean;
 
+  @Input()
+  isResource = false;
+
   @Output()
   updateAttributeLwm2m = new EventEmitter<any>();
 
@@ -64,8 +62,7 @@ export class Lwm2mAttributesComponent implements ControlValueAccessor {
   }
 
   constructor(private dialog: MatDialog,
-              private fb: FormBuilder,
-              private translate: TranslateService) {}
+              private fb: FormBuilder) {}
 
   registerOnChange(fn: any): void {
     this.propagateChange = fn;
@@ -85,63 +82,66 @@ export class Lwm2mAttributesComponent implements ControlValueAccessor {
 
   ngOnInit() {
     this.attributeLwm2mFormGroup = this.fb.group({
-      attributeLwm2m: [this.attributeLwm2m]
+      attributes: [{}]
     });
   }
 
-  writeValue(value: {} | null): void {}
-
-  attributeLwm2mToString = (): string => {
-    return this.isIconEditAdd () ? this.attributeLwm2mLabelToString() : this.translate.instant('device-profile.lwm2m.no-data');
+  writeValue(value: AttributesNameValueMap | null) {
+    this.attributeLwm2mFormGroup.patchValue({attributes: value}, {emitEvent: false});
   }
 
-  private attributeLwm2mLabelToString = (): string => {
-    let label = JSON.stringify(this.attributeLwm2m);
-    label = deepClone(label.replace('{', ''));
-    label = deepClone(label.replace('}', ''));
-    this.attributeLwm2mLabel.forEach((value: string, key: string) => {
-      const dest = '\"' + key + '\"\:';
-      label = deepClone(label.replace(dest, value));
-    });
-    return label;
+  get attributesValueMap(): AttributesNameValueMap {
+    return this.attributeLwm2mFormGroup.get('attributes').value;
   }
 
   isDisableBtn(): boolean {
-    return this.disabled || this.isAttributeTelemetry ? !(isDefinedAndNotNull(this.attributeLwm2m) &&
-      !isEmpty(this.attributeLwm2m) && this.disabled) :  this.disabled;
+    return !this.disabled && this.isAttributeTelemetry;
   }
 
-  isIconView(): boolean {
-    return this.isAttributeTelemetry || this.disabled;
+  isEmpty(): boolean {
+    const value = this.attributesValueMap;
+    return isUndefinedOrNull(value) || isEmpty(value);
   }
 
-  isIconEditAdd(): boolean {
-    return isDefinedAndNotNull(this.attributeLwm2m) && !isEmpty(this.attributeLwm2m);
+  get tooltipSetAttributesTelemetry(): string {
+    return this.isDisableBtn() ? 'device-profile.lwm2m.edit-attributes-select' : '';
   }
 
-  isToolTipLabel(): string {
-    return this.disabled ? this.translate.instant('device-profile.lwm2m.attribute-lwm2m-tip') :
-      this.isAttributeTelemetry ? this.translate.instant('device-profile.lwm2m.attribute-lwm2m-disable-tip') :
-        this.translate.instant('device-profile.lwm2m.attribute-lwm2m-tip');
+  get tooltipButton(): string {
+    if (this.disabled) {
+      return 'device-profile.lwm2m.view-attribute';
+    } else if (this.isEmpty()) {
+      return 'device-profile.lwm2m.add-attribute';
+    }
+    return 'device-profile.lwm2m.edit-attribute';
+  }
+
+  get iconButton(): string {
+    if (this.disabled) {
+      return 'visibility';
+    } else if (this.isEmpty()) {
+      return 'add';
+    }
+    return 'edit';
   }
 
   public editAttributesLwm2m = ($event: Event): void => {
     if ($event) {
       $event.stopPropagation();
     }
-    this.dialog.open<Lwm2mAttributesDialogComponent, Lwm2mAttributesDialogData, object>(Lwm2mAttributesDialogComponent, {
+    this.dialog.open<Lwm2mAttributesDialogComponent, Lwm2mAttributesDialogData, AttributesNameValueMap>(Lwm2mAttributesDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       data: {
         readonly: this.disabled,
-        attributeLwm2m: this.disabled ? this.attributeLwm2m : deepClone(this.attributeLwm2m),
-        destName: this.destName
+        attributes: this.attributesValueMap,
+        modelName: this.modelName,
+        isResource: this.isResource
       }
     }).afterClosed().subscribe((result) => {
       if (result) {
-        this.attributeLwm2m = result;
-        this.attributeLwm2mFormGroup.patchValue({attributeLwm2m: this.attributeLwm2m});
-        this.updateAttributeLwm2m.next(this.attributeLwm2m);
+        this.attributeLwm2mFormGroup.patchValue({attributeLwm2m: result});
+        this.updateAttributeLwm2m.next(result);
       }
     });
   }

@@ -20,27 +20,24 @@
        *ngFor="let resourceLwM2M of resourceFormArray.controls; let i = index; trackBy: trackByParams">
     <div class="vertical-padding" fxLayout="column" fxFill [formGroupName]="i">
       <div fxLayout="row" fxFill fxLayoutAlign="start center" [fxShow]="!i">
-        <div fxFlex="20">
+        <div fxFlex="30">
             <mat-label translate>device-profile.lwm2m.resource-label</mat-label>
         </div>
-        <div fxFlex="10">
+        <div fxFlex="10" style="text-align: center">
             <mat-label translate>device-profile.lwm2m.attribute-label</mat-label>
         </div>
-        <div fxFlex="10">
+        <div fxFlex="10" style="text-align: center">
             <mat-label translate>device-profile.lwm2m.telemetry-label</mat-label>
         </div>
-        <div fxFlex="10">
+        <div fxFlex="10" style="text-align: center">
           <mat-label translate>device-profile.lwm2m.observe-label</mat-label>
         </div>
         <div fxFlex>
             <mat-label translate>device-profile.lwm2m.key-name-label</mat-label>
         </div>
-        <div fxFlex="17" fxFlexOffset="0">
-          <mat-label translate>device-profile.lwm2m.attribute-lwm2m-label</mat-label>
-        </div>
       </div>
       <div fxLayout="row" fxFill fxLayoutAlign="start center">
-        <div class="resource-name-lw" fxFlex="25"
+        <div class="resource-name-lw" fxFlex="30"
              matTooltip="{{'device-profile.lwm2m.resource-tip' | translate}}" matTooltipPosition="above">
           <<b>{{resourceLwM2M.get('id').value}}</b>> <b><i>{{resourceLwM2M.get('name').value}}</i></b>
         </div>
@@ -65,7 +62,7 @@
                         matTooltipPosition="above">
           </mat-checkbox>
         </div>
-        <mat-form-field fxFlex="25">
+        <mat-form-field fxFlex="33">
           <mat-label  *ngIf="resourceLwM2M.get('keyName').hasError('required')">
             {{ 'device-profile.lwm2m.key-name-label' | translate }}</mat-label>
           <input  class="resource-name-lw" matInput type="text" formControlName="keyName" required
@@ -77,12 +74,13 @@
             <strong>{{ 'device-profile.lwm2m.required' | translate }}</strong>
           </mat-error>
         </mat-form-field>
-        <div fxFlex="20" class="resource-name-lw-end" fxFlexOffset="5">
+        <span fxFlex></span>
+        <div class="resource-name-lw-end">
           <tb-profile-lwm2m-attributes
             formControlName="attributeLwm2m"
-            [attributeLwm2m]="resourceLwM2M.get('attributeLwm2m').value"
             [isAttributeTelemetry]="disableObserve(i)"
-            [destName]="getNameResourceLwm2m(resourceLwM2M.value)"
+            isResource="true"
+            [modelName]="getNameResourceLwm2m(resourceLwM2M.value)"
             [disabled]="this.disabled"
             (updateAttributeLwm2m)="updateAttributeLwm2m($event, i)">
           </tb-profile-lwm2m-attributes>

@@ -26,17 +26,15 @@
           <div fxFlex class="resource-name-lw-end">
             <tb-profile-lwm2m-attributes
               formControlName="attributeLwm2m"
-              [attributeLwm2m]="objectLwM2M.get('attributeLwm2m').value"
               [isAttributeTelemetry]="disableObserveObject(i)"
-              [destName]="getNameObjectLwm2m( objectLwM2M.get('name').value, objectLwM2M.get('keyId').value)"
+              [modelName]="getNameObjectLwm2m( objectLwM2M.get('name').value, objectLwM2M.get('keyId').value)"
               [disabled]="this.disabled"
               (updateAttributeLwm2m)="updateAttributeLwm2mObject($event, objectLwM2M.get('keyId').value)">
             </tb-profile-lwm2m-attributes>
           </div>
         </mat-panel-title>
-        <mat-panel-description fxFlex="5" fxLayoutAlign="end center" *ngIf="!disabled">
+        <mat-panel-description fxFlex="5" fxLayoutAlign="end center" *ngIf="!disabled && objectLwM2M.get('multiple').value">
           <button type="button"
-                  [fxShow]="objectLwM2M.get('multiple').value"
                   mat-button mat-icon-button (click)="addInstances($event, objectLwM2M.value)"
                   matTooltip="{{'device-profile.lwm2m.add-instances-tip' | translate}}"
                   matTooltipPosition="above">
@@ -56,7 +54,7 @@
               <mat-panel-title>
                 <div class="tb-panel-title-height" fxFlex="100">
                   <div fxLayout="row" fxFill>
-                    <div fxFlex="22">
+                    <div fxFlex="30">
                       {{'device-profile.lwm2m.instance-label' | translate}} <<b>{{instances.get('id').value}}</b>>
                     </div>
                      <div class="checkbox-padding" fxFlex="10">
@@ -95,14 +93,13 @@
                                     matTooltipPosition="above">
                       </mat-checkbox>
                     </div>
-                    <div fxFlex="10">
+                    <div fxFlex="7">
                     </div>
                     <div fxFlex="37" class="resource-name-lw-end" fxFlexOffset="5">
                       <tb-profile-lwm2m-attributes
                         formControlName="attributeLwm2m"
-                        [attributeLwm2m]="instances.get('attributeLwm2m').value"
                         [isAttributeTelemetry]="disableObserveInstance(instances)"
-                        [destName]="getNameInstanceLwm2m(instances.value, objectLwM2M.get('keyId').value)"
+                        [modelName]="getNameInstanceLwm2m(instances.value, objectLwM2M.get('keyId').value)"
                         [disabled]="this.disabled"
                         (updateAttributeLwm2m)="updateAttributeLwm2mInstance($event, y, objectLwM2M.get('keyId').value)">
                       </tb-profile-lwm2m-attributes>

@@ -14,6 +14,8 @@
 /// limitations under the License.
 ///
 
+import { ValidatorFn, Validators } from '@angular/forms';
+
 export const PAGE_SIZE_LIMIT = 50;
 export const INSTANCES = 'instances';
 export const INSTANCE = 'instance';
@@ -74,44 +76,29 @@ export const BingingModeTranslationsMap = new Map<BingingMode, string>(
     [BingingMode.SQ, 'device-profile.lwm2m.binding-type.sq']
   ]
 );
-
-export enum ATTRIBUTE_LWM2M_ENUM {
-  dim = 'dim',
-  ver = 'ver',
+// TODO: wait release Leshan for issues: https://github.com/eclipse/leshan/issues/1026
+export enum AttributeName {
   pmin = 'pmin',
   pmax = 'pmax',
   gt = 'gt',
   lt = 'lt',
   st = 'st'
+  // epmin = 'epmin',
+  // epmax = 'epmax'
 }
 
-export const ATTRIBUTE_LWM2M_LABEL = new Map<ATTRIBUTE_LWM2M_ENUM, string>(
+export const AttributeNameTranslationMap = new Map<AttributeName, string>(
   [
-    [ATTRIBUTE_LWM2M_ENUM.dim, 'dim='],
-    [ATTRIBUTE_LWM2M_ENUM.ver, 'ver='],
-    [ATTRIBUTE_LWM2M_ENUM.pmin, 'pmin='],
-    [ATTRIBUTE_LWM2M_ENUM.pmax, 'pmax='],
-    [ATTRIBUTE_LWM2M_ENUM.gt, '>'],
-    [ATTRIBUTE_LWM2M_ENUM.lt, '<'],
-    [ATTRIBUTE_LWM2M_ENUM.st, 'st=']
-  ]
-);
-
-export const ATTRIBUTE_LWM2M_MAP = new Map<ATTRIBUTE_LWM2M_ENUM, string>(
-  [
-    [ATTRIBUTE_LWM2M_ENUM.dim, 'Dimension'],
-    [ATTRIBUTE_LWM2M_ENUM.ver, 'Object version'],
-    [ATTRIBUTE_LWM2M_ENUM.pmin, 'Minimum period'],
-    [ATTRIBUTE_LWM2M_ENUM.pmax, 'Maximum period'],
-    [ATTRIBUTE_LWM2M_ENUM.gt, 'Greater than'],
-    [ATTRIBUTE_LWM2M_ENUM.lt, 'Lesser than'],
-    [ATTRIBUTE_LWM2M_ENUM.st, 'Step'],
-
+    [AttributeName.pmin, 'device-profile.lwm2m.attributes-name.min-period'],
+    [AttributeName.pmax, 'device-profile.lwm2m.attributes-name.max-period'],
+    [AttributeName.gt, 'device-profile.lwm2m.attributes-name.greater-than'],
+    [AttributeName.lt, 'device-profile.lwm2m.attributes-name.less-than'],
+    [AttributeName.st, 'device-profile.lwm2m.attributes-name.step'],
+    // [AttributeName.epmin, 'device-profile.lwm2m.attributes-name.min-evaluation-period'],
+    // [AttributeName.epmax, 'device-profile.lwm2m.attributes-name.max-evaluation-period']
   ]
 );
 
-export const ATTRIBUTE_KEYS = Object.keys(ATTRIBUTE_LWM2M_ENUM) as string[];
-
 export enum securityConfigMode {
   PSK = 'PSK',
   RPK = 'RPK',
@@ -182,7 +169,7 @@ export interface ObservableAttributes {
   attribute: string[];
   telemetry: string[];
   keyName: {};
-  attributeLwm2m: {};
+  attributeLwm2m?: AttributesNameValueMap;
 }
 
 export function getDefaultBootstrapServersSecurityConfig(): BootstrapServersSecurityConfig {
@@ -241,12 +228,12 @@ export interface ResourceLwM2M {
   attribute: boolean;
   telemetry: boolean;
   keyName: string;
-  attributeLwm2m?: {};
+  attributeLwm2m?: AttributesNameValueMap;
 }
 
 export interface Instance {
   id: number;
-  attributeLwm2m?: {};
+  attributeLwm2m?: AttributesNameValueMap;
   resources: ResourceLwM2M[];
 }
 
@@ -257,12 +244,33 @@ export interface Instance {
  * mandatory == false => Optional
  */
 export interface ObjectLwM2M {
-
   id: number;
   keyId: string;
   name: string;
   multiple?: boolean;
   mandatory?: boolean;
-  attributeLwm2m?: {};
+  attributeLwm2m?: AttributesNameValueMap;
   instances?: Instance [];
 }
+
+export type AttributesNameValueMap = {
+  [key in AttributeName]?: number;
+};
+
+export interface AttributesNameValue {
+  name: AttributeName;
+  value: number;
+}
+
+export function valueValidatorByAttributeName(attributeName: AttributeName): ValidatorFn[] {
+  const validators = [Validators.required];
+  switch (attributeName) {
+    case AttributeName.pmin:
+    case AttributeName.pmax:
+    // case AttributeName.epmin:
+    // case AttributeName.epmax:
+      validators.push(Validators.min(0), Validators.pattern('[0-9]*'));
+      break;
+  }
+  return validators;
+}

@@ -1231,27 +1231,26 @@
             "attribute-label": "Attribute",
             "telemetry-label": "Telemetry",
             "key-name-label": "Key Name",
-            "attribute-lwm2m-label": "AttrLwm2m",
             "resource-tip": "ID & Original Name of the Resource (only Operations isReadable)",
             "is-observe-tip": "Is Observe",
             "not-observe-tip": "To observe select telemetry or attributes first",
             "is-attr-tip": "Is Attribute",
             "is-telemetry-tip": "Is Telemetry",
             "key-name-tip": "Key Name in Camel format",
-            "attribute-lwm2m-tip": "Attributes Lwm2m",
-            "attribute-lwm2m-disable-tip": "To edit Attributes Lwm2m select telemetry or attributes first",
-            "valid-attribute-lwm2m-key": "Name have be only '{{attrEnums}}'",
-            "valid-attribute-lwm2m-value": "Value have be Long, Double and greater than zero or null/empty",
-            "no-data": "No attributes",
+            "edit-attributes-select": "To edit attributes select telemetry or attributes",
+            "no-attributes-set": "No attributes set",
             "key-name": "Key Name",
-            "attribute-lwm2m-name": "Name attribute",
-            "attribute-lwm2m-value": "Value",
-            "attribute-lwm2m-toolbar-edit": "Edit attributes Lwm2m",
-            "attribute-lwm2m-toolbar-view": "View Attributes Lwm2m",
-            "attribute-lwm2m-destination": "Destination:",
-            "attribute-lwm2m-add-tip": "Add attribute lwm2m",
-            "attribute-lwm2m-remove-tip": "Remove attribute lwm2m",
-            "required": " value is required.",
+            "attribute-name": "Name attribute",
+            "attribute-name-required": "Name attribute is required.",
+            "attribute-value": "Attribute value",
+            "attribute-value-required": "Attribute value is required.",
+            "attribute-value-pattern": "Attribute value must be a positive integer.",
+            "edit-attributes": "Edit attributes: {{ name }}",
+            "view-attributes": "View attributes: {{ name }}",
+            "add-attribute": "Add attribute",
+            "edit-attribute": "Edit attribute",
+            "view-attribute": "View attribute",
+            "remove-attribute": "Remove attribute",
             "mode": "Security config mode",
             "pattern_hex_dec": "{ count, plural, 0 {must be hex decimal format} other {must be # characters} }",
             "servers": "Servers",
@@ -1318,7 +1317,16 @@
             "fw-update-recourse-required": "Firmware update CoAP recourse is required.",
             "sw-update-recourse": "Software update CoAP recourse",
             "sw-update-recourse-required": "Software update CoAP recourse is required.",
-            "config-json-tab": "Json Config Profile Device"
+            "config-json-tab": "Json Config Profile Device",
+            "attributes-name": {
+                "min-period": "Minimum period",
+                "max-period": "Maximum period",
+                "greater-than": "Greater than",
+                "less-than": "Less than",
+                "step": "Step",
+                "min-evaluation-period": "Minimum evaluation period",
+                "max-evaluation-period": "Maximum evaluation period"
+            }
         },
         "snmp": {
             "add-communication-config": "Add communication config",