Improvement dialog and component style

application/src/main/resources/thingsboard.yml

@@ -379,7 +379,7 @@ spring:
     database-platform: "${SPRING_JPA_DATABASE_PLATFORM:org.hibernate.dialect.PostgreSQLDialect}"
   datasource:
     driverClassName: "${SPRING_DRIVER_CLASS_NAME:org.postgresql.Driver}"
-    url: "${SPRING_DATASOURCE_URL:jdbc:postgresql://localhost:5432/thingsboard}"
+    url: "${SPRING_DATASOURCE_URL:jdbc:postgresql://localhost:5432/thingsboard_angular}"
     username: "${SPRING_DATASOURCE_USERNAME:postgres}"
     password: "${SPRING_DATASOURCE_PASSWORD:postgres}"
     hikari:

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

@@ -17,7 +17,6 @@
 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 { AppState } from '@core/core.state';
 import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';

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

@@ -17,7 +17,6 @@
 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 { AppState } from '@core/core.state';
 import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

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

@@ -17,7 +17,6 @@
 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 { AppState } from '@core/core.state';
 import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';

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/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/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 { ActionNotificationShow } from '@core/notification/notification.actions';
-import { TranslateService } from '@ngx-translate/core';
-import { AuthService } from '@core/auth/auth.service';
 import { DeviceService } from '@core/http/device.service';
-import {DeviceCredentials, DeviceCredentialsType, credentialTypeNames} from '@shared/models/device.models';
+import { credentialTypeNames, DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 

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

@@ -16,7 +16,7 @@
 
 -->
 <form (ngSubmit)="add()" style="width: 600px;">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar color="primary">
     <h2 translate>user.add</h2>
     <span fxFlex></span>
     <div [tb-help]="'user'"></div>
@@ -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';
@@ -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/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,20 +14,12 @@
 /// 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 {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 {filter, map, mergeMap, publishReplay, refCount, startWith, tap, publish} from 'rxjs/operators';
-import {PageData, emptyPageData} from '@shared/models/page/page-data';
-import {DashboardInfo} from '@app/shared/models/dashboard.models';
-import {DashboardId} from '@app/shared/models/id/dashboard-id';
-import {DashboardService} from '@core/http/dashboard.service';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
-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';

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",