Update search page layout base on new theme
This commit is contained in:
parent
13efcd8891
commit
03f412c550
|
|
@ -140,17 +140,20 @@
|
|||
(selectionChange)=" simpleEntityChanged($event)"
|
||||
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngIf="selectedFields[0]" class="uk-inline">
|
||||
<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"
|
||||
(click)="selectedFields[0].value = ''"
|
||||
uk-icon="icon: close"></a>
|
||||
<input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium"
|
||||
[placeholder]="formPlaceholderText" role="searchbox"
|
||||
[(ngModel)]="selectedFields[0].value" name="keyword"/>
|
||||
</div>
|
||||
<div *ngIf="selectedFields[0]" class="uk-inline">
|
||||
<!--<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"
|
||||
(click)="selectedFields[0].value = ''"
|
||||
uk-icon="icon: close"></a>-->
|
||||
<a class="uk-form-icon uk-form-icon-flip"
|
||||
(click)="simpleKeywordChanged(null)" type="submit">
|
||||
<icon name="search" flex="true"></icon>
|
||||
</a>
|
||||
<input type="text" class="uk-input uk-width-large@m uk-width-medium"
|
||||
[placeholder]="formPlaceholderText" role="searchbox"
|
||||
[(ngModel)]="selectedFields[0].value" name="keyword"/>
|
||||
</div>
|
||||
<div>
|
||||
<!-- TODO Check link to advance-->
|
||||
<!--<div>
|
||||
<button (click)="simpleKeywordChanged(null)" type="submit"
|
||||
class="uk-button portal-button uk-margin-small-left uk-text-bold uk-padding uk-padding-remove-top uk-padding-remove-bottom">
|
||||
Search
|
||||
|
|
@ -185,7 +188,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,12 @@ import {SearchFormModule} from './searchForm.module';
|
|||
import {QuickSelectionsModule} from "./quick-selections.module";
|
||||
import {EntitiesSelectionModule} from "./entitiesSelection.module";
|
||||
import { MatSelectModule } from "@angular/material/select";
|
||||
import {IconsModule} from "../../utils/icons/icons.module";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule
|
||||
CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule, SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule
|
||||
],
|
||||
declarations: [
|
||||
AdvancedSearchFormComponent,
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
refineFields.indexOf(customFilter.queryFieldName) ==
|
||||
-1) ||customFilter.isHiddenFilter)">
|
||||
<span class="uk-width-auto">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-label uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
|
||||
</span>
|
||||
</span>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<ng-container *ngIf="type.selected">
|
||||
<span class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-label uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
|
||||
<icon name="close" ratio="0.5" flex="true"></icon>
|
||||
</span>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
<span class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
|
||||
[class.uk-disabled]="disabled">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-label uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
|
||||
<icon name="close" ratio="0.5" flex="true"></icon>
|
||||
</span>
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
|
||||
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" class="uk-width-auto">
|
||||
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span class="uk-label uk-flex uk-flex-middle">
|
||||
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
|
||||
<icon name="close" ratio="0.5" flex="true"></icon>
|
||||
</span>
|
||||
|
|
@ -122,7 +122,7 @@
|
|||
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-position-relative">
|
||||
<div class="uk-position-relative uk-margin-medium-bottom">
|
||||
<div class="uk-container uk-container-large uk-section" id="searchForm">
|
||||
<advanced-search-form
|
||||
[entityType]="entityType"
|
||||
|
|
@ -185,10 +185,9 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="includeOnlyResultsAndFilter "
|
||||
<div *ngIf="includeOnlyResultsAndFilter"
|
||||
class="uk-margin-medium-top uk-margin-medium-bottom">
|
||||
<a *ngIf="showSwitchSearchLink && advancedSearchLink" routerLinkActive="router-link-active"
|
||||
[routerLink]="advancedSearchLink" style="z-index:1;"
|
||||
|
|
@ -196,157 +195,158 @@
|
|||
[class]="((disabled)?' uk-disabled uk-link-muted ':'') +' portal-link uk-float-right '">Advanced
|
||||
search
|
||||
</a>
|
||||
<!-- <quick-selections [resultTypes]="resultTypes"
|
||||
(typeChange)="queryChanged()"
|
||||
[isDisabled]="disableForms"
|
||||
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
|
||||
[properties]="properties">
|
||||
</quick-selections>-->
|
||||
</div>
|
||||
<div class="uk-grid helper-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
|
||||
<div *ngIf="showRefine && !properties.isDashboard
|
||||
&& (results.length > 0
|
||||
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|
||||
|| (!hideFilters &&
|
||||
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0)
|
||||
)
|
||||
)"
|
||||
class="uk-width-1-4@m search-filters uk-visible@m">
|
||||
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
||||
<div class="uk-grid uk-padding-small uk-padding-remove-vertical uk-margin-large-bottom">
|
||||
<div *ngIf="showRefine && !properties.isDashboard
|
||||
&& (results.length > 0
|
||||
|| (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING)
|
||||
|| (!hideFilters &&
|
||||
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0)
|
||||
)
|
||||
)"
|
||||
class="uk-width-1-4@m search-filters uk-visible@m">
|
||||
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
||||
</div>
|
||||
<div class="uk-width-expand@m uk-with-1-1@s">
|
||||
<!-- Dashboard Filters -->
|
||||
<div *ngIf="properties.isDashboard"
|
||||
class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">
|
||||
<div class="uk-flex uk-flex-bottom">
|
||||
<span class="uk-margin-small-right">Filters: </span>
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
|
||||
</div>
|
||||
<div class="uk-width-expand@m uk-with-1-1@s">
|
||||
<div *ngIf="properties.isDashboard"
|
||||
class="uk-width-1-1 uk-margin-top uk-margin-medium-bottom ">
|
||||
<div class="uk-flex uk-flex-bottom">
|
||||
<span class="uk-margin-small-right">Filters: </span>
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills; context: {}"></ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="customFilter && !customFilter.isHiddenFilter &&
|
||||
customFilter.selected == false && customFilter.promptToAddFilter"
|
||||
class="uk-alert uk-animation-slide-top-small">
|
||||
Do you want to see results only for {{customFilter.valueName}}? <a
|
||||
(click)="addCustomFilter();">Click here</a>.
|
||||
</div>
|
||||
<div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"
|
||||
class="uk-alert uk-text-center uk-margin-small-top ">
|
||||
<span *ngIf="customFilter">The following results are related to <span class="portal-color"
|
||||
>{{customFilter.valueName}}</span>.</span>
|
||||
Are you interested to view more results? Visit
|
||||
<a
|
||||
class="uk-margin-top uk-link"
|
||||
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
|
||||
target="_blank"> OpenAIRE - Explore</a>.
|
||||
</div>
|
||||
<div class="uk-align-center uk-margin-remove-bottom">
|
||||
<div
|
||||
*ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"
|
||||
class="uk-grid uk-margin-top uk-margin-bottom">
|
||||
<div class="uk-width-expand@m uk-grid uk-grid-medium uk-margin-small-bottom">
|
||||
<search-results-per-page [size]="searchUtils.size"
|
||||
(sizeChange)="sizeChanged($event)"
|
||||
[isDisabled]="disabled">
|
||||
</search-results-per-page>
|
||||
<search-sorting *ngIf="sort"
|
||||
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
|
||||
(sortByChange)="sortByChanged($event)"
|
||||
[isDisabled]="disabled">
|
||||
</search-sorting>
|
||||
</div>
|
||||
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
|
||||
<search-download
|
||||
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||
[isDisabled]="disabled"
|
||||
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
|
||||
[piwikSiteId]="piwikSiteId">
|
||||
</search-download>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))"
|
||||
class="uk-margin-small-top uk-margin-medium-bottom">
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
|
||||
</div>
|
||||
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
|
||||
[(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl"
|
||||
[(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
|
||||
[isDisabled]="disabled">
|
||||
</search-paging>
|
||||
</div>
|
||||
<div *ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)" class="uk-margin-large-bottom">
|
||||
<search-result *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||
[results]="results"
|
||||
[status]=searchUtils.status
|
||||
[type]="entityType"
|
||||
[showLoading]="true" [properties]=properties [showImpactFactors]="(customFilter &&
|
||||
customFilter.queryFieldName == 'communityId' && (customFilter.valueId ==
|
||||
'elixir-gr' || customFilter.valueId == 'inspired-ris'))">
|
||||
</search-result>
|
||||
<deposit-result *ngIf="usedBy == 'deposit'"
|
||||
[results]="results"
|
||||
[status]="searchUtils.status"
|
||||
[type]="entityType"
|
||||
[zenodoInformation]="zenodoInformation"
|
||||
[properties]=properties>
|
||||
</deposit-result>
|
||||
<orcid-result *ngIf="usedBy == 'orcid'"
|
||||
[results]="results"
|
||||
[status]="searchUtils.status"
|
||||
[type]="entityType"
|
||||
[properties]=properties>
|
||||
</orcid-result>
|
||||
<portal-search-result
|
||||
*ngIf="(entityType == 'community' || entityType == 'stakeholder') && usedBy == 'search'"
|
||||
[results]="results"
|
||||
[status]="searchUtils.status"
|
||||
[type]="entityType"
|
||||
[showType]="false"
|
||||
[showLoading]="true" [properties]=properties>
|
||||
</portal-search-result>
|
||||
</div>
|
||||
|
||||
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
|
||||
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
|
||||
<p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
|
||||
</div>
|
||||
|
||||
<div class="uk-align-center uk-margin-remove-bottom">
|
||||
<!-- <div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"-->
|
||||
<!-- class="uk-grid uk-margin-top uk-margin-bottom">-->
|
||||
<!-- <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>-->
|
||||
<!-- <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>-->
|
||||
<!-- </div>-->
|
||||
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
|
||||
[(searchUtils)]="searchUtils" [(results)]="results" [(baseUrl)]="searchUtils.baseUrl"
|
||||
[(parameterNames)]="parameterNames" [(parameterValues)]="parameterValues"
|
||||
[isDisabled]="disabled">
|
||||
</search-paging>
|
||||
</div>
|
||||
<div *ngIf=" showIndexInfo && searchUtils.status !== errorCodes.LOADING"
|
||||
class="uk-margin-small-top uk-grid uk-child-width-1-2">
|
||||
<!-- Last Index Info-->
|
||||
<div class="">
|
||||
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
|
||||
alt="graph">
|
||||
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
|
||||
</div>
|
||||
<div class="uk-text-right">
|
||||
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted">
|
||||
<a *ngIf="properties.showLastIndexInformationLink"
|
||||
class="uk-link"
|
||||
[href]="properties.lastIndexInformationLink" target="_blank">
|
||||
|
||||
Last update
|
||||
</a><span *ngIf="!(properties.showLastIndexInformationLink) ">
|
||||
Last update
|
||||
</span>
|
||||
of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- Results only for Custom Filter? -->
|
||||
<div *ngIf="customFilter && !customFilter.isHiddenFilter &&
|
||||
customFilter.selected == false && customFilter.promptToAddFilter"
|
||||
class="uk-alert uk-animation-slide-top-small">
|
||||
Do you want to see results only for {{customFilter.valueName}}? <a
|
||||
(click)="addCustomFilter();">Click here</a>.
|
||||
</div>
|
||||
<!-- Related results for Custom Filter Alert -->
|
||||
<div *ngIf="openaireLink && (searchUtils.totalResults > 0 || !loadPaging )"
|
||||
class="uk-alert uk-text-center uk-margin-small-top ">
|
||||
<span *ngIf="customFilter">The following results are related to <span class="portal-color"
|
||||
>{{customFilter.valueName}}</span>.</span>
|
||||
Are you interested to view more results? Visit
|
||||
<a
|
||||
class="uk-margin-top uk-link"
|
||||
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
|
||||
target="_blank"> OpenAIRE - Explore</a>.
|
||||
</div>
|
||||
<!-- Total results, number of pages -->
|
||||
<h5 class="uk-margin-bottom">
|
||||
<ng-container *ngIf="results && searchUtils.totalResults > 0">
|
||||
<span>{{searchUtils.totalResults|number}}</span>
|
||||
<span class="uk-text-muted"> {{type}}, page </span>
|
||||
<span>{{searchUtils.page | number}}</span>
|
||||
<span class="uk-text-muted"> of {{(totalPages(searchUtils.totalResults)|number)}}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
|
||||
<span>{{oldTotalResults|number}}</span>
|
||||
<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
|
||||
<span>{{searchUtils.page | number}}</span>
|
||||
<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
|
||||
</ng-container>
|
||||
</h5>
|
||||
<!-- TODO Download results position-->
|
||||
<div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
|
||||
<search-download
|
||||
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||
[isDisabled]="disabled"
|
||||
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"
|
||||
[piwikSiteId]="piwikSiteId">
|
||||
</search-download>
|
||||
</div>
|
||||
<!-- No Dashboard Filters -->
|
||||
<div *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
|
||||
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
|
||||
</div>
|
||||
<div class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-margin-medium-top" uk-grid>
|
||||
<div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<search-results-per-page class="uk-margin-right" *ngIf="searchUtils.totalResults >= 50" [size]="searchUtils.size"
|
||||
(sizeChange)="sizeChanged($event)"
|
||||
[isDisabled]="disabled">
|
||||
</search-results-per-page>
|
||||
<search-sorting *ngIf="sort"
|
||||
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
|
||||
(sortByChange)="sortByChanged($event)"
|
||||
[isDisabled]="disabled">
|
||||
</search-sorting>
|
||||
</div>
|
||||
</div>
|
||||
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
|
||||
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
|
||||
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
|
||||
[isDisabled]="disabled">
|
||||
</search-paging>
|
||||
</div>
|
||||
<div *ngIf="(searchUtils.page <= pagingLimit) || (searchUtils.totalResults <= searchUtils.size*pagingLimit)" class="uk-margin">
|
||||
<search-result *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||
[results]="results"
|
||||
[status]=searchUtils.status
|
||||
[type]="entityType"
|
||||
[showLoading]="true" [properties]=properties [showImpactFactors]="(customFilter &&
|
||||
customFilter.queryFieldName == 'communityId' && (customFilter.valueId ==
|
||||
'elixir-gr' || customFilter.valueId == 'inspired-ris'))">
|
||||
</search-result>
|
||||
<deposit-result *ngIf="usedBy == 'deposit'"
|
||||
[results]="results"
|
||||
[status]="searchUtils.status"
|
||||
[type]="entityType"
|
||||
[zenodoInformation]="zenodoInformation"
|
||||
[properties]=properties>
|
||||
</deposit-result>
|
||||
<orcid-result *ngIf="usedBy == 'orcid'"
|
||||
[results]="results"
|
||||
[status]="searchUtils.status"
|
||||
[type]="entityType"
|
||||
[properties]=properties>
|
||||
</orcid-result>
|
||||
<portal-search-result
|
||||
*ngIf="(entityType == 'community' || entityType == 'stakeholder') && usedBy == 'search'"
|
||||
[results]="results"
|
||||
[status]="searchUtils.status"
|
||||
[type]="entityType"
|
||||
[showType]="false"
|
||||
[showLoading]="true" [properties]=properties>
|
||||
</portal-search-result>
|
||||
</div>
|
||||
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
|
||||
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
|
||||
<p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<search-paging [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
|
||||
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
|
||||
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
|
||||
[isDisabled]="disabled">
|
||||
</search-paging>
|
||||
</div>
|
||||
<div *ngIf="showIndexInfo && searchUtils.status !== errorCodes.LOADING"
|
||||
class="uk-margin-small-top uk-grid uk-child-width-1-2">
|
||||
<!-- Last Index Info-->
|
||||
<div class="">
|
||||
<img src="assets/common-assets/graph.svg" style="opacity: 0.4; width:20px; height:22px" loading="lazy"
|
||||
alt="graph">
|
||||
<span class="uk-margin-small-left uk-text-baseline uk-text-muted">Powered by <a href="https://graph.openaire.eu" class="graph-color">OpenAIRE Research Graph</a></span>
|
||||
</div>
|
||||
<div class="uk-text-right">
|
||||
<span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-muted">
|
||||
<a *ngIf="properties.showLastIndexInformationLink"
|
||||
class="uk-link"
|
||||
[href]="properties.lastIndexInformationLink" target="_blank">
|
||||
|
||||
Last update
|
||||
</a><span *ngIf="!(properties.showLastIndexInformationLink) ">
|
||||
Last update
|
||||
</span>
|
||||
of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
|
||||
[texts]="pageContents['bottom']"></helper>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,7 +1,7 @@
|
|||
<ul class="uk-list uk-list-large" [class]="'uk-list uk-margin ' + custom_class" uk-height-match="target: .uk-card-default; row: false">
|
||||
<errorMessages [status]="[status]" [type]="'results'"></errorMessages>
|
||||
<li *ngFor="let result of results" class="uk-animation-fade uk-margin-auto">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center" [class.disabled]="!hasPermission(result)">
|
||||
<li *ngFor="let result of results" class="uk-animation-fade">
|
||||
<div class="uk-card uk-card-default uk-card-body uk-card-hover uk-position-relative uk-flex uk-flex-column uk-flex-center" [class.uk-disabled]="!hasPermission(result)">
|
||||
<div>
|
||||
<div *ngIf="type === 'community' && result.isSubscribed"
|
||||
class="uk-alert-primary uk-padding-small uk-position-top-left uk-text-center">
|
||||
|
|
@ -38,10 +38,10 @@
|
|||
</div>
|
||||
<div class="uk-width-expand">
|
||||
<div *ngIf="type === 'community'" [title]="result.shortTitle" class="uk-margin-bottom">
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-h5 uk-link-text" target="_blank">
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="getCommunityPageUrl(result)" class="uk-h5 uk-link-heading" target="_blank">
|
||||
{{(result.title) ? result.title : result.shortTitle}}
|
||||
</a>
|
||||
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-text">
|
||||
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-heading">
|
||||
{{(result.title) ? result.title : result.shortTitle}}
|
||||
</a>
|
||||
<h5 *ngIf="!hasPermission(result)">
|
||||
|
|
@ -49,10 +49,10 @@
|
|||
</h5>
|
||||
</div>
|
||||
<div *ngIf="type === 'stakeholder'" [title]="result.index_shortName" class="uk-margin-bottom">
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-h5 uk-link-text" target="_blank">
|
||||
<a *ngIf="directLink && hasPermission(result)" [href]="getStakeholderPageUrl(result)" class="uk-h5 uk-link-heading" target="_blank">
|
||||
{{(result.name) ? result.name : result.index_shortName}}
|
||||
</a>
|
||||
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-text">
|
||||
<a *ngIf="!directLink && hasPermission(result)" (click)="confirmModalOpen(result)" class="uk-h5 uk-link-heading">
|
||||
{{(result.name) ? result.name : result.index_shortName}}
|
||||
</a>
|
||||
<h5 *ngIf="!hasPermission(result)">
|
||||
|
|
|
|||
|
|
@ -4,50 +4,18 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
|
|||
@Component({
|
||||
selector: 'search-paging',
|
||||
template: `
|
||||
<div class="paging-hr searchPaging uk-margin-small-bottom"
|
||||
*ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)">
|
||||
<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="results && searchUtils.totalResults > 0">
|
||||
<span class="uk-text-bold">{{searchUtils.totalResults|number}}</span>
|
||||
<span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span>
|
||||
<span class="uk-text-bold">{{searchUtils.page | number}}</span>
|
||||
<span class="uk-text-muted uk-text-uppercase"> of </span>
|
||||
<span class="uk-text-bold">{{(totalPages(searchUtils.totalResults)|number)}}</span>
|
||||
</div>
|
||||
<div class="uk-width-1-1@s uk-width-1-2@m"
|
||||
*ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
|
||||
<span class="uk-text-bold">{{oldTotalResults|number}}</span>
|
||||
<span class="uk-text-muted uk-text-uppercase"> {{type}}, page </span>
|
||||
<span class="uk-text-bold">{{searchUtils.page | number}}</span>
|
||||
<span class="uk-text-muted uk-text-uppercase"> of </span>
|
||||
<span class="uk-text-bold">{{(totalPages(oldTotalResults)|number)}}</span>
|
||||
</div>
|
||||
<!--div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > 0">
|
||||
{{searchUtils.totalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(searchUtils.totalResults)|number)}}
|
||||
</div>
|
||||
<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-expand"
|
||||
*ngIf="results && searchUtils.totalResults > searchUtils.size">
|
||||
<paging [currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl"
|
||||
[size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues"
|
||||
[isDisabled]="isDisabled">
|
||||
</paging>
|
||||
</div>
|
||||
<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"
|
||||
[isDisabled]="isDisabled">
|
||||
</paging>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<paging *ngIf="results && searchUtils.totalResults > searchUtils.size"
|
||||
[currentPage]="searchUtils.page" [totalResults]="searchUtils.totalResults" [baseUrl]="baseUrl"
|
||||
[size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues"
|
||||
[isDisabled]="isDisabled">
|
||||
</paging>
|
||||
<paging *ngIf="!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING"
|
||||
[currentPage]="searchUtils.page" [totalResults]="oldTotalResults" [baseUrl]="baseUrl"
|
||||
[size]="searchUtils.size" [parameterNames]="parameterNames" [parameterValues]="parameterValues"
|
||||
[isDisabled]="isDisabled">
|
||||
</paging>
|
||||
`
|
||||
})
|
||||
|
||||
export class SearchPagingComponent {
|
||||
@Input() isDisabled: boolean = false;
|
||||
@Input() searchUtils;
|
||||
|
|
@ -56,31 +24,12 @@ export class SearchPagingComponent {
|
|||
@Input() type;
|
||||
@Input() parameterNames: string[];
|
||||
@Input() parameterValues: string[];
|
||||
|
||||
@Input() loadPaging: boolean = true;
|
||||
@Input() oldTotalResults: number = 0;
|
||||
|
||||
public totalResults: number = 0;
|
||||
public errorCodes: ErrorCodes = new ErrorCodes();
|
||||
|
||||
// @Input() totalResults:number = 0;
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// this.totalResults = this.searchUtils.totalResults;
|
||||
// if(!this.loadPaging && this.totalResults == 0) {
|
||||
// this.totalResults = this.oldTotalResults;
|
||||
// }
|
||||
}
|
||||
|
||||
totalPages(totalResults: number): number {
|
||||
let totalPages: any = totalResults / (this.searchUtils.size);
|
||||
if (!(Number.isInteger(totalPages))) {
|
||||
totalPages = (parseInt(totalPages, 10) + 1);
|
||||
}
|
||||
return totalPages;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,11 +6,12 @@ import {RouterModule} from '@angular/router';
|
|||
import {pagingFormatterNoLoad} from './pagingFormatterNoLoad.component';
|
||||
|
||||
import {PagingFormatter} from './pagingFormatter.component';
|
||||
import {IconsModule} from "./icons/icons.module";
|
||||
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, FormsModule, RouterModule
|
||||
CommonModule, FormsModule, RouterModule, IconsModule
|
||||
],
|
||||
declarations: [
|
||||
pagingFormatterNoLoad,
|
||||
|
|
|
|||
|
|
@ -1,82 +1,74 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {Router, ActivatedRoute} from '@angular/router';
|
||||
import {DomSanitizer} from '@angular/platform-browser';
|
||||
//Usage Example <paging [currentPage]="page" [totalResults]="resultsNum" [term]="keyword"> </paging>
|
||||
import {RouterHelper} from './routerHelper.class';
|
||||
import {EnvProperties} from './properties/env-properties';
|
||||
import {properties} from "../../../environments/environment";
|
||||
|
||||
@Component({
|
||||
selector: 'paging',
|
||||
template: `
|
||||
|
||||
|
||||
<ul *ngIf=" ( getTotalPages() > 0 ) && (getTotalPages() > 1) && ( 0 < currentPage && currentPage <= getTotalPages() ) "
|
||||
[class]="(isDisabled ? 'uk-disabled' : '') + ' uk-pagination uk-margin-remove-bottom uk-flex uk-flex-middle'">
|
||||
|
||||
<!--li *ngIf=" currentPage > 1" ><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',1)" routerLinkActive="router-link-active" [routerLink]=baseUrl 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-->
|
||||
<li *ngIf=" currentPage > 1" ><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl 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>
|
||||
<!--<li *ngIf=" currentPage > 1"><a [href]="onPage((currentPage -1))">\<</a></li>-->
|
||||
|
||||
<li *ngIf=" currentPage -2 > 0"><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 2))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage -2) | number}}</a></li>
|
||||
<li *ngIf=" currentPage -1 > 0 "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage -1) | number}}</a></li>
|
||||
<li class="uk-active"><span >{{currentPage | number}}</span></li>
|
||||
<li *ngIf=" currentPage +1 <= getTotalPages() "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +1))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage +1) | number}}</a></li>
|
||||
<li *ngIf=" currentPage +2 <= getTotalPages() "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +2))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage +2) | number}}</a></li>
|
||||
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +3))" routerLinkActive="router-link-active" [routerLink]=baseUrl>{{(currentPage +3) | number}}</a></li>
|
||||
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))" routerLinkActive="router-link-active" [routerLink]=baseUrl >{{(currentPage +4) | number}}</a></li>
|
||||
|
||||
<li *ngIf="getTotalPages() > currentPage"><a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))" routerLinkActive="router-link-active" [routerLink]=baseUrl aria-label="Next">
|
||||
<span class="uk-icon">
|
||||
<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>
|
||||
</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
<ul *ngIf=" (getTotalPages() > 0 ) && (getTotalPages() > 1) && (currentPage > 0 && currentPage <= getTotalPages()) "
|
||||
[class.uk-disabled]="isDisabled" class="uk-pagination" [ngClass]="'uk-flex-' + position">
|
||||
<li *ngIf="currentPage > 1">
|
||||
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page', (currentPage - 1))"
|
||||
[routerLink]=baseUrl aria-label="Previous">
|
||||
<icon name="chevron_left" [flex]="true" customClass="uk-pagination-previous"></icon>
|
||||
</a>
|
||||
</li>
|
||||
<li *ngIf=" currentPage -2 > 0"><a
|
||||
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 2))"
|
||||
[routerLink]=baseUrl>{{(currentPage - 2) | number}}</a></li>
|
||||
<li *ngIf=" currentPage -1 > 0 "><a
|
||||
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage - 1))"
|
||||
[routerLink]=baseUrl>{{(currentPage - 1) | number}}</a></li>
|
||||
<li class="uk-active"><span>{{currentPage | number}}</span></li>
|
||||
<li *ngIf=" currentPage +1 <= getTotalPages() "><a
|
||||
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +1))"
|
||||
[routerLink]=baseUrl>{{(currentPage + 1) | number}}</a></li>
|
||||
<li *ngIf=" currentPage +2 <= getTotalPages() "><a
|
||||
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +2))"
|
||||
[routerLink]=baseUrl>{{(currentPage + 2) | number}}</a></li>
|
||||
<li *ngIf=" (currentPage -2 <= 0)&&(currentPage +3 <= getTotalPages()) "><a
|
||||
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +3))"
|
||||
[routerLink]=baseUrl>{{(currentPage + 3) | number}}</a></li>
|
||||
<li *ngIf=" (currentPage -1 <= 0)&&(currentPage +4 <= getTotalPages()) "><a
|
||||
[queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage +4))"
|
||||
[routerLink]=baseUrl>{{(currentPage + 4) | number}}</a></li>
|
||||
<li *ngIf="getTotalPages() > currentPage">
|
||||
<a [queryParams]="routerHelper.createQueryParamsPaging(parameterNames,parameterValues,'page',(currentPage + 1))"
|
||||
[routerLink]=baseUrl aria-label="Next">
|
||||
<icon name="chevron_right" [flex]="true" customClass="uk-pagination-next"></icon>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
`
|
||||
})
|
||||
|
||||
export class PagingFormatter {
|
||||
@Input() isDisabled: boolean = false;
|
||||
@Input() currentPage: number = 1;
|
||||
@Input() size: number=10;
|
||||
@Input() size: number = 10;
|
||||
@Input() totalResults: number = 10;
|
||||
@Input() baseUrl:string="";
|
||||
@Input() parameterNames:string[];
|
||||
@Input() parameterValues:string[];
|
||||
|
||||
private limit: number;
|
||||
properties:EnvProperties;
|
||||
|
||||
public routerHelper:RouterHelper = new RouterHelper();
|
||||
|
||||
constructor () {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.properties = properties;
|
||||
this.limit = this.properties.pagingLimit;
|
||||
@Input() baseUrl: string = "";
|
||||
@Input() parameterNames: string[];
|
||||
@Input() parameterValues: string[];
|
||||
@Input() position: "left" | "center" | "right" = "right";
|
||||
private readonly limit: number;
|
||||
properties: EnvProperties = properties;
|
||||
public routerHelper: RouterHelper = new RouterHelper();
|
||||
|
||||
constructor() {
|
||||
this.limit = this.properties.pagingLimit;
|
||||
}
|
||||
getTotalPages(){
|
||||
let total: number = 0;
|
||||
//let limit: number = 20;//OpenaireProperties.getPagingLimit();
|
||||
|
||||
var i:number =parseInt(''+(this.totalResults/this.size));
|
||||
total = (((this.totalResults/this.size) == i )? i :(i+1)) ;
|
||||
|
||||
if((this.currentPage == this.limit) && (total > this.limit)) {
|
||||
|
||||
getTotalPages() {
|
||||
let total: number;
|
||||
var i: number = parseInt('' + (this.totalResults / this.size));
|
||||
total = (((this.totalResults / this.size) == i) ? i : (i + 1));
|
||||
if ((this.currentPage == this.limit) && (total > this.limit)) {
|
||||
total = this.limit;
|
||||
} else if((this.currentPage > this.limit) && (total > this.limit)) {
|
||||
} else if ((this.currentPage > this.limit) && (total > this.limit)) {
|
||||
total = this.currentPage;
|
||||
}
|
||||
|
||||
return total;
|
||||
}
|
||||
|
||||
// onPage(pageNum: number){
|
||||
// return this.sanitizer.bypassSecurityTrustUrl( this.baseUrl+((this.baseUrl.indexOf("?") > -1 )?'&':'?')+ "page=" + (pageNum));
|
||||
//
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue