openaire-library/searchPages/find/search.component.html

242 lines
17 KiB
HTML

<div id="tm-main" class=" uk-section uk-margin-small-top tm-middle" >
<div uk-grid uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="">
<div class="uk-width-1-1 ">
<div class="uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle generalSearchForm">
<div class="uk-width-1-1">
<search-form [(keyword)]=keyword (keywordChange)="keywordChanged($event)" placeholderText="Search for research results, software, projects, content providers, organizations in OpenAIRE information space"></search-form>
</div>
</div>
</div>
<div class=" uk-margin-small-top uk-container">
<div class="uk-grid uk-margin-top">
<ul class=" uk-tab uk-tab-left uk-width-1-5 uk-visible@m" uk-tab="animation: uk-animation-fade">
<li *ngIf="showPublications" (click)="searchPublications()" [class]="activeTab == 'publications'?'uk-active':''">
<a>
Publications
<span [class]="(fetchPublications.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchPublications.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? (fetchPublications.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showDatasets" (click)="searchDatasets()" [class]="activeTab == 'research data'?'uk-active':''">
<a>
Research Data
<span [class]="(fetchDatasets.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchDatasets.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? (fetchDatasets.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showSoftware" (click)="searchSoftware()" [class]="activeTab == 'software'?'uk-active':''">
<a>
Software
<span [class]="(fetchSoftware.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchSoftware.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? (fetchSoftware.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showProjects" (click)="searchProjects()" [class]="activeTab == 'projects'?'uk-active':''">
<a>
Projects
<span [class]="(fetchProjects.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchProjects.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? (fetchProjects.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showDataProviders" (click)="searchDataProviders()" [class]="activeTab == 'content providers'?'uk-active':''">
<a>
Content Providers
<span [class]="(fetchDataproviders.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchDataproviders.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? (fetchDataproviders.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showOrganizations" (click)="searchOrganizations()" [class]="activeTab == 'organizations'?'uk-active':''">
<a>
Organizations
<span [class]="(fetchOrganizations.searchUtils.status != errorCodes.LOADING && keyword.length > 0)?'uk-badge uk-badge-notification':''"> {{((fetchOrganizations.searchUtils.status != errorCodes.LOADING && keyword.length > 0)? (fetchOrganizations.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
</ul>
<div class="uk-hidden@m uk-clearfix uk-width-1-1 uk-margin-bottom">
<button class="uk-button uk-button-default uk-hidden@m " type="button">
<span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">{{activeTab}}</span>
</button>
<ul id="toggle-small-tabs" class="uk-subnav uk-subnav-pill uk-dropdown uk-hidden@m" uk-switcher="connect: #searchtabs; animation: uk-animation-fade" uk-dropdown="mode: click" uk-toggle="target: #toggle-small-tabs">
<li *ngIf="showPublications" (click)="searchPublications()" [class]="activeTab == 'publications'?'uk-active':''">
<a>
Publications
<span *ngIf = "fetchPublications.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchPublications.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification">{{((keyword.length > 0)? (fetchPublications.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showDatasets" (click)="searchDatasets()" [class]="activeTab == 'research data'?'uk-active':''">
<a>
Research Data
<span *ngIf = "fetchDatasets.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchDatasets.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? (fetchDatasets.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showSoftware" (click)="searchSoftware()" [class]="activeTab == 'software'?'uk-active':''">
<a>
Software
<span *ngIf = "fetchSoftware.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchSoftware.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? (fetchSoftware.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showProjects" (click)="searchProjects()" [class]="activeTab == 'projects'?'uk-active':''">
<a>
Projects
<span *ngIf = "fetchProjects.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchProjects.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? (fetchProjects.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showDataProviders" (click)="searchDataProviders()" [class]="activeTab == 'content providers'?'uk-active':''">
<a>
Content Providers
<span *ngIf = "fetchDataproviders.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchDataproviders.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? (fetchDataproviders.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
<li *ngIf="showOrganizations" (click)="searchOrganizations()" [class]="activeTab == 'organizations'?'uk-active':''">
<a>
Organizations
<span *ngIf = "fetchOrganizations.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
<span *ngIf = "fetchOrganizations.searchUtils.status != errorCodes.LOADING && keyword.length > 0" class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? (fetchOrganizations.searchUtils.totalResults | number) :'')}}</span>
</a>
</li>
</ul>
</div>
<!--ul id="searchtabs" class="uk-switcher uk-width-1-1 uk-margin-top custom-tab-content-large">
<li-->
<div class="uk-width-expand custom-tab-content-large">
<div *ngIf = "activeTab=='publications' && showPublications">
<div *ngIf = "keyword.length > 0 && activeTab=='publications'" class ="uk-animation-fade">
<div class = "uk-text-right" *ngIf = "fetchPublications.searchUtils.totalResults> 10">
<!--a [href] = "linkToSearchPublications"-->
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
routerLinkActive="router-link-active" [routerLink]="linkToSearchPublications" class="uk-button uk-button-text">
View all {{fetchPublications.searchUtils.totalResults | number}} results
</a>
</div>
<search-result [(results)]="fetchPublications.results"
[(status)]= "fetchPublications.searchUtils.status" showLoading = true
type="publication" urlParam="articleId" [(properties)]=properties>
</search-result>
</div>
<div *ngIf = "keyword.length == 0 && activeTab=='publications'" class ="uk-animation-fade" >
<browse-entities [(properties)]=properties entityName="publication" baseUrl="/search/find/publications" [refineFields]=searchFields.RESULT_REFINE_FIELDS></browse-entities>
</div>
<!--/li>
<li-->
</div>
<div *ngIf = "activeTab=='research data' && showDatasets" >
<div *ngIf = "keyword.length > 0 && activeTab=='research data'" class ="uk-animation-fade">
<div class = "uk-text-right" *ngIf = "fetchDatasets.searchUtils.totalResults> 10">
<!--a [href] = "linkToSearchDatasets"-->
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
routerLinkActive="router-link-active" [routerLink]="linkToSearchDatasets" class="uk-button uk-button-text">
View all {{fetchDatasets.searchUtils.totalResults | number}} results
</a>
</div>
<search-result [(results)]="fetchDatasets.results"
[(status)]= "fetchDatasets.searchUtils.status" showLoading = true
type="dataset" urlParam="datasetId" [(properties)]=properties>
</search-result>
</div>
<div *ngIf = "keyword.length == 0 && activeTab=='research data'" class ="uk-animation-fade">
<browse-entities [(properties)]=properties entityName="dataset" baseUrl="/search/find/datasets" [refineFields]=searchFields.RESULT_REFINE_FIELDS></browse-entities>
</div>
<!--/li>
<li-->
</div>
<div *ngIf = "activeTab=='software' && showSoftware" >
<div *ngIf = "keyword.length > 0 && activeTab=='software'" class ="uk-animation-fade">
<div class = "uk-text-right" *ngIf = "fetchSoftware.searchUtils.totalResults> 10">
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
routerLinkActive="router-link-active" [routerLink]="linkToSearchSoftware" class="uk-button uk-button-text">
View all {{fetchSoftware.searchUtils.totalResults | number}} results
</a>
</div>
<search-result [(results)]="fetchSoftware.results"
[(status)]= "fetchSoftware.searchUtils.status" showLoading = true
type="software" urlParam="softwareId" [(properties)]=properties>
</search-result>
</div>
<div *ngIf = "keyword.length == 0 && activeTab=='software'" class ="uk-animation-fade">
<browse-entities [(properties)]=properties entityName="software" baseUrl="/search/find/software" [refineFields]=searchFields.RESULT_REFINE_FIELDS></browse-entities>
</div>
<!--/li>
<li-->
</div>
<div *ngIf = "activeTab=='projects' && showProjects">
<div *ngIf = "keyword.length > 0 && activeTab=='projects'" class ="uk-animation-fade">
<div class = "uk-text-right" *ngIf = "fetchProjects.searchUtils.totalResults> 10">
<!--a [href] = "linkToSearchProjects"-->
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
routerLinkActive="router-link-active" [routerLink]="linkToSearchProjects" class="uk-button uk-button-text">
View all {{fetchProjects.searchUtils.totalResults | number}} results
</a>
</div>
<search-result [(results)]="fetchProjects.results"
[(status)]= "fetchProjects.searchUtils.status" showLoading = true
type="project" urlParam="projectId" [(properties)]=properties>
</search-result>
</div>
<div *ngIf = "keyword.length == 0 && activeTab=='projects'" class ="uk-animation-fade">
<browse-entities [(properties)]=properties entityName="project" baseUrl="/search/find/projects" [refineFields]=searchFields.PROJECT_REFINE_FIELDS></browse-entities>
</div>
<!--/li>
<li-->
</div>
<div *ngIf = "activeTab=='content providers' && showDataProviders">
<div *ngIf = "keyword.length > 0 && activeTab=='content providers'" class ="uk-animation-fade">
<div class = "uk-text-right" *ngIf = "fetchDataproviders.searchUtils.totalResults> 10">
<!--a [href] = "linkToSearchDataproviders"-->
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
routerLinkActive="router-link-active" [routerLink]="linkToSearchDataproviders" class="uk-button uk-button-text">
View all {{fetchDataproviders.searchUtils.totalResults | number}} results
</a>
</div>
<search-result [(results)]="fetchDataproviders.results"
[(status)]= "fetchDataproviders.searchUtils.status" showLoading = true
type="dataprovider" urlParam="datasourceId" [(properties)]=properties>
</search-result>
</div>
<div *ngIf = "keyword.length == 0 && activeTab=='content providers'" class ="uk-animation-fade" >
<browse-entities [(properties)]=properties entityName="dataprovider" baseUrl="/search/find/dataproviders" [refineFields]=searchFields.DATASOURCE_REFINE_FIELDS></browse-entities>
</div>
<!--/li>
<li-->
</div>
<div *ngIf = "activeTab=='organizations' && showOrganizations">
<div *ngIf = "keyword.length > 0" class ="uk-animation-fade">
<div class = "uk-text-right" *ngIf = "fetchOrganizations.searchUtils.totalResults> 10">
<!--a [href] = "linkToSearchOrganizations"-->
<a [queryParams]="routerHelper.createQueryParam('keyword', keyword)"
routerLinkActive="router-link-active" [routerLink]="linkToSearchOrganizations" class="uk-button uk-button-text">
View all {{fetchOrganizations.searchUtils.totalResults | number}} results
</a>
</div>
<search-result [(results)]="fetchOrganizations.results"
[(status)]= "fetchOrganizations.searchUtils.status" showLoading = true
type="organization" urlParam="organizationId" [(properties)]=properties>
</search-result>
</div>
<div *ngIf = "keyword.length == 0" class ="uk-animation-fade">
<browse-entities [(properties)]=properties entityName="organization" baseUrl="/search/find/organizations" [refineFields]=searchFields.ORGANIZATION_REFINE_FIELDS></browse-entities>
</div>
</div>
</div>
</div>
<!--/li>
</ul-->
</div>
</div>
</div>
</div>