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

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
This commit is contained in:
argiro.kokogiannaki 2018-07-19 10:52:29 +00:00
parent eef4be71f2
commit 8bdec079b8
6 changed files with 150 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
searchPages/searchUtils/advancedSearchForm.component.html
View File

@ -44,8 +44,10 @@
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="minus" ratio="1"><rect height="3" width="18" y="9" x="1"></rect></svg></span> <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="minus" ratio="1"><rect height="3" width="18" y="9" x="1"></rect></svg></span>
</span> </span>
</td> </td>
<td *ngIf="i == selectedFields.length-1 " class=" "><span type="button" class="uk-icon-button" (click)="addField()"> <td *ngIf="i == selectedFields.length-1 " class=" "><span type="button" class="uk-icon-button icon-button-small" (click)="addField()">
<span><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="3" height="17"></rect><rect x="1" y="9" width="17" height="3"></rect></svg></span> <span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="0.8"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg>
</span>
</span></td> </span></td>
</tr> </tr>
</table> </table>

2
searchPages/searchUtils/advancedSearchPage.component.html
View File

@ -6,7 +6,7 @@
{{pageTitle}} {{pageTitle}}
</div> </div>
<div> <div>
<a *ngIf = "simpleSearchLink && simpleSearchLink.length > 0" routerLinkActive="router-link-active" [routerLink]=simpleSearchLink <a *ngIf = "simpleSearchLink && simpleSearchLink.length > 0" routerLinkActive="router-link-active" [routerLink]=simpleSearchLink style="z-index:1;"
[class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted uk-button uk-button-text uk-text-secondary uk-margin-right uk-margin-top':'uk-float-right uk-button uk-button-text uk-text-secondary uk-margin-right uk-margin-top'" >Simple search [class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted uk-button uk-button-text uk-text-secondary uk-margin-right uk-margin-top':'uk-float-right uk-button uk-button-text uk-text-secondary uk-margin-right uk-margin-top'" >Simple search
<!--span class="uk-icon"> <!--span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg> <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>

60
searchPages/searchUtils/searchFilter.component.html
View File

@ -1,42 +1,26 @@
<ul *ngIf= "filter.values.length >0" class="uk-list"> <ul *ngIf= "filter.values.length >0" class="uk-list">
<li class="uk-open"> <li class="uk-open">
<h5 class="uk-margin-bottom-remove">{{_formatTitle(filter.title,filter.values.length)}} <h5 class="uk-margin-bottom-remove sideInfoTitle">{{_formatTitle(filter.title,filter.values.length)}}
</h5> </h5>
<div aria-expanded="false"> <div aria-expanded="false">
<div class="searchFilterBoxValues "> <div class="searchFilterBoxValues ">
<div *ngFor = "let value of getSelectedValues(filter)" class = "uk-animation-fade filterItem"> <div *ngFor = "let value of getSelectedValues(filter,'num')" class = "uk-animation-fade filterItem">
<!--span *ngIf="!connectCommunityId || !(connectCommunityId && connectCommunityId == value.id)"-->
<span class="filterName"><div title = "{{value.name}}"> <span class="filterName"><div title = "{{value.name}}">
<input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" /> <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
{{_formatName(value)}} </div></span> {{_formatName(value)}} </div></span>
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span> <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
<!--/span-->
</div> </div>
<!--div class="uk-grid-divider uk-margin-remove"></div--> <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small">
<hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0 " class="uk-grid-divider uk-margin-remove"> <div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:5-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem">
<div *ngFor = "let value of getNotSelectedValues(filter).slice(0,(!addShowMore?getNotSelectedValues(filter).length:5-getSelectedValues(filter).length))" class = "uk-animation-fade filterItem">
<!--span *ngIf="!connectCommunityId || !(connectCommunityId && connectCommunityId == value.id)"-->
<span class="filterName"><div title = "{{value.name}}"> <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" /> <span class="filterName"><div title = "{{value.name}}"> <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
{{_formatName(value)}} </div></span> {{_formatName(value)}} </div></span>
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span> <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
<!--/span-->
</div> </div>
<!--a *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5" (click)="toggle()" [class]="(isDisabled)?'uk-disabled uk-link-muted':''">Show More</a--> <a *ngIf=" addShowMore && (filter.values.length) > 5" (click)="open()"
[class]="(isDisabled)?'uk-disabled uk-link-muted uk-button uk-button-text uk-text-secondary':'uk-button uk-button-text uk-text-secondary'">View more
<!--button *ngIf="(getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5"
class="uk-button uk-button-link" (click)="toggle()" [disabled]="isDisabled">
Show More
</button-->
<a *ngIf=" addShowMore && (getSelectedValues(filter).length + getNotSelectedValues(filter).length) > 5" (click)="open()" [class]="(isDisabled)?'uk-disabled uk-link-muted uk-button uk-button-text uk-text-secondary':'uk-button uk-button-text uk-text-secondary'">View more
<!--span class="uk-icon">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="triangle-right" ratio="1"><polygon points="8 5 13 10 8 15"></polygon></svg>
</span-->
</a> </a>
@ -44,29 +28,37 @@
<div class="filtersModal uk-modal-dialog uk-small-1-2 uk-width-medium-1-3 uk-width-1-3 uk-padding-small uk-padding-remove-top uk-padding-remove-horizontal"> <div class="filtersModal uk-modal-dialog uk-small-1-2 uk-width-medium-1-3 uk-width-1-3 uk-padding-small uk-padding-remove-top uk-padding-remove-horizontal">
<button type="button" class="uk-modal-close-default" uk-close (click)="close()"></button> <button type="button" class="uk-modal-close-default" uk-close (click)="close()"></button>
<h5 class="uk-margin-remove uk-padding uk-padding-remove-bottom"> <h5 class="uk-margin-remove uk-padding uk-padding-remove-bottom uk-text-center">
{{filter.title}} {{filter.title}}
</h5> </h5>
<span *ngIf="filter.values.length >= 99" class="uk-article-meta uk-text-center">Showing top {{filter.values.length}} values. </span>
<div *ngIf="filter.values.length >= 99" class="uk-alert uk-alert-primary uk-text-center uk-margin-right uk-margin-left">Showing top {{filter.values.length}} values. </div>
<div class="uk-grid uk-margin-left uk-margin-right">
<input class="uk-input uk-margin-small-bottom uk-width-1-2 " name="filter-keyword" placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">
<select [(ngModel)]="sortBy" class="uk-select uk-margin-small-bottom uk-width-1-2 uk-padding-remove" name="select_order" (ngModelChange)="sortByChanged = true;" >
<option value="num" >Sort by results number</option>
<option value="name" >Sort by name</option>
</select>
</div>
<div class="uk-modal-body uk-overflow-auto uk-height-medium uk-padding-remove <div class="uk-modal-body uk-overflow-auto uk-height-medium uk-padding-remove
uk-margin-medium-left uk-margin-medium-right uk-margin-small-top uk-margin-bottom"> uk-margin-medium-left uk-margin-medium-right uk-margin-small-top uk-margin-bottom">
<div *ngFor = "let value of getSelectedValues(filter)" class = "uk-animation-fade filterItem"> <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">
<!--span *ngIf="!connectCommunityId || !(connectCommunityId && connectCommunityId == value.id)"==> <div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem">
<span class="filterName"><div title = "{{value.name}}"> <span class="filterName"><div title = "{{value.name}}">
<input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" /> <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
{{_formatName(value)}} </div></span> {{_formatName(value)}} </div></span>
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number}})</span> <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number}})</span>
<!--/span--> </div>
</div> </ng-container>
<hr *ngIf="getSelectedValues(filter).length > 0 && getNotSelectedValues(filter).length > 0" class="uk-grid-divider uk-margin-remove"> <hr *ngIf="filter.countSelectedValues > 0 && (filter.values.length-filter.countSelectedValues ) > 0 " class="uk-grid-divider uk-margin-small">
<div *ngFor = "let value of getNotSelectedValues(filter)" class = "uk-animation-fade filterItem"> <ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">
<!--span *ngIf="!connectCommunityId || !(connectCommunityId && connectCommunityId == value.id)"--> <div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem">
<span class="filterName"><div title = "{{value.name}}"> <input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" /> <span class="filterName"><div title = "{{value.name}}">
<input [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="close(); filterChange(value.selected)" />
{{_formatName(value)}} </div></span> {{_formatName(value)}} </div></span>
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span> <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
<!--/span--> </div>
</div> </ng-container>
</div> </div>
</div> </div>
</div> </div>

130
searchPages/searchUtils/searchFilter.component.ts
View File

@ -22,17 +22,20 @@ export class SearchFilterComponent {
@Output() toggleModal = new EventEmitter(); @Output() toggleModal = new EventEmitter();
@Output() modalChange = new EventEmitter(); @Output() modalChange = new EventEmitter();
@Output() onFilterChange = new EventEmitter();
keyword = "";
sortBy = "num";
public isOpen:boolean=false; public isOpen:boolean=false;
filterModalChange() { // filterModalChange() {
console.info("Modal Changed"); // console.info("Modal Changed");
this.modalChange.emit({ // this.modalChange.emit({
value: true // value: true
}); // });
//this.close(); // //this.close();
} // }
constructor () { constructor () {
} }
@ -46,13 +49,22 @@ export class SearchFilterComponent {
private _formatName(value){ 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) return value.name;//(((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
} }
toggleShowAll(){ // toggleShowAll(){
this.showAll = !this.showAll; // this.showAll = !this.showAll;
if(this.showAll == false) { // if(this.showAll == false) {
this.reorderFilterValues(); // this.reorderFilterValues();
} // }
} // }
filterKeywords(value){
if(this.keyword.length > 0){
if(value.toLowerCase().indexOf(this.keyword.toLowerCase()) ==-1){
return false;
}
}
return true;
}
filterChange(selected:boolean){ filterChange(selected:boolean){
console.info("filter change: "+selected); console.info("filter change: "+selected);
if(selected){ if(selected){
@ -62,8 +74,11 @@ export class SearchFilterComponent {
this.filter.countSelectedValues--; this.filter.countSelectedValues--;
// this.reorderFilterValues(); // this.reorderFilterValues();
} }
this.onFilterChange.emit({
value: this.filter
});
} }
getSelectedValues(filter):any{ getSelectedValues(filter, sortBy:string = "num"):any{
var selected = []; var selected = [];
if(filter.countSelectedValues >0){ if(filter.countSelectedValues >0){
for (var i=0; i < filter.values.length; i++){ 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; return selected;
} }
getNotSelectedValues(filter):any{ getNotSelectedValues(filter, sortBy):any{
var notSselected = []; var notSselected = [];
if(filter.countSelectedValues >0){ if(filter.countSelectedValues >0){
for (var i=0; i < filter.values.length; i++){ for (var i=0; i < filter.values.length; i++){
@ -86,19 +115,34 @@ export class SearchFilterComponent {
}else { }else {
notSselected = filter.values; 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; return notSselected;
} }
reorderFilterValues() { // reorderFilterValues() {
for(let value of this.filter.values) { // for(let value of this.filter.values) {
if(value.selected) { // if(value.selected) {
let index: number = this.filter.values.indexOf(value); // let index: number = this.filter.values.indexOf(value);
let selectedValue:Value = this.filter.values[index]; // let selectedValue:Value = this.filter.values[index];
//
this.filter.values.splice(index, 1); // this.filter.values.splice(index, 1);
this.filter.values.splice(0, 0, selectedValue); // this.filter.values.splice(0, 0, selectedValue);
} // }
} // }
} // }
// sliceSelected() { // sliceSelected() {
// let values: Value[] = []; // let values: Value[] = [];
// //
@ -113,11 +157,11 @@ export class SearchFilterComponent {
// } // }
toggle() { // toggle() {
this.toggleModal.emit({ // this.toggleModal.emit({
value: this.filter // value: this.filter
}); // });
} // }
open() { open() {
@ -128,17 +172,17 @@ export class SearchFilterComponent {
this.isOpen = false; this.isOpen = false;
} }
filterChange2(selected:boolean){ // filterChange2(selected:boolean){
//
console.info("filter change2"); // console.info("filter change2");
if(selected){ // if(selected){
this.filter.countSelectedValues++; // this.filter.countSelectedValues++;
// this.reorderFilterValues(); // // this.reorderFilterValues();
}else{ // }else{
this.filter.countSelectedValues--; // this.filter.countSelectedValues--;
// this.reorderFilterValues(); // // this.reorderFilterValues();
} // }
this.close(); // this.close();
} // }
} }

38
searchPages/searchUtils/searchPage.component.html
View File

@ -4,38 +4,42 @@
<div class=""> <div class="">
<div [class]="'uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle uk- light '+searchFormClass" > <div [class]="'uk-background-norepeat uk-background-cover uk-section uk-flex uk-flex-middle uk- light '+searchFormClass" >
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<div class="uk-width-1-1"> <div class="uk-width-1-1">
<search-form [isDisabled]="disableForms" [(keyword)]="searchUtils.keyword" (keywordChange)="keywordChanged($event)" [placeholderText]="formPlaceholderText"></search-form> <search-form [isDisabled]="disableForms" [(keyword)]="searchUtils.keyword" (keywordChange)="keywordChanged($event)" [placeholderText]="formPlaceholderText"></search-form>
</div> </div>
<div class="uk-width-1-1 "> <div class="uk-width-1-1 ">
<!--link to advanced search -->
<a *ngIf = "advancedSearchLink && advancedSearchLink.length > 0" routerLinkActive="router-link-active" [class]="(disableForms)?'uk-float-right uk-disabled uk-link-muted uk-light ':'uk-float-right uk-light'" [routerLink]=advancedSearchLink [queryParams]=advancedSearchParameters >More search options <span class="uk-icon"> <div *ngIf="countFilters()>0" class = "uk-container uk-width-1-2@m uk-width-1-2@s uk-align-center uk-text-center uk-text-small whiteText uk-padding-small">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg> <a *ngIf="countFilters()>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+' uk-button uk-button-default uk-margin-small-right'">
</span> Clear All
</a> </a>
<div *ngIf="isFiltered()" class = "uk-container uk-width-1-2@m uk-width-1-2@s uk-align-center uk-text-center uk-text-small"> <span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span [innerHtml]="searchUtils.keyword"></span>
<span *ngIf = "searchUtils.keyword.length > 0">Keywords: <span [innerHtml]="searchUtils.keyword"></span><a (click) = "clearKeywords() " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable " aria-hidden="true"><span class="uk-icon"> <a (click) = "clearKeywords() " title="Remove keywords" [class]="(disableForms)?'uk-icon-button icon-button-small uk-margin-small-right uk-disabled':'uk-icon-button icon-button-small uk-margin-small-right'"><span class=" clickable " aria-hidden="true"><span class="uk-icon ">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg> <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
</span></span></a> </span></span></a>
</span> </span>
<span *ngFor="let filter of filters " > <span *ngFor="let filter of filters " >
<span *ngIf = "filter.countSelectedValues > 0"> {{filter.title}}: <span *ngIf = "filter.countSelectedValues > 0"> <span class="uk-text-bold">{{filter.title}}:</span>
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; " ><span [innerHtml]="(value.name.length > 25)?value.name.substring(0,25)+'...':value.name" title="value.name"></span><a (click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button uk-disabled':'uk-icon-button'"><span class=" clickable" aria-hidden="true"><span class="uk-icon"> <span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; " ><span [innerHtml]="(value.name.length > 25)?value.name.substring(0,25)+'...':value.name" [title]="value.name"></span>
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="1"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg> <a [title]="'Remove '+value.name"(click) = "removeFilter(value, filter) " [class]="(disableForms)?'uk-icon-button icon-button-small uk-margin-small-right uk-disabled':'uk-icon-button icon-button-small uk-margin-small-right'"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
<svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path></svg>
</span></span></a> </span></span></a>
<span *ngIf="!end">, </span> <!--span *ngIf="!end" class=" uk-margin-small-right ">, </span-->
</span> </span>
</span> </span>
</span> </span>
<a (click)="clearFilters()" [class]="(disableForms)?'uk-disabled uk-link-muted':''">
Clear All
</a>
</div> </div>
<div *ngIf= "showUnknownFilters" class = " uk-text-center "> <div *ngIf= "showUnknownFilters" class = " uk-text-center ">
<a (click) = "clearFilters() " >Try new Query</a> <a (click) = "clearFilters() " >Try new Query</a>
</div> </div>
<!--link to advanced search -->
<a *ngIf = "advancedSearchLink && advancedSearchLink.length > 0" routerLinkActive="router-link-active" [class]="((disableForms)?'uk-float-right uk-disabled uk-link-muted uk-light ':'uk-float-right uk-light') +' whiteText uk-padding-small uk-button-text'" [routerLink]=advancedSearchLink [queryParams]=advancedSearchParameters >
<span class="uk-padding-small">More search options</span>
</a>
</div> </div>
</div> </div>
@ -51,7 +55,7 @@
<div class="uk-offcanvas-bar"> <div class="uk-offcanvas-bar">
<button class="uk-offcanvas-close" type="button" uk-close></button> <button class="uk-offcanvas-close" type="button" uk-close></button>
<div class="uk-text-large">Filter By:</div> <div class="uk-text-large">Filter By:</div>
<search-filter *ngFor="let filter of filters " [addShowMore]=false [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($event)" [(connectCommunityId)]=connectCommunityId></search-filter> <search-filter *ngFor="let filter of filters " [addShowMore]=false [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (onFilterChange)="filterChanged($event)" [(connectCommunityId)]=connectCommunityId></search-filter>
</div> </div>
</div> </div>
@ -62,7 +66,7 @@
<div class="uk-grid uk-width-1-1"> <div class="uk-grid uk-width-1-1">
<div *ngIf="showRefine" class="helper-left-right search-filters uk-visible@m"> <div *ngIf="showRefine" class="helper-left-right search-filters uk-visible@m">
<helper position="left" before="true"></helper> <helper position="left" before="true"></helper>
<search-filter *ngFor="let filter of filters " [isDisabled]="disableForms" [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)" (toggleModal)="toggleModal($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>
<helper *ngIf="!showRefine" class="helper-left-right uk-visible@m" position="left"></helper> <helper *ngIf="!showRefine" class="helper-left-right uk-visible@m" position="left"></helper>

23
searchPages/searchUtils/searchPage.component.ts
View File

@ -57,12 +57,12 @@ export class SearchPageComponent {
private queryParameters: Map<string, string> = new Map<string,string>(); private queryParameters: Map<string, string> = new Map<string,string>();
private baseURLWithParameters:string = ''; private baseURLWithParameters:string = '';
private sub: any; piwiksub: any; private sub: any; piwiksub: any;
public countFilters= 0; // public countFilters= 0;
public parameterNames:string[] =[]; public parameterNames:string[] =[];
public parameterValues: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 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 ; //@ViewChild (SearchFilterModalComponent) searchFilterModal : SearchFilterModalComponent ;
public currentFilter: Filter; // public currentFilter: Filter;
public csvLimit: number = 0; public csvLimit: number = 0;
public pagingLimit: number = 0; public pagingLimit: number = 0;
public resultsPerPage: number = 0; public resultsPerPage: number = 0;
@ -111,10 +111,10 @@ export class SearchPageComponent {
this.piwiksub.unsubscribe(); this.piwiksub.unsubscribe();
} }
} }
toggleModal($event) { // toggleModal($event) {
this.currentFilter = $event.value; // this.currentFilter = $event.value;
//this.searchFilterModal.open(); // //this.searchFilterModal.open();
} // }
updateDescription(description:string) { updateDescription(description:string) {
this._meta.updateTag({content:description},"name='description'"); this._meta.updateTag({content:description},"name='description'");
@ -444,23 +444,22 @@ export class SearchPageComponent {
return (doiQuery.length > 0 ? doiQuery:keywordQuery) + allFqs; return (doiQuery.length > 0 ? doiQuery:keywordQuery) + allFqs;
} }
public isFiltered(){ public countFilters():number{
var filtered=false; var filters=0;
this.showUnknownFilters = false; this.showUnknownFilters = false;
for (let filter of this.filters){ for (let filter of this.filters){
if(filter.countSelectedValues > 0){ if(filter.countSelectedValues > 0){
filtered = true; filters+=filter.countSelectedValues;
break;
} }
} }
if(this.searchUtils.keyword.length > 0 ){ if(this.searchUtils.keyword.length > 0 ){
filtered = true; filters++;
} }
var errorCodes:ErrorCodes = new ErrorCodes(); var errorCodes:ErrorCodes = new ErrorCodes();
if(this.queryParameters.keys() && this.searchUtils.totalResults == 0 && this.searchUtils.status !=errorCodes.LOADING ){ if(this.queryParameters.keys() && this.searchUtils.totalResults == 0 && this.searchUtils.status !=errorCodes.LOADING ){
this.showUnknownFilters = true; this.showUnknownFilters = true;
} }
return filtered; return filters;
} }
private clearKeywords(){ private clearKeywords(){
if(this.searchUtils.keyword.length > 0 ){ if(this.searchUtils.keyword.length > 0 ){