UI: Device credential add processing deviceTransportType

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

@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="deviceCredentialsFormGroup">
-  <mat-form-field class="mat-block">
+  <mat-form-field class="mat-block" [fxShow]="credentialsTypes?.length > 1">
     <mat-label translate>device.credentials-type</mat-label>
     <mat-select formControlName="credentialsType">
       <mat-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">

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

@@ -29,6 +29,7 @@ import {
 } from '@angular/forms';
 import {
   credentialTypeNames,
+  credentialTypesByTransportType,
   DeviceCredentialMQTTBasic,
   DeviceCredentials,
   DeviceCredentialsType,
@@ -59,8 +60,21 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
   @Input()
   disabled: boolean;
 
+  private deviceTransportTypeValue = DeviceTransportType.DEFAULT;
+  get deviceTransportType(): DeviceTransportType {
+    return this.deviceTransportTypeValue
+  }
   @Input()
-  deviceTransportType = DeviceTransportType.DEFAULT;
+  set deviceTransportType(type: DeviceTransportType) {
+    if (type) {
+      this.deviceTransportTypeValue = type;
+      this.credentialsTypes = credentialTypesByTransportType.get(type);
+      const currentType = this.deviceCredentialsFormGroup.get('credentialsType').value;
+      if (!this.credentialsTypes.includes(currentType)) {
+        this.deviceCredentialsFormGroup.get('credentialsType').patchValue(this.credentialsTypes[0], {onlySelf: true});
+      }
+    }
+  }
 
   private destroy$ = new Subject();
 
@@ -68,7 +82,7 @@ export class DeviceCredentialsComponent implements ControlValueAccessor, OnInit,
 
   deviceCredentialsType = DeviceCredentialsType;
 
-  credentialsTypes = Object.values(DeviceCredentialsType);
+  credentialsTypes = credentialTypesByTransportType.get(DeviceTransportType.DEFAULT);
 
   credentialTypeNamesMap = credentialTypeNames;
 

ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html

@@ -64,7 +64,8 @@
                   [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 0}"
                   [addNewProfile]="false"
                   [selectDefaultProfile]="true"
-                  [editProfileEnabled]="false">
+                  [editProfileEnabled]="false"
+                  (deviceProfileChanged)="deviceProfileChanged($event)">
                 </tb-device-profile-autocomplete>
                 <mat-form-field fxFlex class="mat-block"
                                 [ngClass]="{invisible: deviceWizardFormGroup.get('addProfileType').value !== 1}">
@@ -154,6 +155,7 @@
           <mat-checkbox style="padding-bottom: 16px;" formControlName="setCredential">{{ 'device.wizard.add-credentials' | translate }}</mat-checkbox>
           <tb-device-credentials
             [fxShow]="credentialsFormGroup.get('setCredential').value"
+            [deviceTransportType]="deviceTransportType"
             formControlName="credential">
           </tb-device-credentials>
         </form>

ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts

@@ -25,6 +25,7 @@ import {
   createDeviceProfileConfiguration,
   createDeviceProfileTransportConfiguration,
   DeviceProfile,
+  DeviceProfileInfo,
   DeviceProfileType,
   DeviceProvisionConfiguration,
   DeviceProvisionType,
@@ -91,6 +92,7 @@ export class DeviceWizardDialogComponent extends
   serviceType = ServiceType.TB_RULE_ENGINE;
 
   private subscriptions: Subscription[] = [];
+  private currentDeviceProfileTransportType = DeviceTransportType.DEFAULT;
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -265,6 +267,20 @@ export class DeviceWizardDialogComponent extends
     }
   }
 
+  get deviceTransportType(): DeviceTransportType {
+    if (this.deviceWizardFormGroup.get('addProfileType').value) {
+      return this.transportConfigFormGroup.get('transportType').value;
+    } else {
+      return this.currentDeviceProfileTransportType;
+    }
+  }
+
+  deviceProfileChanged(deviceProfile: DeviceProfileInfo) {
+    if (deviceProfile) {
+      this.currentDeviceProfileTransportType = deviceProfile.transportType;
+    }
+  }
+
   private createDeviceProfile(): Observable<EntityId> {
     if (this.deviceWizardFormGroup.get('addProfileType').value) {
       const deviceProvisionConfiguration: DeviceProvisionConfiguration = this.provisionConfigFormGroup.get('provisionConfiguration').value;

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

@@ -17,7 +17,7 @@
 -->
 <form [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()" style="min-width: 350px;">
   <mat-toolbar color="primary">
-    <h2 translate>device.device-credentials</h2>
+    <h2>{{ 'device.device-credentials' | translate }}</h2>
     <span fxFlex></span>
     <button mat-icon-button
             (click)="cancel()"