[Library | Trunk]: Merge search results from branch.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58241 d315682c-612b-4755-9ff5-7f18f6832af3

searchPages/searchUtils/highlight/highlight.component.ts

@@ -1,6 +1,6 @@
 import {Component, Input, OnInit} from "@angular/core";
 import {StringUtils} from "../../../utils/string-utils.class";
-import {Organization, Project} from "../../../utils/entities/searchResult";
+import {Organization, Project} from "../../../utils/result-preview/result-preview";
 
 export interface Keyword {
   field: string,
@@ -68,4 +68,4 @@ export class HighlightComponent implements OnInit{
     }
     return false;
   }
-}
+}

searchPages/searchUtils/modal-result/modal-result.component.ts

@@ -0,0 +1,69 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {SearchResult} from "../../../utils/entities/searchResult";
+import {ErrorCodes} from "../../../utils/properties/errorCodes";
+import {RouterHelper} from "../../../utils/routerHelper.class";
+import {ResultPreview} from "../../../utils/result-preview/result-preview";
+import {AlertModal} from "../../../utils/modal/alert";
+import {EnvProperties} from "../../../utils/properties/env-properties";
+
+@Component({
+  selector: 'modal-result',
+  template: `
+    <errorMessages [status]="[status]" [type]="type" tab_error_class=true></errorMessages>
+    <div *ngIf="status == errorCodes.DONE">
+      <no-load-paging *ngIf="totalResults > pageSize" [type]="type"
+                      (pageChange)="update($event)"
+                      [page]="page" [pageSize]="pageSize"
+                      [totalResults]="totalResults">
+      </no-load-paging>
+      <ul class="uk-list uk-list-divider  uk-margin">
+        <li *ngFor="let result of results">
+          <result-preview [modal]="modal" [properties]="properties"
+                          [result]="getResultPreview(result)"
+                          [showSubjects]="showSubjects"
+                          [showOrganizations]="showOrganizations"></result-preview>
+        </li>
+      </ul>
+      <no-load-paging *ngIf="totalResults > pageSize" [type]="type"
+                      (pageChange)="update($event)"
+                      [page]="page" [pageSize]="pageSize"
+                      [totalResults]="totalResults">
+      </no-load-paging>
+    </div>
+  `
+})
+export class ModalResultComponent {
+  @Input() results: SearchResult[];
+  @Input() totalResults: number = 0;
+  @Input() type: string;
+  @Input() resultType: string;
+  @Input() showOrganizations: boolean = true;
+  @Input() showSubjects: boolean = false;
+  @Input() modal: AlertModal;
+  @Input() properties: EnvProperties;
+  @Input() status: number;
+  @Input() pageSize: number = 1;
+  @Output() updatePage: EventEmitter<any> = new EventEmitter<any>();
+  
+  public page: number = 1;
+  public errorCodes: ErrorCodes = new ErrorCodes();
+  public routerHelper: RouterHelper = new RouterHelper();
+  public errorMessage: string = "No results found";
+  
+  constructor() {
+  }
+  
+  ngOnInit() {
+  }
+  
+  public getResultPreview(result: SearchResult): ResultPreview {
+    return ResultPreview.searchResultConvert(result, this.resultType);
+  }
+  
+  public update(event) {
+    this.page = event.value;
+    this.updatePage.emit({
+      value: event.value
+    });
+  }
+}

searchPages/searchUtils/modal-result/modal-result.module.ts

@@ -0,0 +1,23 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {ModalResultComponent} from './modal-result.component';
+import {RouterModule} from '@angular/router';
+import {ErrorMessagesModule} from "../../../utils/errorMessages.module";
+import {ResultPreviewModule} from "../../../utils/result-preview/result-preview.module";
+import {NoLoadPaging} from "../no-load-paging.module";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule,
+    RouterModule, ErrorMessagesModule, ResultPreviewModule, NoLoadPaging
+  ],
+  declarations: [
+    ModalResultComponent,
+  ],
+  exports: [
+    ModalResultComponent
+  ]
+})
+export class ModalResultModule {
+}

searchPages/searchUtils/newSearchPage.module.ts

@@ -1,15 +1,15 @@
-import { NgModule}            from '@angular/core';
+import {NgModule} from '@angular/core';
-import { CommonModule }        from '@angular/common';
+import {CommonModule} from '@angular/common';
-import { FormsModule }         from '@angular/forms';
+import {FormsModule} from '@angular/forms';
-import { RouterModule } from '@angular/router';
+import {RouterModule} from '@angular/router';
 
-import{NewSearchPageComponent} from './newSearchPage.component';
+import {NewSearchPageComponent} from './newSearchPage.component';
-import{SearchFormModule} from './searchForm.module';
+import {SearchFormModule} from './searchForm.module';
 import {SearchFilterModule} from './searchFilter.module';
 import {RangeFilterModule} from "../../utils/rangeFilter/rangeFilter.module";
 import {LoadingModalModule} from '../../utils/modal/loadingModal.module';
 import {ReportsServiceModule} from '../../services/reportsService.module';
-import{SearchPagingModule} from './searchPaging.module';
+import {SearchPagingModule} from './searchPaging.module';
 import {SearchResultsPerPageModule} from './searchResultsPerPage.module';
 import {SearchSortingModule} from './searchSorting.module';
 import {SearchDownloadModule} from './searchDownload.module';
@@ -18,8 +18,8 @@ import {PiwikServiceModule} from '../../utils/piwik/piwikService.module';
 import {PreviousRouteRecorder} from '../../utils/piwik/previousRouteRecorder.guard';
 import {HelperModule} from '../../utils/helper/helper.module';
 import {Schema2jsonldModule} from '../../sharedComponents/schema2jsonld/schema2jsonld.module';
-import { SEOServiceModule } from '../../sharedComponents/SEO/SEOService.module';
+import {SEOServiceModule} from '../../sharedComponents/SEO/SEOService.module';
-import { SearchDataproviderMapModule } from './searchDataproviderMap.module';
+import {SearchDataproviderMapModule} from './searchDataproviderMap.module';
 import {CommunitySearchResultsModule} from "./communitySearchResults.module";
 import {SearchResultsModule} from "./searchResults.module";
 import {SearchResultsInDepositModule} from "../../deposit/searchResultsInDeposit.module";

searchPages/searchUtils/no-load-paging.component.ts

@@ -0,0 +1,40 @@
+import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Observable}       from 'rxjs';
+import {ErrorCodes} from '../../utils/properties/errorCodes';
+
+@Component({
+    selector: 'no-load-paging',
+    template: `
+        <div class="paging-hr searchPaging uk-margin-small-bottom">
+            <div class="uk-panel uk-margin-small-top uk-grid  uk-flex uk-flex-middle">
+                <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase" *ngIf="type && totalResults">
+                    {{totalResults | number}}
+                    <span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span>
+                    {{page}}
+                    <span class="uk-text-muted uk-text-uppercase"> of </span>
+                    {{paging.getTotalPages()}}
+                </div>
+                <div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand">
+                    <paging-no-load  #paging [currentPage]="page"
+                                    customClasses="uk-margin-remove-bottom"
+                                    [totalResults]="totalResults" [size]="pageSize"
+                                    (pageChange)="updatePage($event)">
+                    </paging-no-load>
+                </div>
+            </div>
+        </div>
+    `
+})
+export class NoLoadPagingComponent {
+    @Input() type: string;
+    @Input() page: number = 1;
+    @Input() pageSize: number = 10;
+    @Input() totalResults: number;
+    @Output() pageChange: EventEmitter<any> = new EventEmitter<any>();
+    
+    public updatePage(event) {
+        this.pageChange.emit({
+            value: event.value
+        });
+    }
+}

searchPages/searchUtils/no-load-paging.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {PagingModule} from '../../utils/paging.module';
+import {NoLoadPagingComponent} from "./no-load-paging.component";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, PagingModule
+  ],
+  declarations: [
+    NoLoadPagingComponent
+  ],
+  exports: [
+    NoLoadPagingComponent
+  ]
+})
+export class NoLoadPaging {
+}

searchPages/searchUtils/quick-selections.component.ts

@@ -20,7 +20,7 @@ import {ConfigurationService} from "../../utils/configuration/configuration.serv
         <span *ngIf="showPublications" class="uk-margin-small-left"> <input type="checkbox" id="publ" name="Publications" formControlName="publication" (change)="changed()"> Publications </span>
         <span *ngIf="showDatasets" class="uk-margin-small-left"> <input type="checkbox" formControlName="dataset" (change)="changed()"> Research data </span>
         <span *ngIf="showSoftware" class="uk-margin-small-left"> <input type="checkbox" formControlName="software" (change)="changed()"> Software </span>
-        <span *ngIf="showOrp" class="uk-margin-small-left"> <input type="checkbox" formControlName="other" (change)="changed()"> Other research outcomes </span>
+        <span *ngIf="showOrp" class="uk-margin-small-left"> <input type="checkbox" formControlName="other" (change)="changed()"> Other research products </span>
       </span>
       </div>
     </form>

searchPages/searchUtils/searchPaging.component.ts

@@ -30,10 +30,10 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
         <div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
           {{oldTotalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(oldTotalResults)|number)}}
         </div-->
-        <div class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > searchUtils.size">
+        <div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" *ngIf="results && searchUtils.totalResults > searchUtils.size">
           <paging [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults"  [baseUrl]="baseUrl" [size]="searchUtils.size"  [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" > </paging>
         </div>
-        <div class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m" *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING">
+        <div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand" *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING">
           <paging [currentPage]="searchUtils.page" [totalResults]="oldTotalResults"  [baseUrl]="baseUrl" [size]="searchUtils.size"  [parameterNames] = "parameterNames" [parameterValues] = "parameterValues" > </paging>
         </div>
       </div>

searchPages/searchUtils/searchPaging.module.ts

@@ -1,9 +1,9 @@
-import { NgModule}            from '@angular/core';
+import {NgModule} from '@angular/core';
-import { CommonModule }        from '@angular/common';
+import {CommonModule} from '@angular/common';
-import { FormsModule }         from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 
-import{SearchPagingComponent} from './searchPaging.component';
+import {SearchPagingComponent} from './searchPaging.component';
-import{PagingModule} from '../../utils/paging.module';
+import {PagingModule} from '../../utils/paging.module';
 
 @NgModule({
   imports: [
@@ -11,13 +11,10 @@ import{PagingModule} from '../../utils/paging.module';
   ],
   declarations: [
     SearchPagingComponent
-],
-
-  providers:[
   ],
   exports: [
     SearchPagingComponent
-
+  ]
-    ]
 })
-export class SearchPagingModule { }
+export class SearchPagingModule {
+}

searchPages/searchUtils/searchResult.component.html

@@ -2,199 +2,9 @@
   <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
   <li *ngFor="let result of results" class="uk-animation-fade">
     <div class="uk-card uk-card-default uk-padding uk-card-hover">
-      <!-- Before title -->
+      <result-preview [properties]="properties" [showOrganizations]="showOrganizations"
-      <div class="uk-text-small">
+                      [showSubjects]="showSubjects" [result]="getResultPreview(result)">
-        <span class="uk-text-capitalize">
+      </result-preview>
-          {{(result.entityType) ? getTypeName(result.entityType) : getTypeName(type)}}
-        </span>
-        <span *ngIf="result.type" class="uk-text-capitalize"> . {{result.type}}</span>
-        <span *ngIf="properties.environment !== 'production' && result.types &&
-           removeDuplicates(result.types, (result.entityType) ? getTypeName(result.entityType) : getTypeName(type)).length > 0">
-           {{' . '}}<highlight [field]="'type'" [keywords]="keywords" [element]="(removeDuplicates(result.types, (result.entityType) ?
-                     getTypeName(result.entityType) : getTypeName(type)).join(' . '))"></highlight>
-        </span>
-        <span *ngIf="properties.environment === 'production' && result.types &&
-          removeUnknown(result.types, (result.entityType) ? getTypeName(result.entityType) : getTypeName(type)).length > 0">
-          {{' . '}}<highlight [field]="'type'" [keywords]="keywords"
-                     [element]="(removeUnknown(result.types, (result.entityType) ?
-                     getTypeName(result.entityType) : getTypeName(type)).join(' . '))"></highlight>
-        </span>
-        <span *ngIf="result.year">{{' . ' + result.year.toString()}}</span>
-        <span *ngIf="result.startYear && result.endYear"> . {{result.startYear}} - {{result.endYear}}</span>
-        <span *ngIf="result.embargoEndDate && result.embargoEndDate != ''">
-          . Embargo End Date: {{result.embargoEndDate | date: 'dd MMM yyyy'}}
-        </span>
-      </div>
-      <!-- Title -->
-      <div class="uk-h5 uk-margin-remove">
-        <a [queryParams]="routerHelper.createQueryParam((result.entityType)?queryParamName(result.entityType):urlParam,result.id)"
-           routerLink="/search/{{(result.entityType)?result.entityType:type}}" class="portal-link">
-          <div *ngIf="(result.title && result.title.name) || result.acronym">
-            <span *ngIf="result.acronym">
-              <highlight [field]="'acronym'" [keywords]="keywords" [element]="result.acronym"></highlight>
-            </span>
-            <span *ngIf="result.acronym && (result.title && result.title.name)"> (</span>
-            <span *ngIf="(result.title && result.title.name)">
-              <highlight [field]="'title'" [keywords]="keywords" [element]="result.title.name" [html]="true"></highlight>
-            </span>
-            <span *ngIf="result.acronym && (result.title && result.title.name)">)</span>
-          </div>
-          <div *ngIf="!(result.title && result.title.name) && !result.acronym">
-            [no title available]
-          </div>
-        </a>
-      </div>
-      <!-- Authors -->
-      <div *ngIf="result.authors" class="uk-margin-small-bottom">
-        <showAuthors [keywords]="keywords" [authors]="result.authors" [authorsLimit]=10 [showAll]=false></showAuthors>
-      </div>
-      <!-- Funder -->
-      <div *ngIf="result.funderShortname || result.code" class="uk-margin-small-bottom uk-text-small">
-        <span *ngIf="result.funderShortname">
-          <span class="uk-text-muted">Funder: </span>
-          <highlight [field]="'funder'" [keywords]="keywords" [element]="result.funderShortname"></highlight>
-        </span>
-        <span *ngIf="result.code" [class.uk-margin-left]="result.funderShortname">
-          <span class="uk-text-muted">Project Code: </span>
-          <highlight [field]="'code'" [keywords]="keywords" [element]="result.code.toString()"></highlight>
-        </span>
-      </div>
-      <!-- Labels -->
-      <div class="uk-margin-small-bottom">
-        <span *ngIf="properties.environment !== 'production' && result.title && result.title.accessMode"
-              class="uk-label custom-label" [ngClass]="'label-' + accessClass(result.title.accessMode)"
-              title="Access Mode">
-          {{result.title.accessMode}}
-        </span>{{' '}}
-        <span *ngIf="properties.environment === 'production' && result.title &&
-                     result.title.accessMode && result.title.accessMode.toLowerCase() !== 'not available'"
-              class="uk-label custom-label" [ngClass]="'label-' + accessClass(result.title.accessMode)"
-              title="Access Mode">
-          {{result.title.accessMode}}
-        </span>{{' '}}
-        <span *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
-              class="uk-label custom-label label-open"
-              title="Open Access mandate for Publications">
-          Open Access mandate for Publications
-        </span>{{' '}}
-        <span
-            *ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
-            class="uk-label custom-label label-open " title="Open Access mandate for Research Data">
-          Open Access mandate for Research Data
-        </span>{{' '}}
-        <span
-            *ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
-            class="uk-label custom-label label-open "
-            title="Open Access mandate for Publications and Research Data">
-          Open Access mandate for Publications and Research Data
-        </span>{{' '}}
-        <span *ngIf="properties.environment !== 'production' && result.languages && result.languages.length > 0">
-          <span *ngFor="let language of result.languages" class="uk-label custom-label label-language "
-                title="Language">
-            <highlight [field]="'language'" [keywords]="keywords" [element]="language"></highlight>
-          </span>{{' '}}
-        </span>
-        <span
-            *ngIf="properties.environment === 'production' && result.languages && removeUnknown(result.languages).length > 0">
-          <span *ngFor="let language of removeUnknown(result.languages)" class="uk-label custom-label label-language "
-                title="Language">
-            <highlight [field]="'language'" [keywords]="keywords" [element]="language"></highlight>
-          </span>{{' '}}
-        </span>
-        <span *ngIf="result.title  && result.title.sc39" class="uk-label custom-label label-sc39 "
-              title="Special Clause 39">Special Clause 39
-        </span>{{' '}}
-        <span *ngIf="result.compatibility && result.compatibility != ''"
-              class="uk-label custom-label  label-compatibility"
-              title="Compatibility">
-          {{result.compatibility}}
-        </span>{{' '}}
-      </div>
-      <!-- Publisher -->
-      <div *ngIf="result.publisher && result.publisher != ''" class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">Publisher: </span>
-        <highlight [field]="'publisher'" [keywords]="keywords" [element]="result.publisher"></highlight>
-      </div>
-      <!-- Country -->
-      <div *ngIf="result.countriesForResults && result.countriesForResults.length > 0"
-           class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">Country: </span>
-        <highlight [field]="'country'" [keywords]="keywords" [element]="result.countriesForResults.join(', ')"></highlight>
-      </div>
-      <div *ngIf="result.country && result.country != ''" class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">Country: </span>
-        <highlight [field]="'country'" [keywords]="keywords" [element]="result.country"></highlight>
-      </div>
-      <div *ngIf="result.countries && result.countries.length > 0" class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">Country: </span><span
-          *ngFor="let country of  result['countries'].slice(0,10) let i = index">
-        {{country}}{{(i < (result['countries'].slice(0, 10).length - 1)) ? ", " : ""}}
-        {{(i == result['countries'].slice(0, 10).length - 1 && result['countries'].length > 10) ? "..." : ""}}</span>
-      </div>
-      <!-- Programming Languages -->
-      <div *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0"
-           class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">Programming language: </span>{{result.programmingLanguages.join(", ")}}
-      </div>
-      <!-- Projects -->
-      <div *ngIf="result.projects && result.projects.length > 0" class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted"> Project: </span>
-        <span *ngFor="let project of result['projects'].slice(0,10) let i=index">
-          <span>
-            {{project['funderShortname'] ? project['funderShortname'] : project['funderName']}}
-          </span>
-          <span *ngIf="project.acronym || project.title">
-            | {{ project['acronym'] ? project['acronym'] : (project['title'].length > 25 ?
-              project['title'].substring(0, 25) + '...' : project['title'])}}
-          </span>
-          <span *ngIf="project.code"> ({{project.code}})</span>
-          <span *ngIf="i < result['projects'].length-1">,</span>
-        </span>
-        <span *ngIf="result['projects'].length > 10">...</span>
-      </div>
-      <!-- Organizations -->
-      <div *ngIf="showOrganizations && result['organizations'] && result['organizations'].length > 0"
-           class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">Organization: </span>
-        <span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">
-          <span>{{organization.name}}</span>
-          <span *ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>
-        </span>
-        <span *ngIf="result['organizations'].length > 10">...</span>
-      </div>
-      <!-- Website URL -->
-      <div *ngIf="result.websiteURL && result.websiteURL != ''" class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">Website URL: </span>
-        <span>
-            <a href="{{result.websiteURL}}" target="_blank" class="custom-external custom-icon">
-                {{result.websiteURL}}
-            </a>
-        </span>
-      </div>
-      <!-- OAI-PMH URL-->
-      <div *ngIf="result.OAIPMHURL && result.OAIPMHURL != ''" class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">OAI-PMH URL: </span>
-        <span>
-            <a href="{{result.OAIPMHURL}}" target="_blank" class="custom-external custom-icon">
-                {{result.OAIPMHURL}}
-            </a>
-        </span>
-      </div>
-      <!-- Subjects -->
-      <div *ngIf="showSubjects && result.subjects && result.subjects.length > 0"
-           class="uk-text-small uk-margin-small-bottom">
-        <span class="uk-text-muted">Subject: </span>
-        <span *ngFor="let subject of  result.subjects.slice(0,10) let i = index">{{subject}}
-          {{(i < (result.subjects.slice(0, 10).length - 1)) ? ", " : ""}}
-          {{(i == result.subjects.slice(0, 10).length - 1 && result.subjects.length > 10) ? "..." : ""}}
-        </span>
-      </div>
-      <!-- Description -->
-      <div *ngIf="result.description" class="uk-margin-small-bottom multi-line-ellipsis lines-3">
-        <p class="uk-text-small">
-          <highlight [field]="'description'" [keywords]="keywords" [element]="result.description"></highlight>
-        </p>
-      </div>
     </div>
   </li>
 </ul>

searchPages/searchUtils/searchResult.component.ts

@@ -4,13 +4,13 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
 import {RouterHelper} from '../../utils/routerHelper.class';
 import {EnvProperties} from '../../utils/properties/env-properties';
 import {Keyword} from "./highlight/highlight.component";
+import {ResultPreview} from "../../utils/result-preview/result-preview";
 
 @Component({
   selector: 'search-result',
   templateUrl: 'searchResult.component.html'
 })
 export class SearchResultComponent implements OnInit {
-  @Input() keywords: Keyword[];
   @Input() results: SearchResult[];
   @Input() status: number;
   @Input() type: string;
@@ -19,77 +19,18 @@ export class SearchResultComponent implements OnInit {
   @Input() showOrganizations: boolean = true;
   @Input() custom_class: string = "search-results";
   @Input() properties: EnvProperties;
-  public urlParam: string;
-  public errorCodes: ErrorCodes = new ErrorCodes();
-  public routerHelper: RouterHelper = new RouterHelper();
-  public errorMessage: string = "No results found";
   
   constructor() {
   }
   
-  ngOnInit() {
+  ngOnInit() {}
-    if (this.type == "project") {
+  
-      this.urlParam = "projectId";
+  public getResultPreview(result: SearchResult): ResultPreview {
-    } else if (this.type == "organization") {
+    return ResultPreview.searchResultConvert(result, (result.entityType)?result.entityType:this.type);
-      this.urlParam = "organizationId";
-    } else if (this.type == "dataprovider") {
-      this.urlParam = "datasourceId";
-    }
   }
   
-  /**
-   * Returns query param name base on result's entity type
-   *
-   * @param type
-   */
-  public queryParamName(type: string): string {
-    if (type === "publication") {
-      return "articleId";
-    } else if (type === "dataset") {
-      return "datasetId";
-    } else if (type === "software") {
-      return "softwareId";
-    } else if (type === "other") {
-      return "orpId";
-    }
-  }
-  
-  public getTypeName(type: string): string {
-    if (type === "dataset") {
-      return "research data";
-    } else if (type === "other") {
-      return "other research outcome";
-    } else if (type === "dataprovider") {
-      return "content provider";
-    } else {
-      return type;
-    }
-  }
-  
-  public removeUnknown(array: string[], type: string = null): string[] {
-    if (type) {
-      return this.removeDuplicates(array, type).filter(value => value.toLowerCase() !== 'unknown');
-    } else {
-      return array.filter(value => value.toLowerCase() !== 'unknown');
-    }
-  }
-  
-  public removeDuplicates(array: string[], type: string): string[] {
-    type = this.getTypeName(type);
-    return array.filter(value => value.toLowerCase() !== type);
-  }
   
   public quote(params: string): string {
     return '"' + params + '"';
   }
-  
-  public accessClass(accessMode: string): string {
-    if(accessMode.toLowerCase().indexOf('open') !== -1) {
-      return 'open';
-    } else if(accessMode.toLowerCase() === 'not available') {
-      return 'unknown';
-    } else {
-      return 'closed';
-    }
-  }
 }

searchPages/searchUtils/searchResults.module.ts

@@ -8,13 +8,14 @@ import {SearchResultComponent} from './searchResult.component';
 import {ApprovedByCommunityModule} from '../../connect/approvedByCommunity/approved.module';
 import {ShowAuthorsModule} from "../../utils/authors/showAuthors.module";
 import {HighlightModule} from "./highlight/highlight.module";
+import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
     RouterModule, ErrorMessagesModule,
     ApprovedByCommunityModule,
-    ShowAuthorsModule, HighlightModule
+    ShowAuthorsModule, HighlightModule, ResultPreviewModule
   ],
   declarations: [
     SearchResultComponent

utils/altmetrics.component.ts

@@ -1,6 +1,6 @@
-import {Component, ElementRef, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
- import {SafeHtmlPipe} from '../utils/pipes/safeHTML.pipe';
+import {ActivatedRoute} from '@angular/router';
- import {ActivatedRoute} from '@angular/router';
+
 declare var loadAltmetrics:any;
 //<altmetrics [id]="10.7717/peerj.1150" type="doi"></altmetrics>
 @Component({
@@ -34,8 +34,9 @@ export class AltMetricsComponent {
       //   let yourModule = require('../utils/altmetrics.js');
         loadAltmetrics("altmetric-embed-js","https://d1bxh8uas1mnw7.cloudfront.net/assets/altmetric_badges-8f271adb184c21cc5169a7f67f7fe5ab.js");
       }
-  });
+    });
   }
+  
   ngOnDestroy() {
     this.sub.unsubscribe();
   }

utils/entities/searchResult.ts

@@ -1,27 +1,4 @@
-export class Project {
+import {Author, Organization, Project, ResultTitle} from "../result-preview/result-preview";
-  funderShortname: string;
-  funderName: string;
-  acronym: string;
-  title: string;
-  code: string;
-  id: string;
-}
-
-export class Author {
-  fullName: string;
-  orcid: string;
-}
-
-export class ResultTitle {
-  name: string;
-  accessMode: string;
-  sc39: string;
-}
-
-export class Organization {
-  id: string;
-  name: string;
-}
 
 export class SearchResult {
   title: ResultTitle;
@@ -54,6 +31,9 @@ export class SearchResult {
   acronym: string;
   code: string;
   funderShortname: string;
+  budget?: string;
+  contribution?: string;
+  currency?: string;
   startYear: number;
   endYear: number;
   openAccessMandatePublications: boolean;

utils/paging.module.ts

@@ -1,7 +1,7 @@
-import { NgModule }            from '@angular/core';
+import {NgModule} from '@angular/core';
-import { CommonModule }        from '@angular/common';
+import {CommonModule} from '@angular/common';
-import { FormsModule }         from '@angular/forms';
+import {FormsModule} from '@angular/forms';
-import { RouterModule } from '@angular/router';
+import {RouterModule} from '@angular/router';
 
 import {pagingFormatterNoLoad} from './pagingFormatterNoLoad.component';
 
@@ -15,14 +15,10 @@ import {PagingFormatter} from './pagingFormatter.component';
   declarations: [
     pagingFormatterNoLoad,
     PagingFormatter,
-
-
   ],
   exports: [
-      pagingFormatterNoLoad,
+    pagingFormatterNoLoad,
-      PagingFormatter,
+    PagingFormatter,
-
+  ]
-
-    ]
 })
-export class PagingModule { }
+export class PagingModule {}

utils/pagingFormatterNoLoad.component.ts

@@ -7,7 +7,8 @@ import{EnvProperties} from './properties/env-properties';
 @Component({
   selector: 'paging-no-load',
   template: `
-   <ul disabled  *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " class="uk-pagination">
+   <ul disabled  *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage &&  currentPage <= getTotalPages() ) " [ngClass]="customClasses"
+       class="uk-pagination uk-flex uk-flex-middle">
 
    <li *ngIf=" currentPage  > 1" ><a (click)="onPage((currentPage -1))" aria-label="Previous">
        <span><span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span></span></a></li>
@@ -18,11 +19,12 @@ import{EnvProperties} from './properties/env-properties';
    <li *ngIf=" currentPage +2 <= getTotalPages() "><a (click)="onPage((currentPage +2))">{{(currentPage +2) | number}}</a></li>
    <li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a (click)="onPage((currentPage +3))">{{(currentPage +3) | number}}</a></li>
    <li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a (click)="onPage((currentPage +4))">{{(currentPage +4) | number}}</a></li>
-   <li *ngIf="getTotalPages()  > currentPage"><a (click)="onPage(currentPage +1)" aria-label="Next">
+   <li *ngIf="getTotalPages()  > currentPage">
-        <span class="uk-icon">
+     <a (click)="onPage(currentPage +1)" aria-label="Next">
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
+       <span class="uk-icon">
-</span>
+        <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
-      </a>
+       </span>
+     </a>
   </li>
 
 
@@ -33,6 +35,7 @@ import{EnvProperties} from './properties/env-properties';
 
 export class pagingFormatterNoLoad {
   @Input() public currentPage: number = 1;
+  @Input() public customClasses: string = '';
   // @Input() public navigateTo: string;
   @Input() public term: string='';
   @Input() public size: number=10;

utils/result-preview/result-preview.component.html

@@ -0,0 +1,257 @@
+<!-- Before title -->
+<div uk-grid>
+  <div [class.uk-width-1-1]="!result.relation" [class.uk-width-1-2]="result.relation"
+       [class.uk-width-3-4@s]="result.relation">
+    <div class="uk-text-small">
+      <span class="uk-text-capitalize">
+        {{getTypeName(result.resultType)}}
+      </span>
+      <span
+          *ngIf="properties.environment !== 'production' && result.types && removeDuplicates(result.types).length > 0">
+        {{' . ' + removeDuplicates(result.types).join(' . ')}}
+      </span>
+      <span *ngIf="properties.environment === 'production' && result.types &&
+          removeUnknown(removeDuplicates(result.types)).length > 0">
+        {{' . ' + removeDuplicates(removeDuplicates(result.types)).join(' . ')}}
+      </span>
+      <span *ngIf="result.year">{{' . ' + result.year.toString()}}</span>
+      <span *ngIf="result.startYear && result.endYear"> . {{result.startYear}} - {{result.endYear}}</span>
+      <span *ngIf="result.embargoEndDate && result.embargoEndDate != ''">
+        . Embargo End Date: {{result.embargoEndDate | date: 'dd MMM yyyy'}}
+      </span>
+    </div>
+    <!-- Title -->
+    <div class="uk-margin-small-bottom">
+      <div class="uk-h5 uk-margin-remove">
+        <a *ngIf="result.id" (click)="onTitleClick()" [queryParams]="routerHelper.createQueryParam(urlParam, result.id)"
+           routerLink="/search/{{result.resultType}}" class="portal-link">
+          <div *ngIf="(result.title) || result.acronym">
+      <span *ngIf="result.acronym">
+        {{result.acronym}}
+      </span>
+            <span *ngIf="result.acronym && (result.title)"> (</span>
+            <span *ngIf="result.title" [innerHTML]="result.title"></span>
+            <span *ngIf="result.acronym && result.title">)</span>
+          </div>
+          <div *ngIf="!result.title && !result.acronym">
+            [no title available]
+          </div>
+        </a>
+        <div *ngIf="!result.id">
+          <div *ngIf="(result.title) || result.acronym">
+      <span *ngIf="result.acronym">
+        {{result.acronym}}
+      </span>
+            <span *ngIf="result.acronym && (result.title)"> (</span>
+            <span *ngIf="result.title" [innerHTML]="result.title"></span>
+            <span *ngIf="result.acronym && result.title">)</span>
+          </div>
+          <div *ngIf="!result.title && !result.acronym">
+            [no title available]
+          </div>
+        </div>
+      </div>
+      <!-- Download from-->
+      <div *ngIf="result.hostedBy_collectedFrom && result.hostedBy_collectedFrom.length > 0"
+           class="uk-margin-small-bottom download-from">
+        <div *ngFor="let from of result.hostedBy_collectedFrom">
+    <span class="uk-margin-right uk-display-inline-block">
+      <span class="uk-text-muted">Download from: </span>
+      <a *ngIf="from.downloadUrl && from.downloadUrl.length === 1"
+         [href]="from.downloadUrl[0]" target="_blank" class="title">
+        {{from.downloadName}}
+        <span class="custom-external"></span>
+      </a>
+      <span *ngIf="!from.downloadUrl || from.downloadUrl.length === 0" class="title">
+        {{from.downloadName}}
+      </span>
+    </span>
+          <span class="provider uk-display-inline-block">
+      <span class="uk-text-muted">Provider: </span>
+      <a *ngIf="from.collectedId" routerLink="/search/dataprovider" [queryParams]="{datasourceId: from.collectedId}"
+         [href]="from.downloadUrl[0]" target="_blank">
+        {{from.collectedName}}
+      </a>
+      <span *ngIf="!from.collectedId">
+        {{from.collectedName}}
+      </span>
+    </span>
+        </div>
+      </div>
+      <!-- Authors -->
+      <div *ngIf="result.authors">
+        <showAuthors [authors]="result.authors" [authorsLimit]=10 [showAll]=false></showAuthors>
+      </div>
+    </div>
+    <!-- Funder -->
+    <div *ngIf="result.funderShortname || result.code" class="uk-margin-small-bottom uk-text-small">
+  <span *ngIf="result.funderShortname">
+    <span class="uk-text-muted">Funder: </span>
+    {{result.funderShortname}}
+  </span>
+      <span *ngIf="result.code" [class.uk-margin-left]="result.funderShortname">
+    <span class="uk-text-muted">Project Code: </span>
+        {{result.code}}
+  </span>
+    </div>
+    <!-- Funder Budget -->
+    <div *ngIf="result.budget || result.contribution" class="uk-margin-small-bottom uk-text-small">
+      <span *ngIf="result.budget">
+        <span class="uk-text-muted">Overall Budget: </span>
+        {{result.budget | number}}
+        <span *ngIf="result.currency">{{result.currency}}</span>
+      </span>
+      <span *ngIf="result.contribution" [class.uk-margin-left]="result.budget">
+        <span class="uk-text-muted">Funder Contribution: </span>
+        {{result.contribution | number}}
+        <span *ngIf="result.currency">{{result.currency}}</span>
+      </span>
+    </div>
+    <!-- Labels -->
+    <div class="uk-margin-small-bottom">
+  <span *ngIf="properties.environment !== 'production' && result.accessMode"
+        class="uk-label custom-label" [ngClass]="'label-' + accessClass(result.accessMode)"
+        title="Access Mode">
+    {{result.accessMode}}
+  </span>{{' '}}
+      <span
+          *ngIf="properties.environment === 'production' && result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
+          class="uk-label custom-label" [ngClass]="'label-' + accessClass(result.accessMode)"
+          title="Access Mode">
+    {{result.accessMode}}
+  </span>{{' '}}
+      <span *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
+            class="uk-label custom-label label-open"
+            title="Open Access mandate for Publications">
+          Open Access mandate for Publications
+  </span>{{' '}}
+      <span
+          *ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
+          class="uk-label custom-label label-open " title="Open Access mandate for Research Data">
+          Open Access mandate for Research Data
+  </span>{{' '}}
+      <span
+          *ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
+          class="uk-label custom-label label-open "
+          title="Open Access mandate for Publications and Research Data">
+          Open Access mandate for Publications and Research Data
+  </span>{{' '}}
+      <span *ngIf="properties.environment !== 'production' && result.languages && result.languages.length > 0">
+    <span *ngFor="let language of result.languages"
+          class="uk-label custom-label label-language " title="Language">
+      {{language}}
+    </span>{{' '}}
+  </span>
+      <span
+          *ngIf="properties.environment === 'production' && result.languages && removeUnknown(result.languages).length > 0">
+    <span *ngFor="let language of removeUnknown(result.languages)"
+          class="uk-label custom-label label-language " title="Language">
+      {{language}}
+    </span>{{' '}}
+  </span>
+      <span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0">
+    <span *ngFor="let programmingLanguage of result.programmingLanguages"
+          class="uk-label custom-label label-language" title="Programming Language">
+      {{programmingLanguage}}
+    </span>{{" "}}
+  </span>
+      <span *ngIf="result.sc39" class="uk-label custom-label label-sc39" title="Special Clause 39">
+    Special Clause 39
+  </span>{{' '}}
+      <span *ngIf="result.compatibility && result.compatibility != ''"
+            class="uk-label custom-label  label-compatibility" title="Compatibility">
+    {{result.compatibility}}
+  </span>{{' '}}
+    </div>
+    <!-- Identifiers -->
+    <div *ngIf="result.identifiers && result.identifiers.size > 0">
+      <showIdentifiers [identifiers]="result.identifiers"></showIdentifiers>
+    </div>
+    <!-- Publisher -->
+    <div *ngIf="result.publisher && result.publisher != ''" class="uk-text-small uk-margin-small-bottom">
+      <span class="uk-text-muted">Publisher: </span>
+      {{result.publisher}}
+    </div>
+    <!-- Countries -->
+    <div *ngIf="result.countries && result.countries.length > 0"
+         class="uk-text-small uk-margin-small-bottom">
+      <span class="uk-text-muted">{{(result.countries.length == 1) ? 'Country' : 'Countries'}}: </span>
+      <span *ngFor="let country of  result.countries.slice(0,10) let i = index">
+        {{country}}{{(i < (result.countries.slice(0, 10).length - 1)) ? ", " : ""}}
+        {{(i == result.countries.slice(0, 10).length - 1 && result.countries.length > 10) ? "..." : ""}}
+  </span>
+    </div>
+    <!-- Projects -->
+    <div *ngIf="result.projects && result.projects.length > 0" class="uk-text-small uk-margin-small-bottom">
+      <span class="uk-text-muted"> Project: </span>
+      <span *ngFor="let project of result.projects.slice(0,10) let i=index">
+    <span>
+      {{project.funderShortname ? project.funderShortname : project.funderName}}
+    </span>
+    <span *ngIf="project.acronym || project.title">
+      | {{ project.acronym ? project.acronym : (project.title.length > 25 ?
+        project.title.substring(0, 25) + '...' : project.title)}}
+    </span>
+    <span *ngIf="project.code"> ({{project.code}})</span>
+    <span *ngIf="i < result.projects.length-1">,</span>
+  </span>
+      <span *ngIf="result.projects.length > 10">...</span>
+    </div>
+    <!-- Organizations -->
+    <div *ngIf="showOrganizations && result.organizations && result.organizations.length > 0"
+         class="uk-text-small uk-margin-small-bottom">
+      <span class="uk-text-muted">Organization: </span>
+      <span *ngFor="let organization of result.organizations.slice(0,10) let i=index">
+    <span>{{organization.name}}</span>
+    <span *ngIf="(i < result.organizations.length-1) && (i < 9)">,</span>
+  </span>
+      <span *ngIf="result.organizations.length > 10">...</span>
+    </div>
+    <!-- Website URL -->
+    <div *ngIf="result.websiteURL && result.websiteURL != ''" class="uk-text-small uk-margin-small-bottom">
+      <span class="uk-text-muted">Website URL: </span>
+      <span>
+            <a href="{{result.websiteURL}}" target="_blank" class="custom-external custom-icon">
+                {{result.websiteURL}}
+            </a>
+        </span>
+    </div>
+    <!-- OAI-PMH URL-->
+    <div *ngIf="result.OAIPMHURL && result.OAIPMHURL != ''" class="uk-text-small uk-margin-small-bottom">
+      <span class="uk-text-muted">OAI-PMH URL: </span>
+      <span>
+      <a href="{{result.OAIPMHURL}}" target="_blank" class="custom-external custom-icon">
+          {{result.OAIPMHURL}}
+      </a>
+  </span>
+    </div>
+    <!-- Subjects -->
+    <div *ngIf="showSubjects && result.subjects && result.subjects.length > 0"
+         class="uk-text-small uk-margin-small-bottom">
+      <span class="uk-text-muted">Subject: </span>
+      <span *ngFor="let subject of  result.subjects.slice(0,10) let i = index">{{subject}}
+        {{(i < (result.subjects.slice(0, 10).length - 1)) ? ", " : ""}}
+        {{(i == result.subjects.slice(0, 10).length - 1 && result.subjects.length > 10) ? "..." : ""}}
+  </span>
+    </div>
+  </div>
+  <div *ngIf="result.relation" class="uk-width-expand uk-padding-remove-left uk-text-small">
+    <div *ngIf="result.percentage" class="uk-flex uk-flex-middle">
+      <div class="uk-margin-small-right">
+        <span class="uk-text-capitalize uk-text-muted">{{result.relation}}: </span>
+        <span class="portal-color uk-text-bold"> {{result.percentage}}%</span>
+      </div>
+      <progress class="uk-progress portal-progress uk-margin-remove uk-text-left uk-width-expand"
+                [value]="result.percentage" max="100"></progress>
+    </div>
+    <div class="uk-text-capitalize uk-text-muted" *ngIf="result.provenanceAction">
+      {{result.provenanceAction}}
+    </div>
+  </div>
+</div>
+<!-- Description -->
+<div *ngIf="result.description" class="uk-margin-small-bottom multi-line-ellipsis lines-3">
+  <p class="uk-text-small">
+    {{result.description}}
+  </p>
+</div>

utils/result-preview/result-preview.component.ts

@@ -0,0 +1,73 @@
+import {Component, Input, OnInit} from "@angular/core";
+import {ResultPreview} from "./result-preview";
+import {EnvProperties} from "../properties/env-properties";
+import {RouterHelper} from "../routerHelper.class";
+import {AlertModal} from "../modal/alert";
+
+@Component({
+  selector: 'result-preview',
+  templateUrl: 'result-preview.component.html'
+})
+export class ResultPreviewComponent implements OnInit{
+  @Input() result: ResultPreview;
+  @Input() properties: EnvProperties;
+  @Input() showSubjects: boolean = true;
+  @Input() showOrganizations: boolean = true;
+  @Input() modal: AlertModal = null;
+  public routerHelper: RouterHelper = new RouterHelper();
+  public urlParam: string;
+  
+  ngOnInit(): void {
+    if (this.result.resultType === "publication") {
+      this.urlParam = "articleId";
+    } else if (this.result.resultType === "dataset") {
+      this.urlParam = "datasetId";
+    } else if (this.result.resultType === "software") {
+      this.urlParam = "softwareId";
+    } else if (this.result.resultType === "other") {
+      this.urlParam = "orpId";
+    } else if (this.result.resultType == "project") {
+      this.urlParam = "projectId";
+    } else if (this.result.resultType  == "organization") {
+      this.urlParam = "organizationId";
+    } else if (this.result.resultType  == "dataprovider") {
+      this.urlParam = "datasourceId";
+    }
+  }
+  
+  public getTypeName(type: string): string {
+    if (type === "dataset") {
+      return "research data";
+    } else if (type === "other") {
+      return "other research product";
+    } else if (type === "dataprovider") {
+      return "content provider";
+    } else {
+      return type;
+    }
+  }
+  
+  public removeUnknown(array: string[]): string[] {
+    return array.filter(value => value.toLowerCase() !== 'unknown');
+  }
+  
+  public removeDuplicates(array: string[]): string[] {
+    return array.filter(value => value.toLowerCase() !== this.result.resultType);
+  }
+  
+  public accessClass(accessMode: string): string {
+    if(accessMode.toLowerCase().indexOf('open') !== -1) {
+      return 'open';
+    } else if(accessMode.toLowerCase() === 'not available') {
+      return 'unknown';
+    } else {
+      return 'closed';
+    }
+  }
+  
+  public onTitleClick() {
+    if(this.modal) {
+      this.modal.cancel();
+    }
+  }
+}

utils/result-preview/result-preview.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {ResultPreviewComponent} from "./result-preview.component";
+import {RouterModule} from "@angular/router";
+import {ShowAuthorsModule} from "../authors/showAuthors.module";
+import {ResultLandingUtilsModule} from "../../landingPages/landing-utils/resultLandingUtils.module";
+
+@NgModule({
+  imports: [CommonModule, RouterModule, ShowAuthorsModule, ResultLandingUtilsModule],
+  declarations: [ResultPreviewComponent],
+  exports: [ResultPreviewComponent]
+})
+export class ResultPreviewModule {}

utils/result-preview/result-preview.ts

@@ -0,0 +1,256 @@
+import {SearchResult} from "../entities/searchResult";
+import {ResultLandingInfo} from "../entities/resultLandingInfo";
+import {OrganizationInfo} from "../entities/organizationInfo";
+
+export interface HostedByCollectedFrom {
+  downloadName: string;
+  downloadUrl: string[];
+  collectedName: string;
+  collectedId: string;
+  accessMode: string[];
+  bestAccessMode: string;
+  type: string;
+  year: string;
+}
+
+export interface Journal {
+  journal?: string;
+  issn?: string;
+  lissn: string;
+  eissn?: string;
+  issue?: string;
+  volume?: string;
+  start_page?: string;
+  end_page?: string;
+}
+
+export interface RelationResult {
+  name: string;
+  id: string;
+  date: string;
+  percentage: number;
+  class: string
+  provenanceAction?: string;
+}
+
+export interface Project {
+  id: string;
+  acronym: string;
+  title: string;
+  funderShortname: string;
+  funderName: string;
+  funding?: string;
+  code: string;
+  budget?: string;
+  contribution?: string;
+  currency?: string;
+  provenanceAction?: string;
+  inline?: boolean
+}
+
+export interface Author {
+  fullName: string;
+  orcid: string;
+}
+
+export interface ResultTitle {
+  name: string;
+  accessMode: string;
+  sc39: string;
+}
+
+export interface Organization {
+  id: string;
+  name: string;
+  shortname?: string;
+  websiteUrl?: string;
+  country?: string;
+  trust?: number;
+}
+
+export class ResultPreview {
+  id: string;
+  title: string;
+  accessMode: string;
+  sc39: string;
+  countries: string[];
+  
+  //publications & datasets & orp & software & organizations:
+  projects: Project[];
+  
+  //datasets & orp & publications & software
+  description: string;
+  year: string;
+  embargoEndDate: Date | string;
+  authors: Author[];
+  languages: string[];
+  identifiers: Map<string, string[]>;     //key is the classname
+  hostedBy_collectedFrom: HostedByCollectedFrom[];
+  
+  //datasets & orp & software:
+  publisher: string;
+  
+  //software
+  programmingLanguages: string[];
+  
+  //dataproviders & projects:
+  organizations: Organization[];
+  
+  //projects:
+  acronym: string;
+  code: string;
+  funderShortname: string;
+  budget: string;
+  contribution: string;
+  currency: string;
+  startYear: number;
+  endYear: number;
+  openAccessMandatePublications: boolean;
+  openAccessMandateDatasets: boolean;
+  
+  //organizations:
+  country: string;
+  
+  //dataproviders:
+  englishname: string;
+  websiteURL: string;
+  OAIPMHURL: string;
+  compatibility: string;
+  compatibilityUNKNOWN: boolean;
+  subjects: string[];
+  
+  resultType: string;
+  types: string[];
+  
+  // Relation result
+  relation: string;
+  percentage: number;
+  provenanceAction: string;
+  
+  public static searchResultConvert(result: SearchResult, type: string): ResultPreview {
+    let resultPreview: ResultPreview = new ResultPreview();
+    resultPreview.id = result.id;
+    resultPreview.title = result.title.name;
+    resultPreview.accessMode = result.title.accessMode;
+    resultPreview.sc39 = result.title.sc39;
+    if(result.countriesForResults) {
+      resultPreview.countries = result.countries;
+    } else if(result.country) {
+      resultPreview.countries = [result.country];
+    } else {
+      resultPreview.countries = result.countries;
+    }
+    resultPreview.projects = result.projects;
+    resultPreview.description = result.description;
+    resultPreview.year = result.year;
+    resultPreview.embargoEndDate = result.embargoEndDate;
+    resultPreview.authors = result.authors;
+    resultPreview.languages = result.languages;
+    resultPreview.publisher = result.publisher;
+    resultPreview.programmingLanguages = result.programmingLanguages;
+    resultPreview.organizations = result.organizations;
+    resultPreview.acronym = result.acronym;
+    resultPreview.code = result.code;
+    resultPreview.funderShortname = result.funderShortname;
+    resultPreview.budget = result.budget;
+    resultPreview.contribution = result.contribution;
+    resultPreview.currency = result.currency;
+    resultPreview.startYear = result.startYear;
+    resultPreview.endYear = result.endYear;
+    resultPreview.openAccessMandatePublications = result.openAccessMandatePublications;
+    resultPreview.openAccessMandateDatasets = result.openAccessMandateDatasets;
+    resultPreview.englishname = result.englishname;
+    if(result.type) {
+      resultPreview.types = [result.type];
+    } else {
+      resultPreview.types = result.types;
+    }
+    resultPreview.websiteURL = result.websiteURL;
+    resultPreview.OAIPMHURL = result.OAIPMHURL;
+    resultPreview.compatibility = result.compatibility;
+    resultPreview.compatibilityUNKNOWN = result.compatibilityUNKNOWN;
+    resultPreview.subjects = result.subjects;
+    resultPreview.resultType = type;
+    return resultPreview;
+  }
+  
+  public static resultLandingInfoConvert(result: ResultLandingInfo, type: string): ResultPreview  {
+    let resultPreview: ResultPreview = new ResultPreview();
+    resultPreview.title = result.title;
+    resultPreview.accessMode = result.accessMode;
+    resultPreview.countries = result.countries;
+    resultPreview.projects = result.fundedByProjects;
+    resultPreview.description = result.description;
+    if(result.dateofacceptance) {
+      resultPreview.year = new Date(result.dateofacceptance).getFullYear().toString();
+    }
+    resultPreview.embargoEndDate = result.embargoEndDate;
+    resultPreview.authors = result.authors;
+    resultPreview.languages = result.languages;
+    resultPreview.publisher = result.publisher;
+    resultPreview.programmingLanguages = result.programmingLanguages;
+    resultPreview.organizations = result.organizations;
+    resultPreview.types = result.types;
+    resultPreview.subjects = result.subjects;
+    resultPreview.resultType = type;
+    resultPreview.identifiers = result.identifiers;
+    resultPreview.hostedBy_collectedFrom = result.hostedBy_collectedFrom;
+    return resultPreview;
+  }
+  
+  public static relationResultConvert(result: RelationResult, relation: string = 'trust'): ResultPreview {
+    let resultPreview: ResultPreview = new ResultPreview();
+    resultPreview.id = result.id;
+    resultPreview.title = result.name;
+    resultPreview.resultType = result.class;
+    if(result.date) {
+      resultPreview.year = result.date.toString();
+    }
+    resultPreview.relation = relation;
+    resultPreview.percentage = result.percentage;
+    resultPreview.provenanceAction = result.provenanceAction;
+    return resultPreview;
+  }
+  
+  public static organizationConvert(result: Organization, relation: string = 'trust'): ResultPreview {
+    let resultPreview: ResultPreview = new ResultPreview();
+    resultPreview.id = result.id;
+    if(result.name) {
+      resultPreview.title = result.name;
+      if(result.shortname) {
+        resultPreview.title += ' (' + result.shortname + ')';
+      }
+    } else if(result.shortname) {
+      resultPreview.title = result.shortname;
+    }
+    if(result.country) {
+      resultPreview.countries = [result.country];
+    }
+    resultPreview.relation = relation;
+    resultPreview.percentage = result.trust;
+    resultPreview.websiteURL = result.websiteUrl;
+    resultPreview.resultType = 'organization';
+    return resultPreview;
+  }
+  
+  public static organizationInfoConvert(result: OrganizationInfo): ResultPreview {
+    let resultPreview: ResultPreview = new ResultPreview();
+    if(result.title && result.title.name) {
+      resultPreview.title = result.title.name;
+      if(result.name) {
+        resultPreview.title += ' (' + result.name + ')';
+      }
+    } else if(result.name) {
+      resultPreview.title = result.name;
+    }
+    if(result.country) {
+      resultPreview.countries = [result.country];
+    }
+    if(result.title && result.title.url) {
+      resultPreview.websiteURL = result.title.url;
+    }
+    resultPreview.resultType = 'organization';
+    return resultPreview;
+  }
+  
+ }