[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:
Alex Martzios 2024-02-29 09:25:26 +02:00
parent edf49c4019
commit 69d6feb665
3 changed files with 130 additions and 162 deletions

View File

@ -1,101 +1,93 @@
<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"> <ng-container *ngFor="let customFilter of customFilters">
<ul #list class="uk-slider-items uk-grid uk-grid-small uk-margin-small-right uk-flex-nowrap" style="padding-bottom: 1px"> <ng-container *ngIf="customFilter.isHiddenFilter">
<ng-container *ngFor="let customFilter of customFilters"> <li class="uk-flex uk-flex-middle">
<ng-container *ngIf="customFilter.isHiddenFilter"> <span class="uk-label uk-label-small uk-label-secondary uk-text-truncate">
<li class="uk-flex uk-flex-middle"> {{customFilter.valueName}}
<span class="uk-label uk-label-secondary uk-text-truncate"> </span>
{{customFilter.valueName}} </li>
</span> </ng-container>
</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-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>
<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>
<ng-container *ngIf="resultTypes && resultTypes.countSelectedValues > 0"> </ng-container>
<ng-container *ngFor="let type of resultTypes.values; let i = index;"> </ng-container>
<ng-container *ngIf="type.selected"> <ng-container *ngFor="let filter of staticFilters">
<li class=""> <ng-container *ngIf="filter.countSelectedValues > 0">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle"> <ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{type.name}}</span> <li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
<button [class.uk-disabled]="disabled" (click)="removeResultType(type.id)" class="uk-close uk-icon" [disabled]="disabled"> class="">
<icon name="close" flex="true" ratio="0.7"></icon> <span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
</button> <span
</span> class="uk-margin-small-right uk-width-expand uk-text-truncate">
</li> <ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
</ng-container> <span>{{filter.title}}:
</ng-container> {{(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 *ngIf="selectedRangeFilters > 0"> </ng-container>
<ng-container *ngFor="let filter of rangeFilters "> </ng-container>
<ng-container *ngIf="filter.selectedFromAndToValues"> <ng-container *ngFor="let filter of filters ">
<li class=""> <ng-container *ngIf="filter.countSelectedValues > 0">
<span class="uk-label uk-label-primary uk-flex uk-flex-middle"> <ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate">{{filter.selectedFromAndToValues}}</span> <li *ngIf="!customFilters || (customFilters[0].isHiddenFilter && customFilters[0].valueId != value.id)"
<button [class.uk-disabled]="disabled" (click)="removeRangeFilter(filter)" class="uk-close uk-icon" [disabled]="disabled"> class="">
<icon name="close" flex="true" ratio="0.7"></icon> <span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle">
</button> <span
</span> class="uk-margin-small-right uk-width-expand uk-text-truncate">
</li> <ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
</ng-container> <span>{{filter.title}}:
</ng-container> {{(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 *ngFor="let filter of staticFilters"> </ng-container>
<ng-container *ngIf="filter.countSelectedValues > 0"> </ng-container>
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "> </ul>
<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>
</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,10 @@
[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">
<!-- 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>
<!-- 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-bottom uk-flex uk-flex-center">
<search-download <search-download
*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'" *ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
[isDisabled]="disabled" [isDisabled]="disabled"
@ -373,12 +313,41 @@
</a> </a>
</ng-container> </ng-container>
</div> </div>
</div> </ng-container>
<div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging) && !mobile" class="uk-margin-top"> <div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging) && !mobile" class="uk-flex uk-flex-top">
<ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container> <!-- filters pills -->
</div> <div class="uk-width-expand@m">
<div *ngIf="!mobile" class="uk-margin-medium-topuk-margin-medium-top"> <ng-container *ngTemplateOutlet="selected_filters_pills;"></ng-container>
<ng-container *ngTemplateOutlet="sorting; context: {mobile: mobile}"></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>
<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)">

View File

@ -15,12 +15,11 @@ import {properties} from "../../../../environments/environment";
selector: 'search-download', selector: 'search-download',
template: ` template: `
<button [attr.uk-tooltip]="'title: Download' + ((totalResults > csvLimit)?' the first 2000 ':' ') + 'results.' + <button [attr.uk-tooltip]="'title: Download' + ((totalResults > csvLimit)?' the first 2000 ':' ') + 'results.' +
((totalResults > csvLimit && properties.zenodoDumpUrl)?' To get all results download the data dump. ':' ') " ((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" class="uk-button uk-button-link uk-flex uk-flex-middle" [class.uk-disabled]="isDisabled"
[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>

View File

@ -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>