[WIP] progress on browse RFOs & RPOs - still needs styling changes and OA % field

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 92137556626a25dec819f258a6cf49e5e7562443
+Subproject commit 6492211dc364a215f1e422d1ab07d356644c3019

src/app/shared/browse-stakeholders/browse-stakeholder.component.html

@@ -0,0 +1,133 @@
+<ng-container *ngIf="showLoading">
+  <div class="uk-container uk-container-large uk-section">
+    <loading></loading>
+  </div>
+</ng-container>
+<ng-container *ngIf="!showLoading && stakeholders?.length">
+  <div class="uk-flex uk-flex-middle uk-flex-center uk-position-relative">
+    <div search-input [searchControl]="keywordControl" searchInputClass="border-bottom" iconPosition="left"
+      placeholder="Search for {{typeAsLabel}} {{entities.STAKEHOLDERS}}" [disabled]="showLoading" class="uk-width-1-2@m uk-width-1-1">
+    </div>
+    <div class="uk-flex uk-flex-middle uk-position-right">
+      <a (click)="gridView = true" [ngClass]="gridView ? 'active' : ''" class="uk-link-reset uk-margin-small-right">Grid</a>
+      <a (click)="gridView = false" [ngClass]="gridView ? '' : 'active'" class="uk-link-reset">List</a>
+    </div>
+  </div>
+  <div class="uk-flex uk-flex-middle uk-flex-between uk-margin-large-top">
+    <div class="uk-flex uk-flex-middle">
+      <div class="uk-width-small uk-margin-medium-right">
+        <div input
+          type="select" placeholder="Sort by" inputClass="border-bottom"
+          [options]="sortOptions" [(value)]="sortBy" (valueChange)="sortByChanged()">
+        </div>
+      </div>
+      <div class="uk-width-xsmall">
+        <div input
+          type="select" placeholder="Results per page" inputClass="border-bottom"
+          [options]="pageOptions" [(value)]="pageSize" (valueChange)="sizeChanged($event)">
+        </div>
+      </div>
+    </div>
+    <div>
+      <paging-no-load *ngIf="filteredStakeholders.length > pageSize"
+        (pageChange)="updateCurrentPage($event)"
+        [currentPage]="currentPage" [size]="pageSize"
+        [totalResults]="filteredStakeholders.length">
+      </paging-no-load>
+    </div>
+  </div>
+  <div class="uk-margin-large-top" id="target">
+    <div *ngIf="!filteredStakeholders || filteredStakeholders?.length == 0" class="uk-text-center">
+      No {{entities.STAKEHOLDERS}} available
+    </div>
+    <!-- STAKEHOLDERS -->
+    <!-- Grid view -->
+    <ng-container *ngIf="gridView || isMobile; else elseBlock">
+      <div class="uk-grid" class="uk-child-width-1-4@l uk-child-width-1-3@m uk-child-width-1-1"
+        uk-grid uk-height-match="target: .top-info;">
+        <div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
+          <a routerLink="./{{item.alias}}" class="uk-link-reset">
+            <div class="uk-card uk-card-default uk-card-hover">
+              <div class="uk-padding-small top-info">
+                <!-- logo -->
+                <!-- remove max-width style, add something custom maybe?  -->
+                <div class="uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
+                  <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
+                  <ng-template #elseBlock>
+                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 180px;">
+                  </ng-template>
+                </div>
+                <!-- name -->
+                <div class="uk-text-center uk-text-bold uk-margin-top multi-line-ellipsis lines-2">
+                  <div [title]="item.name">
+                    {{item.name}}
+                  </div>
+                </div>
+              </div>
+              <div class="uk-background-muted">
+                <div class="uk-padding-small uk-grid uk-grid-divider uk-child-width-1-2" uk-grid>
+                  <div>
+                    <div class="uk-text-xsmall">
+                      Type
+                    </div>
+                    <div class="uk-text-small uk-text-bold uk-text-capitalize">
+                      {{item.type}}
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      % Open Access
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+    </ng-container>
+    <!-- List view -->
+    <ng-template #elseBlock>
+      <div>
+        <table class="uk-table uk-table-striped uk-table-middle uk-table-responsive uk-table-hover">
+          <thead>
+            <tr>
+              <th>Logo</th>
+              <th>Name</th>
+              <th>Type</th>
+              <th>Open Access %</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
+              <td>
+                <!-- remove max-width style, add something custom maybe?  -->
+                <div class="uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
+                  <img *ngIf="item.logoUrl; else elseBlock" [src]="item | logoUrl" [alt]="item.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
+                  <ng-template #elseBlock>
+                    <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" style="max-width: 140px;">
+                  </ng-template>
+                </div>
+              </td>
+              <td>
+                <div class="uk-text-truncate uk-text-capitalize uk-text-italic uk-text-small uk-text-bold" [title]="item.name">
+                  {{item.name}}
+                </div>
+              </td>
+              <td>
+                <div class="uk-text-small uk-text-bold uk-text-capitalize">
+                  {{item.type}}
+                </div>
+              </td>
+              <td>
+                <div class="uk-text-bold">
+                  %
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ng-template>
+  </div>
+</ng-container>

src/app/shared/browse-stakeholders/browse-stakeholder.component.ts

@@ -1,33 +1,111 @@
-import {Component, OnInit} from "@angular/core";
+import {ChangeDetectorRef, Component, OnInit} from "@angular/core";
 import {ActivatedRoute, Router} from "@angular/router";
-import {StakeholderType} from "../../openaireLibrary/monitor/entities/stakeholder";
+import {Stakeholder, StakeholderEntities, StakeholderType} from "../../openaireLibrary/monitor/entities/stakeholder";
 import {BaseComponent} from "../../openaireLibrary/sharedComponents/base/base.component";
 import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
+import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
+import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
+import {LayoutService} from "src/app/openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {FormBuilder, FormControl} from "@angular/forms";
+import {debounceTime, distinctUntilChanged} from "rxjs/operators";
+import {StakeholderUtils} from "src/app/openaireLibrary/monitor-admin/utils/indicator-utils";
 
 @Component({
   selector: 'browse-stakeholder',
-  template: ``
+  templateUrl: `browse-stakeholder.component.html`
 })
 export class BrowseStakeholderComponent extends BaseComponent implements OnInit {
+  entities = StakeholderEntities;
+  stakeholderUtils: StakeholderUtils = new StakeholderUtils();
   stakeholderType: StakeholderType;
+  stakeholders: Stakeholder[] = [];
+  filteredStakeholders: Stakeholder[] = [];
+  
+  showLoading: boolean = true;
+  isMobile: boolean = false;
+  
+  gridView: boolean = true;
+  sortOptions: Option[];
+  pageOptions: number[] = [10, 20, 30, 40];
+  sortBy: string = 'alphAsc';
+  currentPage: number = 1;
+  pageSize: number = 10;
+  keywordControl: FormControl;
 
   constructor(private route: ActivatedRoute,
               private stakeholderService: StakeholderService,
-              protected _router: Router) {
+              protected _router: Router,
+              private layoutService: LayoutService,
+              private cdr: ChangeDetectorRef,
+              private fb: FormBuilder) {
     super();
   }
 
   ngOnInit() {
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+      this.cdr.detectChanges();
+    }));
+    this.sortOptions = [
+      {value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'},
+      {value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'},
+      {value: 'oaDsc', label: '"Open Access %" Dsc.'}
+    ];
     this.stakeholderType = this.route.snapshot.data.type;
     if(!this.stakeholderType) {
       this.navigateToError();
     }
     this.subscriptions.push(this.stakeholderService.getStakeholders(this.properties.monitorServiceAPIURL, this.stakeholderType).subscribe(stakeholders => {
-      console.log(stakeholders);
-    }))
+      this.stakeholders = stakeholders;
+      this.filteredStakeholders = stakeholders;
+      this.filteredStakeholders.sort((a, b) => a['name'].localeCompare(b['name']));
+      this.showLoading = false;
+    }));
+    this.keywordControl = this.fb.control('');
+    this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => {
+      this.filtering(value);
+    }));
   }
 
   private navigateToError() {
     this._router.navigate([this.properties.errorLink], {queryParams: {'page': this._router.url}});
   }
+
+  private filtering(value) {
+    if(!value){
+      this.filteredStakeholders = this.stakeholders;
+    } else {
+      this.filteredStakeholders = this.stakeholders.filter(item => (item['name'] && item['name'].toLowerCase().includes(value.toLowerCase())) || (item['alias'] && item['alias'].toLowerCase().includes(value.toLowerCase())));
+    }
+    this.currentPage = 1;
+  }
+
+  sortByChanged() {
+    switch(this.sortBy) {
+      case 'alphAsc':
+        this.stakeholders = this.stakeholders.sort((a, b) => a['name'].localeCompare(b['name']));
+        break;
+      case 'alphDsc':
+        this.stakeholders = this.stakeholders.sort((a, b) => b['name'].localeCompare(a['name']));
+        break;
+      case 'oaDsc':
+        // TODO: dont have an OA percentage yet
+        // this.stakeholders = this.stakeholders.sort((a, b) => b['openAccessPercentage'] - a['openAccessPercentage']);
+        break;
+    }
+  }
+
+  sizeChanged($event) {
+    this.pageSize = $event;
+    this.currentPage = 1;
+  }
+
+  updateCurrentPage($event) {
+    this.currentPage = $event.value;
+    HelperFunctions.scrollToId('target');
+  }
+
+  get typeAsLabel() {
+    return this.stakeholderUtils.types.find(type => type.value === this.stakeholderType).label;
+  }
 }

src/app/shared/browse-stakeholders/browse-stakeholder.module.ts

@@ -3,9 +3,16 @@ import {CommonModule} from "@angular/common";
 import {BrowseStakeholderComponent} from "./browse-stakeholder.component";
 import {RouterModule} from "@angular/router";
 import {PreviousRouteRecorder} from "../../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
+import {SearchInputModule} from "../../openaireLibrary/sharedComponents/search-input/search-input.module";
+import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
+import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
+import {PagingModule} from "../../openaireLibrary/utils/paging.module";
+import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
 
 @NgModule({
-  imports: [CommonModule, RouterModule.forChild([
+  imports: [CommonModule, LoadingModule, SearchInputModule, InputModule, PagingModule,
+    LogoUrlPipeModule,
+    RouterModule.forChild([
       {path: '', component: BrowseStakeholderComponent, canDeactivate: [PreviousRouteRecorder]}
   ])],
   declarations: [BrowseStakeholderComponent],

src/assets/common-assets

@@ -1 +1 @@
-Subproject commit 0a58acbbd45074327642e132cd7deae31188a978
+Subproject commit d1b2d5e585722751792d12645d17f820cd6a7860

src/environments/environment.ts

@@ -11,7 +11,7 @@ let props: EnvProperties = {
   environment: "development",
   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:19380/uoa-monitor-service",
   // monitorServiceAPIURL: "http://duffy.di.uoa.gr:19680/uoa-irish-monitor-service/",
   searchOrcidURL: "https://pub.orcid.org/v3.0/",
   piwikSiteId: "407",