[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,101 +1,93 @@
|
|||
<ng-template #selected_filters_pills>
|
||||
<h1>
|
||||
<div class="uk-slider filters-slider" uk-slider="finite: true">
|
||||
<div [class.uk-invisible]="list.children.length === 0" class="uk-position-relative">
|
||||
<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 *ngIf="customFilter.isHiddenFilter">
|
||||
<li class="uk-flex uk-flex-middle">
|
||||
<span class="uk-label uk-label-secondary uk-text-truncate">
|
||||
{{customFilter.valueName}}
|
||||
</span>
|
||||
</li>
|
||||
<h1 class="uk-margin-remove">
|
||||
<div [class.uk-invisible]="list.children.length === 0">
|
||||
<ul #list class="uk-grid uk-grid-small uk-flex-wrap" uk-grid>
|
||||
<ng-container *ngFor="let customFilter of customFilters">
|
||||
<ng-container *ngIf="customFilter.isHiddenFilter">
|
||||
<li class="uk-flex uk-flex-middle">
|
||||
<span class="uk-label uk-label-small uk-label-secondary uk-text-truncate">
|
||||
{{customFilter.valueName}}
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultTypes && resultTypes.countSelectedValues > 0">
|
||||
<ng-container *ngFor="let type of resultTypes.values; let i = index;">
|
||||
<ng-container *ngIf="type.selected">
|
||||
<li class="">
|
||||
<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>
|
||||
<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>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedRangeFilters > 0">
|
||||
<ng-container *ngFor="let filter of rangeFilters ">
|
||||
<ng-container *ngIf="filter.selectedFromAndToValues">
|
||||
<li class="">
|
||||
<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>
|
||||
<button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="resultTypes && resultTypes.countSelectedValues > 0">
|
||||
<ng-container *ngFor="let type of resultTypes.values; let i = index;">
|
||||
<ng-container *ngIf="type.selected">
|
||||
<li class="">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<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">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let filter of staticFilters">
|
||||
<ng-container *ngIf="filter.countSelectedValues > 0">
|
||||
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
|
||||
<li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
|
||||
class="">
|
||||
<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">
|
||||
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
|
||||
<span>{{filter.title}}:
|
||||
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}}
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-template #noboolean>
|
||||
{{value.name}}
|
||||
</ng-template></span>
|
||||
<button [class.uk-disabled]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="selectedRangeFilters > 0">
|
||||
<ng-container *ngFor="let filter of rangeFilters ">
|
||||
<ng-container *ngIf="filter.selectedFromAndToValues">
|
||||
<li class="">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<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">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let filter of filters ">
|
||||
<ng-container *ngIf="filter.countSelectedValues > 0">
|
||||
<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)"
|
||||
class="">
|
||||
<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">
|
||||
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
|
||||
<span>{{filter.title}}:
|
||||
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}}
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-template #noboolean>
|
||||
{{value.name}}
|
||||
</ng-template></span>
|
||||
<button [class.uk-disabled]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let filter of staticFilters">
|
||||
<ng-container *ngIf="filter.countSelectedValues > 0">
|
||||
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
|
||||
<li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
|
||||
class="">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span
|
||||
class="uk-margin-small-right uk-width-expand uk-text-truncate">
|
||||
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
|
||||
<!-- *ngIf="filter.type == 'boolean'"-->
|
||||
<span>{{filter.title}}:
|
||||
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}}
|
||||
</span>
|
||||
<!-- <span *ngIf="filter.type == 'triplet'">{{value.name=='true'?'':'Not '}}{{filter.title}}</span>-->
|
||||
</ng-container>
|
||||
<ng-template #noboolean>
|
||||
{{value.name}}
|
||||
</ng-template></span>
|
||||
<button [class.uk-disabled]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
<ng-container *ngFor="let filter of filters ">
|
||||
<ng-container *ngIf="filter.countSelectedValues > 0">
|
||||
<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)"
|
||||
class="">
|
||||
<span class="uk-label uk-label-primary uk-flex uk-flex-middle">
|
||||
<span
|
||||
class="uk-margin-small-right uk-width-expand uk-text-truncate">
|
||||
<ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
|
||||
<span>{{filter.title}}:
|
||||
{{(value.name=='true'||value.name=='Yes')?'Yes':'No'}}
|
||||
</span>
|
||||
</ng-container>
|
||||
<ng-template #noboolean>
|
||||
{{value.name}}
|
||||
</ng-template></span>
|
||||
<button [class.uk-disabled]="disabled" (click)="removeFilter(value, filter)" class="uk-close uk-icon" [disabled]="disabled">
|
||||
<icon name="close" flex="true" ratio="0.7"></icon>
|
||||
</button>
|
||||
</span>
|
||||
</li>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</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>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
</ul>
|
||||
</div>
|
||||
</h1>
|
||||
</ng-template>
|
||||
|
|
@ -170,10 +162,6 @@
|
|||
<ng-container *ngFor="let filter of filters ">
|
||||
<li *ngIf="filter.values && filter.values.length > 0
|
||||
&& 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>
|
||||
</li>
|
||||
</ng-container>
|
||||
|
|
@ -190,31 +178,7 @@
|
|||
</ul>
|
||||
</div>
|
||||
</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">
|
||||
<div *ngIf="mobile && showRefine && (searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0)"
|
||||
class="filters-toggle-button">
|
||||
|
|
@ -294,9 +258,6 @@
|
|||
<icon name="close" ratio="1.5" visuallyHidden="close filters"></icon>
|
||||
</a>
|
||||
<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">
|
||||
<ng-container *ngTemplateOutlet="filters_column; context: {}"></ng-container>
|
||||
</div>
|
||||
|
|
@ -315,7 +276,7 @@
|
|||
</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 *ngIf="!mobile && showRefine && (results.length > 0 || (searchUtils.refineStatus == errorCodes.LOADING && searchUtils.status != errorCodes.LOADING) || (!hideFilters &&
|
||||
(existingFiltersWithValues > 0 || (selectedRangeFilters + selectedFilters + selectedTypesNum) > 0))) "
|
||||
|
|
@ -337,31 +298,10 @@
|
|||
[href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
|
||||
target="_blank"> OpenAIRE - Explore</a>.
|
||||
</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"
|
||||
[class.uk-margin-top]="mobile">
|
||||
<!-- Total results, number of pages -->
|
||||
<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">
|
||||
<ng-container *ngIf="results && searchUtils.totalResults > 0">
|
||||
<span>{{searchUtils.totalResults|number}}</span>
|
||||
<span class="uk-text-meta uk-text-capitalize"> {{type}}</span>
|
||||
<ng-container *ngIf="searchTerm && simpleView">
|
||||
<span class="uk-text-meta"> for </span>
|
||||
<span class="uk-text-bold">{{searchTerm}}</span>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!simpleView && advancedSearchTerms > 0">
|
||||
<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>
|
||||
</div>
|
||||
<ng-container *ngIf="mobile">
|
||||
<!-- Download results -->
|
||||
<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-bottom uk-flex uk-flex-center">
|
||||
<search-download
|
||||
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||
[isDisabled]="disabled"
|
||||
|
|
@ -373,12 +313,41 @@
|
|||
</a>
|
||||
</ng-container>
|
||||
</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>
|
||||
</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>
|
||||
<!-- Download results -->
|
||||
<div *ngIf="showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
|
||||
class="uk-margin-small-left uk-flex uk-flex-middle" [class.uk-flex-center]="mobile" [class.uk-margin-medium-top]="mobile">
|
||||
<search-download
|
||||
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
|
||||
[isDisabled]="disabled"
|
||||
[type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults">
|
||||
</search-download>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div [class]="searchUtils.page > pagingLimit ? 'search-results' : ''"
|
||||
*ngIf="(searchUtils.page >= pagingLimit) && (searchUtils.totalResults > searchUtils.size*pagingLimit)">
|
||||
|
|
|
|||
|
|
@ -15,12 +15,11 @@ import {properties} from "../../../../environments/environment";
|
|||
selector: 'search-download',
|
||||
template: `
|
||||
<button [attr.uk-tooltip]="'title: Download' + ((totalResults > csvLimit)?' the first 2000 ':' ') + 'results.' +
|
||||
((totalResults > csvLimit && properties.zenodoDumpUrl)?' To get all results download the data dump. ':' ') "
|
||||
class="uk-button uk-button-link uk-flex uk-flex-middle" [class.uk-disabled]="isDisabled"
|
||||
[disabled]="isDisabled"
|
||||
(click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
|
||||
<icon name="download" [flex]="true"></icon>
|
||||
<span class="uk-margin-xsmall-left">Download Results</span>
|
||||
((totalResults > csvLimit && properties.zenodoDumpUrl)?' To get all results download the data dump. ':' ') "
|
||||
class="uk-button uk-button-link uk-flex uk-flex-middle" [class.uk-disabled]="isDisabled"
|
||||
[disabled]="isDisabled"
|
||||
(click)="downloadfile(downloadURLAPI+'?format=csv'+csvParams,type+'-report-'+((totalResults > csvLimit)?'2000 ':totalResults))">
|
||||
<icon name="download" [flex]="true"></icon>
|
||||
</button>
|
||||
<modal-loading></modal-loading>
|
||||
<modal-alert #AlertModalCsvError></modal-alert>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import {properties} from "../../../../environments/environment";
|
|||
template: `
|
||||
<div *ngIf="options" class="uk-width-small">
|
||||
<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"
|
||||
(valueChange)="sortByChanged()"></div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue