EDELIVERY-11677 SMP - General UI improvements

Refactor smp-dialog and reuse in the expiration warning dialog.
Update labels, remove unused imports.
Fix spacing issues in the Users systems settins.

smp-angular/src/app/common/dialogs/dialog/dialog.component.css

 .dialog {
   width: 500px;
+  align-content: center;
   text-align: center;
 }
 
@@ -14,11 +15,7 @@ label:hover, label:active, input:hover + label, input:active + label {
 
 .divTableRow {
   display: table-row;
-}
-
-.divTableHeading {
-  background-color: #EEE;
-  display: table-header-group;
+  width: 100%;
 }
 
 .divTableCell, .divTableHead {
@@ -26,12 +23,14 @@ label:hover, label:active, input:hover + label, input:active + label {
   display: table-cell;
   padding: 3px 3px;
   text-align: center;
+  width: 100%;
 }
 
 .divTableHeading {
   background-color: #EEE;
   display: table-header-group;
   font-weight: bold;
+  width: 100%;
 }
 
 .divTableFoot {

smp-angular/src/app/common/dialogs/dialog/dialog.component.html

-<h1 mat-dialog-title>{{title}}</h1>
-<mat-dialog-content>{{text}}</mat-dialog-content>
+<div class="dialog">
+  <h1 mat-dialog-title>{{title}}</h1>
+  <mat-dialog-content>{{text}}</mat-dialog-content>
 
-<mat-dialog-actions>
-  <div *ngIf="isConfirmationDialog()" class="divTableCell">
-    <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="yesbuttondialog_id" tabindex="0">
-      <mat-icon>check_circle</mat-icon>
-      <span>Yes</span>
-    </button>
-  </div>
+  <mat-dialog-actions>
+    <div *ngIf="isConfirmationDialog()" class="divTableCell">
+      <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="yesbuttondialog_id" tabindex="0">
+        <mat-icon>check_circle</mat-icon>
+        <span>Yes</span>
+      </button>
+    </div>
 
-  <div *ngIf="isConfirmationDialog()" class="divTableCell">
-    <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="nobuttondialog_id" tabindex="1">
-      <mat-icon>cancel</mat-icon>
-      <span>No</span>
-    </button>
-  </div>
+    <div *ngIf="isConfirmationDialog()" class="divTableCell">
+      <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="nobuttondialog_id" tabindex="1">
+        <mat-icon>cancel</mat-icon>
+        <span>No</span>
+      </button>
+    </div>
 
-  <div *ngIf="isInformationDialog()" class="divTableCell">
-    <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="okbuttondialog_id" tabindex="3">
-      <mat-icon>warning</mat-icon>
-      <span>OK</span>
-    </button>
-  </div>
-</mat-dialog-actions>
+    <div *ngIf="isInformationDialog()" class="divTableCell">
+      <button mat-raised-button color="primary" (click)="dialogRef.close(true)" id="okbuttondialog_id" tabindex="3">
+        <mat-icon>warning</mat-icon>
+        <span>OK</span>
+      </button>
+    </div>
+
+    <div *ngIf="isWarningDialog()" class="divTableCell">
+      <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="closebuttondialog_id" tabindex="3">
+        <mat-icon>close</mat-icon>
+        <span>Close</span>
+      </button>
+    </div>
+
+  </mat-dialog-actions>
+</div>

smp-angular/src/app/common/dialogs/dialog/dialog.component.ts

@@ -15,12 +15,16 @@ export class DialogComponent {
 
   @Input() dialogRef: MatDialogRef<any>;
 
-  public isConfirmationDialog() {
+  public isConfirmationDialog(): boolean {
     return this.type === 'confirmation';
   }
 
-  public isInformationDialog() {
+  public isInformationDialog(): boolean {
     return this.type === 'information';
   }
 
+  public isWarningDialog(): boolean {
+    return this.type === 'warning';
+  }
+
 }

smp-angular/src/app/common/dialogs/expired-password-dialog/expired-password-dialog.component.html

-<smp-dialog style="width: 400px"
-            [title]="'Password about to expire'"
+<smp-dialog [title]="'Password about to expire'"
             [text]="'Your password is more than three months old. Please change it as soon as possible!'"
             [type]="'information'"
             [dialogRef]="dialogRef">

smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.css

-label:hover, label:active, input:hover + label, input:active + label {
-  color: #3f51b5;
-}
-
-.divTable {
-  display: table;
-  width: 100%;
-}
-
-.divTableRow {
-  display: table-row;
-}
-
-.divTableHeading {
-  background-color: #EEE;
-  display: table-header-group;
-}
-
-.divTableCell, .divTableHead {
-  /*border: 1px solid #999999;*/
-  display: table-cell;
-  padding: 3px 3px;
-  text-align: center;
-}
-
-.divTableHeading {
-  background-color: #EEE;
-  display: table-header-group;
-  font-weight: bold;
-}
-
-.divTableFoot {
-  background-color: #EEE;
-  display: table-footer-group;
-  font-weight: bold;
-}
-
-.divTableBody {
-  display: table-row-group;
-}
-
-

smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.html

-<div style="width: 500px;text-align: center">
-  <h1 mat-dialog-title>{{title}}</h1>
-  <div class="panel">{{description}}</div>
-  <div class="divTable">
-    <div class="divTableBody">
-
-      <div class="divTableRow">
-
-
-        <div class="divTableCell">
-          <button mat-raised-button color="primary" (click)="dialogRef.close(false)" id="closebuttondialog_id">
-            <mat-icon>close</mat-icon>
-            <span>Close</span>
-          </button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</div>
+<smp-dialog [title]="title"
+            [text]="description"
+            [type]="'warning'"
+            [dialogRef]="dialogRef">
+</smp-dialog>

smp-angular/src/app/common/dialogs/information-dialog/information-dialog.component.ts

@@ -2,10 +2,7 @@ import {Component, Inject} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 
 @Component({
-  selector: 'app-information-dialog',
-  templateUrl: './information-dialog.component.html',
-  styleUrls: ['./information-dialog.component.css']
-})
+  templateUrl: './information-dialog.component.html'})
 export class InformationDialogComponent {
 
   title: string;
@@ -13,7 +10,7 @@ export class InformationDialogComponent {
 
   constructor(public dialogRef: MatDialogRef<InformationDialogComponent>,
               @Inject(MAT_DIALOG_DATA) public data: any) {
-    this.title=data.title;
-    this.description=data.description;
+    this.title = data.title;
+    this.description = data.description;
   }
 }

smp-angular/src/app/edit/edit-domain/edit-domain.component.html

@@ -39,7 +39,7 @@
 <ng-template #searchDomainPanel>
 
     <mat-form-field id="domain-filter">
-      <mat-label>Filter Domain by domain code</mat-label>
+      <mat-label>Filter by domain code</mat-label>
       <input matInput (keyup)="applyDomainFilter($event)" placeholder="Domain code" #inputDomainFilter>
     </mat-form-field>
     <table class="mat-elevation-z2" id="edit-domain-table" mat-table [dataSource]="dataSource" matSort>

smp-angular/src/app/login/login.component.ts

 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {Router, ActivatedRoute} from '@angular/router';
 import {SecurityService} from '../security/security.service';
-import {HttpEventService} from '../http/http-event.service';
 import {AlertMessageService} from '../common/alert-message/alert-message.service';
 import {SecurityEventService} from '../security/security-event.service';
 import {User} from '../security/user.model';
-import {MatDialogRef, MatDialog} from '@angular/material/dialog';
+import {MatDialog} from '@angular/material/dialog';
 import {DefaultPasswordDialogComponent} from 'app/security/default-password-dialog/default-password-dialog.component';
 import {Subscription} from 'rxjs';
 import {ExpiredPasswordDialogComponent} from '../common/dialogs/expired-password-dialog/expired-password-dialog.component';
 import {GlobalLookups} from "../common/global-lookups";
 import {PasswordChangeDialogComponent} from "../common/dialogs/password-change-dialog/password-change-dialog.component";
 import {InformationDialogComponent} from "../common/dialogs/information-dialog/information-dialog.component";
-import {DatePipe, formatDate} from "@angular/common";
+import {formatDate} from "@angular/common";
 import {EntityStatus} from "../common/enums/entity-status.enum";
 
 @Component({
@@ -32,7 +31,6 @@ export class LoginComponent implements OnInit, OnDestroy {
               private router: Router,
               public lookups: GlobalLookups,
               private securityService: SecurityService,
-              private httpEventService: HttpEventService,
               private alertService: AlertMessageService,
               private securityEventService: SecurityEventService,
               private dialog: MatDialog) {

smp-angular/src/app/system-settings/admin-domain/admin-domain.component.html

@@ -56,7 +56,7 @@
 
 <ng-template #searchDomainPanel>
   <mat-form-field id="domain-filter">
-    <mat-label>Filter Domain by domain code</mat-label>
+    <mat-label>Filter by domain code</mat-label>
     <input matInput (keyup)="applyDomainFilter($event)"  #inputDomainFilter>
   </mat-form-field>
 

smp-angular/src/app/system-settings/admin-users/admin-user.component.html

@@ -17,17 +17,17 @@
 </div>
 
 <ng-template #searchUserPanel>
-  <mat-form-field id="domain-filter">
-    <mat-label>Filter Users</mat-label>
+  <mat-form-field id="user-filter">
+    <mat-label>Filter by username</mat-label>
     <input matInput (keyup)="applyUserFilter($event)" placeholder="User name or full name" #inputUserFilter>
   </mat-form-field>
 
-  <mat-toolbar class ="mat-elevation-z2">
-    <mat-toolbar-row  class="smp-toolbar-row">
+  <mat-toolbar class="mat-elevation-z2">
+    <mat-toolbar-row class="smp-toolbar-row">
       <button mat-raised-button
               mat-flat-button color="primary"
               (click)="onCreateUserClicked()"
-      >Create User
+      >Create user
       </button>
 
       <button mat-raised-button
@@ -39,7 +39,7 @@
       </button>
     </mat-toolbar-row>
   </mat-toolbar>
-  <table class="mat-elevation-z2" id="admin-domain-table" mat-table [dataSource]="userData" >
+  <table class="mat-elevation-z2" id="admin-user-table" mat-table [dataSource]="userData" >
     <ng-container matColumnDef="username">
       <th mat-header-cell *matHeaderCellDef >Username</th>
       <td mat-cell *matCellDef="let row" [matTooltip]="row.username">{{row.username}}</td>