UI: Improvement created device profile

@@ -29,7 +29,7 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
-    <mat-horizontal-stepper [linear]="true" #addDeviceProfileStepper (selectionChange)="selectedIndex = $event.selectedIndex">
+    <mat-horizontal-stepper [linear]="true" #addDeviceProfileStepper (selectionChange)="changeStep($event)">
       <mat-step [stepControl]="deviceProfileDetailsFormGroup">
         <form [formGroup]="deviceProfileDetailsFormGroup" style="padding-bottom: 16px;">
           <ng-template matStepLabel>{{ 'device-profile.device-profile-details' | translate }}</ng-template>
@@ -63,7 +63,7 @@
           </fieldset>
         </form>
       </mat-step>
-      <mat-step [stepControl]="transportConfigFormGroup">
+      <mat-step [stepControl]="transportConfigFormGroup" [optional]="true">
         <form [formGroup]="transportConfigFormGroup" style="padding-bottom: 16px;">
           <ng-template matStepLabel>{{ 'device-profile.transport-configuration' | translate }}</ng-template>
           <mat-form-field class="mat-block">
@@ -73,6 +73,9 @@
                 {{deviceTransportTypeTranslations.get(type) | translate}}
               </mat-option>
             </mat-select>
+            <mat-hint *ngIf="transportConfigFormGroup.get('transportType').value">
+              {{deviceTransportTypeHints.get(transportConfigFormGroup.get('transportType').value) | translate}}
+            </mat-hint>
             <mat-error *ngIf="transportConfigFormGroup.get('transportType').hasError('required')">
               {{ 'device-profile.transport-type-required' | translate }}
             </mat-error>
@@ -83,7 +86,7 @@
           </tb-device-profile-transport-configuration>
         </form>
       </mat-step>
-      <mat-step [stepControl]="alarmRulesFormGroup">
+      <mat-step [stepControl]="alarmRulesFormGroup" [optional]="true">
         <form [formGroup]="alarmRulesFormGroup" style="padding-bottom: 16px;">
           <ng-template matStepLabel>{{'device-profile.alarm-rules-with-count' | translate:
             {count: alarmRulesFormGroup.get('alarms').value ?
@@ -95,19 +98,28 @@
       </mat-step>
     </mat-horizontal-stepper>
   </div>
-  <div mat-dialog-actions fxLayout="row wrap" fxLayoutAlign="space-between center">
-    <button mat-button *ngIf="selectedIndex > 0"
-            [disabled]="(isLoading$ | async)"
-            (click)="previousStep()">{{ 'action.back' | translate }}</button>
-    <span *ngIf="selectedIndex <= 0"></span>
-    <div fxLayout="row wrap" fxLayoutGap="20px">
+  <div mat-dialog-actions fxLayout="column" fxLayoutAlign="start wrap" fxLayoutGap="8px" style="height: 100px;">
+    <div fxFlex fxLayout="row" fxLayoutAlign="end">
+      <button mat-raised-button
+              *ngIf="showNext"
+              [disabled]="(isLoading$ | async)"
+              (click)="nextStep()">{{ 'action.next-with-label' | translate:{label: (getFormLabel(this.selectedIndex+1) | translate)} }}</button>
+    </div>
+    <div fxFlex fxLayout="row">
       <button mat-button
+              color="primary"
               [disabled]="(isLoading$ | async)"
               (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-      <button mat-raised-button
-              [disabled]="(isLoading$ | async) || selectedForm().invalid"
-              color="primary"
-              (click)="nextStep()">{{ (selectedIndex === 2 ? 'action.add' : 'action.continue') | translate }}</button>
+      <span fxFlex></span>
+      <div fxLayout="row wrap" fxLayoutGap="8px">
+        <button mat-raised-button *ngIf="selectedIndex > 0"
+                [disabled]="(isLoading$ | async)"
+                (click)="previousStep()">{{ 'action.back' | translate }}</button>
+        <button mat-raised-button
+                [disabled]="(isLoading$ | async)"
+                color="primary"
+                (click)="add()">{{ 'action.add' | translate }}</button>
+      </div>
     </div>
   </div>
 </div>

@@ -13,26 +13,51 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
-  .mat-dialog-content {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+@import "../../../../../scss/constants";
 
-    .mat-stepper-horizontal {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
+:host-context(.tb-fullscreen-dialog .mat-dialog-container) {
+  @media #{$mat-lt-sm} {
+    .mat-dialog-content {
+      max-height: 75vh;
     }
   }
 }
 
 :host ::ng-deep {
   .mat-dialog-content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 24px 24px 8px !important;
+
     .mat-stepper-horizontal {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      overflow: hidden;
+      @media #{$mat-lt-sm} {
+        .mat-step-label {
+          white-space: normal;
+          overflow: visible;
+          .mat-step-text-label {
+            overflow: visible;
+          }
+        }
+      }
       .mat-horizontal-content-container {
-        overflow: auto;
-        min-height: 260px;
+        height: 350px;
+        max-height: 100%;
+        width: 100%;;
+        overflow-y: auto;
+        @media #{$mat-gt-sm} {
+          min-width: 800px;
+        }
+      }
+      .mat-horizontal-stepper-content[aria-expanded=true] {
+        height: 100%;
+        form {
+          height: 100%;
+        }
       }
     }
   }

@@ -36,13 +36,14 @@ import {
   DeviceProfile,
   DeviceProfileType,
   deviceProfileTypeTranslationMap,
-  DeviceTransportType,
+  DeviceTransportType, deviceTransportTypeHintMap,
   deviceTransportTypeTranslationMap
 } from '@shared/models/device.models';
 import { DeviceProfileService } from '@core/http/device-profile.service';
 import { EntityType } from '@shared/models/entity-type.models';
 import { MatHorizontalStepper } from '@angular/material/stepper';
 import { RuleChainId } from '@shared/models/id/rule-chain-id';
+import { StepperSelectionEvent } from '@angular/cdk/stepper';
 
 export interface AddDeviceProfileDialogData {
   deviceProfileName: string;
@@ -62,12 +63,16 @@ export class AddDeviceProfileDialogComponent extends
 
   selectedIndex = 0;
 
+  showNext = true;
+
   entityType = EntityType;
 
   deviceProfileTypes = Object.keys(DeviceProfileType);
 
   deviceProfileTypeTranslations = deviceProfileTypeTranslationMap;
 
+  deviceTransportTypeHints = deviceTransportTypeHintMap;
+
   deviceTransportTypes = Object.keys(DeviceTransportType);
 
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
@@ -150,25 +155,63 @@ export class AddDeviceProfileDialogComponent extends
     }
   }
 
-  private add(): void {
-    const deviceProfile: DeviceProfile = {
-      name: this.deviceProfileDetailsFormGroup.get('name').value,
-      type: this.deviceProfileDetailsFormGroup.get('type').value,
-      transportType: this.transportConfigFormGroup.get('transportType').value,
-      description: this.deviceProfileDetailsFormGroup.get('description').value,
-      profileData: {
-        configuration: createDeviceProfileConfiguration(DeviceProfileType.DEFAULT),
-        transportConfiguration: this.transportConfigFormGroup.get('transportConfiguration').value,
-        alarms: this.alarmRulesFormGroup.get('alarms').value
+  add(): void {
+    if (this.allValid()) {
+      const deviceProfile: DeviceProfile = {
+        name: this.deviceProfileDetailsFormGroup.get('name').value,
+        type: this.deviceProfileDetailsFormGroup.get('type').value,
+        transportType: this.transportConfigFormGroup.get('transportType').value,
+        description: this.deviceProfileDetailsFormGroup.get('description').value,
+        profileData: {
+          configuration: createDeviceProfileConfiguration(DeviceProfileType.DEFAULT),
+          transportConfiguration: this.transportConfigFormGroup.get('transportConfiguration').value,
+          alarms: this.alarmRulesFormGroup.get('alarms').value
+        }
+      };
+      if (this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value) {
+        deviceProfile.defaultRuleChainId = new RuleChainId(this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value);
       }
-    };
-    if (this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value) {
-      deviceProfile.defaultRuleChainId = new RuleChainId(this.deviceProfileDetailsFormGroup.get('defaultRuleChainId').value);
+      this.deviceProfileService.saveDeviceProfile(deviceProfile).subscribe(
+        (savedDeviceProfile) => {
+          this.dialogRef.close(savedDeviceProfile);
+        }
+      );
+    }
+  }
+
+  getFormLabel(index: number): string {
+    switch (index) {
+      case 0:
+        return 'device-profile.device-profile-details';
+      case 1:
+        return 'device-profile.transport-configuration';
+      case 2:
+        return 'device-profile.alarm-rules';
+    }
+  }
+
+  changeStep($event: StepperSelectionEvent): void {
+    this.selectedIndex = $event.selectedIndex;
+    if (this.selectedIndex === this.maxStepperIndex) {
+      this.showNext = false;
+    } else {
+      this.showNext = true;
     }
-    this.deviceProfileService.saveDeviceProfile(deviceProfile).subscribe(
-      (savedDeviceProfile) => {
-        this.dialogRef.close(savedDeviceProfile);
+  }
+
+  private get maxStepperIndex(): number {
+    return this.addDeviceProfileStepper?._steps?.length - 1;
+  }
+
+  allValid(): boolean {
+    return !this.addDeviceProfileStepper.steps.find((item, index) => {
+      if (item.stepControl.invalid) {
+        item.interacted = true;
+        this.addDeviceProfileStepper.selectedIndex = index;
+        return true;
+      } else {
+        return false;
       }
-    );
+    });
   }
 }

@@ -48,7 +48,7 @@
     </button>
   </div>
   <div *ngIf="!createAlarmRulesFormArray().controls.length">
-      <span translate fxLayoutAlign="center center"
+      <span translate fxLayoutAlign="center center" style="margin: 16px 0"
             class="tb-prompt">device-profile.no-create-alarm-rules</span>
   </div>
   <div fxLayout="row" *ngIf="!disabled">
@@ -57,7 +57,7 @@
             (click)="addCreateAlarmRule()"
             matTooltip="{{ 'device-profile.add-create-alarm-rule' | translate }}"
             matTooltipPosition="above">
-      <mat-icon>add_circle_outline</mat-icon>
+      <mat-icon class="button-icon">add_circle_outline</mat-icon>
       {{ 'device-profile.add-create-alarm-rule' | translate }}
     </button>
   </div>

@@ -16,7 +16,7 @@
 
 :host {
   .create-alarm-rule {
-    border: 1px groove rgba(0, 0, 0, .25);
+    border: 2px groove rgba(0, 0, 0, .45);
     border-radius: 4px;
     padding: 8px;
   }
@@ -28,4 +28,9 @@
       width: 160px;
     }
   }
+  .button-icon{
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
 }

@@ -18,24 +18,11 @@
 <mat-expansion-panel class="device-profile-alarm" fxFlex [formGroup]="alarmFormGroup" [(expanded)]="expanded">
   <mat-expansion-panel-header>
     <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-      <mat-panel-title [fxShow]="!expanded">
+      <mat-panel-title>
         <div fxLayout="row" fxFlex fxLayoutAlign="start center">
           {{ alarmFormGroup.get('alarmType').value }}
         </div>
       </mat-panel-title>
-      <mat-form-field floatLabel="always"
-                      style="width: 600px;"
-                      [fxShow]="expanded"
-                      (keydown)="!disabled ? $event.stopPropagation() : null;"
-                      (click)="!disabled ? $event.stopPropagation() : null;">
-        <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
-        <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
-        <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
-          {{ 'device-profile.alarm-type-required' | translate }}
-        </mat-error>
-        <mat-hint *ngIf="!disabled"
-                  innerHTML="{{ 'device-profile.alarm-type-pattern-hint' | translate }}"></mat-hint>
-      </mat-form-field>
       <span fxFlex></span>
       <button *ngIf="!disabled" mat-icon-button style="min-width: 40px;"
               type="button"
@@ -46,6 +33,50 @@
       </button>
     </div>
   </mat-expansion-panel-header>
+  <div fxLayout="column" fxLayoutGap="0.5em">
+    <mat-divider></mat-divider>
+    <mat-form-field fxFlex floatLabel="always">
+      <mat-label>{{'device-profile.alarm-type' | translate}}</mat-label>
+      <input required matInput formControlName="alarmType" placeholder="Enter alarm type">
+      <mat-error *ngIf="alarmFormGroup.get('alarmType').hasError('required')">
+        {{ 'device-profile.alarm-type-required' | translate }}
+      </mat-error>
+      <mat-hint *ngIf="!disabled"
+                innerHTML="{{ 'device-profile.alarm-type-pattern-hint' | translate }}"></mat-hint>
+    </mat-form-field>
+  </div>
+  <mat-expansion-panel class="advanced-settings" [expanded]="false">
+    <mat-expansion-panel-header>
+      <mat-panel-title>
+        <div fxFlex fxLayout="row" fxLayoutAlign="end center">
+          <div class="tb-small" translate>device-profile.advanced-settings</div>
+        </div>
+      </mat-panel-title>
+    </mat-expansion-panel-header>
+    <mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
+      {{ 'device-profile.propagate-alarm' | translate }}
+    </mat-checkbox>
+    <section *ngIf="alarmFormGroup.get('propagate').value === true">
+      <mat-form-field floatLabel="always" class="mat-block">
+        <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
+        <mat-chip-list #relationTypesChipList [disabled]="disabled">
+          <mat-chip
+            *ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
+            (removed)="removeRelationType(key)">
+            {{key}}
+            <mat-icon matChipRemove>close</mat-icon>
+          </mat-chip>
+          <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
+                 style="max-width: 200px;"
+                 [matChipInputFor]="relationTypesChipList"
+                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+                 (matChipInputTokenEnd)="addRelationType($event)"
+                 [matChipInputAddOnBlur]="true">
+        </mat-chip-list>
+        <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
+      </mat-form-field>
+    </section>
+  </mat-expansion-panel>
   <div fxFlex fxLayout="column">
     <div translate class="tb-small" style="padding-bottom: 8px;">device-profile.create-alarm-rules</div>
     <tb-create-alarm-rules formControlName="createRules" style="padding-bottom: 16px;">
@@ -68,7 +99,7 @@
       </button>
     </div>
     <div *ngIf="!alarmFormGroup.get('clearRule').value">
-      <span translate fxLayoutAlign="center center"
+      <span translate fxLayoutAlign="center center" style="margin: 16px 0"
             class="tb-prompt">device-profile.no-clear-alarm-rule</span>
     </div>
     <div fxLayout="row" *ngIf="!disabled"
@@ -78,41 +109,9 @@
               (click)="addClearAlarmRule()"
               matTooltip="{{ 'device-profile.add-clear-alarm-rule' | translate }}"
               matTooltipPosition="above">
-        <mat-icon>add_circle_outline</mat-icon>
+        <mat-icon class="button-icon">add_circle_outline</mat-icon>
         {{ 'device-profile.add-clear-alarm-rule' | translate }}
       </button>
     </div>
   </div>
-  <mat-expansion-panel class="advanced-settings" [expanded]="false">
-    <mat-expansion-panel-header>
-      <mat-panel-title>
-        <div fxFlex fxLayout="row" fxLayoutAlign="end center">
-          <div class="tb-small" translate>device-profile.advanced-settings</div>
-        </div>
-      </mat-panel-title>
-    </mat-expansion-panel-header>
-    <mat-checkbox formControlName="propagate" style="display: block; padding-bottom: 16px;">
-      {{ 'device-profile.propagate-alarm' | translate }}
-    </mat-checkbox>
-    <section *ngIf="alarmFormGroup.get('propagate').value === true">
-      <mat-form-field floatLabel="always" class="mat-block">
-        <mat-label translate>device-profile.alarm-rule-relation-types-list</mat-label>
-        <mat-chip-list #relationTypesChipList [disabled]="disabled">
-          <mat-chip
-            *ngFor="let key of alarmFormGroup.get('propagateRelationTypes').value;"
-            (removed)="removeRelationType(key)">
-            {{key}}
-            <mat-icon matChipRemove>close</mat-icon>
-          </mat-chip>
-          <input matInput type="text" placeholder="{{'device-profile.alarm-rule-relation-types-list' | translate}}"
-                 style="max-width: 200px;"
-                 [matChipInputFor]="relationTypesChipList"
-                 [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-                 (matChipInputTokenEnd)="addRelationType($event)"
-                 [matChipInputAddOnBlur]="true">
-        </mat-chip-list>
-        <mat-hint innerHTML="{{ 'device-profile.alarm-rule-relation-types-list-hint' | translate }}"></mat-hint>
-      </mat-form-field>
-    </section>
-  </mat-expansion-panel>
 </mat-expansion-panel>

@@ -17,7 +17,7 @@
 :host {
   display: block;
   .clear-alarm-rule {
-    border: 1px groove rgba(0, 0, 0, .25);
+    border: 2px groove rgba(0, 0, 0, .45);
     border-radius: 4px;
     padding: 8px;
   }
@@ -28,13 +28,16 @@
       .mat-expansion-panel-header {
         padding: 0 24px 0 8px;
         &.mat-expanded {
-          height: 80px;
+          height: 48px;
         }
       }
     }
     &.advanced-settings {
       border: none;
       padding: 0;
+      .mat-expansion-panel-header {
+        padding: 0 8px;
+      }
     }
   }
 }
@@ -43,7 +46,7 @@
   .mat-expansion-panel {
     &.device-profile-alarm {
       .mat-expansion-panel-body {
-        padding: 0 8px;
+        padding: 0 8px 8px;
       }
     }
     &.advanced-settings {
@@ -51,5 +54,10 @@
         padding: 0;
       }
     }
+    .button-icon{
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
   }
 }

@@ -25,6 +25,9 @@
           {{deviceTransportTypeTranslations.get(type) | translate}}
         </mat-option>
       </mat-select>
+      <mat-hint *ngIf="detailsForm.get('transportType').value">
+        {{deviceTransportTypeHints.get(detailsForm.get('transportType').value) | translate}}
+      </mat-hint>
       <mat-error *ngIf="detailsForm.get('transportType').hasError('required')">
         {{ 'device-profile.transport-type-required' | translate }}
       </mat-error>

@@ -18,7 +18,12 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';
-import { DeviceProfile, DeviceTransportType, deviceTransportTypeTranslationMap } from '@shared/models/device.models';
+import {
+  DeviceProfile,
+  DeviceTransportType,
+  deviceTransportTypeHintMap,
+  deviceTransportTypeTranslationMap
+} from '@shared/models/device.models';
 
 @Component({
   selector: 'tb-device-profile-tabs',
@@ -28,8 +33,11 @@ import { DeviceProfile, DeviceTransportType, deviceTransportTypeTranslationMap }
 export class DeviceProfileTabsComponent extends EntityTabsComponent<DeviceProfile> {
 
   deviceTransportTypes = Object.keys(DeviceTransportType);
+
   deviceTransportTypeTranslations = deviceTransportTypeTranslationMap;
 
+  deviceTransportTypeHints = deviceTransportTypeHintMap;
+
   constructor(protected store: Store<AppState>) {
     super(store);
   }