[Monitor Dashboard]: Customize loading component. Make input pristine if the value is equal to initial value

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-monitor-portal/trunk/monitor_dashboard@57735 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/home/home.component.html

@@ -34,7 +34,7 @@
          [class.max-width-large]="!grid"
          class="uk-grid-match uk-grid-small"
          uk-grid>
-      <loading *ngIf="loading" [loading]="loading"></loading>
+      <loading *ngIf="loading"></loading>
       <ng-template ngFor [ngForOf]="displayDefaultStakeholders" let-stakeholder let-i="index">
         <div *ngIf="stakeholder">
           <div class="md-card">
@@ -85,7 +85,7 @@
          [class.max-width-large]="!grid"
          class="uk-grid-match uk-grid-small"
          uk-grid>
-      <loading *ngIf="loading" [loading]="loading"></loading>
+      <loading *ngIf="loading"></loading>
       <ng-template ngFor [ngForOf]="displayStakeholders" let-stakeholder let-i="index">
         <a *ngIf="stakeholder" [routerLink]="stakeholder.alias">
           <div class="md-card">

src/app/library/sharedComponents/input/input.component.ts

@@ -1,5 +1,7 @@
 import {Component, Input, OnDestroy, OnInit} from "@angular/core";
 import {Option} from "../../../utils/indicator-utils";
+import {FormControl} from "@angular/forms";
+import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
 
 @Component({
   selector: '[dashboard-input]',
@@ -18,16 +20,23 @@ import {Option} from "../../../utils/indicator-utils";
   `
 })
 export class InputComponent implements OnInit, OnDestroy {
-  @Input('formInput') formControl: any;
+  @Input('formInput') formControl: FormControl;
   @Input('type') type: string = 'text';
   @Input('label') label: string;
   @Input('rows') rows: number = 3;
   @Input('options') options: Option[];
+  private initValue: any;
 
   constructor() {
   }
 
   ngOnInit(): void {
+    this.initValue = HelperFunctions.copy(this.formControl.value);
+    this.formControl.valueChanges.subscribe(value => {
+      if(this.initValue.toString() === value.toString()) {
+        this.formControl.markAsPristine();
+      }
+    });
   }
 
   ngOnDestroy(): void {

src/app/library/sharedComponents/loading/loading.component.ts

@@ -3,8 +3,8 @@ import {Component, Input} from "@angular/core";
 @Component({
   selector: 'loading',
   template: `
-    <div *ngIf="loading" class="uk-flex uk-flex-center uk-margin-small-top">
+    <div class="uk-flex uk-flex-center uk-margin-small-top">
-      <div class="md-preloader" [ngClass]="'md-preloader-' + color">
+      <div class="md-preloader" [ngClass]="(color)?('md-preloader-' + color):''">
         <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="48" width="48" viewBox="0 0 75 75">
           <circle cx="37.5" cy="37.5" r="33.5" stroke-width="4"></circle>
         </svg>
@@ -12,13 +12,10 @@ import {Component, Input} from "@angular/core";
     </div>`
 })
 export class LoadingComponent {
-  @Input()
-  public loading: boolean = false;
-
   /**
    * Possible values '': blue, 'success': green, 'warning': orange and 'danger': red
    */
-  @Input() color: string = '';
+  @Input() color: 'success' | 'warning' | 'danger' = null;
 
   constructor() {
   }

src/app/topic/indicators.component.html

@@ -119,8 +119,7 @@
                 <ng-template [ngIf]="!grid">
                   <span *ngFor="let indicatorPath of indicator.indicatorPaths"
                         class="uk-margin-medium-right uk-text-capitalize uk-flex uk-flex-middle">
-                    <i class="material-icons md-24 uk-margin-small-right"
+                    <i class="material-icons md-24 uk-margin-small-right">
-                       [ngClass]="indicatorUtils.chartTypesIconsClasses.get(indicatorPath.type)">
                       {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
                     </i>
                     {{indicatorPath.type + ' Chart'}}
@@ -159,8 +158,7 @@
                 <div class="uk-width-1-3 uk-text-center"
                      [ngClass]="'uk-child-width-1-' + indicator.indicatorPaths.length" uk-grid>
                   <div *ngFor="let indicatorPath of indicator.indicatorPaths">
-                    <i class="material-icons md-24"
+                    <i class="material-icons md-24">
-                       [ngClass]="indicatorUtils.chartTypesIconsClasses.get(indicatorPath.type)">
                       {{indicatorUtils.chartTypesIcons.get(indicatorPath.type)}}
                     </i>
                     <div class="uk-text-capitalize">{{indicatorPath.type + ' Chart'}}</div>
@@ -270,10 +268,10 @@
           </div>
         </div>
         <div *ngIf="indicator.indicatorPaths[i].safeResourceUrl" class="uk-margin-medium-top uk-position-relative">
-          <div *ngIf="!indicatorPath.pristine && !indicatorPath.invalid"
+          <div *ngIf="hasDifference(i) && !indicatorPath.invalid"
                class="uk-width-1-1 uk-height-medium refresh-iframe">
             <div class="uk-position-relative uk-height-1-1">
-              <div class="uk-position-center md-color-white uk-text-center clickable" (click)="refreshIndicator(i)">
+              <div class="uk-position-center md-color-white uk-text-center clickable" (click)="refreshIndicator()">
                 <div><i class="material-icons md-color-white">refresh</i></div>
                 <span>Click to refresh the graph view</span>
               </div>

src/app/topic/indicators.component.ts

@@ -407,12 +407,22 @@ export class IndicatorsComponent implements OnInit, OnDestroy, OnChanges, AfterV
     });
   }
 
-  refreshIndicator(index: number) {
+  hasDifference(index: number): boolean {
+    let hasDifference = false;
+    this.indicatorPaths.at(index).value.parameters.forEach((parameter) => {
+      if(parameter.value !== this.indicator.indicatorPaths[index].parameters[parameter.key]) {
+        hasDifference = true;
+        return;
+      }
+    });
+    return hasDifference;
+  }
+
+  refreshIndicator() {
     this.indicator = this.indicatorUtils.generateIndicatorByForm(this.indicatorFb.value, this.indicator.indicatorPaths);
     this.indicator.indicatorPaths.forEach(indicatorPath => {
       indicatorPath.safeResourceUrl = this.getUrlByStakeHolder(indicatorPath)
     });
-    this.indicatorPaths.at(index).markAsPristine({onlySelf: true});
   }
 
   deleteIndicatorOpen(id: string, type: string = 'chart') {

src/app/utils/indicator-utils.ts

@@ -40,14 +40,10 @@ export class IndicatorUtils {
     ['table', 'table_chart'],
     ['line', 'show_chart'],
     ['column', 'bar_chart'],
-    ['bar', 'bar_chart'],
+    ['bar', 'notes'],
     ['other', 'perm_media']
   ]);
 
-  chartTypesIconsClasses: Map<string, string> = new Map([
-    ['bar', 'rotate-90']
-  ]);
-
   isPublicIcon: Map<boolean, string> = new Map([
     [true, 'public'],
     [false, 'lock']

src/assets/theme-assets/css/themes/my_theme.css

@@ -173,6 +173,9 @@
 .app_my_theme .md-card-primary {
   border-left-color: #0d47a1;
 }
+.app_my_theme .md-preloader:not(.md-preloader-success):not(.md-preloader-warning):not(.md-preloader-danger) svg circle {
+  stroke: #0d47a1;
+}
 .app_my_theme .waves-effect.md-btn-flat-primary {
   background: none;
 }