UI: LwM2M device profile refactoring select attributes and telemetry

@@ -32,6 +32,7 @@
             <mat-checkbox color="warn"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'attribute')"
+                          (click)="$event.stopPropagation()"
                           (change)="changeInstanceResourcesCheckBox($event.checked, instances, 'attribute')"
                           [indeterminate]="getIndeterminate(instances, 'attribute')">
             </mat-checkbox>
@@ -40,14 +41,16 @@
             <mat-checkbox color="primary"
                           [disabled]="this.disabled"
                           [checked]="getChecked(instances, 'telemetry')"
+                          (click)="$event.stopPropagation()"
                           (change)="changeInstanceResourcesCheckBox($event.checked, instances, 'telemetry')"
                           [indeterminate]="getIndeterminate(instances, 'telemetry')">
             </mat-checkbox>
           </div>
           <div fxLayoutAlign="center center" fxFlex="10">
             <mat-checkbox color="primary"
-                          [disabled]="this.disabled || !(getIndeterminate(instances, 'telemetry') || getIndeterminate(instances, 'attribute'))"
+                          [disabled]="disableObserve(instances)"
                           [checked]="getChecked(instances, 'observe')"
+                          (click)="$event.stopPropagation()"
                           (change)="changeInstanceResourcesCheckBox($event.checked, instances, 'observe')"
                           [indeterminate]="getIndeterminate(instances, 'observe')">
             </mat-checkbox>

@@ -161,6 +161,13 @@ export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValue
     const resources = deepClone(instance.get('resources').value as ResourceLwM2M[]);
     if (value && type === 'observe') {
       resources.forEach(resource => resource[type] = resource.telemetry || resource.attribute);
+    } else if (!value && type !== 'observe') {
+      resources.forEach(resource => {
+        resource[type] = value;
+        if (resource.observe && !(resource.telemetry || resource.attribute)) {
+          resource.observe = false;
+        }
+      });
     } else {
       resources.forEach(resource => resource[type] = value);
     }
@@ -190,6 +197,15 @@ export class Lwm2mObserveAttrTelemetryInstancesComponent implements ControlValue
     return isDefinedAndNotNull(resources) && resources.every(resource => resource[type]);
   }
 
+  disableObserve(instance: AbstractControl): boolean {
+    return this.disabled || !(
+      this.getIndeterminate(instance, 'telemetry') ||
+      this.getIndeterminate(instance, 'attribute') ||
+      this.getChecked(instance, 'telemetry') ||
+      this.getChecked(instance, 'attribute')
+    );
+  }
+
   get isExpend(): boolean {
     return this.instancesFormArray.length === 1;
   }

@@ -129,7 +129,7 @@ export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValue
 
   private updatedResources(resources: ResourceLwM2M[]): void {
     if (resources.length === this.resourcesFormArray.length) {
-      this.resourcesFormArray.patchValue(resources, {emitEvent: false});
+      this.resourcesFormArray.patchValue(resources, {onlySelf: true});
     } else {
       if (this.valueChange$) {
         this.valueChange$.unsubscribe();
@@ -144,7 +144,7 @@ export class Lwm2mObserveAttrTelemetryResourcesComponent implements ControlValue
       if (this.disabled) {
         this.resourcesFormGroup.disable({emitEvent: false});
       }
-      this.valueChange$ = this.resourcesFormGroup.valueChanges.subscribe(value => {
+      this.valueChange$ = this.resourcesFormGroup.valueChanges.subscribe(() => {
         this.updateModel(this.resourcesFormGroup.getRawValue().resources);
       });
     }