TSK-610 BUG - Remove flickering on classification details screen

- Solved bug  which makes classification details screen flickers when selecting a classification of creating a new one.

web/src/app/administration/classification/details/classification-details.component.html

@@ -1,14 +1,13 @@
 <div class="container-scrollable">
-  <taskana-spinner [isRunning]="requestInProgress" class="floating"></taskana-spinner>
-  <div id="classification-details" *ngIf="classification && !requestInProgress">
+  <taskana-spinner [isRunning]="requestInProgress" class="floating" (spinnerIsRunning)="spinnerRunning($event)"></taskana-spinner>
+  <div id="classification-details" *ngIf="classification && !spinnerIsRunning">
     <ul class="nav nav-tabs" role="tablist">
       <li *ngIf="showDetail" class="visible-xs visible-sm hidden">
         <a (click)="backClicked()">
           <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>Back</a>
       </li>
-
     </ul>
-    <div *ngIf="classification" id="classification" class="panel panel-default classification">
+    <div id="classification" class="panel panel-default classification">
       <div class="panel-heading">
         <div class="pull-right">
           <button type="button" (click)="onSubmit()" class="btn btn-default btn-primary"
@@ -23,7 +22,7 @@
           </button>
         </div>
         <h4 class="panel-header">{{classification.name}}&nbsp; [{{classification.type}}]
-          <span *ngIf="!classification.classificationId" class="badge warning"> {{badgeMessage}}</span>
+          <span *ngIf="action=== 'CREATE'" class="badge warning"> {{badgeMessage}}</span>
         </h4>
       </div>
       <div class="panel-body">
@@ -139,4 +138,4 @@
       </div>
     </div>
   </div>
-</div>
+</div>

web/src/app/administration/classification/details/classification-details.component.ts

@@ -45,6 +45,7 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
   requestInProgress = false;
   categories: Array<string> = [];
   categorySelected: string;
+  spinnerIsRunning = false;
   custom1Field = this.customFieldsService.getCustomField('Custom 1', 'classifications.information.custom1');
   custom2Field = this.customFieldsService.getCustomField('Custom 2', 'classifications.information.custom2');
   custom3Field = this.customFieldsService.getCustomField('Custom 3', 'classifications.information.custom3');
@@ -106,7 +107,7 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
         if (id === 'undefined') {
           id = undefined;
         }
-        this.fillClassificationInformation(new ClassificationDefinition())
+        this.fillClassificationInformation(this.selectedClassification ? this.selectedClassification : new ClassificationDefinition())
       }
 
       if (id && id !== '') {
@@ -189,26 +190,35 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
     return this.categoryService.getCategoryIcon(category);
   }
 
+  spinnerRunning(value) { this.spinnerIsRunning = value; }
+
   private afterRequest() {
     this.requestInProgressService.setRequestInProgress(false);
     this.classificationsService.triggerClassificationSaved();
   }
 
   private selectClassification(id: string) {
+    if (this.classificationIsAlreadySelected()) {
+      return true;
+    }
+    this.requestInProgress = true;
     this.selectedClassificationSubscription = this.classificationsService.getClassification(id).subscribe(classification => {
       this.selectedClassification = classification;
-      this.classificationsService.selectClassification(classification)
+      this.classificationsService.selectClassification(classification);
+      this.requestInProgress = false;
     });
   }
 
+  private classificationIsAlreadySelected(): boolean {
+    if (this.action === ACTION.CREATE && this.selectedClassification) { return true }
+  }
+
   private fillClassificationInformation(classificationSelected: ClassificationDefinition) {
     if (this.action === ACTION.CREATE) { // CREATE
-      this.initClassificationCreation(classificationSelected);
+      this.initClassificationOnCreation(classificationSelected);
     } else {
-      this.requestInProgress = true;
       this.classification = classificationSelected;
       this.classificationClone = { ...classificationSelected };
-      this.requestInProgress = false;
       this.checkDomainAndRedirect();
     }
   }
@@ -219,7 +229,7 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
     this.classification.modified = date;
   }
 
-  private initClassificationCreation(classificationSelected: ClassificationDefinition) {
+  private initClassificationOnCreation(classificationSelected: ClassificationDefinition) {
     this.classification = new ClassificationDefinition();
     this.classification.parentId = classificationSelected.classificationId;
     this.classification.parentKey = classificationSelected.key;

web/src/app/administration/classification/master/list/classification-list.component.html

@@ -39,11 +39,11 @@
 	</div>
 	<div class="col-xs-12 horizontal-bottom-divider">
 	</div>
-	<taskana-spinner class="col-xs-12" [isRunning]="requestInProgress"></taskana-spinner>
+	<taskana-spinner class="col-xs-12" [isRunning]="requestInProgress" positionClass="centered-spinner-whole-screen"></taskana-spinner>
 	<taskana-tree class="col-xs-12" *ngIf="(classifications && classifications.length) else empty_classifications" [treeNodes]="classifications"
 	 [selectNodeId]="selectedId" [filterText]="inputValue" [filterIcon]="selectedCategory" (selectNodeIdChanged)="selectClassification($event)"></taskana-tree>
 	<ng-template #empty_classifications>
-		<div class="col-xs-12 container-no-items center-block">
+		<div *ngIf="!requestInProgress" class="col-xs-12 container-no-items center-block">
 			<h3 class="grey">There are no classifications</h3>
 			<svg-icon class="img-responsive empty-icon" src="./assets/icons/classification-empty.svg"></svg-icon>
 		</div>

web/src/app/shared/spinner/spinner.component.html

@@ -1,4 +1,4 @@
-<div [ngClass]="{'no-display':!isDelayedRunning}">
+<div [ngClass]="{'no-display':!showSpinner}">
 	<div *ngIf ="!isModal" class="sk-circle {{positionClass? positionClass: 'spinner-centered'}}">
 		<div class="sk-circle1 sk-child"></div>
 		<div class="sk-circle2 sk-child"></div>

web/src/app/shared/spinner/spinner.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ElementRef, Output, EventEmitter, OnDestroy } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnDestroy } from '@angular/core';
 import { ViewChild } from '@angular/core';
 
 import { ErrorModel } from 'app/models/modal-error';
@@ -16,10 +16,14 @@ export class SpinnerComponent implements OnDestroy {
     private requestTimeout: any;
     private maxRequestTimeout = 10000;
 
-    isDelayedRunning = false;
+    set isDelayedRunning(value: boolean) {
+        this.showSpinner = value;
+        this.spinnerIsRunning.next(value)
+    }
+    showSpinner: boolean;
 
     @Input()
-    delay = 200;
+    delay = 250;
 
     @Input()
     set isRunning(value: boolean) {
@@ -43,6 +47,8 @@ export class SpinnerComponent implements OnDestroy {
     @Input()
     positionClass: string = undefined;
 
+    @Output()
+    spinnerIsRunning = new EventEmitter<boolean>();
 
     @ViewChild('spinnerModal')
     private modal;
@@ -66,7 +72,7 @@ export class SpinnerComponent implements OnDestroy {
         }, this.delay);
     }
     private closeModal() {
-        if (this.isDelayedRunning) {
+        if (this.showSpinner) {
             $(this.modal.nativeElement).modal('toggle');
         }
     }

web/src/app/shared/tree/tree.component.ts

@@ -28,11 +28,11 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
   @Input() selectNodeId: string;
   @Output() selectNodeIdChanged = new EventEmitter<string>();
   @Input() filterText: string;
-  @Input() filterIcon: string;
+  @Input() filterIcon = '';
 
 
   private filterTextOld: string
-  private filterIconOld: string
+  private filterIconOld = '';
   private removedNodeIdSubscription: Subscription;
 
   options: ITreeOptions = {
@@ -123,7 +123,7 @@ export class TaskanaTreeComponent implements OnInit, AfterViewChecked, OnDestroy
   }
 
   private expandParent(node: TreeNode) {
-    if (!node.parent) {
+    if (!node.parent || node.isRoot) {
       return
     }
     node.parent.expand();

web/src/assets/_site.scss

@@ -257,6 +257,12 @@ svg-icon.fa-fw > svg {
     margin-bottom: 30px;
 }
 
+.centered-spinner-whole-screen {
+    position: absolute !important;
+    top: 20vh;
+    left: 42%;
+}
+
 .list-group-item {
     padding: 5px 15px;
 }