Fix copy device credentials

ui-ngx/src/app/modules/home/components/device/copy-device-credentials.component.ts

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { EntityId } from '@shared/models/id/entity-id';
 import { DeviceService } from '@core/http/device.service';
 import { DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
 import { isDefinedAndNotNull, isEqual } from '@core/utils';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { BehaviorSubject, Subject, Subscription } from 'rxjs';
 import { distinctUntilChanged, filter, mergeMap, tap } from 'rxjs/operators';
 import { EntityType } from '@shared/models/entity-type.models';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
@@ -32,12 +32,10 @@ import { TranslateService } from '@ngx-translate/core';
   templateUrl: './copy-device-credentials.component.html',
   styleUrls: []
 })
-export class CopyDeviceCredentialsComponent implements OnDestroy {
+export class CopyDeviceCredentialsComponent implements OnInit, OnDestroy {
 
   private deviceId$ = new BehaviorSubject<EntityId>(null);
 
-  private credentials$ = new Subject<DeviceCredentials>();
-
   private tooltipMessage: string;
 
   public hideButton = true;
@@ -56,13 +54,14 @@ export class CopyDeviceCredentialsComponent implements OnDestroy {
   @Input() disabled: boolean;
 
   @Input()
-  set credentials(credential: DeviceCredentials) {
-    this.credentials$.next(credential);
-  }
+  credentials$: Subject<DeviceCredentials>;
+
+  private credentialsSubscription: Subscription = null;
 
   constructor(private store: Store<AppState>,
               private translate: TranslateService,
-              private deviceService: DeviceService
+              private deviceService: DeviceService,
+              private cd: ChangeDetectorRef
   ) {
     this.deviceId$.pipe(
       filter(device => isDefinedAndNotNull(device) && device.entityType === EntityType.DEVICE),
@@ -73,18 +72,23 @@ export class CopyDeviceCredentialsComponent implements OnDestroy {
       this.processingValue(deviceCredentials);
       this.loading = false;
     });
+  }
 
-    this.credentials$.pipe(
+  ngOnInit(): void {
+    this.credentialsSubscription = this.credentials$.pipe(
       filter(credential => isDefinedAndNotNull(credential)),
       distinctUntilChanged((prev, curr) => isEqual(prev, curr))
     ).subscribe(deviceCredentials => {
       this.processingValue(deviceCredentials);
+      this.cd.detectChanges();
     });
   }
 
   ngOnDestroy(): void {
     this.deviceId$.unsubscribe();
-    this.credentials$.unsubscribe();
+    if (this.credentialsSubscription !== null) {
+      this.credentialsSubscription.unsubscribe();
+    }
   }
 
   private processingValue(credential: DeviceCredentials): void {
@@ -124,4 +128,5 @@ export class CopyDeviceCredentialsComponent implements OnDestroy {
         horizontalPosition: 'right'
       }));
   }
+
 }

ui-ngx/src/app/modules/home/pages/device/device.component.html

@@ -59,7 +59,7 @@
     <tb-copy-device-credentials
       [fxShow]="!isEdit"
       [disabled]="(isLoading$ | async)"
-      [credentials]="componentsData.deviceCredential"
+      [credentials$]="deviceCredentials$"
       [deviceId]="entity?.id">
     </tb-copy-device-credentials>
   </div>

ui-ngx/src/app/modules/home/pages/device/device.component.ts

@@ -21,7 +21,7 @@ import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import {
   createDeviceConfiguration,
-  createDeviceTransportConfiguration,
+  createDeviceTransportConfiguration, DeviceCredentials,
   DeviceData,
   DeviceInfo,
   DeviceProfileInfo,
@@ -33,6 +33,7 @@ import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { TranslateService } from '@ngx-translate/core';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'tb-device',
@@ -43,7 +44,7 @@ export class DeviceComponent extends EntityComponent<DeviceInfo> {
 
   entityType = EntityType;
 
-  componentsData: any;
+  deviceCredentials$: Subject<DeviceCredentials>;
 
   deviceScope: 'tenant' | 'customer' | 'customer_user';
 
@@ -57,7 +58,7 @@ export class DeviceComponent extends EntityComponent<DeviceInfo> {
 
   ngOnInit() {
     this.deviceScope = this.entitiesTableConfig.componentsData.deviceScope;
-    this.componentsData = this.entitiesTableConfigValue.componentsData;
+    this.deviceCredentials$ = this.entitiesTableConfigValue.componentsData.deviceCredentials$;
     super.ngOnInit();
   }
 

ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts

@@ -32,7 +32,7 @@ import { EntityType, entityTypeResources, entityTypeTranslations } from '@shared
 import { AddEntityDialogData, EntityAction } from '@home/models/entity/entity-component.models';
 import { Device, DeviceCredentials, DeviceInfo } from '@app/shared/models/device.models';
 import { DeviceComponent } from '@modules/home/pages/device/device.component';
-import { forkJoin, Observable, of } from 'rxjs';
+import { forkJoin, Observable, of, Subject } from 'rxjs';
 import { select, Store } from '@ngrx/store';
 import { selectAuthUser } from '@core/auth/auth.selectors';
 import { map, mergeMap, take, tap } from 'rxjs/operators';
@@ -117,7 +117,7 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
     this.config.componentsData = {
       deviceScope: route.data.devicesType,
       deviceProfileId: null,
-      deviceCredential: null
+      deviceCredentials$: new Subject<DeviceCredentials>()
     };
     this.customerId = routeParams.customerId;
     return this.store.pipe(select(selectAuthUser), take(1)).pipe(
@@ -481,10 +481,9 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
         deviceId: device.id.id,
         isReadOnly: this.config.componentsData.deviceScope === 'customer_user'
       }
-    }).afterClosed().subscribe(deviceCredential => {
-      if (isDefinedAndNotNull(deviceCredential)) {
-        this.config.componentsData.deviceCredential = deviceCredential;
-        this.config.table.onEntityUpdated(device);
+    }).afterClosed().subscribe(deviceCredentials => {
+      if (isDefinedAndNotNull(deviceCredentials)) {
+        this.config.componentsData.deviceCredentials$.next(deviceCredentials);
       }
     });
   }