Merge branch 'vvlladd28-improvement/3.0/minor-fix' into develop/3.0

ui-ngx/src/app/modules/home/components/audit-log/audit-log-details-dialog.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar color="primary">
   <h2 translate>audit-log.audit-log-details</h2>
   <span fxFlex></span>
   <button mat-button mat-icon-button
@@ -33,10 +33,8 @@
   <div #failureDetailsEditor [fxShow]="displayFailureDetails" class="tb-audit-log-failure-details">
   </div>
 </div>
-<div mat-dialog-actions fxLayout="row">
+<div mat-dialog-actions fxLayoutAlign="end center">
-  <span fxFlex></span>
   <button mat-button color="primary"
-          style="margin-right: 20px;"
           type="button"
           [disabled]="(isLoading$ | async)"
           [mat-dialog-close]="false" cdkFocusInitial>

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

@@ -18,7 +18,7 @@
 <section [formGroup]="parentForm">
   <mat-form-field class="mat-block">
     <mat-label translate>contact.country</mat-label>
-    <mat-select matInput formControlName="country">
+    <mat-select formControlName="country">
       <mat-option *ngFor="let country of countries" [value]="country">
         {{ country }}
       </mat-option>

ui-ngx/src/app/modules/home/components/details-panel.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';

ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.html

@@ -16,11 +16,11 @@
 
 -->
 <form (ngSubmit)="add()" style="min-width: 400px;" [ngStyle]="entitiesTableConfig.addDialogStyle">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>{{ translations.add }}</h2>
     <span fxFlex></span>
     <div [tb-help]="resources.helpLinkId"></div>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -32,15 +32,13 @@
   <div mat-dialog-content>
     <tb-anchor #entityDetailsForm></tb-anchor>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayoutAlign="end center">
-    <span fxFlex></span>
+    <button mat-raised-button color="primary"
-    <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty">
       {{ 'action.add' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             cdkFocusInitial
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.scss

@@ -13,5 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
+:host ::ng-deep .mat-padding{
+  padding: 0;
 }

ui-ngx/src/app/modules/home/components/entity/add-entity-dialog.component.ts

@@ -14,20 +14,19 @@
 /// limitations under the License.
 ///
 
-import {Component, ComponentFactoryResolver, Inject, OnInit, SkipSelf, ViewChild} from '@angular/core';
+import { Component, ComponentFactoryResolver, Inject, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import {PageComponent} from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
-import {Store} from '@ngrx/store';
+import { AppState } from '@core/core.state';
-import {AppState} from '@core/core.state';
+import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';
-import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
+import { EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
-import {EntityTypeResource, EntityTypeTranslation} from '@shared/models/entity-type.models';
+import { BaseData, HasId } from '@shared/models/base-data';
-import {BaseData, HasId} from '@shared/models/base-data';
+import { EntityId } from '@shared/models/id/entity-id';
-import {EntityId} from '@shared/models/id/entity-id';
+import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
-import {TbAnchorComponent} from '@shared/components/tb-anchor.component';
+import { EntityComponent } from './entity.component';
-import {EntityComponent} from './entity.component';
+import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
-import {EntityTableConfig} from '@home/models/entity/entities-table-config.models';
+import { AddEntityDialogData } from '@home/models/entity/entity-component.models';
-import {AddEntityDialogData} from '@home/models/entity/entity-component.models';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 

ui-ngx/src/app/modules/home/components/entity/entities-table.component.html

@@ -33,7 +33,7 @@
   </mat-drawer>
   <mat-drawer-content>
     <div class="mat-padding tb-entity-table tb-absolute-fill">
-      <div fxFlex fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
+      <div fxLayout="column" class="mat-elevation-z1 tb-entity-table-content">
         <mat-toolbar class="mat-table-toolbar" [fxShow]="!textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
             <span *ngIf="entitiesTableConfig.tableTitle" class="tb-entity-table-title">{{ entitiesTableConfig.tableTitle }}</span>
@@ -41,10 +41,9 @@
             <tb-timewindow *ngIf="entitiesTableConfig.useTimePageLink" [(ngModel)]="timewindow"
                             (ngModelChange)="onTimewindowChange()"
                             asButton historyOnly></tb-timewindow>
-            <span fxFlex *ngIf="!entitiesTableConfig.headerComponent ||
+            <span fxFlex *ngIf="!entitiesTableConfig.headerComponent || entitiesTableConfig.useTimePageLink"></span>
-                                entitiesTableConfig.useTimePageLink"></span>
             <div [fxShow]="addEnabled()">
-              <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+              <button mat-icon-button [disabled]="isLoading$ | async"
                       *ngIf="!entitiesTableConfig.addActionDescriptors.length; else addActions"
                       (click)="addEntity($event)"
                       matTooltip="{{ translations.add | translate }}"
@@ -52,7 +51,7 @@
                 <mat-icon>add</mat-icon>
               </button>
               <ng-template #addActions>
-                <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                <button mat-icon-button [disabled]="isLoading$ | async"
                         *ngIf="entitiesTableConfig.addActionDescriptors.length === 1; else addActionsMenu"
                         [fxShow]="entitiesTableConfig.addActionDescriptors[0].isEnabled()"
                         (click)="entitiesTableConfig.addActionDescriptors[0].onAction($event)"
@@ -61,7 +60,7 @@
                   <mat-icon>{{entitiesTableConfig.addActionDescriptors[0].icon}}</mat-icon>
                 </button>
                 <ng-template #addActionsMenu>
-                  <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                  <button mat-icon-button [disabled]="isLoading$ | async"
                           matTooltip="{{ translations.add | translate }}"
                           matTooltipPosition="above"
                           [matMenuTriggerFor]="addActionsMenu">
@@ -79,20 +78,20 @@
                 </ng-template>
               </ng-template>
             </div>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+            <button mat-icon-button [disabled]="isLoading$ | async"
                     [fxShow]="actionDescriptor.isEnabled()" *ngFor="let actionDescriptor of headerActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
                     (click)="actionDescriptor.onAction($event)">
               <mat-icon>{{actionDescriptor.icon}}</mat-icon>
             </button>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
+            <button mat-icon-button [disabled]="isLoading$ | async" (click)="updateData()"
                     matTooltip="{{ 'action.refresh' | translate }}"
                     matTooltipPosition="above">
               <mat-icon>refresh</mat-icon>
             </button>
             <button *ngIf="entitiesTableConfig.searchEnabled"
-                    mat-button mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
+                    mat-icon-button [disabled]="isLoading$ | async" (click)="enterFilterMode()"
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
@@ -101,7 +100,7 @@
         </mat-toolbar>
         <mat-toolbar class="mat-table-toolbar" [fxShow]="textSearchMode && dataSource.selection.isEmpty()">
           <div class="mat-toolbar-tools">
-            <button mat-button mat-icon-button
+            <button mat-icon-button
                     matTooltip="{{ translations.search | translate }}"
                     matTooltipPosition="above">
               <mat-icon>search</mat-icon>
@@ -112,7 +111,7 @@
                      [(ngModel)]="pageLink.textSearch"
                      placeholder="{{ translations.search | translate }}"/>
             </mat-form-field>
-            <button mat-button mat-icon-button (click)="exitFilterMode()"
+            <button mat-icon-button (click)="exitFilterMode()"
                     matTooltip="{{ 'action.close' | translate }}"
                     matTooltipPosition="above">
               <mat-icon>close</mat-icon>
@@ -125,7 +124,7 @@
                       {{ translate.get(translations.selectedEntities, {count: dataSource.selection.selected.length}) | async }}
                     </span>
             <span fxFlex></span>
-            <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+            <button mat-icon-button [disabled]="isLoading$ | async"
                     [fxShow]="actionDescriptor.isEnabled" *ngFor="let actionDescriptor of groupActionDescriptors"
                     matTooltip="{{ actionDescriptor.name }}"
                     matTooltipPosition="above"
@@ -167,7 +166,7 @@
               <mat-header-cell *matHeaderCellDef [ngStyle]="headerCellStyle(column)" mat-sort-header [disabled]="!column.sortable"> {{ column.title | translate }} </mat-header-cell>
               <mat-cell *matCellDef="let entity; let row = index"
                         [ngStyle]="cellStyle(entity, column, row)">
-                <button mat-button mat-icon-button [disabled]="isLoading$ | async"
+                <button mat-icon-button [disabled]="isLoading$ | async"
                         [fxShow]="column.actionDescriptor.isEnabled(entity)"
                         matTooltip="{{ column.actionDescriptor.nameFunction ? column.actionDescriptor.nameFunction(entity) : column.actionDescriptor.name }}"
                         matTooltipPosition="above"

ui-ngx/src/app/modules/home/components/entity/entity-details-panel.component.ts

@@ -15,6 +15,7 @@
 ///
 
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ComponentFactoryResolver,
@@ -23,28 +24,24 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  ViewChild,
-  ViewChildren,
   QueryList,
-  ContentChildren, AfterViewInit
+  ViewChild,
+  ViewChildren
 } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { BaseData, HasId } from '@shared/models/base-data';
-import {
+import { EntityType, EntityTypeResource, EntityTypeTranslation } from '@shared/models/entity-type.models';
-  EntityType,
-  EntityTypeResource,
-  EntityTypeTranslation
-} from '@shared/models/entity-type.models';
 import { NgForm } from '@angular/forms';
 import { EntityComponent } from './entity.component';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { EntityAction } from '@home/models/entity/entity-component.models';
 import { Subscription } from 'rxjs';
-import { MatTabGroup, MatTab } from '@angular/material/tabs';
+import { MatTab, MatTabGroup } from '@angular/material/tabs';
 import { EntityTabsComponent } from '@home/components/entity/entity-tabs.component';
+import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 
 @Component({
   selector: 'tb-entity-details-panel',
@@ -84,7 +81,7 @@ export class EntityDetailsPanelComponent extends PageComponent implements OnInit
 
   translations: EntityTypeTranslation;
   resources: EntityTypeResource;
-  entity: BaseData<HasId>;
+  entity: BaseData<HasId> | WidgetsBundle;
 
   private currentEntityId: HasId;
   private entityActionSubscription: Subscription;

ui-ngx/src/app/modules/home/components/import-export/import-dialog-csv.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form>
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>{{ importTitle }}</h2>
     <span fxFlex></span>
     <div [tb-help]="'entitiesImport'"></div>
@@ -44,13 +44,11 @@
             </tb-file-input>
           </fieldset>
         </form>
-        <div fxLayout="row">
+        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
-          <span fxFlex></span>
           <button mat-button
-                  style="margin-right: 20px;"
                   [disabled]="(isLoading$ | async)"
                   (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-          <button mat-button mat-raised-button
+          <button mat-raised-button
                   [disabled]="(isLoading$ | async) || selectFileFormGroup.invalid || !selectFileFormGroup.dirty"
                   color="primary"
                   (click)="nextStep(2)">{{ 'action.continue' | translate }}</button>
@@ -62,7 +60,7 @@
           <fieldset [disabled]="isLoading$ | async" fxLayout="column">
             <mat-form-field class="mat-block">
               <mat-label translate>import.csv-delimiter</mat-label>
-              <mat-select required matInput formControlName="delim">
+              <mat-select required formControlName="delim">
                 <mat-option *ngFor="let delimiter of delimiters" [value]="delimiter.key">
                   {{ delimiter.value }}
                 </mat-option>
@@ -78,16 +76,15 @@
             </div>
           </fieldset>
         </form>
-        <div fxLayout="row">
+        <div fxLayout="row" fxLayoutGap="20px">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
           <span fxFlex></span>
           <button mat-button
-                  style="margin-right: 20px;"
                   [disabled]="(isLoading$ | async)"
                   (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-          <button mat-button mat-raised-button
+          <button mat-raised-button
                   [disabled]="(isLoading$ | async)"
                   color="primary"
                   (click)="nextStep(3)">{{ 'action.continue' | translate }}</button>
@@ -98,16 +95,15 @@
           <ng-template matStepLabel>{{ 'import.stepper-text.column-type' | translate }}</ng-template>
           <tb-table-columns-assignment formControlName="columnsParam" [entityType]="entityType"></tb-table-columns-assignment>
         </form>
-        <div fxLayout="row">
+        <div fxLayout="row" fxLayoutGap="20px">
           <button mat-button
                   [disabled]="(isLoading$ | async)"
                   (click)="previousStep()">{{ 'action.back' | translate }}</button>
           <span fxFlex></span>
           <button mat-button
-                  style="margin-right: 20px;"
                   [disabled]="(isLoading$ | async)"
                   (click)="cancel()">{{ 'action.cancel' | translate }}</button>
-          <button mat-button mat-raised-button
+          <button mat-raised-button
                   [disabled]="(isLoading$ | async) || columnTypesFormGroup.invalid || !columnTypesFormGroup.dirty"
                   color="primary"
                   (click)="nextStep(4)">{{ 'action.continue' | translate }}</button>
@@ -131,9 +127,8 @@
             {{ translate.instant('import.message.error-entities', {count: this.statistical.error.entity}) }}
           </p>
         </div>
-        <div fxLayout="row">
+        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="20px">
-          <span fxFlex></span>
+          <button mat-raised-button
-          <button mat-button mat-raised-button
                   [disabled]="(isLoading$ | async)"
                   color="primary"
                   (click)="nextStep(6)">{{ 'action.ok' | translate }}</button>

ui-ngx/src/app/modules/home/components/import-export/import-export.models.ts

@@ -17,9 +17,6 @@
 import { Widget, WidgetType } from '@app/shared/models/widget.models';
 import { DashboardLayoutId } from '@shared/models/dashboard.models';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { ActionType } from '@shared/models/audit-log.models';
-import { RuleChain, RuleChainMetaData } from '@shared/models/rule-chain.models';
 
 export interface ImportWidgetResult {
   widget: Widget;

ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-table [dataSource]="dataSource">
+<table mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="order">
     <mat-header-cell *matHeaderCellDef style="min-width: 40px; max-width: 40px; width: 40px"></mat-header-cell>
     <mat-cell *matCellDef="let column; let i = index">
@@ -52,5 +52,5 @@
   </ng-container>
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
   <mat-row *matRowDef="let column; columns: displayedColumns;"></mat-row>
-</mat-table>
+</table>
 <mat-divider></mat-divider>

ui-ngx/src/app/modules/home/components/import-export/table-columns-assignment.component.ts

@@ -19,8 +19,12 @@ import { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, Va
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityType } from '@shared/models/entity-type.models';
-import { CsvColumnParam, ImportEntityColumnType, importEntityColumnTypeTranslations,
+import {
-         importEntityObjectColumns } from '@home/components/import-export/import-export.models';
+  CsvColumnParam,
+  ImportEntityColumnType,
+  importEntityColumnTypeTranslations,
+  importEntityObjectColumns
+} from '@home/components/import-export/import-export.models';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 
@@ -51,8 +55,6 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
 
   displayedColumns = ['order', 'sampleData', 'type', 'key'];
 
-  importEntityColumnType = ImportEntityColumnType;
-
   columnTypes: AssignmentColumnType[] = [];
 
   columnTypesTranslations = importEntityColumnTypeTranslations;
@@ -138,12 +140,10 @@ export class TableColumnsAssignmentComponent implements OnInit, ControlValueAcce
   }
 
   public isColumnTypeDiffers(columnType: ImportEntityColumnType): boolean {
-    return columnType !== ImportEntityColumnType.name &&
+    return columnType === ImportEntityColumnType.clientAttribute ||
-      columnType !== ImportEntityColumnType.type &&
+      columnType === ImportEntityColumnType.sharedAttribute ||
-      columnType !== ImportEntityColumnType.label &&
+      columnType === ImportEntityColumnType.serverAttribute ||
-      columnType !== ImportEntityColumnType.accessToken &&
+      columnType === ImportEntityColumnType.timeseries;
-      columnType !== ImportEntityColumnType.isGateway &&
-      columnType !== ImportEntityColumnType.description;
   }
 
   private columnValid(column: CsvColumnParam): boolean {

ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form #addEntitiesToCustomerForm="ngForm" [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -39,16 +39,14 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayoutAlign="end center">
-    <span fxFlex></span>
+    <button mat-raised-button color="primary"
-    <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || addEntitiesToCustomerForm.invalid
             || !addEntitiesToCustomerForm.dirty">
       {{ 'action.assign' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>

ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.ts

@@ -14,19 +14,18 @@
 /// limitations under the License.
 ///
 
-import {Component, Inject, OnInit, SkipSelf} from '@angular/core';
+import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import {PageComponent} from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
-import {Store} from '@ngrx/store';
+import { AppState } from '@core/core.state';
-import {AppState} from '@core/core.state';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
-import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import { DeviceService } from '@core/http/device.service';
-import {DeviceService} from '@core/http/device.service';
+import { EntityType } from '@shared/models/entity-type.models';
-import {EntityType} from '@shared/models/entity-type.models';
+import { forkJoin, Observable } from 'rxjs';
-import {forkJoin, Observable} from 'rxjs';
+import { AssetService } from '@core/http/asset.service';
-import {AssetService} from '@core/http/asset.service';
+import { EntityViewService } from '@core/http/entity-view.service';
-import {EntityViewService} from '@core/http/entity-view.service';
+import { DashboardService } from '@core/http/dashboard.service';
-import {DashboardService} from '@core/http/dashboard.service';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 

ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form #assignToCustomerForm="ngForm" [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -30,7 +30,7 @@
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <span>{{ assignToCustomerText | translate }}</span>
+      <div style="padding-bottom: 0.5em;">{{ assignToCustomerText | translate }}</div>
       <tb-entity-autocomplete
         formControlName="customerId"
         required
@@ -38,16 +38,14 @@
       </tb-entity-autocomplete>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
-    <span fxFlex></span>
+    <button mat-raised-button color="primary"
-    <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || assignToCustomerForm.invalid
             || !assignToCustomerForm.dirty">
       {{ 'action.assign' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>

ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.ts

@@ -14,19 +14,18 @@
 /// limitations under the License.
 ///
 
-import {Component, Inject, OnInit, SkipSelf} from '@angular/core';
+import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import {PageComponent} from '@shared/components/page.component';
+import { Store } from '@ngrx/store';
-import {Store} from '@ngrx/store';
+import { AppState } from '@core/core.state';
-import {AppState} from '@core/core.state';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
-import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import { DeviceService } from '@core/http/device.service';
-import {DeviceService} from '@core/http/device.service';
+import { EntityId } from '@shared/models/id/entity-id';
-import {EntityId} from '@shared/models/id/entity-id';
+import { EntityType } from '@shared/models/entity-type.models';
-import {EntityType} from '@shared/models/entity-type.models';
+import { forkJoin, Observable } from 'rxjs';
-import {forkJoin, Observable} from 'rxjs';
+import { AssetService } from '@core/http/asset.service';
-import {AssetService} from '@core/http/asset.service';
+import { EntityViewService } from '@core/http/entity-view.service';
-import {EntityViewService} from '@core/http/entity-view.service';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 

ui-ngx/src/app/modules/home/dialogs/home-dialogs.module.ts

@@ -17,8 +17,8 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@app/shared/shared.module';
-import {AssignToCustomerDialogComponent} from '@modules/home/dialogs/assign-to-customer-dialog.component';
+import { AssignToCustomerDialogComponent } from '@modules/home/dialogs/assign-to-customer-dialog.component';
-import {AddEntitiesToCustomerDialogComponent} from '@modules/home/dialogs/add-entities-to-customer-dialog.component';
+import { AddEntitiesToCustomerDialogComponent } from '@modules/home/dialogs/add-entities-to-customer-dialog.component';
 import { HomeDialogsService } from './home-dialogs.service';
 
 @NgModule({

ui-ngx/src/app/modules/home/dialogs/home-dialogs.service.ts

@@ -15,8 +15,6 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { AuthService } from '@core/auth/auth.service';
 import { MatDialog } from '@angular/material/dialog';
 import { EntityType } from '@shared/models/entity-type.models';
 import { Observable } from 'rxjs';
@@ -38,7 +36,6 @@ export class HomeDialogsService {
         return this.openImportDialogCSV(entityType, 'device.import', 'device.device-file');
       case EntityType.ASSET:
         return this.openImportDialogCSV(entityType, 'asset.import', 'asset.asset-file');
-        break;
     }
   }
 

ui-ngx/src/app/modules/home/pages/asset/asset-routing.module.ts

@@ -14,12 +14,12 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 
-import {EntitiesTableComponent} from '../../components/entity/entities-table.component';
+import { EntitiesTableComponent } from '../../components/entity/entities-table.component';
-import {Authority} from '@shared/models/authority.enum';
+import { Authority } from '@shared/models/authority.enum';
-import {AssetsTableConfigResolver} from './assets-table-config.resolver';
+import { AssetsTableConfigResolver } from './assets-table-config.resolver';
 
 const routes: Routes = [
   {

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,7 +40,7 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{'asset.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onAssetIdCopied($event)"

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

@@ -14,16 +14,16 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
+import { EntityComponent } from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {EntityType} from '@shared/models/entity-type.models';
+import { EntityType } from '@shared/models/entity-type.models';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {AssetInfo} from '@app/shared/models/asset.models';
+import { AssetInfo } from '@app/shared/models/asset.models';
 
 @Component({
   selector: 'tb-asset',

ui-ngx/src/app/modules/home/pages/asset/asset.module.ts

@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import {NgModule} from '@angular/core';
+import { NgModule } from '@angular/core';
-import {CommonModule} from '@angular/common';
+import { CommonModule } from '@angular/common';
-import {SharedModule} from '@shared/shared.module';
+import { SharedModule } from '@shared/shared.module';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
-import {AssetComponent} from './asset.component';
+import { AssetComponent } from './asset.component';
-import {AssetTableHeaderComponent} from './asset-table-header.component';
+import { AssetTableHeaderComponent } from './asset-table-header.component';
-import {AssetRoutingModule} from './asset-routing.module';
+import { AssetRoutingModule } from './asset-routing.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { AssetTabsComponent } from '@home/pages/asset/asset-tabs.component';
 
 @NgModule({

ui-ngx/src/app/modules/home/pages/asset/assets-table-config.resolver.ts

@@ -146,7 +146,7 @@ export class AssetsTableConfigResolver implements Resolve<EntityTableConfig<Asse
 
   configureColumns(assetScope: string): Array<EntityTableColumn<AssetInfo>> {
     const columns: Array<EntityTableColumn<AssetInfo>> = [
-      new DateEntityTableColumn<AssetInfo>('createdTime', 'asset.created-time', this.datePipe, '150px'),
+      new DateEntityTableColumn<AssetInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
       new EntityTableColumn<AssetInfo>('name', 'asset.name', '25%'),
       new EntityTableColumn<AssetInfo>('type', 'asset.asset-type', '25%'),
       new EntityTableColumn<DeviceInfo>('label', 'asset.label', '25%'),

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'manageUsers')"
@@ -46,7 +46,7 @@
           [fxShow]="!hideDelete() && !isEdit && !isPublic">
     {{'customer.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onCustomerIdCopied($event)"

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

@@ -19,10 +19,9 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Customer } from '@shared/models/customer.model';
-import {Tenant} from '@app/shared/models/tenant.model';
+import { ActionNotificationShow } from '@app/core/notification/notification.actions';
-import {ActionNotificationShow} from '@app/core/notification/notification.actions';
+import { TranslateService } from '@ngx-translate/core';
-import {TranslateService} from '@ngx-translate/core';
+import { ContactBasedComponent } from '../../components/entity/contact-based.component';
-import {ContactBasedComponent} from '../../components/entity/contact-based.component';
 
 @Component({
   selector: 'tb-customer',

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"

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

@@ -14,21 +14,20 @@
 /// limitations under the License.
 ///
 
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
-import {Store} from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import {AppState} from '@core/core.state';
+import { AppState } from '@core/core.state';
-import {EntityComponent} from '../../components/entity/entity.component';
+import { EntityComponent } from '../../components/entity/entity.component';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
 import {
   Dashboard,
-  isPublicDashboard,
   getDashboardAssignedCustomersText,
   isCurrentPublicDashboardCustomer,
-  DashboardInfo
+  isPublicDashboard
 } from '@shared/models/dashboard.models';
-import {DashboardService} from '@core/http/dashboard.service';
+import { DashboardService } from '@core/http/dashboard.service';
 
 @Component({
   selector: 'tb-dashboard-form',

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

@@ -15,11 +15,11 @@
     limitations under the License.
 
 -->
-<form #deviceCredentialsForm="ngForm" [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()">
+<form #deviceCredentialsForm="ngForm" [formGroup]="deviceCredentialsFormGroup" (ngSubmit)="save()" style="min-width: 350px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>device.device-credentials</h2>
     <span fxFlex></span>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -32,7 +32,7 @@
     <fieldset [disabled]="(isLoading$ | async) || isReadOnly">
       <mat-form-field class="mat-block">
         <mat-label translate>device.credentials-type</mat-label>
-        <mat-select matInput formControlName="credentialsType"
+        <mat-select formControlName="credentialsType"
                     (ngModelChange)="credentialsTypeChanged()">
           <mat-option *ngFor="let credentialsType of credentialsTypes" [value]="credentialsType">
             {{ credentialTypeNamesMap.get(deviceCredentialsType[credentialsType]) }}
@@ -60,16 +60,14 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayoutAlign="end center">
-    <span fxFlex></span>
+    <button *ngIf="!isReadOnly" mat-raised-button color="primary"
-    <button *ngIf="!isReadOnly" mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || deviceCredentialsForm.invalid
             || !deviceCredentialsForm.dirty">
       {{ 'action.save' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             [disabled]="(isLoading$ | async)"
             (click)="cancel()" cdkFocusInitial>

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

@@ -14,18 +14,14 @@
 /// limitations under the License.
 ///
 
-import {Component, OnInit, SkipSelf, Inject} from '@angular/core';
+import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import {FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators} from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
+import { DeviceService } from '@core/http/device.service';
-import { TranslateService } from '@ngx-translate/core';
+import { credentialTypeNames, DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
-import { AuthService } from '@core/auth/auth.service';
-import {DeviceService} from '@core/http/device.service';
-import {DeviceCredentials, DeviceCredentialsType, credentialTypeNames} from '@shared/models/device.models';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 

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

@@ -18,7 +18,6 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { DeviceInfo } from '@shared/models/device.models';
-import { EntityType } from '@shared/models/entity-type.models';
 import { EntityTabsComponent } from '../../components/entity/entity-tabs.component';
 
 @Component({

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,13 +40,13 @@
           [fxShow]="!isEdit">
     {{ (deviceScope === 'customer_user' ? 'device.view-credentials' : 'device.manage-credentials') | translate }}
   </button>
-  <button mat-raised-button color="primary"
+  <button mat-raised-button color="primary" fxFlex.xs
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
           [fxShow]="!hideDelete() && !isEdit">
     {{'device.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onDeviceIdCopied($event)"

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

@@ -14,22 +14,18 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { select, Store } from '@ngrx/store';
+import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { User } from '@shared/models/user.model';
+import { DeviceInfo } from '@shared/models/device.models';
-import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
+import { EntityType } from '@shared/models/entity-type.models';
-import { map } from 'rxjs/operators';
+import { NULL_UUID } from '@shared/models/id/has-uuid';
-import { Authority } from '@shared/models/authority.enum';
+import { ActionNotificationShow } from '@core/notification/notification.actions';
-import {DeviceInfo} from '@shared/models/device.models';
+import { TranslateService } from '@ngx-translate/core';
-import {EntityType} from '@shared/models/entity-type.models';
+import { DeviceService } from '@core/http/device.service';
-import {NULL_UUID} from '@shared/models/id/has-uuid';
+import { ClipboardService } from 'ngx-clipboard';
-import {ActionNotificationShow} from '@core/notification/notification.actions';
-import {TranslateService} from '@ngx-translate/core';
-import {DeviceService} from '@core/http/device.service';
-import {ClipboardService} from 'ngx-clipboard';
 
 @Component({
   selector: 'tb-device',

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

@@ -17,12 +17,12 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import {DeviceComponent} from '@modules/home/pages/device/device.component';
+import { DeviceComponent } from '@modules/home/pages/device/device.component';
-import {DeviceRoutingModule} from './device-routing.module';
+import { DeviceRoutingModule } from './device-routing.module';
-import {DeviceTableHeaderComponent} from '@modules/home/pages/device/device-table-header.component';
+import { DeviceTableHeaderComponent } from '@modules/home/pages/device/device-table-header.component';
-import {DeviceCredentialsDialogComponent} from '@modules/home/pages/device/device-credentials-dialog.component';
+import { DeviceCredentialsDialogComponent } from '@modules/home/pages/device/device-credentials-dialog.component';
-import {HomeDialogsModule} from '../../dialogs/home-dialogs.module';
+import { HomeDialogsModule } from '../../dialogs/home-dialogs.module';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { DeviceTabsComponent } from '@home/pages/device/device-tabs.component';
 
 @NgModule({

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'makePublic')"
@@ -40,7 +40,7 @@
           [fxShow]="!hideDelete() && !isEdit">
     {{'entity-view.delete' | translate }}
   </button>
-  <div fxLayout="row">
+  <div fxLayout="row" fxLayout.xs="column">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onEntityViewIdCopied($event)"

ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <form style="min-width: 400px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>user.activation-link</h2>
     <span fxFlex></span>
     <button mat-button mat-icon-button
@@ -29,11 +29,11 @@
   </mat-progress-bar>
   <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
   <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content mat-padding" fxLayout="column">
+    <div class="mat-content" fxLayout="column">
       <span [innerHTML]="'user.activation-link-text' | translate: {activationLink: activationLink}"></span>
       <div fxLayout="row" fxLayoutAlign="start center">
         <pre class="tb-highlight" fxFlex><code>{{ activationLink }}</code></pre>
-        <button mat-button mat-icon-button
+        <button mat-icon-button
                 color="primary"
                 ngxClipboard
                 cbContent="{{ activationLink }}"
@@ -45,10 +45,8 @@
       </div>
     </div>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayoutAlign="end center">
-    <span fxFlex></span>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             cdkFocusInitial
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/pages/user/activation-link-dialog.component.ts

@@ -16,7 +16,6 @@
 
 import { Component, Inject, OnInit } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';

ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.html

@@ -15,12 +15,12 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="add()" style="width: 600px;">
+<form (ngSubmit)="add()" style="min-width: 450px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>user.add</h2>
     <span fxFlex></span>
     <div [tb-help]="'user'"></div>
-    <button mat-button mat-icon-button
+    <button mat-icon-button
             (click)="cancel()"
             type="button">
       <mat-icon class="material-icons">close</mat-icon>
@@ -33,22 +33,20 @@
     <tb-user></tb-user>
     <mat-form-field class="mat-block">
       <mat-label translate>user.activation-method</mat-label>
-      <mat-select matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="activationMethod">
+      <mat-select [ngModelOptions]="{standalone: true}" [(ngModel)]="activationMethod">
         <mat-option *ngFor="let activationMethod of activationMethods" [value]="activationMethod">
           {{ activationMethodTranslations.get(activationMethodEnum[activationMethod]) | translate }}
         </mat-option>
       </mat-select>
     </mat-form-field>
   </div>
-  <div mat-dialog-actions fxLayout="row">
+  <div mat-dialog-actions fxLayoutAlign="end center">
-    <span fxFlex></span>
+    <button mat-raised-button color="primary"
-    <button mat-button mat-raised-button color="primary"
             type="submit"
             [disabled]="(isLoading$ | async) || detailsForm.invalid || !detailsForm.dirty">
       {{ 'action.add' | translate }}
     </button>
     <button mat-button color="primary"
-            style="margin-right: 20px;"
             type="button"
             cdkFocusInitial
             [disabled]="(isLoading$ | async)"

ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.scss

@@ -0,0 +1,19 @@
+/**
+ * Copyright © 2016-2020 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host ::ng-deep .mat-padding{
+  padding: 0;
+}

ui-ngx/src/app/modules/home/pages/user/add-user-dialog.component.ts

@@ -16,7 +16,6 @@
 
 import { Component, Inject, OnInit, ViewChild } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { NgForm } from '@angular/forms';
@@ -30,7 +29,7 @@ import {
   ActivationLinkDialogComponent,
   ActivationLinkDialogData
 } from '@modules/home/pages/user/activation-link-dialog.component';
-import {TenantId} from '@app/shared/models/id/tenant-id';
+import { TenantId } from '@app/shared/models/id/tenant-id';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 
@@ -42,7 +41,8 @@ export interface AddUserDialogData {
 
 @Component({
   selector: 'tb-add-user-dialog',
-  templateUrl: './add-user-dialog.component.html'
+  templateUrl: './add-user-dialog.component.html',
+  styleUrls: ['./add-user-dialog.component.scss']
 })
 export class AddUserDialogComponent extends DialogComponent<AddUserDialogComponent, User> implements OnInit {
 

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

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'disableAccount')"

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

@@ -14,13 +14,13 @@
 /// limitations under the License.
 ///
 
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { EntityComponent } from '../../components/entity/entity.component';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { User } from '@shared/models/user.model';
-import { selectAuth, selectUserDetails } from '@core/auth/auth.selectors';
+import { selectAuth } from '@core/auth/auth.selectors';
 import { map } from 'rxjs/operators';
 import { Authority } from '@shared/models/authority.enum';
 import { isUndefined } from '@core/utils';

ui-ngx/src/app/modules/home/pages/user/user.module.ts

@@ -21,7 +21,7 @@ import { UserComponent } from '@modules/home/pages/user/user.component';
 import { UserRoutingModule } from '@modules/home/pages/user/user-routing.module';
 import { AddUserDialogComponent } from '@modules/home/pages/user/add-user-dialog.component';
 import { ActivationLinkDialogComponent } from '@modules/home/pages/user/activation-link-dialog.component';
-import {HomeComponentsModule} from '@modules/home/components/home-components.module';
+import { HomeComponentsModule } from '@modules/home/components/home-components.module';
 import { UserTabsComponent } from '@home/pages/user/user-tabs.component';
 
 @NgModule({

ui-ngx/src/app/modules/home/pages/widget/widget-library-routing.module.ts

@@ -26,9 +26,9 @@ import { Observable } from 'rxjs';
 import { WidgetsBundle } from '@shared/models/widgets-bundle.model';
 import { WidgetService } from '@core/http/widget.service';
 import { WidgetEditorComponent } from '@home/pages/widget/widget-editor.component';
-import { map, share } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { toWidgetInfo, WidgetInfo } from '@home/models/widget-component.models';
-import { Widget, widgetType, WidgetType } from '@app/shared/models/widget.models';
+import { widgetType, WidgetType } from '@app/shared/models/widget.models';
 import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 import { WidgetsData } from '@home/models/dashboard-component.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';

ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons">
+<div class="tb-details-buttons" fxLayout.xs="column">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"

ui-ngx/src/app/shared/components/dialog/alert-dialog.component.html

@@ -16,8 +16,7 @@
 
 -->
 <h2 mat-dialog-title>{{data.title}}</h2>
-<div mat-dialog-content [innerHTML]="data.message">
+<div mat-dialog-content [innerHTML]="data.message"></div>
-</div>
+<div mat-dialog-actions fxLayoutAlign="end center">
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>

ui-ngx/src/app/shared/components/dialog/confirm-dialog.component.html

@@ -16,9 +16,8 @@
 
 -->
 <h2 mat-dialog-title>{{data.title}}</h2>
-<div mat-dialog-content [innerHTML]="data.message">
+<div mat-dialog-content [innerHTML]="data.message"></div>
-</div>
+<div mat-dialog-actions fxLayoutAlign="end center">
-<div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
   <button mat-button color="primary" [mat-dialog-close]="false">{{data.cancel}}</button>
   <button mat-button color="primary" [mat-dialog-close]="true" cdkFocusInitial>{{data.ok}}</button>
 </div>

ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.html

@@ -17,7 +17,7 @@
 -->
 <mat-form-field [formGroup]="subTypeFormGroup" class="mat-block">
   <mat-label *ngIf="showLabel">{{ entitySubtypeTitle | translate }}</mat-label>
-  <mat-select [fxShow]="subTypesLoaded" class="tb-entity-subtype-select" matInput formControlName="subType">
+  <mat-select [fxShow]="subTypesLoaded" class="tb-entity-subtype-select" formControlName="subType">
     <mat-option *ngFor="let subType of subTypesOptions | async" [value]="subType">
       {{ displaySubTypeFn(subType) }}
     </mat-option>

ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.scss

@@ -14,7 +14,5 @@
  * limitations under the License.
  */
 :host {
-  mat-select.tb-entity-subtype-select {
+
-    min-width: 200px;
-  }
 }

ui-ngx/src/app/shared/components/entity/entity-subtype-select.component.ts

@@ -14,26 +14,18 @@
 /// limitations under the License.
 ///
 
-import {AfterViewInit, Component, ElementRef, forwardRef, Input, OnInit, ViewChild, OnDestroy} from '@angular/core';
+import { AfterViewInit, Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR} from '@angular/forms';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
-import {Observable, of, throwError, Subscription, Subject} from 'rxjs';
+import { Observable, Subject, Subscription, throwError } from 'rxjs';
-import {PageLink} from '@shared/models/page/page-link';
+import { map, mergeMap, publishReplay, refCount, startWith, tap } from 'rxjs/operators';
-import {Direction} from '@shared/models/page/sort-order';
+import { Store } from '@ngrx/store';
-import {filter, map, mergeMap, publishReplay, refCount, startWith, tap, publish} from 'rxjs/operators';
+import { AppState } from '@app/core/core.state';
-import {PageData, emptyPageData} from '@shared/models/page/page-data';
+import { TranslateService } from '@ngx-translate/core';
-import {DashboardInfo} from '@app/shared/models/dashboard.models';
+import { DeviceService } from '@core/http/device.service';
-import {DashboardId} from '@app/shared/models/id/dashboard-id';
+import { EntitySubtype, EntityType } from '@app/shared/models/entity-type.models';
-import {DashboardService} from '@core/http/dashboard.service';
+import { BroadcastService } from '@app/core/services/broadcast.service';
-import {Store} from '@ngrx/store';
+import { AssetService } from '@core/http/asset.service';
-import {AppState} from '@app/core/core.state';
+import { EntityViewService } from '@core/http/entity-view.service';
-import {getCurrentAuthUser} from '@app/core/auth/auth.selectors';
-import {Authority} from '@shared/models/authority.enum';
-import {TranslateService} from '@ngx-translate/core';
-import {DeviceService} from '@core/http/device.service';
-import {EntitySubtype, EntityType} from '@app/shared/models/entity-type.models';
-import {BroadcastService} from '@app/core/services/broadcast.service';
-import {AssetService} from '@core/http/asset.service';
-import {EntityViewService} from '@core/http/entity-view.service';
 
 @Component({
   selector: 'tb-entity-subtype-select',

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -247,7 +247,6 @@
         "no-asset-types-matching": "No asset types matching '{{entitySubtype}}' were found.",
         "asset-type-list-empty": "No asset types selected.",
         "asset-types": "Asset types",
-        "created-time": "Created time",
         "name": "Name",
         "name-required": "Name is required.",
         "description": "Description",

ui-ngx/src/styles.scss

@@ -679,18 +679,18 @@ mat-label {
   }
 
   .mat-toolbar-tools {
-    font-size: 20px;
+    //font-size: 20px;
     letter-spacing: .005em;
-    box-sizing: border-box;
+    //box-sizing: border-box;
     font-weight: 400;
     display: flex;
     align-items: center;
     flex-direction: row;
     width: 100%;
-    height: 64px;
+    //height: 64px;
-    max-height: 64px;
+    //max-height: 64px;
     padding: 0 16px;
-    margin: 0;
+    //margin: 0;
   }
 
   .mat-icon {
@@ -782,6 +782,11 @@ mat-label {
 
   .mat-toolbar {
     line-height: normal;
+
+    h1, h2, h3, h4, h5, h6 {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
 
   mat-toolbar *, mat-toolbar :after, mat-toolbar :before {
@@ -817,6 +822,9 @@ mat-label {
       .mat-dialog-actions {
         margin-bottom: 0;
         padding: 8px 8px 8px 16px;
+        button:last-of-type{
+          margin-right: 20px;
+        }
       }
     }
   }
@@ -843,7 +851,7 @@ mat-label {
   }
 
   .tb-fullscreen-dialog {
-    @media #{$mat-lt-md} {
+    @media #{$mat-lt-sm} {
       min-height: 100%;
       min-width: 100%;
       max-width: none !important;
@@ -904,6 +912,7 @@ mat-label {
     display: flex;
     height: calc(100% - 60px);
     text-transform: uppercase;
+    text-align: center;
   }