[WIP] Browse repository monitors page, tweaks for RFO/RPO page

src/app/app-routing.module.ts

@@ -29,6 +29,11 @@ const routes: Routes = [
     path: 'researcher',
     loadChildren: () => import('./researcher/researcher.module').then(m => m.ResearcherModule)
   },
+  {
+    path: 'repository',
+    loadChildren: () => import('./repository/repository.module').then(m => m.RepositoryModule),
+    data: {type: 'datasource', title: Irish.METADATA_PREFIX}
+  },
   {
     path: 'upload-dois',
     loadChildren: () => import('./upload-dois/upload-dois.module').then(m => m.UploadDoisModule)

src/app/app.component.ts

@@ -55,7 +55,7 @@ export class AppComponent extends StakeholderBaseComponent implements OnInit {
               private userManagementService: UserManagementService) {
     super();
     this.configurationService.initStaticPortal(this.irish.portal);
- }
+  }
 
   ngOnDestroy() {
     super.ngOnDestroy();
@@ -80,9 +80,7 @@ export class AppComponent extends StakeholderBaseComponent implements OnInit {
       new MenuItem("rpo", this.stakeholderUtils.entities.organization + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rpo", false, [], null, {}, null, null, null, "/rpo"),
       new MenuItem("rfo", this.stakeholderUtils.entities.funder + ' ' + this.stakeholderUtils.entities.stakeholders, "", "/rfo", false, [], null, {}, null, null, null, "/rfo"),
       new MenuItem("researcher", "Researcher Monitors", "", "/researcher", false, [], null, {}, null, null, null, "/researcher"),
-/*
+      new MenuItem("repository", "Repository Monitors", "", "/repository", false, [], null, {}, null, null, null, "/repository"),
-      new MenuItem("repository", "Repository Monitors", "", "/", false, [], null, {}, null, null, null, null),
-*/
     ];
 
     if(this.user) {

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 205b97487c46062cec7bbbb1828a65b165f72ee6
+Subproject commit 6f214cb08a247b52c88ad95c364b7d4323fa90a4

src/app/repository/browse-repositories/browse-repositories.component.html

@@ -0,0 +1,52 @@
+<ng-container *ngIf="showLoading">
+  <div class="uk-container uk-container-large uk-section">
+    <loading></loading>
+  </div>
+</ng-container>
+<div *ngIf="!showLoading" class="uk-container uk-container-large">
+  <div class="uk-flex uk-flex-middle uk-flex-center">
+    <div search-input *ngIf="keywordControl" [searchControl]="keywordControl" searchInputClass="border-bottom" iconPosition="left"
+      placeholder="Search for {{typeAsLabel}} {{entities.stakeholders}}" [disabled]="stakeholders.length === 0" class="uk-width-1-2@m uk-width-1-1">
+    </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-flex uk-flex-center">
+      <div class="uk-card uk-card-default uk-card-body uk-text-bold uk-text-center uk-width-2-3@m uk-width-1-1">
+        No {{entities.stakeholders}} available
+      </div>
+    </div>
+    <!-- STAKEHOLDERS -->
+    <div class="uk-grid uk-grid-small uk-child-width-1-2@m uk-child-width-1-1" uk-grid uk-height-match="target: .uk-card;">
+      <div *ngFor="let item of filteredStakeholders.slice((currentPage-1)*pageSize, currentPage*pageSize)">
+        <div class="uk-border uk-border-rounded">
+          <result-preview *ngIf="item.details" [result]="getResultPreview(item.details)" [properties]="properties" 
+            [showEntityActions]="false" [customUrl]="item.alias" [isMobile]="isMobile">
+          </result-preview>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/repository/browse-repositories/browse-repositories.component.ts

@@ -0,0 +1,79 @@
+import {ChangeDetectorRef, Component} from "@angular/core";
+import {ActivatedRoute, Router} from "@angular/router";
+import {FormBuilder} from "@angular/forms";
+import {BrowseStakeholderBaseComponent} from "../../shared/browse-stakeholder-base.component";
+import {StakeholderService} from "../../openaireLibrary/monitor/services/stakeholder.service";
+import {LayoutService} from "../../openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
+import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
+import {Stakeholder} from "../../openaireLibrary/monitor/entities/stakeholder";
+import {SearchDataprovidersService} from "../../openaireLibrary/services/searchDataproviders.service";
+import {SearchResult} from "../../openaireLibrary/utils/entities/searchResult";
+import {ResultPreview} from "../../openaireLibrary/utils/result-preview/result-preview";
+
+@Component({
+  selector: 'browse-repository',
+  templateUrl: 'browse-repositories.component.html'
+})
+export class BrowseRepositoriesComponent extends BrowseStakeholderBaseComponent {
+  filteredStakeholders: StakeholderRepository[];
+  sortOptions: Option[] = [
+    {value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'},
+    {value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'},
+    {value: 'mostRecent', label: 'Most recent'},
+    {value: 'leastRecent', label: 'Least recent'},
+  ]
+  
+  constructor(protected _route: ActivatedRoute,
+              protected _router: Router,
+              protected stakeholderService: StakeholderService,
+              protected layoutService: LayoutService,
+              protected cdr: ChangeDetectorRef,
+              protected fb: FormBuilder,
+              private searchDataprovidersService: SearchDataprovidersService) {
+    super();
+  }
+
+  sortByChanged() {
+    switch(this.sortBy) {
+      case 'alphAsc':
+        // name or index_name ?
+        this.stakeholders = this.stakeholders.sort((a, b) => a['index_name'].localeCompare(b['index_name']));
+        this.afterStakeholdersInitialized();
+        break;
+      case 'alphDsc':
+        this.stakeholders = this.stakeholders.sort((a, b) => b['index_name'].localeCompare(a['index_name']));
+        this.afterStakeholdersInitialized();
+        break;
+      case 'mostRecent':
+        // compare creationDate?
+        this.stakeholders = this.stakeholders.sort((a, b) => Number(b['creationDate']) - Number(a['creationDate']));
+        this.afterStakeholdersInitialized();
+        break;
+      case 'leastRecent':
+        this.stakeholders = this.stakeholders.sort((a, b) => Number(a['creationDate']) - Number(b['creationDate']));
+        this.afterStakeholdersInitialized();
+      default:
+        break;
+    }
+  }
+
+  afterStakeholdersInitialized() {
+    this.filteredStakeholders.slice((this.currentPage-1)*this.pageSize, this.currentPage*this.pageSize).forEach(item => {
+      if(!item.details) {
+          item.details = new ResultPreview();
+          item.details['title'] = {'name': item.name};
+          this.subscriptions.push(this.searchDataprovidersService.searchDataproviderById(item.index_id).subscribe(data => {
+          item.details = data[0];
+          item.details['title']['name'] = item.name;
+      }));
+      }
+    });
+  }
+
+  public getResultPreview(result: SearchResult): ResultPreview {
+    return ResultPreview.searchResultConvert(result, (result.entityType) ? result.entityType : this.typeAsLabel);
+  }
+}
+export class StakeholderRepository extends Stakeholder {
+  details: any;
+}

src/app/repository/browse-repositories/browse-repositories.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RouterModule} from "@angular/router";
+import {BrowseRepositoriesComponent} from "./browse-repositories.component";
+import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
+import {PreviousRouteRecorder} from "../../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
+import {SearchInputModule} from "../../openaireLibrary/sharedComponents/search-input/search-input.module";
+import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
+import {PagingModule} from "../../openaireLibrary/utils/paging.module";
+import {SearchDataprovidersService} from "../../openaireLibrary/services/searchDataproviders.service";
+import {ResultPreviewModule} from "src/app/openaireLibrary/utils/result-preview/result-preview.module";
+
+@NgModule({
+  imports: [CommonModule, LoadingModule, SearchInputModule, InputModule, PagingModule, ResultPreviewModule,
+    RouterModule.forChild([
+      {path: '', component: BrowseRepositoriesComponent, canDeactivate: [PreviousRouteRecorder]}
+    ])],
+  declarations: [BrowseRepositoriesComponent],
+  providers: [SearchDataprovidersService],
+  exports: [BrowseRepositoriesComponent]
+})
+export class BrowseRepositoriesModule {
+
+}

src/app/repository/repository.component.ts

@@ -0,0 +1,98 @@
+import {Component, OnInit} from "@angular/core";
+import {StakeholderBaseComponent} from "../openaireLibrary/monitor-admin/utils/stakeholder-base.component";
+import {ActivatedRoute, 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 {Stakeholder} from "../openaireLibrary/monitor/entities/stakeholder";
+import {StakeholderService} from "../openaireLibrary/monitor/services/stakeholder.service";
+import {CustomFilterService} from "../shared/customFilter.service";
+import {LinksResolver} from "../search/links-resolver";
+import {SearchCustomFilter} from "../openaireLibrary/searchPages/searchUtils/searchUtils.class";
+
+@Component({
+  selector: 'repository',
+  template: `
+    <div class="datasource">
+      <loading *ngIf="loading" class="uk-position-center"></loading>
+      <div *ngIf="!loading">
+        <div class="uk-banner">
+          <div class="uk-container uk-container-large">
+            <div class="uk-padding-small uk-padding-remove-vertical">
+              <h1 *ngIf="stakeholder" class="uk-h2">{{stakeholder.name}}</h1>
+              <h1 *ngIf="!stakeholder" class="uk-h2">{{entities.datasources}}</h1>
+            </div>
+          </div>
+          <div *ngIf="stakeholder" class="uk-banner-footer">
+            <div class="uk-container uk-container-large">
+              <ul class="uk-banner-tab uk-padding-small uk-padding-remove-vertical">
+                <li [class.uk-active]="!isSearch">
+                  <a [routerLink]="['./', stakeholder.alias]" [relativeTo]="_route" (click)="isSearch = false">
+                    {{entities.stakeholder}}
+                  </a>
+                </li>
+                <li [class.uk-active]="isSearch">
+                  <a [routerLink]="['./', stakeholder.alias, 'search']" [relativeTo]="_route">
+                    Browse Research Outputs
+                  </a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top uk-margin-large-bottom">
+          <router-outlet></router-outlet>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class RepositoryComponent extends StakeholderBaseComponent implements OnInit {
+  stakeholder: Stakeholder;
+  alias: string;
+  isSearch: boolean = false;
+  loading: boolean = false;
+
+  constructor(private stakeholderService: StakeholderService,
+              private _customFilterService: CustomFilterService,
+              protected _router: Router,
+              protected _route: ActivatedRoute,
+              protected seoService: SEOService,
+              protected _piwikService: PiwikService,
+              protected _title: Title,
+              protected _meta: Meta) {
+    super();
+    super.initRouterParams(this._route, event => {
+      this.isSearch = event.url.includes('search');
+    });
+  }
+
+  ngOnInit() {
+    this.title = 'Repository Monitors';
+    this.description = 'Repository Monitors';
+    this.setMetadata();
+    this.params.subscribe(params => {
+      this._customFilterService.setCustomFilter(null);
+      this.alias = params['stakeholder'];
+      if (this.alias) {
+        this.loading = true;
+        this.subscriptions.push(this.stakeholderService.getStakeholder(this.alias, true).subscribe(stakeholder => {
+          this.stakeholder = stakeholder;
+          if (this.stakeholder && this.stakeholder.type === 'datasource') {
+            LinksResolver.resetProperties();
+            LinksResolver.setSearchAndResultLanding("repository/" + this.stakeholder.alias);
+            this._customFilterService.setCustomFilter(
+                [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),
+                  new SearchCustomFilter("Repository", "collectedfromdatasourceid", this.stakeholder.index_id, this.stakeholder.index_name, true)
+                ]);
+            this.loading = false;
+          } else {
+            this.navigateToError();
+          }
+        }));
+      } else {
+        this.stakeholder = null;
+      }
+    });
+  }
+}

src/app/repository/repository.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {RepositoryComponent} from "./repository.component";
+import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
+import {Route, RouterModule} from "@angular/router";
+const routes: Route[] = [
+  {
+    path: '', component: RepositoryComponent, children: [
+      {path: '', loadChildren: () => import('./browse-repositories/browse-repositories.module').then(m => m.BrowseRepositoriesModule)},
+      {path: ':stakeholder/search', loadChildren: () => import('../search/resultLanding.module').then(m => m.ResultLandingModule)},
+      {path: ':stakeholder', loadChildren: () => import('../shared/monitor/monitor.module').then(m => m.MonitorModule)}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(routes), LoadingModule],
+  declarations: [RepositoryComponent],
+  exports: [RepositoryComponent],
+})
+export class RepositoryModule {
+}

src/app/rfo/rfo.component.ts

@@ -38,7 +38,7 @@ import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sideb
                   </div>
               </div>
           </div>
-          <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
+          <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top uk-margin-large-bottom">
               <router-outlet></router-outlet>
           </div>
       </div>

src/app/rpo/rpo.component.ts

@@ -38,7 +38,7 @@ import {LayoutService} from "../openaireLibrary/dashboard/sharedComponents/sideb
                     </div>
                 </div>
             </div>
-            <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top">
+            <div *ngIf="!this.alias || this.stakeholder" class="uk-margin-large-top uk-margin-large-bottom">
                 <router-outlet></router-outlet>
             </div>
         </div>
@@ -77,7 +77,7 @@ export class RpoComponent extends StakeholderBaseComponent implements OnInit {
           this.stakeholder = stakeholder;
           if (this.stakeholder && this.stakeholder.type === 'organization') {
             LinksResolver.resetProperties();
-            LinksResolver.setSearchAndResultLanding("rfo/" + this.stakeholder.alias);
+            LinksResolver.setSearchAndResultLanding("rpo/" + this.stakeholder.alias);
             let value = this.stakeholder.index_id + "||" + this.stakeholder.index_name + "||" + this.stakeholder.index_shortName;
             this._customFilterService.setCustomFilter(
                 [new SearchCustomFilter("National", "country", "IE", "Irish National Monitor", false),

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

@@ -73,6 +73,7 @@ export class BrowseStakeholderBaseComponent extends StakeholderBaseComponent imp
     } else {
       this.filteredStakeholders = this.stakeholders.filter(item => (item['name'] && item['name'].toLowerCase().includes(value.toLowerCase())) || (item['alias'] && item['alias'].toLowerCase().includes(value.toLowerCase())));
     }
+    this.afterStakeholdersInitialized();
     this.currentPage = 1;
   }
 
@@ -96,14 +97,20 @@ export class BrowseStakeholderBaseComponent extends StakeholderBaseComponent imp
   sizeChanged($event) {
     this.pageSize = $event;
     this.currentPage = 1;
+    this.afterStakeholdersInitialized();
   }
 
   updateCurrentPage($event) {
     this.currentPage = $event.value;
     HelperFunctions.scrollToId('target');
+    this.afterStakeholdersInitialized();
   }
 
   get typeAsLabel() {
     return this.stakeholderUtils.types.find(type => type.value === this.stakeholderType).label;
   }
+  
+  afterStakeholdersInitialized() {
+    // this is a method that will be overriden from the components extending this base component, if needed
+  }
 }

src/app/shared/irish.ts

@@ -14,6 +14,8 @@ export class Irish {
     StakeholderConfiguration.ENTITIES.funders  = 'RFOs';
     StakeholderConfiguration.ENTITIES.organization = 'RPO';
     StakeholderConfiguration.ENTITIES.organizations = 'RPOs';
+    StakeholderConfiguration.ENTITIES.datasource = 'Repository Monitor';
+    StakeholderConfiguration.ENTITIES.datasources = 'Repository Monitors';
 
     StakeholderConfiguration.TYPES = [
       {value: 'funder', label: StakeholderConfiguration.ENTITIES.funder},