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

[develop | DONE | CHANGED]: newSearchPage.component.html: Restored number of results and keyword display & added uk-text-capitalize on selected filter labels.

This commit is contained in:
Konstantina Galouni 2024-04-05 11:09:16 +03:00
parent c351349f8e
commit dc1679c565
1 changed files with 49 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
searchPages/searchUtils/newSearchPage.component.html
View File

@ -1,11 +1,11 @@
<ng-template #selected_filters_pills> <ng-template #selected_filters_pills>
<h1 class="uk-margin-remove"> <h1 class="uk-margin-remove">
<div [class.uk-invisible]="list.children.length === 0"> <div [class.uk-invisible]="list.children.length === 0" [class.uk-margin-top]="list.children.length > 0">
<ul #list class="uk-grid uk-grid-small uk-flex-wrap" uk-grid> <ul #list class="uk-grid uk-grid-small uk-flex-wrap" uk-grid>
<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-small uk-label-secondary uk-text-truncate target1"> <span class="uk-text-capitalize uk-label uk-label-small uk-label-secondary uk-text-truncate target1">
{{customFilter.valueName}} {{customFilter.valueName}}
</span> </span>
</li> </li>
@ -15,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-small uk-label-primary uk-flex uk-flex-middle target2"> <span class="uk-text-capitalize uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target2">
<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>
@ -29,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-small uk-label-primary uk-flex uk-flex-middle target3"> <span class="uk-text-capitalize uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target3">
<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>
@ -44,7 +44,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="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" <li *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)"
class=""> class="">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target4"> <span class="uk-text-capitalize uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target4">
<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">
@ -73,7 +73,7 @@
<ng-container *ngIf="filter.countSelectedValues > 0"> <ng-container *ngIf="filter.countSelectedValues > 0">
<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)">
<span class="uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target5"> <span class="uk-text-capitalize uk-label uk-label-small uk-label-primary uk-flex uk-flex-middle target5">
<span class="uk-margin-small-right uk-width-expand uk-text-truncate"> <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"> <ng-container *ngIf="filter.type && (filter.type == 'boolean' || filter.type == 'triplet') else noboolean">
<span>{{filter.title}}: <span>{{filter.title}}:
@ -310,10 +310,31 @@
[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>
<ng-container *ngIf="mobile">
<div class="uk-flex uk-flex-middle uk-flex-wrap uk-child-width-auto uk-flex-between">
<!-- Total results, number of pages -->
<div class="uk-margin-remove-bottom uk-text-truncate" [class.uk-margin-medium-right]="!mobile" [class.uk-margin-right]="mobile" [class.uk-h6]="!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="mobile && showDownload && (searchUtils.status !== errorCodes.LOADING || !loadPaging)"
class="uk-margin-small-bottom uk-flex uk-flex-center"> class="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"
@ -321,17 +342,12 @@
</search-download> </search-download>
<ng-container *ngIf="properties.zenodoDumpUrl && entityType == 'result'"> <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"> <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> <img src="assets/common-assets/common/zenodoDump.png" alt="Zenodo dump" width="20"><span class="uk-margin-xsmall-left">Data dump</span>
</a> </a>
</ng-container> </ng-container>
</div> </div>
</ng-container>
<div *ngIf="(searchUtils.status !== errorCodes.LOADING || !loadPaging) && !mobile" class="uk-flex uk-flex-top"> <div *ngIf="!mobile" class="uk-margin-medium-left uk-flex uk-flex-middle">
<!-- 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 || <div *ngIf="searchUtils.totalResults > 10 || sort || searchUtils.totalResults > searchUtils.size ||
(!loadPaging && oldTotalResults > searchUtils.size && searchUtils.status == errorCodes.LOADING)" (!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> class="uk-grid uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
@ -355,12 +371,19 @@
</search-download> </search-download>
<ng-container *ngIf="properties.zenodoDumpUrl && entityType == 'result'"> <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"> <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> <img src="assets/common-assets/common/zenodoDump.png" alt="Zenodo dump" width="20"><span class="uk-margin-xsmall-left">Data dump</span>
</a> </a>
</ng-container> </ng-container>
</div> </div>
</div> </div>
</div> </div>
<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>
<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)">
<p class="uk-alert uk-alert-warning" uk-alert>For more results please try a new, more specific query</p> <p class="uk-alert uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>