[WIP] Search researcher: work on the page layout - add banner, basic component functionalities

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

@@ -1,64 +1,60 @@
-<div search-input [(value)]="keyword" [placeholder]="'Search for author or ORCID...'"
+<div style="background: royalblue; height: 200px">
-     [searchInputClass]="'inner background'" (searchEmitter)="search()"></div>
-<div class="uk-margin-top">
 
+</div>
+<div class="uk-section uk-container">
+    <div class=" uk-flex uk-flex-center ">
+        <div search-input [(value)]="keyword" [placeholder]="'Search for author or ORCID...'"
+     [searchInputClass]="'inner background'" (searchEmitter)="search()" 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
         </div>
+        <div *ngIf="orcidStatus == errorCodes.NONE "
+             class="uk-alert uk-alert-primary "> No results found
+        </div>
+        <div *ngIf="!(orcidStatus == errorCodes.NONE ||
+        orcidStatus == errorCodes.ERROR || orcidStatus == errorCodes.NOT_AVAILABLE)">
+
+<!--            Debug info -->
+            <!--<div>
             Orcid found:{{authors.length}} <br>
             check for results: {{authorsRendered}} <br>
             Authors found (with OpenAIRE results):{{authorsToShow.length}} <br>
             page: {{page}}<br>
-    <ng-container *ngFor=" let author of authorsToShow.slice(0,page*size>authorsToShow.length?authorsToShow.length:page*size)">
-        <div *ngIf="author.resultsCount > 0" class="uk-margin-top">{{author.authorGivenName}} {{author.authorFamilyName}} : {{author.id}} <br>
-        <div>Research outcomes:{{author.resultsCount}}</div>
-        </div>
-    </ng-container>
-    <button *ngIf="authorsToShow.length > page*size || authors.length > authorsRendered" class="uk-button uk-button-primary" (click)="loadMore()" >Load more</button>
-
-    <div *ngIf="orcidStatus == errorCodes.NONE "
-         class="uk-alert uk-alert-primary "> No results found
-    </div>
-
-    <!--<div *ngIf="orcidResultsNum >= 0" class="panel-body">
-               <span><span class="uk-text-bold">Showing results for</span>
-                 <a target="_blank" href="http://orcid.org/{{authorId}}"> <span
-                         class="custom-external"></span>  {{authorGivenName}} {{authorFamilyName}} - {{authorId}}  </a> :
-               </span>
-        <div *ngIf="authors.length > 1" class=""> In Orcid you can search only by Author. Not the
-            author you are looking for?
-
-            <div class="dropdown">
-
-                <mat-select [(ngModel)]="selectAuthorId" name="select_author"
-                            (ngModelChange)="getOrcidResultsById(selectAuthorId)" class="matSelection"
-                            [disableOptionCentering]="true"
-                            panelClass="matSelectionPanel">
-                    <mat-option value="0">Choose another one:</mat-option>
-                    <mat-option *ngFor=" let item of authors let i = index"
-                                [value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </mat-option>
-                </mat-select>
-            </div>
-
-        </div>
-
-
-        <div>
-            <div *ngIf="orcidResultsNum == 0" class="uk-alert uk-alert-primary uk-margin-top"> No results found</div>
-        </div>
-        <div *ngIf=" ((orcidResultsNum >0) && (totalPages > 1) && ( 0 < page &&  page <= totalPages )) "
-             class="uk uk-flex uk-flex-center">
-
-&lt;!&ndash;
-            <paging-no-load [currentPage]="orcidPage" [totalResults]="orcidResultsNum"
-                            [term]="keyword" [size]="size"
-                            (pageChange)="orcidPageChange($event)"></paging-no-load>
-
-&ndash;&gt;
-
-        </div>
             </div>-->
-    <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
+            <div class="uk-grid uk-child-width-1-3">
-        <span class="loading-gif  uk-align-center"></span></div>
+                <div *ngFor=" let author of authorsToShow.slice(0,page*size>authorsToShow.length?authorsToShow.length:page*size)" class="uk-padding-small">
+                    <div *ngIf="author.resultsCount > 0" class="uk-card uk-card-default uk-card-hover uk-padding-small">
+                        <a [routerLink]="['./',author.id]" class="uk-link-reset">
+                        <div class="uk-margin-top uk-margin-bottom">
+
+                            <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>
+                            {{author.authorGivenName}} {{author.authorFamilyName}}
+                        </div>
+
+                        <div class="uk-text-xsmall uk-text-secondary uk-margin-medium-top">
+                            <img src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"
+                                 loading="lazy" style="width:16px; height:16px; margin-right: 3px;">
+                            <a [href]="properties.orcidURL + author.id" target="_blank" class="uk-link uk-text-primary">
+
+                            {{properties.orcidURL + author.id}}</a></div>
+<!--                    <div>Research outcomes:{{author.resultsCount}}</div>-->
+                        </a>
+                    </div>
+                </div>
+            </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>
+
+            </div>
+        </div>
+    </div>
 </div>

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

@@ -6,13 +6,18 @@ import {SearchOrcidService} from "../../openaireLibrary/claims/claim-utils/servi
 import {SearchResearchResultsService} from "../../openaireLibrary/services/searchResearchResults.service";
 import {forkJoin, Subscriber} from "rxjs";
 import {properties} from "../../../environments/environment";
+import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
+import {Router} from "@angular/router";
+import {SEOService} from "../../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {PiwikService} from "../../openaireLibrary/utils/piwik/piwik.service";
+import {Meta, Title} from "@angular/platform-browser";
 import {map} from "rxjs/operators";
 
 @Component({
   selector: 'search-researcher',
   templateUrl: './search-researcher.component.html',
 })
-export class SearchResearcherComponent implements OnInit {
+export class SearchResearcherComponent  extends BaseComponent implements OnInit  {
   page: number = 1;
   size: number = 10;
   public keyword: string = "";//"paolo manghi";//'0000-0001-7291-3210';
@@ -20,17 +25,25 @@ export class SearchResearcherComponent implements OnInit {
   public errorCodes: ErrorCodes = new ErrorCodes();
   public warningMessage = "";
   public infoMessage = "";
-  orcidStatus: number = this.errorCodes.NONE;
+  orcidStatus: number = null;
   authors = [];
   authorsToShow = [];
   authorsRendered = 0;
   subscriptions = [];
   constructor(private _searchOrcidService: SearchOrcidService,
-              private _searchResearchResultsService: SearchResearchResultsService) {
+              private _searchResearchResultsService: SearchResearchResultsService,
-
+  protected _router: Router,
-  }
+  protected seoService: SEOService,
-
+  protected _piwikService: PiwikService,
+  protected _title: Title,
+  protected _meta: Meta) {
+  super();
+}
   ngOnInit() {
+    this.title = 'Researcher Monitors';
+    this.description = 'Researcher Monitors';
+    this.setMetadata();
+
     if (this.keyword != null && this.keyword.length > 0) {
       this.search();
     }
@@ -135,6 +148,8 @@ private getOpenaireResultsFor(start, end){
 
         if (this.authorsToShow.length < this.page * this.size) {
           this.getOpenaireResultsFor(end, end + (this.size));
+        }else{
+          this.orcidStatus = this.errorCodes.DONE;
         }
       }));
     }else{
@@ -154,6 +169,7 @@ private getOpenaireResultsFor(start, end){
   }
 
   loadMore(){
+    this.orcidStatus = this.errorCodes.LOADING;
     let page = this.page + 1;
     if(page*this.size>this.authorsToShow.length) {
       if (this.authorsRendered < this.authors.length) {

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

@@ -6,13 +6,14 @@ import {SearchInputModule} from "../../openaireLibrary/sharedComponents/search-i
 import {MatSelectModule} from "@angular/material/select";
 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";
 
 
 
 @NgModule({
   declarations: [SearchResearcherComponent],
   imports: [
-    CommonModule, SearchResearcherRoutingModule, SearchInputModule, MatSelectModule, SearchOrcidServiceModule, SearchResearchResultsServiceModule
+    CommonModule, SearchResearcherRoutingModule, SearchInputModule, MatSelectModule, SearchOrcidServiceModule, SearchResearchResultsServiceModule, LoadingModule
 
   ]
 })

src/environments/environment.ts

@@ -9,7 +9,7 @@ import {common, commonDev} from "../app/openaireLibrary/utils/properties/environ
 
 let props: EnvProperties = {
   environment: "development",
-  searchAPIURLLAst: "http://beta.services.openaire.eu/search/v2/api/ 19680",
+  searchAPIURLLAst: "http://beta.services.openaire.eu/search/v2/api/",
   searchResourcesAPIURL: "https://beta.services.openaire.eu/search/v2/api/resources",
   monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-monitor-service",
   // monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-irish-monitor-service/",
@@ -17,7 +17,8 @@ let props: EnvProperties = {
   piwikSiteId: "407",
   enablePiwikTrack:false,
   piwikBaseUrl: 'https://beta.analytics.openaire.eu/piwik.php?idsite=',
-  utilsService: 'http://mpagasas.di.uoa.gr:8000'
+  utilsService: 'http://mpagasas.di.uoa.gr:8000',
+  orcidURL: 'https://orcid.org/'
 
 }
 export let properties: EnvProperties = {