[develop | DONE | CHANGED] search page: remove top paging, remove results per page, remove total number of results, put selected filter, sorting and download on the same row, change to smaller labels for selected filters
This commit is contained in:
parent
edf49c4019
commit
69d6feb665
|
@ -1,13 +1,11 @@
|
||||||
<ng-template #selected_filters_pills>
|
<ng-template #selected_filters_pills>
|
||||||
<h1>
|
<h1 class="uk-margin-remove">
|
||||||
<div class="uk-slider filters-slider" uk-slider="finite: true">
|
<div [class.uk-invisible]="list.children.length === 0">
|
||||||
<div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative">
|
<ul #list class="uk-grid uk-grid-small uk-flex-wrap" uk-grid>
|
||||||
<div class="uk-slider-container">
|
|
||||||
<ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap" style="padding-bottom: 1px">
|
|
||||||
<ng-container *ngFor="let customFilter of customFilters">
|
<ng-container *ngFor="let customFilter of customFilters">
|
||||||
<ng-container *ngIf="customFilter.isHiddenFilter">
|
<ng-container *ngIf="customFilter.isHiddenFilter">
|
||||||
<li class="uk-flex uk-flex-middle">
|
<li class="uk-flex uk-flex-middle">
|
||||||
<span class="uk-label uk-label-secondary uk-text-truncate">
|
<span class="uk-label uk-label-small uk-label-secondary uk-text-truncate">
|
||||||
{{customFilter.valueName}}
|
{{customFilter.valueName}}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
|
@ -17,7 +15,7 @@
|
||||||
<ng-container *ngFor="let type of resultTypes.values; let i = index;">
|
<ng-container *ngFor="let type of resultTypes.values; let i = index;">
|
||||||
<ng-container *ngIf="type.selected">
|
<ng-container *ngIf="type.selected">
|
||||||
<li class="">
|
<li class="">
|
||||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
|
||||||
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{type.name}}</span>
|
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{type.name}}</span>
|
||||||
<button [class.uk-disabled]="disabled" (click)="removeResultType(type.id)" class="uk-close uk-icon" [disabled]="disabled">
|
<button [class.uk-disabled]="disabled" (click)="removeResultType(type.id)" class="uk-close uk-icon" [disabled]="disabled">
|
||||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||||
|
@ -31,7 +29,7 @@
|
||||||
<ng-container *ngFor="let filter of rangeFilters ">
|
<ng-container *ngFor="let filter of rangeFilters ">
|
||||||
<ng-container *ngIf="filter.selectedFromAndToValues">
|
<ng-container *ngIf="filter.selectedFromAndToValues">
|
||||||
<li class="">
|
<li class="">
|
||||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
|
||||||
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
|
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{filter.selectedFromAndToValues}}</span>
|
||||||
<button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled">
|
<button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled">
|
||||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||||
|
@ -46,15 +44,13 @@
|
||||||
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
|
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
|
||||||
<li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
|
<li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
|
||||||
class="">
|
class="">
|
||||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
|
||||||
<span
|
<span
|
||||||
class="uk-margin-small-right uk-width-expand uk-text-truncate">
|
class="uk-margin-small-right uk-width-expand uk-text-truncate">
|
||||||
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
|
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
|
||||||
<!-- *ngIf="filter.type == 'boolean'"-->
|
|
||||||
<span>{{filter.title}}:
|
<span>{{filter.title}}:
|
||||||
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}}
|
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}}
|
||||||
</span>
|
</span>
|
||||||
<!-- <span *ngIf="filter.type == 'triplet'">{{value.name=='true'?'':'Not '}}{{filter.title}}</span>-->
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-template #noboolean>
|
<ng-template #noboolean>
|
||||||
{{value.name}}
|
{{value.name}}
|
||||||
|
@ -72,7 +68,7 @@
|
||||||
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
|
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
|
||||||
<li *ngIf="!customFilters || (customFilters[0].isHiddenFilter && customFilters[0].valueId != value.id)"
|
<li *ngIf="!customFilters || (customFilters[0].isHiddenFilter && customFilters[0].valueId != value.id)"
|
||||||
class="">
|
class="">
|
||||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
|
||||||
<span
|
<span
|
||||||
class="uk-margin-small-right uk-width-expand uk-text-truncate">
|
class="uk-margin-small-right uk-width-expand uk-text-truncate">
|
||||||
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
|
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
|
||||||
|
@ -93,10 +89,6 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<a class="uk-position-center-left uk-blur-background" uk-slider-item="previous"><span uk-icon="chevron-left"></span></a>
|
|
||||||
<a class="uk-position-center-right uk-blur-background" uk-slider-item="next"><span uk-icon="chevron-right"></span></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</h1>
|
</h1>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
|
|
||||||
|
@ -170,10 +162,6 @@
|
||||||
<ng-container *ngFor="let filter of filters ">
|
<ng-container *ngFor="let filter of filters ">
|
||||||
<li *ngIf="filter.values && filter.values.length > 0
|
<li *ngIf="filter.values && filter.values.length > 0
|
||||||
&& filter.filterId != 'resultbestaccessright' && filter.filterId != 'instancetypename' && filter.filterId != 'projectoamandatepublications'">
|
&& filter.filterId != 'resultbestaccessright' && filter.filterId != 'instancetypename' && filter.filterId != 'projectoamandatepublications'">
|
||||||
<!-- <search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"-->
|
|
||||||
<!-- [isDisabled]="disabled"-->
|
|
||||||
<!-- [filter]="filter" [showResultCount]=showResultCount-->
|
|
||||||
<!-- (onFilterChange)="filterChanged($event)" [actionRoute]="true"></search-filter>-->
|
|
||||||
<ng-container *ngTemplateOutlet="search_filter; context: {filter: filter, showResultCount: showResultCount}"></ng-container>
|
<ng-container *ngTemplateOutlet="search_filter; context: {filter: filter, showResultCount: showResultCount}"></ng-container>
|
||||||
</li>
|
</li>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
@ -190,31 +178,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<ng-template #sorting let-mobile="mobile">
|
|
||||||
<div *ngIf="searchUtils.totalResults > 10 || sort || searchUtils.totalResults > searchUtils.size ||
|
|
||||||
(!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING)"
|
|
||||||
class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
|
|
||||||
<div>
|
|
||||||
<div class="uk-grid uk-flex-middle uk-grid-column-collapse" uk-grid>
|
|
||||||
<div *ngIf="searchUtils.totalResults > 10 && !mobile" class="uk-width-small uk-margin-right">
|
|
||||||
<div input type="select" placeholder="Results per page" inputClass="flat x-small"
|
|
||||||
[options]="pageOptions" [(value)]="searchUtils.size" [disabled]="disabled"
|
|
||||||
(valueChange)="sizeChanged($event)"></div>
|
|
||||||
</div>
|
|
||||||
<search-sorting *ngIf="sort && searchUtils.totalResults > 0"
|
|
||||||
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
|
|
||||||
(sortByChange)="sortByChanged($event)"
|
|
||||||
[isDisabled]="disabled">
|
|
||||||
</search-sorting>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<search-paging *ngIf="!mobile" [type]="type" [loadPaging]="loadPaging" [oldTotalResults]="oldTotalResults"
|
|
||||||
[searchUtils]="searchUtils" [results]="results" [baseUrl]="searchUtils.baseUrl"
|
|
||||||
[parameterNames]="parameterNames" [parameterValues]="parameterValues"
|
|
||||||
[isDisabled]="disabled">
|
|
||||||
</search-paging>
|
|
||||||
</div>
|
|
||||||
</ng-template>
|
|
||||||
<ng-template #main let-mobile="mobile">
|
<ng-template #main let-mobile="mobile">
|
||||||
<div *ngIf="mobile && showRefine && (searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0)"
|
<div *ngIf="mobile && showRefine && (searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0)"
|
||||||
class="filters-toggle-button">
|
class="filters-toggle-button">
|
||||||
|
@ -294,9 +258,6 @@
|
||||||
<icon name="close" ratio="1.5" visuallyHidden="close filters"></icon>
|
<icon name="close" ratio="1.5" visuallyHidden="close filters"></icon>
|
||||||
</a>
|
</a>
|
||||||
<div *ngIf="showOffCanvas" class="uk-padding-small uk-padding-remove-vertical">
|
<div *ngIf="showOffCanvas" class="uk-padding-small uk-padding-remove-vertical">
|
||||||
<div class="uk-margin-medium-top">
|
|
||||||
<ng-container *ngTemplateOutlet="sorting; context: {mobile: mobile}"></ng-container>
|
|
||||||
</div>
|
|
||||||
<div class="uk-margin-medium-top">
|
<div class="uk-margin-medium-top">
|
||||||
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
@ -315,7 +276,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-container" [class.uk-container-large]="!mobile" [class.uk-container-expand]="mobile" [class.uk-padding-remove-horizontal]="mobile">
|
<div class="uk-container uk-margin-top" [class.uk-container-large]="!mobile" [class.uk-container-expand]="mobile" [class.uk-padding-remove-horizontal]="mobile">
|
||||||
<div class="uk-grid uk-margin-large-bottom" [class.uk-margin-top]="!mobile" uk-grid>
|
<div class="uk-grid uk-margin-large-bottom" [class.uk-margin-top]="!mobile" uk-grid>
|
||||||
<div *ngIf="!mobile && showRefine && (results.length > 0 || (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING) || (!hideFilters &&
|
<div *ngIf="!mobile && showRefine && (results.length > 0 || (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING) || (!hideFilters &&
|
||||||
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0))) "
|
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0))) "
|
||||||
|
@ -337,31 +298,44 @@
|
||||||
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
|
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
|
||||||
target="_blank"> OpenAIRE - Explore</a>.
|
target="_blank"> OpenAIRE - Explore</a>.
|
||||||
</div>
|
</div>
|
||||||
<div class="uk-flex uk-flex-middle uk-flex-wrap uk-child-width-1-1 uk-child-width-auto@m" [class.uk-flex-between]="!mobile"
|
<ng-container *ngIf="mobile">
|
||||||
[class.uk-margin-top]="mobile">
|
<!-- Download results -->
|
||||||
<!-- Total results, number of pages -->
|
<div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
|
||||||
<div class="uk-width-expand@m uk-margin-remove-bottom uk-text-truncate" [class.uk-margin-medium-right]="!mobile" [class.uk-h6]="!mobile" [class.uk-text-center]="mobile">
|
class="uk-margin-small-bottom uk-flex uk-flex-center">
|
||||||
<ng-container *ngIf="results && searchUtils.totalResults > 0">
|
<search-download
|
||||||
<span>{{searchUtils.totalResults|number}}</span>
|
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||||
<span class="uk-text-meta uk-text-capitalize"> {{type}}</span>
|
[isDisabled]="disabled"
|
||||||
<ng-container *ngIf="searchTerm && simpleView">
|
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">
|
||||||
<span class="uk-text-meta"> for </span>
|
</search-download>
|
||||||
<span class="uk-text-bold">{{searchTerm}}</span>
|
<ng-container *ngIf="properties.zenodoDumpUrl && entityType == 'result'">
|
||||||
|
<a [href]="properties.zenodoDumpUrl" target="_blank" class=" uk-margin-left uk-button uk-button-link uk-flex uk-flex-middle">
|
||||||
|
<img src="assets/common-assets/common/zenodoDump.png" width="20"><span class="uk-margin-xsmall-left">Data dump</span>
|
||||||
|
</a>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
<ng-container *ngIf="!simpleView && advancedSearchTerms > 0">
|
</div>
|
||||||
<span class="uk-text-bold"> ({{advancedSearchTerms}} rule{{advancedSearchTerms == 1 ? '' : 's'}} applied)</span>
|
|
||||||
</ng-container>
|
|
||||||
</ng-container>
|
|
||||||
<ng-container *ngIf="!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING">
|
|
||||||
<span>{{oldTotalResults|number}}</span>
|
|
||||||
<span class="uk-text-meta uk-text-capitalize"> {{type}}, page </span>
|
|
||||||
<span>{{searchUtils.page | number}}</span>
|
|
||||||
<span class="uk-text-meta"> of {{(totalPages(oldTotalResults)|number)}}</span>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
<div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging) && !mobile" class="uk-flex uk-flex-top">
|
||||||
|
<!-- filters pills -->
|
||||||
|
<div class="uk-width-expand@m">
|
||||||
|
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
|
||||||
|
</div>
|
||||||
|
<div class="uk-width-auto@m uk-margin-medium-left uk-flex uk-flex-middle">
|
||||||
|
<div *ngIf="searchUtils.totalResults > 10 || sort || searchUtils.totalResults > searchUtils.size ||
|
||||||
|
(!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING)"
|
||||||
|
class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
|
||||||
|
<div>
|
||||||
|
<div class="uk-grid uk-flex-middle uk-grid-column-collapse" uk-grid>
|
||||||
|
<search-sorting *ngIf="sort && searchUtils.totalResults > 0"
|
||||||
|
[entityType]="entityType" [sortBy]="searchUtils.sortBy"
|
||||||
|
(sortByChange)="sortByChanged($event)"
|
||||||
|
[isDisabled]="disabled">
|
||||||
|
</search-sorting>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Download results -->
|
<!-- Download results -->
|
||||||
<div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
|
<div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
|
||||||
class="uk-margin-small-bottom uk-flex uk-margin-small-top" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
|
class="uk-margin-small-left uk-flex uk-flex-middle" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
|
||||||
<search-download
|
<search-download
|
||||||
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||||
[isDisabled]="disabled"
|
[isDisabled]="disabled"
|
||||||
|
@ -374,11 +348,6 @@
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging) && !mobile" class="uk-margin-top">
|
|
||||||
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="!mobile" class="uk-margin-medium-topuk-margin-medium-top">
|
|
||||||
<ng-container *ngTemplateOutlet="sorting; context: {mobile: mobile}"></ng-container>
|
|
||||||
</div>
|
</div>
|
||||||
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
|
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
|
||||||
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
|
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
|
||||||
|
|
|
@ -20,7 +20,6 @@ import {properties} from "../../../../environments/environment";
|
||||||
[disabled]="isDisabled"
|
[disabled]="isDisabled"
|
||||||
(click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
|
(click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
|
||||||
<icon name="download" [flex]="true"></icon>
|
<icon name="download" [flex]="true"></icon>
|
||||||
<span class="uk-margin-xsmall-left">Download Results</span>
|
|
||||||
</button>
|
</button>
|
||||||
<modal-loading></modal-loading>
|
<modal-loading></modal-loading>
|
||||||
<modal-alert #AlertModalCsvError></modal-alert>
|
<modal-alert #AlertModalCsvError></modal-alert>
|
||||||
|
|
|
@ -7,7 +7,7 @@ import {properties} from "../../../../environments/environment";
|
||||||
template: `
|
template: `
|
||||||
<div *ngIf="options" class="uk-width-small">
|
<div *ngIf="options" class="uk-width-small">
|
||||||
<div input
|
<div input
|
||||||
type="select" placeholder="Sort by" inputClass="flat x-small"
|
type="select" placeholder="Sort by" inputClass="border-bottom"
|
||||||
[options]="options" [(value)]="sortBy" [disabled]="isDisabled"
|
[options]="options" [(value)]="sortBy" [disabled]="isDisabled"
|
||||||
(valueChange)="sortByChanged()"></div>
|
(valueChange)="sortByChanged()"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue