From 8bdec079b8f115b99e5b2132f5266f252f883a78 Mon Sep 17 00:00:00 2001 From: "argiro.kokogiannaki" Date: Thu, 19 Jul 2018 10:52:29 +0000 Subject: [PATCH] Search Pages: change Filter title on the left, in filters view more modal add keyword filter and sort functionalities, changes in the selected filters under the form git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@52770 d315682c-612b-4755-9ff5-7f18f6832af3 --- .../advancedSearchForm.component.html | 6 +- .../advancedSearchPage.component.html | 2 +- .../searchUtils/searchFilter.component.html | 60 ++++---- .../searchUtils/searchFilter.component.ts | 130 ++++++++++++------ .../searchUtils/searchPage.component.html | 38 ++--- .../searchUtils/searchPage.component.ts | 23 ++-- 6 files changed, 150 insertions(+), 109 deletions(-) diff --git a/searchPages/searchUtils/advancedSearchForm.component.html b/searchPages/searchUtils/advancedSearchForm.component.html index 43091bd4..f1a67447 100644 --- a/searchPages/searchUtils/advancedSearchForm.component.html +++ b/searchPages/searchUtils/advancedSearchForm.component.html @@ -44,8 +44,10 @@ - - + + + + diff --git a/searchPages/searchUtils/advancedSearchPage.component.html b/searchPages/searchUtils/advancedSearchPage.component.html index 40dcec6c..52703266 100644 --- a/searchPages/searchUtils/advancedSearchPage.component.html +++ b/searchPages/searchUtils/advancedSearchPage.component.html @@ -6,7 +6,7 @@ {{pageTitle}}
- Simple search +
{{_formatName(value)}}
({{value.number|number}}) -
- -
-
+
+
-
{{_formatName(value)}}
({{value.number|number}}) -
- - - - -
View more - + View more @@ -44,29 +28,37 @@
-
+
{{filter.title}}
- +
Showing top {{filter.values.length}} values.
+
+ + +
-
- -
-
-
- -
+
+ +
+ +
+
+ {{_formatName(value)}}
({{value.number|number}}) - -
+
+
diff --git a/searchPages/searchUtils/searchFilter.component.ts b/searchPages/searchUtils/searchFilter.component.ts index 47233dfa..63601c86 100644 --- a/searchPages/searchUtils/searchFilter.component.ts +++ b/searchPages/searchUtils/searchFilter.component.ts @@ -22,17 +22,20 @@ export class SearchFilterComponent { @Output() toggleModal = new EventEmitter(); @Output() modalChange = new EventEmitter(); + @Output() onFilterChange = new EventEmitter(); + keyword = ""; + sortBy = "num"; public isOpen:boolean=false; - filterModalChange() { - console.info("Modal Changed"); - this.modalChange.emit({ - value: true - }); - //this.close(); - } + // filterModalChange() { + // console.info("Modal Changed"); + // this.modalChange.emit({ + // value: true + // }); + // //this.close(); + // } constructor () { } @@ -46,13 +49,22 @@ export class SearchFilterComponent { private _formatName(value){ return value.name;//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name) } - toggleShowAll(){ - this.showAll = !this.showAll; - if(this.showAll == false) { - this.reorderFilterValues(); - } - } + // toggleShowAll(){ + // this.showAll = !this.showAll; + // if(this.showAll == false) { + // this.reorderFilterValues(); + // } + // } + + filterKeywords(value){ + if(this.keyword.length > 0){ + if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){ + return false; + } + } + return true; + } filterChange(selected:boolean){ console.info("filter change: "+selected); if(selected){ @@ -62,8 +74,11 @@ export class SearchFilterComponent { this.filter.countSelectedValues--; // this.reorderFilterValues(); } + this.onFilterChange.emit({ + value: this.filter + }); } - getSelectedValues(filter):any{ + getSelectedValues(filter, sortBy:string = "num"):any{ var selected = []; if(filter.countSelectedValues >0){ for (var i=0; i < filter.values.length; i++){ @@ -72,10 +87,24 @@ export class SearchFilterComponent { } } } + if(sortBy == "name"){ + + selected.sort((n1,n2)=> { + if (n1.name > n2.name) { + return 1; + } + + if (n1.name < n2.name) { + return -1; + } + + return 0; + }); + } return selected; } - getNotSelectedValues(filter):any{ + getNotSelectedValues(filter, sortBy):any{ var notSselected = []; if(filter.countSelectedValues >0){ for (var i=0; i < filter.values.length; i++){ @@ -86,19 +115,34 @@ export class SearchFilterComponent { }else { notSselected = filter.values; } + + if(sortBy == "name"){ + + notSselected.sort((n1,n2)=> { + if (n1.name > n2.name) { + return 1; + } + + if (n1.name < n2.name) { + return -1; + } + + return 0; + }); + } return notSselected; } - reorderFilterValues() { - for(let value of this.filter.values) { - if(value.selected) { - let index: number = this.filter.values.indexOf(value); - let selectedValue:Value = this.filter.values[index]; - - this.filter.values.splice(index, 1); - this.filter.values.splice(0, 0, selectedValue); - } - } - } + // reorderFilterValues() { + // for(let value of this.filter.values) { + // if(value.selected) { + // let index: number = this.filter.values.indexOf(value); + // let selectedValue:Value = this.filter.values[index]; + // + // this.filter.values.splice(index, 1); + // this.filter.values.splice(0, 0, selectedValue); + // } + // } + // } // sliceSelected() { // let values: Value[] = []; // @@ -113,11 +157,11 @@ export class SearchFilterComponent { // } - toggle() { - this.toggleModal.emit({ - value: this.filter - }); - } + // toggle() { + // this.toggleModal.emit({ + // value: this.filter + // }); + // } open() { @@ -128,17 +172,17 @@ export class SearchFilterComponent { this.isOpen = false; } - filterChange2(selected:boolean){ - - console.info("filter change2"); - if(selected){ - this.filter.countSelectedValues++; - // this.reorderFilterValues(); - }else{ - this.filter.countSelectedValues--; - // this.reorderFilterValues(); - } - this.close(); - } + // filterChange2(selected:boolean){ + // + // console.info("filter change2"); + // if(selected){ + // this.filter.countSelectedValues++; + // // this.reorderFilterValues(); + // }else{ + // this.filter.countSelectedValues--; + // // this.reorderFilterValues(); + // } + // this.close(); + // } } diff --git a/searchPages/searchUtils/searchPage.component.html b/searchPages/searchUtils/searchPage.component.html index 1b86622e..59df6a73 100644 --- a/searchPages/searchUtils/searchPage.component.html +++ b/searchPages/searchUtils/searchPage.component.html @@ -4,38 +4,42 @@
+
@@ -51,7 +55,7 @@
Filter By:
- +
@@ -62,7 +66,7 @@
- +
diff --git a/searchPages/searchUtils/searchPage.component.ts b/searchPages/searchUtils/searchPage.component.ts index 3121f4a8..dafe2143 100644 --- a/searchPages/searchUtils/searchPage.component.ts +++ b/searchPages/searchUtils/searchPage.component.ts @@ -57,12 +57,12 @@ export class SearchPageComponent { private queryParameters: Map = new Map(); private baseURLWithParameters:string = ''; private sub: any; piwiksub: any; - public countFilters= 0; + // public countFilters= 0; public parameterNames:string[] =[]; public parameterValues:string[] =[]; public showUnknownFilters:boolean = false; // when a filter exists in query but has no results, so no filters returned from the query //@ViewChild (SearchFilterModalComponent) searchFilterModal : SearchFilterModalComponent ; - public currentFilter: Filter; + // public currentFilter: Filter; public csvLimit: number = 0; public pagingLimit: number = 0; public resultsPerPage: number = 0; @@ -111,10 +111,10 @@ export class SearchPageComponent { this.piwiksub.unsubscribe(); } } - toggleModal($event) { - this.currentFilter = $event.value; - //this.searchFilterModal.open(); - } + // toggleModal($event) { + // this.currentFilter = $event.value; + // //this.searchFilterModal.open(); + // } updateDescription(description:string) { this._meta.updateTag({content:description},"name='description'"); @@ -444,23 +444,22 @@ export class SearchPageComponent { return (doiQuery.length > 0 ? doiQuery:keywordQuery) + allFqs; } - public isFiltered(){ - var filtered=false; + public countFilters():number{ + var filters=0; this.showUnknownFilters = false; for (let filter of this.filters){ if(filter.countSelectedValues > 0){ - filtered = true; - break; + filters+=filter.countSelectedValues; } } if(this.searchUtils.keyword.length > 0 ){ - filtered = true; + filters++; } var errorCodes:ErrorCodes = new ErrorCodes(); if(this.queryParameters.keys() && this.searchUtils.totalResults == 0 && this.searchUtils.status !=errorCodes.LOADING ){ this.showUnknownFilters = true; } - return filtered; + return filters; } private clearKeywords(){ if(this.searchUtils.keyword.length > 0 ){