MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[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

Browse Source
pull/35/head
Alex Martzios 2 months ago
parent edf49c4019
commit 69d6feb665
3 changed files with 130 additions and 162 deletions
Show Stats Download Patch File Download Diff File

279
searchPages/searchUtils/newSearchPage.component.html
Unescape Escape View File

@ -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>
</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-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>
<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 *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 *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 *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>
<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 *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>
</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>
</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)">

11
searchPages/searchUtils/searchDownload.component.ts
Unescape Escape View File

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

2
searchPages/searchUtils/searchSorting.component.ts
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save