From 7687746c7775e837ac03c593f2ec5dc03b20299d Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 7 Jan 2021 17:01:02 +0000
Subject: [PATCH] [Usage-Counts | Trunk]: Fix search bug on alalytics. Change
 loading

---
 src/app/about/about.component.ts           | 19 +++++----
 src/app/analytics/analytics.component.html |  8 ++--
 src/app/analytics/analytics.component.ts   | 27 ++++++++-----
 src/app/analytics/analytics.module.ts      |  4 +-
 src/app/contact/contact.component.ts       | 32 +++++++++------
 src/app/home/home.component.ts             | 46 ++++++++++++----------
 src/app/resources/resources.component.ts   | 19 +++++----
 src/app/sushilite/sushilite.component.ts   |  4 +-
 8 files changed, 93 insertions(+), 66 deletions(-)

diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
index 6986a29..d551b43 100644
--- a/src/app/about/about.component.ts
+++ b/src/app/about/about.component.ts
@@ -1,10 +1,10 @@
-import {Component, HostListener, OnInit} from '@angular/core';
+import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {faqs} from './faqs';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
 import {properties} from '../../environments/environment';
-import {Subscription} from 'rxjs';
+import {Subscriber, Subscription} from 'rxjs';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
 
@@ -13,7 +13,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   templateUrl: 'about.component.html',
   styleUrls: ['about.component.css'],
 })
-export class AboutComponent implements OnInit {
+export class AboutComponent implements OnInit, OnDestroy {
   faqs: any[] = faqs;
   properties: EnvProperties = properties;
   description = "UsageCounts service is an OpenAIRE service built to cover the needs of content providers and consumers and offer added value to assist them in reaching their goals. UsageCounts forms metrics of usage activity of Open Access Repositories categorizing the data retrieved by country, number of downloads, number of views, number of repositories and all derivative quantitative open metrics, comprehensively. Architecture. ";
@@ -58,6 +58,14 @@ export class AboutComponent implements OnInit {
     }));
   }
   
+  public ngOnDestroy() {
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
   goTo(id: string) {
     const yOffset = -100;
     const element = document.getElementById(id);
@@ -66,9 +74,4 @@ export class AboutComponent implements OnInit {
       window.scrollTo({top: y, behavior: 'smooth'});
     }
   }
-  public ngOnDestroy() {
-    for (let sub of this.subs) {
-      sub.unsubscribe();
-    }
-  }
 }
diff --git a/src/app/analytics/analytics.component.html b/src/app/analytics/analytics.component.html
index 58bce2c..396d2e4 100644
--- a/src/app/analytics/analytics.component.html
+++ b/src/app/analytics/analytics.component.html
@@ -58,8 +58,8 @@
             <div class="uk-text-muted uk-text-uppercase uk-text-small">Results</div>
           </div>
           <div class="uk-width-2-3 uk-margin-large-bottom uk-margin-auto-left uk-margin-auto-right">
-            <div *ngIf="loading" class="uk-animation-fade uk-margin-medium-top  uk-width-1-1" role="alert">
-              <span class="loading-gif  uk-align-center"></span>
+            <div *ngIf="loading" class="uk-padding-large  uk-width-1-1">
+              <loading></loading>
             </div>
             <div *ngIf="display && !loading" class="uk-grid uk-child-width-1-3@m uk-child-width-1-2@s"
                  uk-grid>
@@ -166,8 +166,8 @@
                 </li>
               </ul>
             </div>
-            <div *ngIf="iframeLoading" class="uk-animation-fade uk-margin-medium-top uk-width-1-1" role="alert">
-              <span class="loading-gif  uk-align-center"></span>
+            <div *ngIf="iframeLoading" class="uk-padding-large uk-width-1-1" role="alert">
+              <loading></loading>
             </div>
             <iframe (load)="onLoad()" class="uk-animation-fade" width="742" height="453" seamless frameborder="0"
                     scrolling="no" [class.uk-hidden]="iframeLoading"
diff --git a/src/app/analytics/analytics.component.ts b/src/app/analytics/analytics.component.ts
index 0c6473c..562dd22 100644
--- a/src/app/analytics/analytics.component.ts
+++ b/src/app/analytics/analytics.component.ts
@@ -1,7 +1,7 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {CountryUsageStat, UsageStat} from '../entities/usage-stat';
 import {FormControl, FormGroup} from '@angular/forms';
-import {Observable, Subscription} from 'rxjs';
+import {Observable, Subscriber, Subscription} from 'rxjs';
 import {UsageStatsService} from '../services/usage-stats.service';
 import {map, startWith} from 'rxjs/operators';
 import {countries} from '../services/countries';
@@ -19,7 +19,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   templateUrl: 'analytics.component.html',
   styleUrls: ['analytics.component.css'],
 })
-export class AnalyticsComponent implements OnInit {
+export class AnalyticsComponent implements OnInit, OnDestroy {
   public countryFb: FormGroup;
   public countries: Observable<string[]>;
   public country: string;
@@ -36,6 +36,8 @@ export class AnalyticsComponent implements OnInit {
   description = "Track Countries Usage Activity. Worldwide Monthly Usage Events, Monthly Views & Downloads.";
   title = "OpenAIRE - UsageCounts | Analytics";
   subs: Subscription[] = [];
+  searchSub: Subscription = null;
+  
   constructor(private usageStatsService: UsageStatsService,
               private route: ActivatedRoute,
               private router: Router,
@@ -72,6 +74,15 @@ export class AnalyticsComponent implements OnInit {
     }
   }
   
+  public ngOnDestroy() {
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
+    this.clearTimeouts();
+  }
+  
   private init() {
     this.countryFb = new FormGroup({
       country: new FormControl(null)
@@ -119,7 +130,7 @@ export class AnalyticsComponent implements OnInit {
     this.clearTimeouts();
     if (this.country && this.country.length > 0) {
       this.country = StringUtils.capitalize(this.country);
-      this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
+      this.searchSub = this.usageStatsService.getCountryMetrics(this.country).subscribe(stats => {
         this.display = this.roundCountryUsageStat(stats);
         this.loading = false;
         if (this.display) {
@@ -177,6 +188,9 @@ export class AnalyticsComponent implements OnInit {
       clearTimeout(timeout);
     });
     this.state = 0;
+    if(this.searchSub instanceof Subscription) {
+      this.searchSub.unsubscribe();
+    }
   }
   
   reset() {
@@ -203,9 +217,4 @@ export class AnalyticsComponent implements OnInit {
   public getSafeUrl(url: string): SafeUrl {
     return this.sanitizer.bypassSecurityTrustResourceUrl(url);
   }
-  public ngOnDestroy() {
-    for (let sub of this.subs) {
-      sub.unsubscribe();
-    }
-  }
 }
diff --git a/src/app/analytics/analytics.module.ts b/src/app/analytics/analytics.module.ts
index 21ace54..a587666 100644
--- a/src/app/analytics/analytics.module.ts
+++ b/src/app/analytics/analytics.module.ts
@@ -11,6 +11,7 @@ import {Schema2jsonldModule} from '../openaireLibrary/sharedComponents/schema2js
 import {IconsModule} from '../openaireLibrary/utils/icons/icons.module';
 import {IconsService} from '../openaireLibrary/utils/icons/icons.service';
 import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons';
+import {LoadingModule} from '../openaireLibrary/utils/loading/loading.module';
 
 @NgModule({
   imports: [
@@ -23,7 +24,8 @@ import {arrow_down, arrow_right} from '../openaireLibrary/utils/icons/icons';
       path: '', component: AnalyticsComponent
     }]),
     Schema2jsonldModule,
-    IconsModule
+    IconsModule,
+    LoadingModule
   ],
   declarations: [AnalyticsComponent],
   exports: [AnalyticsComponent]
diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts
index ac57770..055b0b1 100644
--- a/src/app/contact/contact.component.ts
+++ b/src/app/contact/contact.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {Router} from '@angular/router';
 import {EmailService} from '../openaireLibrary/utils/email/email.service';
 import {Email} from '../openaireLibrary/utils/email/email';
@@ -8,7 +8,7 @@ import {Meta, Title} from '@angular/platform-browser';
 import {HelperFunctions} from '../openaireLibrary/utils/HelperFunctions.class';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {properties} from '../../environments/environment';
-import {Subscription} from 'rxjs';
+import {Subscriber, Subscription} from 'rxjs';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
 
@@ -18,7 +18,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   styleUrls: ['contact.component.css']
 })
 
-export class ContactComponent implements OnInit {
+export class ContactComponent implements OnInit, OnDestroy {
   public showLoading = true;
   public errorMessage = '';
   public email: Email;
@@ -27,9 +27,10 @@ export class ContactComponent implements OnInit {
   public contactForm: FormGroup;
   @ViewChild('AlertModal') modal;
   @ViewChild('recaptcha') recaptcha;
-  description = "Any questions? Contact us ";
-  title = "OpenAIRE - UsageCounts |  Contact Us";
+  description = 'Any questions? Contact us ';
+  title = 'OpenAIRE - UsageCounts |  Contact Us';
   subs: Subscription[] = [];
+  
   constructor(private router: Router,
               private emailService: EmailService,
               private _title: Title, private _piwikService: PiwikService,
@@ -39,24 +40,29 @@ export class ContactComponent implements OnInit {
   
   ngOnInit() {
     this._title.setTitle(this.title);
-    this._meta.updateTag({content: this.description}, "name='description'");
-    this._meta.updateTag({content: this.description}, "property='og:description'");
-    this._meta.updateTag({content: this.title}, "property='og:title'");
+    this._meta.updateTag({content: this.description}, 'name=\'description\'');
+    this._meta.updateTag({content: this.description}, 'property=\'og:description\'');
+    this._meta.updateTag({content: this.title}, 'property=\'og:title\'');
     this._title.setTitle(this.title);
     let url = this.properties.domain + this.properties.baseLink + this.router.url;
     this.seoService.createLinkForCanonicalURL(url, false);
-    this._meta.updateTag({content: url}, "property='og:url'");
+    this._meta.updateTag({content: url}, 'property=\'og:url\'');
     if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
       this.subs.push(this._piwikService.trackView(this.properties, this.title).subscribe());
-    }    this.email = {body: '', subject: '', recipients: []};
+    }
+    this.email = {body: '', subject: '', recipients: []};
     this.reset();
     this.showLoading = false;
   }
+  
   public ngOnDestroy() {
-    for (let sub of this.subs) {
-      sub.unsubscribe();
-    }
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
   }
+  
   public send(event) {
     HelperFunctions.scroll();
     if (event.valid === true) {
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 0c6a746..36cf8ef 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,9 +1,9 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
 import {FullPageSliderComponent} from '../openaireLibrary/utils/full-page-slider/full-page-slider.component';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
-import {Subscription} from 'rxjs';
+import {Subscriber, Subscription} from 'rxjs';
 import {properties} from '../../environments/environment';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
@@ -13,56 +13,60 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   templateUrl: 'home.component.html',
   styleUrls: ['home.component.css'],
 })
-export class HomeComponent implements OnInit{
+export class HomeComponent implements OnInit, OnDestroy {
   
   public initSlide: number = 1;
   public fragments: string[] = ['', 'why', 'who', 'features'];
-  @ViewChild("slider")
+  @ViewChild('slider')
   public slider: FullPageSliderComponent;
   properties: EnvProperties = properties;
-
+  
   subs: Subscription[] = [];
+  
   constructor(private route: ActivatedRoute,
               private router: Router,
               private _title: Title, private _piwikService: PiwikService,
               private _meta: Meta, private seoService: SEOService
-  ) {}
+  ) {
+  }
   
-  ngOnInit()
-  {
-    let description = "UsageCounts service collects usage data from Open Science content providers repositories, journals, and other scientific data sources. Then, it aggregates them, delivering standardized activity reports about research usage and uptake. It complements existing citation mechanisms and assists institutional repository managers, research communities, research organizations, funders, and policy makers to track and evaluate research from an early stage.";
-    let title = "OpenAIRE - UsageCounts";
+  ngOnInit() {
+    let description = 'UsageCounts service collects usage data from Open Science content providers repositories, journals, and other scientific data sources. Then, it aggregates them, delivering standardized activity reports about research usage and uptake. It complements existing citation mechanisms and assists institutional repository managers, research communities, research organizations, funders, and policy makers to track and evaluate research from an early stage.';
+    let title = 'OpenAIRE - UsageCounts';
     this._title.setTitle(title);
-    this._meta.updateTag({content: description}, "name='description'");
-    this._meta.updateTag({content: description}, "property='og:description'");
-    this._meta.updateTag({content: title}, "property='og:title'");
+    this._meta.updateTag({content: description}, 'name=\'description\'');
+    this._meta.updateTag({content: description}, 'property=\'og:description\'');
+    this._meta.updateTag({content: title}, 'property=\'og:title\'');
     this._title.setTitle(title);
     let url = this.properties.domain + this.properties.baseLink + this.router.url;
     this.seoService.createLinkForCanonicalURL(url, false);
-    this._meta.updateTag({content: url}, "property='og:url'");
+    this._meta.updateTag({content: url}, 'property=\'og:url\'');
     if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
       this.subs.push(this._piwikService.trackView(this.properties, title).subscribe());
     }
     this.subs.push(this.route.fragment.subscribe(name => {
-      if(name) {
+      if (name) {
         let slide = this.fragments.findIndex(fragment => fragment === name) + 1;
-        if(slide > 0) {
+        if (slide > 0) {
           this.initSlide = slide;
         }
       }
     }));
     this.subs.push(this.slider.stateAsObservable.subscribe(state => {
-      if(state == 1) {
+      if (state == 1) {
         this.router.navigate(['/']);
       } else {
         this.router.navigate(['/'], {fragment: this.fragments[state - 1]});
       }
     }));
   }
+  
   public ngOnDestroy() {
-    for (let sub of this.subs) {
-      sub.unsubscribe();
-    }
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
   }
-
+  
 }
diff --git a/src/app/resources/resources.component.ts b/src/app/resources/resources.component.ts
index d864a5a..b37de0b 100644
--- a/src/app/resources/resources.component.ts
+++ b/src/app/resources/resources.component.ts
@@ -1,9 +1,9 @@
-import {Component, HostListener, OnInit} from '@angular/core';
+import {Component, HostListener, OnDestroy, OnInit} from '@angular/core';
 import {Meta, Title} from '@angular/platform-browser';
 import {ActivatedRoute, Router} from '@angular/router';
 import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
 import {properties} from '../../environments/environment';
-import {Subscription} from 'rxjs';
+import {Subscriber, Subscription} from 'rxjs';
 import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
 import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
 
@@ -12,7 +12,7 @@ import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
   templateUrl: 'resources.component.html',
   styleUrls: ['resources.component.css'],
 })
-export class ResourcesComponent implements OnInit {
+export class ResourcesComponent implements OnInit, OnDestroy {
   properties: EnvProperties = properties;
   description = "OpenAIRE Provide. The resources of the OpenAIRE UsageCounts Service are available through the OpenAIRE PROVIDE product, which is serving the content providers. APIs and Reports.";
   title = "OpenAIRE - UsageCounts | Resources";
@@ -56,6 +56,14 @@ export class ResourcesComponent implements OnInit {
     }));
   }
   
+  public ngOnDestroy() {
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
   goTo(id: string) {
     const yOffset = -100;
     const element = document.getElementById(id);
@@ -64,9 +72,4 @@ export class ResourcesComponent implements OnInit {
       window.scrollTo({top: y, behavior: 'smooth'});
     }
   }
-  public ngOnDestroy() {
-    for (let sub of this.subs) {
-      sub.unsubscribe();
-    }
-  }
 }
diff --git a/src/app/sushilite/sushilite.component.ts b/src/app/sushilite/sushilite.component.ts
index 527d98d..6c30137 100644
--- a/src/app/sushilite/sushilite.component.ts
+++ b/src/app/sushilite/sushilite.component.ts
@@ -8,8 +8,8 @@ import {properties} from '../../environments/environment';
   templateUrl: 'sushilite.component.html',
   styleUrls: ['sushilite.component.css'],
 })
-export class SushiliteComponent implements OnInit{
-
+export class SushiliteComponent implements OnInit {
+  
   public url: string;
   public reportTitle: string;
   public screenHeight: number;