1. Simple & Advanced Search pages:

in sorting functionality for Date, add ascending (oldest) and descending (newest) options.
        remove margin between paging and search results.
        show and hide sorting and results per page functionalities (like paging) according to results and loading.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@54075 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2018-12-03 12:32:33 +00:00
parent b15b0028a7
commit ca1e2b49cb
14 changed files with 31 additions and 17 deletions

View File

@ -88,7 +88,7 @@ export class AdvancedSearchDatasetsComponent {
this.searchUtils.size = 10; this.searchUtils.size = 10;
} }
this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:''; this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:'';
if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending") { if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending" && this.searchUtils.sortBy != "resultdateofacceptance,ascending") {
this.searchUtils.sortBy = ""; this.searchUtils.sortBy = "";
} }

View File

@ -88,7 +88,7 @@ export class AdvancedSearchOrpsComponent {
this.searchUtils.size = 10; this.searchUtils.size = 10;
} }
this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:''; this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:'';
if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending") { if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending" && this.searchUtils.sortBy != "resultdateofacceptance,ascending") {
this.searchUtils.sortBy = ""; this.searchUtils.sortBy = "";
} }

View File

@ -93,7 +93,7 @@ export class AdvancedSearchPublicationsComponent {
this.searchUtils.size = 10; this.searchUtils.size = 10;
} }
this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:''; this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:'';
if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending") { if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending" && this.searchUtils.sortBy != "resultdateofacceptance,ascending") {
this.searchUtils.sortBy = ""; this.searchUtils.sortBy = "";
} }

View File

@ -89,7 +89,7 @@ export class AdvancedSearchSoftwareComponent {
this.searchUtils.size = 10; this.searchUtils.size = 10;
} }
this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:''; this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:'';
if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending") { if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending" && this.searchUtils.sortBy != "resultdateofacceptance,ascending") {
this.searchUtils.sortBy = ""; this.searchUtils.sortBy = "";
} }

View File

@ -41,7 +41,8 @@
<div class="uk-width-expand@m uk-with-1-1@s"> <div class="uk-width-expand@m uk-with-1-1@s">
<div *ngIf="openaireLink"> <a class="uk-margin-top uk-button uk-button-text" [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div> <div *ngIf="openaireLink"> <a class="uk-margin-top uk-button uk-button-text" [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div>
<div class="uk-align-center uk-margin-remove-bottom"> <div class="uk-align-center uk-margin-remove-bottom">
<div class="uk-grid uk-margin-top uk-margin-bottom"> <div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"
class="uk-grid uk-margin-top uk-margin-bottom">
<search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page> <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
<search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting> <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>
</div> </div>
@ -50,7 +51,7 @@
<search-download class="uk-width-1-1@s uk-hidden@m" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" ></search-download> <search-download class="uk-width-1-1@s uk-hidden@m" [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults" ></search-download>
<div *ngIf="(searchUtils.page <= pagingLimit)" class="uk-margin-top"> <div *ngIf="(searchUtils.page <= pagingLimit)" class="">
<search-result [results]="results" <search-result [results]="results"
[status]=searchUtils.status [status]=searchUtils.status
[type]="entityType" [type]="entityType"
@ -63,7 +64,8 @@
</div> </div>
<div class="uk-align-center uk-margin-remove-bottom"> <div class="uk-align-center uk-margin-remove-bottom">
<div class="uk-grid uk-margin-top uk-margin-bottom"> <div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"
class="uk-grid uk-margin-top uk-margin-bottom">
<search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page> <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
<search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting> <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(sortBy)]="searchUtils.sortBy" (sortByChange)="sortByChanged($event)"></search-sorting>
</div> </div>

View File

@ -12,6 +12,7 @@ import {SearchFields, FieldDetails} from '../../utils/properties/searchFields'
import {SearchUtilsClass} from './searchUtils.class'; import {SearchUtilsClass} from './searchUtils.class';
import {ModalLoading} from '../../utils/modal/loading.component'; import {ModalLoading} from '../../utils/modal/loading.component';
import {StringUtils, Dates} from '../../utils/string-utils.class'; import {StringUtils, Dates} from '../../utils/string-utils.class';
import {ErrorCodes} from '../../utils/properties/errorCodes';
import {PiwikService} from '../../utils/piwik/piwik.service'; import {PiwikService} from '../../utils/piwik/piwik.service';
import {EnvProperties} from '../../utils/properties/env-properties'; import {EnvProperties} from '../../utils/properties/env-properties';
@ -54,6 +55,8 @@ export class AdvancedSearchPageComponent {
public resultsPerPage: number = 0; public resultsPerPage: number = 0;
isPiwikEnabled = false; isPiwikEnabled = false;
properties:EnvProperties; properties:EnvProperties;
public errorCodes:ErrorCodes = new ErrorCodes();
url = null; url = null;
@Output() queryChange = new EventEmitter(); @Output() queryChange = new EventEmitter();
constructor (private route: ActivatedRoute, constructor (private route: ActivatedRoute,

View File

@ -89,9 +89,13 @@
</div> </div>
</div> </div>
<!-- uk-sticky="offset: 120" -->
<!-- <div *ngIf="showRefine" class="uk-width-1-5 uk-margin-top helper-left-right search-filters uk-visible@m"> -->
<div class="uk-grid uk-width-1-1"> <div class="uk-grid uk-width-1-1">
<div *ngIf="showRefine" class="uk-margin-top helper-left-right search-filters uk-visible@m"> <div *ngIf="showRefine" class="uk-margin-top helper-left-right search-filters uk-visible@m">
<!-- top: #container-1; bottom: #true; -->
<!-- <div id="container-1" style="z-index: -1;" uk-sticky="top: #container-1; offset: 120; "> -->
<helper position="left" before="true"></helper> <helper position="left" before="true"></helper>
<div class="uk-width-1-1 uk-margin-small-bottom "> <div class="uk-width-1-1 uk-margin-small-bottom ">
@ -138,13 +142,15 @@
<search-filter *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" [(connectCommunityId)]=connectCommunityId></search-filter> <search-filter *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" [(connectCommunityId)]=connectCommunityId></search-filter>
<helper position="left" before="false"></helper> <helper position="left" before="false"></helper>
</div> </div>
<!-- </div> -->
<helper *ngIf="!showRefine" class="uk-margin-top helper-left-right uk-visible@m" position="left"></helper> <helper *ngIf="!showRefine" class="uk-margin-top helper-left-right uk-visible@m" position="left"></helper>
<div class="uk-width-expand@m uk-width-1-1@s uk-first-column"> <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
<!-- <div [class]="(showRefine)?'uk-width-expand@m uk-first-column':''" > --> <!-- <div [class]="(showRefine)?'uk-width-expand@m uk-first-column':''" > -->
<div *ngIf="openaireLink"> <a class="uk-margin-top uk-button uk-button-text" [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div> <div *ngIf="openaireLink"> <a class="uk-margin-top uk-button uk-button-text" [href]=openaireLink target="_blank" >Results in OpenAIRE</a></div>
<div class="uk-align-center uk-margin-remove-bottom"> <div class="uk-align-center uk-margin-remove-bottom">
<div class="uk-grid uk-margin-top uk-margin-bottom"> <div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"
class="uk-grid uk-margin-top uk-margin-bottom">
<!-- <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(searchUtils)] = "searchUtils" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-results-per-page> --> <!-- <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(searchUtils)] = "searchUtils" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-results-per-page> -->
<!-- <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(searchUtils)] = "searchUtils" [(sortBy)]="sortBy" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-sorting> --> <!-- <search-sorting class="uk-width-1-2@m uk-width-1-1" *ngIf="sort" [(searchUtils)] = "searchUtils" [(sortBy)]="sortBy" [(baseUrl)] = "baseUrl" [(parameterNames)] = "parameterNames" [(parameterValues)] = "parameterValues" ></search-sorting> -->
<search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page> <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
@ -164,7 +170,7 @@
<search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download> <search-download [type]="csvPath" [csvParams]="csvParams" [totalResults]="searchUtils.totalResults"></search-download>
</div> --> </div> -->
<div *ngIf="(searchUtils.page <= pagingLimit)" class="uk-margin-top"> <div *ngIf="(searchUtils.page <= pagingLimit)" class="">
<search-result *ngIf="!tableView" <search-result *ngIf="!tableView"
[results]="results" [results]="results"
[status]="searchUtils.status" [status]="searchUtils.status"
@ -178,7 +184,8 @@
</div> </div>
<div class="uk-align-center uk-margin-remove-bottom"> <div class="uk-align-center uk-margin-remove-bottom">
<div class="uk-grid uk-margin-top uk-margin-bottom"> <div *ngIf="(results && searchUtils.totalResults > 0) || (!loadPaging && oldTotalResults > 0 && searchUtils.status == errorCodes.LOADING)"
class="uk-grid uk-margin-top uk-margin-bottom">
<search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page> <search-results-per-page class="uk-width-1-2@m uk-width-1-1" [(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"></search-results-per-page>
<!-- <search-results-per-page class="uk-width-1-2@m uk-width-1-1"></search-results-per-page> --> <!-- <search-results-per-page class="uk-width-1-2@m uk-width-1-1"></search-results-per-page> -->
<!--[(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"--> <!--[(size)]="searchUtils.size" (sizeChange)="sizeChanged($event)"-->

View File

@ -70,6 +70,7 @@ export class SearchPageComponent {
public resultsPerPage: number = 0; public resultsPerPage: number = 0;
public isPiwikEnabled; public isPiwikEnabled;
properties:EnvProperties; properties:EnvProperties;
public errorCodes:ErrorCodes = new ErrorCodes();
constructor (private route: ActivatedRoute, constructor (private route: ActivatedRoute,
private location: Location, private location: Location,

View File

@ -5,7 +5,7 @@ import {ErrorCodes} from '../../utils/properties/errorCodes';
@Component({ @Component({
selector: 'search-paging', selector: 'search-paging',
template: ` template: `
<div class= "searchPaging uk-panel uk-margin-top uk-margin-bottom uk-grid"> <div class= "searchPaging uk-panel uk-margin-top uk-grid">
<div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > 0"> <div class="uk-width-1-1@s uk-width-1-2@m" *ngIf="results && searchUtils.totalResults > 0">
{{searchUtils.totalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(searchUtils.totalResults)|number)}} {{searchUtils.totalResults|number}} {{type}}, page {{searchUtils.page | number}} of {{(totalPages(searchUtils.totalResults)|number)}}
</div> </div>

View File

@ -28,7 +28,8 @@ import {RouterHelper} from '../../utils/routerHelper.class';
<select class="uk-select uk-width-2-3@m uk-width-auto" id="form-horizontal-select" name="select_results_per_page" <select class="uk-select uk-width-2-3@m uk-width-auto" id="form-horizontal-select" name="select_results_per_page"
[(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"> [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">
<option value="">Relevance</option> <option value="">Relevance</option>
<option value="resultdateofacceptance,descending">Date</option> <option value="resultdateofacceptance,descending">Date (newest)</option>
<option value="resultdateofacceptance,ascending">Date (oldest)</option>
</select> </select>
</span> </span>

View File

@ -101,7 +101,7 @@ properties: EnvProperties;
this.searchUtils.size = 10; this.searchUtils.size = 10;
} }
this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:''; this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:'';
if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending") { if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending" && this.searchUtils.sortBy != "resultdateofacceptance,ascending") {
this.searchUtils.sortBy = ""; this.searchUtils.sortBy = "";
} }

View File

@ -98,7 +98,7 @@ properties: EnvProperties;
this.searchUtils.size = 10; this.searchUtils.size = 10;
} }
this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:''; this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:'';
if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending") { if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending" && this.searchUtils.sortBy != "resultdateofacceptance,ascending") {
this.searchUtils.sortBy = ""; this.searchUtils.sortBy = "";
} }

View File

@ -110,7 +110,7 @@ properties: EnvProperties;
this.searchUtils.size = 10; this.searchUtils.size = 10;
} }
this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:''; this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:'';
if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending") { if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending" && this.searchUtils.sortBy != "resultdateofacceptance,ascending") {
this.searchUtils.sortBy = ""; this.searchUtils.sortBy = "";
} }

View File

@ -100,7 +100,7 @@ properties: EnvProperties;
this.searchUtils.size = 10; this.searchUtils.size = 10;
} }
this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:''; this.searchUtils.sortBy = (params['sortBy'])?params['sortBy']:'';
if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending") { if(this.searchUtils.sortBy && this.searchUtils.sortBy != "resultdateofacceptance,descending" && this.searchUtils.sortBy != "resultdateofacceptance,ascending") {
this.searchUtils.sortBy = ""; this.searchUtils.sortBy = "";
} }