From dfb98fffccbf2b13446e558a1cc4266b5ce6ab5f Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Sun, 31 May 2020 13:44:52 +0000
Subject: [PATCH] [Trunk | Library]: dataProvider.component &
 organization.component & project.component:  Use <search-tab> (common view
 for tabs with search results) - also used in community first page.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58813 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../dataProvider/dataProvider.component.html  | 156 ++++++-------
 .../dataProvider/dataProvider.module.ts       |   6 +-
 .../organization/organization.component.html  | 100 ++++-----
 .../organization/organization.component.ts    |   8 +
 .../organization/organization.module.ts       |   8 +-
 landingPages/project/project.component.html   | 206 +++++++-----------
 landingPages/project/project.module.ts        |   5 +-
 7 files changed, 218 insertions(+), 271 deletions(-)

diff --git a/landingPages/dataProvider/dataProvider.component.html b/landingPages/dataProvider/dataProvider.component.html
index 328d429e..14f5a4fc 100644
--- a/landingPages/dataProvider/dataProvider.component.html
+++ b/landingPages/dataProvider/dataProvider.component.html
@@ -1,52 +1,52 @@
-<ng-template #search_box let-fetch="fetch" let-type="type" let-typeName="typeName"
-             let-searchLinkToAdvancedPage="searchLinkToAdvancedPage" let-params="params">
-<!--  *ngIf="fetch.searchUtils.totalResults > 0"-->
-  <div *ngIf="fetch.searchUtils.totalResults > 0">
-    <div class="uk-position-relative">
-      <a [queryParams]="params" target="_blank"
-         [routerLink]="searchLinkToAdvancedPage">
-        <span class="custom-external uk-position-top-right uk-margin-small-right uk-margin-small-top"></span>
-        <div class="header target uk-text-bold">{{typeName}}</div>
-        <div class="icon uk-position-center" uk-icon="icon: search;"></div>
-        <div class="footer target uk-position-relative">
-          <span class="uk-text-bold uk-position-center">{{fetch.searchUtils.totalResults | number}}</span>
-        </div>
-      </a>
-    </div>
-  </div>
-</ng-template>
+<!--<ng-template #search_box let-fetch="fetch" let-type="type" let-typeName="typeName"-->
+<!--             let-searchLinkToAdvancedPage="searchLinkToAdvancedPage" let-params="params">-->
+<!--&lt;!&ndash;  *ngIf="fetch.searchUtils.totalResults > 0"&ndash;&gt;-->
+<!--  <div *ngIf="fetch.searchUtils.totalResults > 0">-->
+<!--    <div class="uk-position-relative">-->
+<!--      <a [queryParams]="params" target="_blank"-->
+<!--         [routerLink]="searchLinkToAdvancedPage">-->
+<!--        <span class="custom-external uk-position-top-right uk-margin-small-right uk-margin-small-top"></span>-->
+<!--        <div class="header target uk-text-bold">{{typeName}}</div>-->
+<!--        <div class="icon uk-position-center" uk-icon="icon: search;"></div>-->
+<!--        <div class="footer target uk-position-relative">-->
+<!--          <span class="uk-text-bold uk-position-center">{{fetch.searchUtils.totalResults | number}}</span>-->
+<!--        </div>-->
+<!--      </a>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</ng-template>-->
 
-<ng-template #search_tab let-fetch="fetch" let-type="type" let-urlParam="urlParam"
-             let-searchLinkToAdvancedPage="searchLinkToAdvancedPage" let-params="params">
-  <errorMessages [status]="[fetch.searchUtils.status]" [type]="getEntityName(type, true, true)"
-                 tab_error_class=true></errorMessages>
+<!--<ng-template #search_tab let-fetch="fetch" let-type="type" let-urlParam="urlParam"-->
+<!--             let-searchLinkToAdvancedPage="searchLinkToAdvancedPage" let-params="params">-->
+<!--  <errorMessages [status]="[fetch.searchUtils.status]" [type]="getEntityName(type, true, true)"-->
+<!--                 tab_error_class=true></errorMessages>-->
 
-  <div *ngIf="fetch.searchUtils.status == errorCodes.DONE">
-    <div class="tab-header">
-      <span *ngIf="type != 'organization' && type != 'dataprovider' && type != 'project'">Recent</span>
-      {{getEntityName(type, true, true)}}
-    </div>
-    <div class="uk-text-right">
-      <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
-        View all {{getEntityName(type, true, true)}}
-        <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>
-      </a>
-    </div>
+<!--  <div *ngIf="fetch.searchUtils.status == errorCodes.DONE">-->
+<!--    <div class="tab-header">-->
+<!--      <span *ngIf="type != 'organization' && type != 'dataprovider' && type != 'project'">Recent</span>-->
+<!--      {{getEntityName(type, true, true)}}-->
+<!--    </div>-->
+<!--    <div class="uk-text-right">-->
+<!--      <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">-->
+<!--        View all {{getEntityName(type, true, true)}}-->
+<!--        <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>-->
+<!--      </a>-->
+<!--    </div>-->
 
-    <search-result [properties]="properties"
-                   [results]="fetch.results"
-                   [status]="fetch.searchUtils.status"
-                   [type]="type" urlParam="articleId">
-    </search-result>
+<!--    <search-result [properties]="properties"-->
+<!--                   [results]="fetch.results"-->
+<!--                   [status]="fetch.searchUtils.status"-->
+<!--                   [type]="type" urlParam="articleId">-->
+<!--    </search-result>-->
 
-    <div class="uk-text-right">
-      <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
-        View all {{getEntityName(type, true, true)}}
-        <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>
-      </a>
-    </div>
-  </div>
-</ng-template>
+<!--    <div class="uk-text-right">-->
+<!--      <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">-->
+<!--        View all {{getEntityName(type, true, true)}}-->
+<!--        <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>-->
+<!--      </a>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</ng-template>-->
 
 <div id="tm-main" class="landing uk-section uk-padding-remove-top tm-middle">
   <div *ngIf="!showFeedback" uk-grid>
@@ -623,23 +623,25 @@
             <ng-template #projects_tab>
               <div class="uk-grid uk-margin-remove">
                 <div class="uk-width-expand uk-padding">
-                  <ng-container *ngTemplateOutlet="search_tab;
-                                context: {  fetch: fetchProjects, type: 'project', urlParam: 'projectId',
-                                            searchLinkToAdvancedPage: properties.searchLinkToAdvancedProjects,
-                                            params: getParamsForSearchLink()}">
-                  </ng-container>
+                  <search-tab [fetch]="fetchProjects" resultType="project"
+                              [params]="getParamsForSearchLink()"
+                              [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedProjects"
+                              [properties]="properties">
+                  </search-tab>
                 </div>
+<!--                <div class="uk-width-1-3@m uk-padding right-column"></div>-->
               </div>
             </ng-template>
             <ng-template #datasources_tab>
               <div class="uk-grid uk-margin-remove">
                 <div class="uk-width-expand uk-padding">
-                  <ng-container *ngTemplateOutlet="search_tab;
-                                context: {  fetch: fetchDataproviders, type: 'dataprovider', urlParam: 'datasourceId',
-                                            searchLinkToAdvancedPage: properties.searchLinkToAdvancedDataProviders,
-                                            params: getParamsForSearchLink()}">
-                  </ng-container>
+                  <search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
+                              [params]="getParamsForSearchLink()"
+                              [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
+                              [properties]="properties">
+                  </search-tab>
                 </div>
+<!--                <div class="uk-width-1-3@m uk-padding right-column"></div>-->
               </div>
             </ng-template>
             <ng-template #relatedDatasources_tab>
@@ -660,45 +662,49 @@
             <ng-template #publications_tab>
               <div class="uk-grid uk-margin-remove">
                 <div class="uk-width-expand uk-padding">
-                  <ng-container *ngTemplateOutlet="search_tab;
-                                context: {  fetch: fetchPublications, type: 'publication', urlParam: 'articleId',
-                                            searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
-                                            params: getParamsForSearchLink('publications')}">
-                  </ng-container>
+                  <search-tab [fetch]="fetchPublications" resultType="publication"
+                              [params]="getParamsForSearchLink('publications')"
+                              [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                              [properties]="properties">
+                  </search-tab>
                 </div>
+<!--                <div class="uk-width-1-3@m uk-padding right-column"></div>-->
               </div>
             </ng-template>
             <ng-template #datasets_tab>
               <div class="uk-grid uk-margin-remove">
                 <div class="uk-width-expand uk-padding">
-                  <ng-container *ngTemplateOutlet="search_tab;
-                                context: {  fetch: fetchDatasets, type: 'dataset', urlParam: 'datasetId',
-                                            searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
-                                            params: getParamsForSearchLink('datasets')}">
-                  </ng-container>
+                  <search-tab [fetch]="fetchDatasets" resultType="dataset"
+                              [params]="getParamsForSearchLink('datasets')"
+                              [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                              [properties]="properties">
+                  </search-tab>
                 </div>
+<!--                <div class="uk-width-1-3@m uk-padding right-column"></div>-->
               </div>
             </ng-template>
             <ng-template #software_tab>
               <div class="uk-grid uk-margin-remove">
                 <div class="uk-width-expand uk-padding">
-                  <ng-container *ngTemplateOutlet="search_tab;
-                                context: {  fetch: fetchSoftware, type: 'software', urlParam: 'softwareId',
-                                            searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
-                                            params: getParamsForSearchLink('software')}">
-                  </ng-container>
+                  <search-tab [fetch]="fetchSoftware" resultType="software"
+                              [params]="getParamsForSearchLink('software')"
+                              [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                              [properties]="properties">
+                  </search-tab>
                 </div>
+<!--                <div class="uk-width-1-3@m uk-padding right-column"></div>-->
               </div>
             </ng-template>
             <ng-template #other_tab>
               <div class="uk-grid uk-margin-remove">
                 <div class="uk-width-expand uk-padding">
-                  <ng-container *ngTemplateOutlet="search_tab;
-                                context: {  fetch: fetchOrps, type: 'other', urlParam: 'orpId',
-                                            searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
-                                            params: getParamsForSearchLink('other')}">
-                  </ng-container>
+                  <search-tab [fetch]="fetchOrps" resultType="other"
+                              [params]="getParamsForSearchLink('other')"
+                              [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                              [properties]="properties">
+                  </search-tab>
                 </div>
+<!--                <div class="uk-width-1-3@m uk-padding right-column"></div>-->
               </div>
             </ng-template>
             <ng-template #statistics_tab>
diff --git a/landingPages/dataProvider/dataProvider.module.ts b/landingPages/dataProvider/dataProvider.module.ts
index 657c24d9..a31a9ba0 100644
--- a/landingPages/dataProvider/dataProvider.module.ts
+++ b/landingPages/dataProvider/dataProvider.module.ts
@@ -20,7 +20,6 @@ import {ProjectsTabComponent} from './projectsTab.component';
 import {DatasourcesTabComponent} from './datasourcesTab.component';
 import {OrganizationsTabComponent} from './organizationsTab.component';
 import {RelatedDatasourcesTabComponent} from './relatedDatasourcesTab.component';
-// import {TabsComponent} from './tabs.component';
 
 import {DataProviderComponent} from './dataProvider.component';
 import {DataProviderService} from './dataProvider.service';
@@ -38,9 +37,8 @@ import {LandingHeaderModule} from "../landing-utils/landing-header/landing-heade
 import {AlertModalModule} from "../../utils/modal/alertModal.module";
 import {NoLoadPaging} from "../../searchPages/searchUtils/no-load-paging.module";
 import {FeedbackModule} from "../feedback/feedback.module";
-//import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module";
 import {TabsModule} from "../../utils/tabs/tabs.module";
-import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.module";
+import {SearchTabModule} from "../../utils/tabs/contents/search-tab.module";
 
 @NgModule({
   imports:
@@ -49,7 +47,7 @@ import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.m
       DataProvidersServiceModule, ProjectsServiceModule, SearchResearchResultsServiceModule,
       PagingModule, Schema2jsonldModule, SEOServiceModule, ShowPublisherModule, HelperModule,
       LandingHeaderModule, AlertModalModule, NoLoadPaging, FeedbackModule,
-      TabsModule, SearchResultsModule//, ResultPreviewModule
+      TabsModule, SearchTabModule
     ],
   declarations:
   [PublicationsTabComponent, DatasetsTabComponent, StatisticsTabComponent, ProjectsTabComponent, DatasourcesTabComponent, OrganizationsTabComponent,
diff --git a/landingPages/organization/organization.component.html b/landingPages/organization/organization.component.html
index 5f817dbc..29db5490 100644
--- a/landingPages/organization/organization.component.html
+++ b/landingPages/organization/organization.component.html
@@ -1,25 +1,25 @@
-<ng-template #search_tab let-fetch="fetch" let-type="type">
-  <errorMessages [status]="[fetch.searchUtils.status]" [type]="getEntityName(type, true, true)"
-                 tab_error_class=true></errorMessages>
-  <div *ngIf="fetch.searchUtils.status == errorCodes.DONE">
-    <div *ngIf="fetch.searchUtils.totalResults > searchNumber" class="uk-inline uk-flex uk-flex-right">
-      <span class="uk-text-uppercase uk-position-left uk-text-middle uk-flex-middle uk-flex">
-        <span>Top {{searchNumber}}</span><span class="space uk-text-muted">{{getEntityName(type, true, true)}}</span>
-      </span>
-      <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relorganizationid', organizationId, getEntityName(type, true, false), 'false'])"
-         [routerLink]="properties.searchLinkToAdvancedResults">
-        <button class="uk-button uk-button-small portal-button">
-          <span uk-icon="search"></span>
-          View all
-        </button>
-      </a>
-    </div>
-    <search-result [results]="fetch.results" [status]="fetch.searchUtils.status"
-                   [type]="getEntityName(type, false, true)" [showLoading]="true" [properties]="properties">
+<!--<ng-template #search_tab let-fetch="fetch" let-type="type">-->
+<!--  <errorMessages [status]="[fetch.searchUtils.status]" [type]="getEntityName(type, true, true)"-->
+<!--                 tab_error_class=true></errorMessages>-->
+<!--  <div *ngIf="fetch.searchUtils.status == errorCodes.DONE">-->
+<!--    <div *ngIf="fetch.searchUtils.totalResults > searchNumber" class="uk-inline uk-flex uk-flex-right">-->
+<!--      <span class="uk-text-uppercase uk-position-left uk-text-middle uk-flex-middle uk-flex">-->
+<!--        <span>Top {{searchNumber}}</span><span class="space uk-text-muted">{{getEntityName(type, true, true)}}</span>-->
+<!--      </span>-->
+<!--      <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relorganizationid', organizationId, getEntityName(type, true, false), 'false'])"-->
+<!--         [routerLink]="properties.searchLinkToAdvancedResults">-->
+<!--        <button class="uk-button uk-button-small portal-button">-->
+<!--          <span uk-icon="search"></span>-->
+<!--          View all-->
+<!--        </button>-->
+<!--      </a>-->
+<!--    </div>-->
+<!--    <search-result [results]="fetch.results" [status]="fetch.searchUtils.status"-->
+<!--                   [type]="getEntityName(type, false, true)" [showLoading]="true" [properties]="properties">-->
 
-    </search-result>
-  </div>
-</ng-template>
+<!--    </search-result>-->
+<!--  </div>-->
+<!--</ng-template>-->
 <div id="tm-main" class="landing uk-section uk-padding-remove-top tm-middle">
   <div *ngIf="!showFeedback" class="uk-grid">
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
@@ -121,27 +121,11 @@
               <ng-template #data_providers_tab>
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <errorMessages [status]="[fetchDataproviders.searchUtils.status]" [type]="'content providers'"
-                                   tab_error_class=true></errorMessages>
-                    <div *ngIf="fetchDataproviders.searchUtils.status == errorCodes.DONE">
-                      <div *ngIf="fetchDataproviders.searchUtils.totalResults > searchNumber"
-                           class="uk-inline uk-flex uk-flex-right">
-                        <span class="uk-text-uppercase uk-position-left uk-text-middle uk-flex-middle uk-flex">
-                          <span>Top {{searchNumber}}</span><span class="space uk-text-muted">content providers</span>
-                        </span>
-                        <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0'], ['relorganizationid', organizationId])"
-                           [routerLink]="properties.searchLinkToAdvancedDataProviders">
-                          <button class="uk-button uk-button-small portal-button">
-                            <span uk-icon="search"></span>
-                            View all
-                          </button>
-                        </a>
-                      </div>
-                      <search-result [results]="fetchDataproviders.results"
-                                     [status]="fetchDataproviders.searchUtils.status"
-                                     [type]="'content provider'" [showLoading]="true" [properties]="properties">
-                      </search-result>
-                    </div>
+                    <search-tab [fetch]="fetchDataproviders" resultType="dataprovider"
+                                [params]="getParamsForSearchLink()"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedDataProviders"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
                   <!--<div class="uk-width-1-3@m uk-width-1-1 right-column uk-padding-remove"></div>-->
                 </div>
@@ -149,9 +133,11 @@
               <ng-template #publications_tab>
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <ng-container *ngTemplateOutlet="search_tab;
-                                  context: {  fetch: fetchPublications, type: 'publication'}">
-                    </ng-container>
+                    <search-tab [fetch]="fetchPublications" resultType="publication"
+                                [params]="getParamsForSearchLink('publications')"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
                   <!--<div class="uk-width-1-3@m uk-width-1-1 right-column uk-padding-remove"></div>-->
                 </div>
@@ -159,9 +145,11 @@
               <ng-template #datasets_tab>
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <ng-container *ngTemplateOutlet="search_tab;
-                                  context: {  fetch: fetchDatasets, type: 'dataset'}">
-                    </ng-container>
+                    <search-tab [fetch]="fetchDatasets" resultType="dataset"
+                                [params]="getParamsForSearchLink('datasets')"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
                   <!--<div class="uk-width-1-3@m uk-width-1-1 right-column uk-padding-remove"></div>-->
                 </div>
@@ -169,9 +157,11 @@
               <ng-template #software_tab>
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <ng-container *ngTemplateOutlet="search_tab;
-                                  context: {  fetch: fetchSoftware, type: 'software'}">
-                    </ng-container>
+                    <search-tab [fetch]="fetchSoftware" resultType="software"
+                                [params]="getParamsForSearchLink('software')"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
                   <!--<div class="uk-width-1-3@m uk-width-1-1 right-column uk-padding-remove"></div>-->
                 </div>
@@ -179,9 +169,11 @@
               <ng-template #other_tab>
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <ng-container *ngTemplateOutlet="search_tab;
-                                  context: {  fetch: fetchOrps, type: 'other'}">
-                    </ng-container>
+                    <search-tab [fetch]="fetchOrps" resultType="other"
+                                [params]="getParamsForSearchLink('other')"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
                   <!--<div class="uk-width-1-3@m uk-width-1-1 right-column uk-padding-remove"></div>-->
                 </div>
diff --git a/landingPages/organization/organization.component.ts b/landingPages/organization/organization.component.ts
index 05a1ba63..e4e5b1b7 100644
--- a/landingPages/organization/organization.component.ts
+++ b/landingPages/organization/organization.component.ts
@@ -614,6 +614,14 @@ export class OrganizationComponent {
     this.downloadFunderReportModal.alertTitle = "Download funder report";
     this.downloadFunderReportModal.open();
   }
+
+  public getParamsForSearchLink(type: string = "") {
+    if(type) {
+      return this.routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf', 'sortBy'], ['relorganizationid', this.organizationId, type, 'false', 'resultdateofacceptance,descending']);
+    } else {
+      return this.routerHelper.createQueryParams(['f0', 'fv0'], ['relorganizationid', this.organizationId]);
+    }
+  }
   
   public onSelectActiveTab(activeTabId) {
     if (this.activeTab != activeTabId) {   // tab really changed
diff --git a/landingPages/organization/organization.module.ts b/landingPages/organization/organization.module.ts
index 67b3c417..508fea1d 100644
--- a/landingPages/organization/organization.module.ts
+++ b/landingPages/organization/organization.module.ts
@@ -26,9 +26,9 @@ import {OrganizationsDeletedByInferenceModule} from "./deletedByInference/delete
 import {LandingHeaderModule} from "../landing-utils/landing-header/landing-header.module";
 import {FeedbackModule} from "../feedback/feedback.module";
 import {MatSelectModule} from "@angular/material/select";
-import {TabsModule} from "../../utils/tabs/tabs.module";
 import {ModalSelectModule} from "../../utils/modal-select/modal-select.module";
-import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.module";
+import {TabsModule} from "../../utils/tabs/tabs.module";
+import {SearchTabModule} from "../../utils/tabs/contents/search-tab.module";
 
 
 @NgModule({
@@ -45,7 +45,9 @@ import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.m
     SearchResearchResultsServiceModule,
     ProjectsServiceModule,
     Schema2jsonldModule, SEOServiceModule, HelperModule,
-    OrganizationsDeletedByInferenceModule, LandingHeaderModule, FeedbackModule, MatSelectModule, TabsModule, ModalSelectModule, SearchResultsModule
+    OrganizationsDeletedByInferenceModule, LandingHeaderModule, FeedbackModule,
+    MatSelectModule, ModalSelectModule,
+    TabsModule, SearchTabModule
   ],
   declarations: [
     OrganizationComponent,
diff --git a/landingPages/project/project.component.html b/landingPages/project/project.component.html
index a86d89f0..f2aa6c14 100644
--- a/landingPages/project/project.component.html
+++ b/landingPages/project/project.component.html
@@ -75,78 +75,53 @@
   </ul>
 </ng-template>
 
-<ng-template #search_box let-fetch="fetch" let-type="type" let-typeName="typeName">
-  <div *ngIf="fetch.searchUtils.totalResults > 0">
-    <div class="uk-position-relative">
-      <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relprojectid', projectId, type, 'false'])"
-         [routerLink]="properties.searchLinkToAdvancedResults" target="_blank">
-        <span class="custom-external uk-position-top-right uk-margin-small-right uk-margin-small-top"></span>
-        <div class="header target uk-text-bold">{{typeName}}</div>
-        <div class="icon uk-position-center" uk-icon="icon: search;"></div>
-        <div class="footer target uk-position-relative">
-          <span class="uk-text-bold uk-position-center">{{fetch.searchUtils.totalResults | number}}</span>
-        </div>
-      </a>
-    </div>
-  </div>
-</ng-template>
-
-<ng-template #search_tab let-fetch="fetch" let-type="type" let-urlParam="urlParam"
-             let-searchLinkToAdvancedPage="searchLinkToAdvancedPage" let-params="params">
-  <errorMessages [status]="[fetch.searchUtils.status]" [type]="getEntityName(type, true, true)"
-                 tab_error_class=true></errorMessages>
-
-  <div *ngIf="fetch.searchUtils.status == errorCodes.DONE">
-<!--    <div *ngIf="fetch.searchUtils.totalResults > searchNumber" class="uk-inline uk-flex uk-flex-right">-->
-<!--      <span class="uk-text-uppercase uk-position-left uk-text-middle uk-flex-middle uk-flex">-->
-<!--        <span>Top {{searchNumber}}</span><span class="space uk-text-muted">{{getEntityName(type, true, true)}}</span>-->
-<!--      </span>-->
-<!--      <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relprojectid', projectId, getEntityName(type, true, false), 'false'])"-->
-<!--         [routerLink]="properties.searchLinkToAdvancedResults">-->
-<!--        <button class="uk-button uk-button-small portal-button">-->
-<!--          <span uk-icon="search"></span>-->
-<!--          View all-->
-<!--        </button>-->
+<!--<ng-template #search_box let-fetch="fetch" let-type="type" let-typeName="typeName">-->
+<!--  <div *ngIf="fetch.searchUtils.totalResults > 0">-->
+<!--    <div class="uk-position-relative">-->
+<!--      <a [queryParams]="routerHelper.createQueryParams(['f0', 'fv0', 'type', 'qf'], ['relprojectid', projectId, type, 'false'])"-->
+<!--         [routerLink]="properties.searchLinkToAdvancedResults" target="_blank">-->
+<!--        <span class="custom-external uk-position-top-right uk-margin-small-right uk-margin-small-top"></span>-->
+<!--        <div class="header target uk-text-bold">{{typeName}}</div>-->
+<!--        <div class="icon uk-position-center" uk-icon="icon: search;"></div>-->
+<!--        <div class="footer target uk-position-relative">-->
+<!--          <span class="uk-text-bold uk-position-center">{{fetch.searchUtils.totalResults | number}}</span>-->
+<!--        </div>-->
 <!--      </a>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</ng-template>-->
 
+<!--<ng-template #search_tab let-fetch="fetch" let-type="type" let-urlParam="urlParam"-->
+<!--             let-searchLinkToAdvancedPage="searchLinkToAdvancedPage" let-params="params">-->
+<!--  <errorMessages [status]="[fetch.searchUtils.status]" [type]="getEntityName(type, true, true)"-->
+<!--                 tab_error_class=true></errorMessages>-->
+
+<!--  <div *ngIf="fetch.searchUtils.status == errorCodes.DONE">-->
+<!--    <div class="tab-header">-->
+<!--      <span *ngIf="type != 'organization' && type != 'dataprovider' && type != 'project'">Recent</span>-->
+<!--      {{getEntityName(type, true, true)}}-->
+<!--    </div>-->
+<!--    <div class="uk-text-right">-->
+<!--      <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">-->
+<!--        View all {{getEntityName(type, true, true)}}-->
+<!--        <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>-->
+<!--      </a>-->
 <!--    </div>-->
 
-    <div class="tab-header">
-      <span *ngIf="type != 'organization' && type != 'dataprovider' && type != 'project'">Recent</span>
-      {{getEntityName(type, true, true)}}
-    </div>
-    <div class="uk-text-right">
-      <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
-        View all {{getEntityName(type, true, true)}}
-        <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>
-      </a>
-    </div>
+<!--    <search-result [properties]="properties"-->
+<!--                   [results]="fetch.results"-->
+<!--                   [status]="fetch.searchUtils.status"-->
+<!--                   [type]="type" urlParam="articleId">-->
+<!--    </search-result>-->
 
-<!--    <ul class="uk-list-divider uk-list uk-margin uk-margin-top">-->
-<!--      <errorMessages [status]="[fetch.searchUtils.status]" [type]="'results'"></errorMessages>-->
-<!--      <li *ngFor="let result of fetch.results" class="uk-animation-fade">-->
-<!--        <div>-->
-<!--          <result-preview [properties]="properties" [showOrganizations]="true"-->
-<!--                          [showSubjects]="true" [result]="getResultPreview(result, type)">-->
-<!--          </result-preview>-->
-<!--        </div>-->
-<!--      </li>-->
-<!--    </ul>-->
-
-    <search-result [properties]="properties"
-                   [results]="fetch.results"
-                   [status]="fetch.searchUtils.status"
-                   [type]="type" urlParam="articleId">
-    </search-result>
-
-    <div class="uk-text-right">
-      <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">
-        View all {{getEntityName(type, true, true)}}
-        <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>
-      </a>
-    </div>
-  </div>
-</ng-template>
+<!--    <div class="uk-text-right">-->
+<!--      <a class="el-content uk-button uk-button-text" [queryParams]="params" [routerLink]="searchLinkToAdvancedPage">-->
+<!--        View all {{getEntityName(type, true, true)}}-->
+<!--        <span *ngIf="fetch.searchUtils.totalResults <= searchNumber">in search page</span>-->
+<!--      </a>-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</ng-template>-->
 
 <div id="tm-main" class="landing uk-section uk-padding-remove-top tm-middle">
   <div *ngIf="!showFeedback" uk-grid>
@@ -905,46 +880,16 @@
 <!--                       [tabId]="'publications'">-->
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <!--                    <errorMessages [status]="[fetchPublications.searchUtils.status]" [type]="'publications'"-->
-                    <!--                                   tab_error_class=true></errorMessages>-->
-
-                    <!--                    <div *ngIf="fetchPublications.searchUtils.status == errorCodes.DONE">-->
-                    <!--                      <div class="uk-inline uk-flex uk-flex-right">-->
-                    <!--                        <span class="uk-position-left uk-text-middle uk-flex-middle uk-flex">-->
-                    <!--                          <span>Top 10</span><span class="space uk-text-muted">PUBLICATION</span>-->
-                    <!--                        </span>-->
-                    <!--                        <a [queryParams]="routerHelper.createQueryParams(['project', 'po'], [projectId, 'and'])"-->
-                    <!--                           routerLinkActive="router-link-active" [routerLink]="linkToSearchPublications">-->
-                    <!--                          <button *ngIf="fetchPublications.searchUtils.totalResults > 10"-->
-                    <!--                                  class="uk-button uk-button-small portal-button">-->
-                    <!--                            <span uk-icon="search"></span>-->
-                    <!--                            View more-->
-                    <!--                          </button>-->
-                    <!--                        </a>-->
-
-                    <!--                      </div>-->
-                    <!--                      <search-result [results]="fetchPublications.results"-->
-                    <!--                                  [status]="fetchPublications.searchUtils.status"-->
-                    <!--                                  type="publication" urlParam="articleId"-->
-                    <!--                                  dividerNotCard="true">-->
-                    <!--                      </search-result>-->
-                    <!--                    </div>-->
-                    <ng-container *ngTemplateOutlet="search_tab;
-                                  context: {  fetch: fetchPublications, type: 'publication', urlParam: 'articleId',
-                                              searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
-                                              params: getParamsForSearchLink('publications')}">
-                    </ng-container>
+                    <search-tab [fetch]="fetchPublications" resultType="publication"
+                                [params]="getParamsForSearchLink('publications')"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
-
-                  <!--                  <div class="uk-width-1-3@m uk-padding right-column">-->
-                  <!--                    <div>test publications</div>-->
-                  <!--                  </div>-->
+<!--                  <div class="uk-width-1-3@m uk-padding right-column">-->
+<!--                    <div>test publications</div>-->
+<!--                  </div>-->
                 </div>
-
-                <!--                  <ng-container *ngTemplateOutlet="tab_content; context: {-->
-                <!--                                  resultType: 'publication', results: publicationResults,-->
-                <!--                                  totalResults: publicationTotal, type: 'publication', typeName: 'publication'}">-->
-                <!--                  </ng-container>-->
 <!--              </my-tab>-->
             </ng-template>
             <ng-template #datasets_tab>
@@ -953,32 +898,30 @@
 <!--                       [tabId]="'datasets'">-->
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <ng-container *ngTemplateOutlet="search_tab;
-                                      context: {  fetch: fetchDatasets, type: 'dataset', urlParam: 'datasetId',
-                                                  searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
-                                                  params: getParamsForSearchLink('datasets')}">
-                    </ng-container>
+                    <search-tab [fetch]="fetchDatasets" resultType="dataset"
+                                [params]="getParamsForSearchLink('datasets')"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
-
-                  <!--                  <div class="uk-width-1-3@m uk-padding right-column">-->
-                  <!--                    <div>test research data</div>-->
-                  <!--                  </div>-->
+<!--                  <div class="uk-width-1-3@m uk-padding right-column">-->
+<!--                    <div>test research data</div>-->
+<!--                  </div>-->
                 </div>
 <!--              </my-tab>-->
             </ng-template>
             <ng-template #software_tab>
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <ng-container *ngTemplateOutlet="search_tab;
-                                      context: {  fetch: fetchSoftware, type: 'software', urlParam: 'softwareId',
-                                                  searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
-                                                  params: getParamsForSearchLink('software')}">
-                    </ng-container>
+                    <search-tab [fetch]="fetchSoftware" resultType="software"
+                                [params]="getParamsForSearchLink('software')"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
-
-                  <!--                  <div class="uk-width-1-3@m uk-padding right-column">-->
-                  <!--                    <div>test software</div>-->
-                  <!--                  </div>-->
+<!--                  <div class="uk-width-1-3@m uk-padding right-column">-->
+<!--                    <div>test software</div>-->
+<!--                  </div>-->
                 </div>
             </ng-template>
             <ng-template #other_tab>
@@ -987,16 +930,15 @@
 <!--                       [tabId]="'other'">-->
                 <div class="uk-grid uk-margin-remove">
                   <div class="uk-width-expand uk-padding">
-                    <ng-container *ngTemplateOutlet="search_tab;
-                                      context: {  fetch: fetchOrps, type: 'other', urlParam: 'orpId',
-                                                  searchLinkToAdvancedPage: properties.searchLinkToAdvancedResults,
-                                                  params: getParamsForSearchLink('other')}">
-                    </ng-container>
+                    <search-tab [fetch]="fetchOrps" resultType="other"
+                                [params]="getParamsForSearchLink('other')"
+                                [searchLinkToAdvancedPage]="properties.searchLinkToAdvancedResults"
+                                [properties]="properties">
+                    </search-tab>
                   </div>
-
-                  <!--                  <div class="uk-width-1-3@m uk-padding right-column">-->
-                  <!--                    <div>test other research products</div>-->
-                  <!--                  </div>-->
+<!--                  <div class="uk-width-1-3@m uk-padding right-column">-->
+<!--                    <div>test other research products</div>-->
+<!--                  </div>-->
                 </div>
 <!--              </my-tab>-->
             </ng-template>
diff --git a/landingPages/project/project.module.ts b/landingPages/project/project.module.ts
index 61b6228d..fa7a3ee4 100644
--- a/landingPages/project/project.module.ts
+++ b/landingPages/project/project.module.ts
@@ -28,9 +28,8 @@ import {SEOServiceModule } from '../../sharedComponents/SEO/SEOService.module';
 import {FeedbackModule} from "../feedback/feedback.module";
 import {AltMetricsModule} from "../../utils/altmetrics.module";
 import {TabsModule} from "../../utils/tabs/tabs.module";
-import {SearchResultsModule} from "../../searchPages/searchUtils/searchResults.module";
-//import {ResultPreviewModule} from "../../utils/result-preview/result-preview.module";
 import {ModalSelectModule} from "../../utils/modal-select/modal-select.module";
+import {SearchTabModule} from "../../utils/tabs/contents/search-tab.module";
 
 @NgModule({
   imports: [
@@ -40,7 +39,7 @@ import {ModalSelectModule} from "../../utils/modal-select/modal-select.module";
     SearchResearchResultsServiceModule, ProjectServiceModule,
     Schema2jsonldModule, SEOServiceModule, HelperModule,
     LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule,
-    TabsModule, ModalSelectModule, SearchResultsModule//, ResultPreviewModule
+    TabsModule, ModalSelectModule, SearchTabModule
   ],
   declarations: [
     ProjectComponent