UI: Change position is gateway and style is gatway in device component

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

@@ -65,20 +65,20 @@
             formControlName="deviceProfileId"
             (deviceProfileChanged)="deviceProfileChanged($event)">
           </tb-device-profile-autocomplete>
-          <tb-entity-autocomplete
-            formControlName="customerId"
-            labelText="device.wizard.customer-to-assign-device"
-            [entityType]="entityType.CUSTOMER">
-          </tb-entity-autocomplete>
           <div class="toggle-group">
             <mat-slide-toggle formControlName="gateway" style="min-width: 165px">
               {{ 'device.is-gateway' | translate }}
             </mat-slide-toggle>
             <mat-slide-toggle *ngIf="deviceWizardFormGroup.get('gateway').value"
-                          formControlName="overwriteActivityTime">
+                              formControlName="overwriteActivityTime">
               {{ 'device.overwrite-activity-time' | translate }}
             </mat-slide-toggle>
           </div>
+          <tb-entity-autocomplete
+            formControlName="customerId"
+            labelText="device.wizard.customer-to-assign-device"
+            [entityType]="entityType.CUSTOMER">
+          </tb-entity-autocomplete>
           <mat-form-field class="mat-block" subscriptSizing="dynamic">
             <mat-label translate>device.description</mat-label>
             <textarea matInput formControlName="description" rows="1"></textarea>

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

@@ -155,7 +155,7 @@ export class DeviceWizardDialogComponent extends DialogComponent<DeviceWizardDia
     if (this.addDeviceWizardStepper.steps.last.completed || this.addDeviceWizardStepper.selectedIndex > 0) {
       return this.deviceService.saveDeviceWithCredentials(deepTrim(device), deepTrim(this.credentialsFormGroup.value.credential)).pipe(
         catchError((e: HttpErrorResponse) => {
-          if (e.error.message.include('Device credentials')) {
+          if (e.error.message.includes('Device credentials')) {
             this.addDeviceWizardStepper.selectedIndex = 1;
           } else {
             this.addDeviceWizardStepper.selectedIndex = 0;

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

@@ -133,14 +133,14 @@
         required>
       </tb-device-data>
       <div formGroupName="additionalInfo" fxLayout="column">
-        <div fxLayout="row" fxLayout.xs="column" style="padding-bottom: 16px;">
-          <mat-checkbox fxFlex.gt-sm="30" fxFlex formControlName="gateway">
+        <div class="toggle-group">
+          <mat-slide-toggle formControlName="gateway" style="min-width: 165px">
             {{ 'device.is-gateway' | translate }}
-          </mat-checkbox>
-          <mat-checkbox fxFlex *ngIf="entityForm.get('additionalInfo.gateway').value"
-                        formControlName="overwriteActivityTime">
+          </mat-slide-toggle>
+          <mat-slide-toggle *ngIf="entityForm.get('additionalInfo.gateway').value"
+                            formControlName="overwriteActivityTime">
             {{ 'device.overwrite-activity-time' | translate }}
-          </mat-checkbox>
+          </mat-slide-toggle>
         </div>
         <mat-form-field class="mat-block">
           <mat-label translate>device.description</mat-label>

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

@@ -14,5 +14,11 @@
  * limitations under the License.
  */
 :host {
-
+  .toggle-group {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
 }