[WIP]Researcher: add institutions, improvements in search UX, clear search,

src/app/researcher/researcher.component.ts

@@ -10,7 +10,6 @@ import {SearchOrcidService} from "../openaireLibrary/claims/claim-utils/service/
 
 import {CustomFilterService} from "../shared/customFilter.service";
 import {LinksResolver} from "../search/links-resolver";
-import {map} from "rxjs/operators";
 import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
 import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
 
@@ -45,6 +44,7 @@ import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
         <div class="uktext-large">Researcher Monitors</div>
         <div>Lorem ipsum...</div>
       </div>
+      <loading *ngIf="authorId && !author && loading"></loading>
     </div>
     <div class="uk-section uk-container">
         <router-outlet></router-outlet>
@@ -57,6 +57,7 @@ export class ResearcherComponent extends BaseComponent implements OnInit {
   properties = properties;
   totalResults;
   openResults;
+  loading = false;
   constructor(protected _router: Router,
               protected _route: ActivatedRoute,
               protected seoService: SEOService,
@@ -73,9 +74,12 @@ export class ResearcherComponent extends BaseComponent implements OnInit {
 
   ngOnInit() {
     this.params.subscribe(params => {
+
       this.authorId = params['stakeholder'];
+      this.author = null;
       this._customFilterService.setCustomFilter([]);
       if (this.authorId) {
+        this.loading = true;
         LinksResolver.resetProperties();
         LinksResolver.setSearchAndResultLanding("researcher/" + this.authorId);
         this.subscriptions.push(this._searchOrcidService.searchOrcidSingleAuthor(this.authorId, properties, true).subscribe(data => {
@@ -91,6 +95,7 @@ export class ResearcherComponent extends BaseComponent implements OnInit {
           this._router.navigate([properties.errorLink]);
         }));
       }
+
     });
 
   }
@@ -102,6 +107,7 @@ export class ResearcherComponent extends BaseComponent implements OnInit {
       if(this.totalResults ==0 ){
         this._router.navigate([properties.errorLink]);
       }else{
+        this.loading = false;
         this.subscriptions.push(this._searchResearchResultsService.numOfResearchOutcomes(param + ' and (resultbestaccessright exact "Open Access")', properties, null).subscribe(res => {
           this.openResults = res;
         }));

src/app/researcher/researcher.module.ts

@@ -4,6 +4,7 @@ import {CommonModule} from "@angular/common";
 import {ResearcherComponent} from "./researcher.component";
 import {SearchOrcidServiceModule} from "../openaireLibrary/claims/claim-utils/service/searchOrcidService.module";
 import {SearchResearchResultsServiceModule} from "../openaireLibrary/services/searchResearchResultsService.module";
+import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 
 const routes: Route[] = [
   {
@@ -16,7 +17,7 @@ const routes: Route[] = [
 ];
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild(routes), SearchOrcidServiceModule, SearchResearchResultsServiceModule],
+  imports: [CommonModule, RouterModule.forChild(routes), SearchOrcidServiceModule, SearchResearchResultsServiceModule, LoadingModule],
   declarations: [ResearcherComponent],
   exports: [ResearcherComponent],
 })

src/app/researcher/search-researcher/search-researcher.component.html

@@ -1,12 +1,9 @@
     <div class=" uk-flex uk-flex-center ">
-        <div search-input [(value)]="keyword" [placeholder]="'Search for author or ORCID...'"
+        <div search-input [(value)]="keyword" [placeholder]="'Search for author or ORCID...'" [disabled]="orcidStatus ==errorCodes.LOADING"
-     [searchInputClass]="'inner background'" (searchEmitter)="keywordChanged()" class="uk-width-xlarge@l uk-width-large@m"></div>
+     [searchInputClass]="'inner background'" (searchEmitter)="searchByKeyword()" (valueChange)="checkForReset()"  class="uk-width-xlarge@l uk-width-large@m"></div>
     </div>
 
     <div  class="uk-margin-top">
-        <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
-            <loading></loading>
-        </div>
         <div *ngIf="orcidStatus == errorCodes.ERROR" class="uk-alert uk-alert-warning" role="alert">An Error Occured</div>
         <div *ngIf="orcidStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger"
              role="alert">Service not available
@@ -33,12 +30,13 @@
                                 <span  class="uk-border uk-border-circle uk-padding-small uk-text-meta uk-margin-small-right" width="16px" height="16px">
                                 <span uk-icon="user"></span></span>
                             </div>
-                            <div class="uk-padding-remove-left">
+                            <div class="uk-padding-remove-left uk-text-truncate uk-width-expand">
                                 {{author.authorGivenName}} {{author.authorFamilyName}}
                                 <br>
-                                <span class="uk-text-primary uk-text-small">
+                                <span class="uk-text-primary uk-text-xsmall">
                                 <span *ngIf="author.resultsCount && author.resultsCount > 0">{{author.resultsCount}} research outcomes</span>
-<!--                                <span *ngIf="author.institutions">{{author.institutions.join(", ")}} </span>-->
+                                    <br>
+                                <span *ngIf="author.institutions">{{author.institutions.join(", ")}}</span>
                                 </span>
                             </div>
                         </div>
@@ -54,9 +52,11 @@
                     </div>
                 </div>
             </div>
-
+            <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
+                <loading></loading>
+            </div>
             <div class="uk-flex uk-flex-center">
-                <button *ngIf="authorsToShow.length > page*size || authors.length > authorsRendered" class="uk-button uk-button-default" [class.uk-disabled]="orcidStatus == errorCodes.LOADING" (click)="loadMore()" >Load more</button>
+                <button *ngIf="authorsToShow.length >  0 && orcidStatus != errorCodes.LOADING && (authorsToShow.length > page*size || authors.length > authorsRendered)" class="uk-button uk-button-default" [class.uk-disabled]="orcidStatus == errorCodes.LOADING" (click)="loadMore()" >Load more</button>
 
             </div>
         </div>

src/app/researcher/search-researcher/search-researcher.component.ts

@@ -46,10 +46,8 @@ export class SearchResearcherComponent  extends BaseComponent implements OnInit
     this.description = 'Researcher Monitors';
     this.setMetadata();
     this.subscriptions.push(this._route.queryParams.subscribe(params => {
-      if (params['keyword']) {
+        this.keyword = params['keyword']? decodeURIComponent( params['keyword']):"";
-        this.keyword = params['keyword'];
         this.search();
-      }
     }));
   }
 
@@ -61,21 +59,27 @@ export class SearchResearcherComponent  extends BaseComponent implements OnInit
     });
   }
 
-  keywordChanged(){
+  checkForReset() {
-    this._router.navigate(['/researcher'], {queryParams: {keyword:this.keyword}});
+    if(this.keyword == ""){
+      this.searchByKeyword()
+    }
+  }
+  searchByKeyword(){
+    this._router.navigate(['/researcher'], {queryParams: {keyword:encodeURIComponent(this.keyword)}});
   }
   search() {
     //uncomment to disable search with no keyword
-    if (this.keyword.length == 0) {
-      return;
-    }
     this.warningMessage = "";
     this.infoMessage = "";
-    this.orcidStatus = this.errorCodes.LOADING;
     this.authors = [];
     this.authorsToShow = [];
     this.page = 1;
     this.authorsRendered = 0;
+    if (this.keyword.length == 0) {
+      this.orcidStatus = null;
+      return;
+    }
+    this.orcidStatus = this.errorCodes.LOADING;
     if(Identifier.isValidORCID(this.keyword)){
       this.getOrcidAuthor(this.keyword.indexOf(properties.orcidURL)!=-1?this.keyword.split(properties.orcidURL)[1]:this.keyword, true, -1);
     }else{
@@ -169,8 +173,8 @@ private getOpenaireResultsFor(start, end){
     }
 }
   private getOpenaireResultsObs(author){
-    let param =  '(authorid="' + StringUtils.URIEncode(author.id) + '")';
+    let param =  '(authorid="' + StringUtils.URIEncode(author.id) + '")'
-    // +' and (country exact "IE")';
+    +' and (country exact "IE")';
     return this._searchResearchResultsService.numOfResearchOutcomes(param, properties, null).pipe(map(res => {
       author.resultsCount = res;
       return author;