[Trunk | Library]:
1. newSearchPage.component.ts: In year range filter show "from {year}" or "until {year}" if only one of the is selected.
2. searchFilter.component: (search redesign)
a. Do not show "+" after the values number if >=99
b. In view more results are sorted by name
c. Show always 6 more popular and all selected (all sorted by number).
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58135 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni
parent
d292a3e1ed
commit
7f83094e4f
|
|
@ -360,15 +360,18 @@ export class NewSearchPageComponent {
|
|||
//console.log("checkSelectedRangeFilters: yearFrom: " + yearFrom + " - yearTo: "+yearTo);
|
||||
if(yearFrom) {
|
||||
filter.selectedFromValue = yearFrom;
|
||||
filter.selectedFromAndToValues = yearFrom;
|
||||
}
|
||||
if(yearFrom && yearTo) {
|
||||
filter.selectedFromAndToValues += "-";
|
||||
}
|
||||
if(yearTo) {
|
||||
filter.selectedToValue = yearTo;
|
||||
filter.selectedFromAndToValues += yearTo;
|
||||
}
|
||||
if(yearFrom && yearTo) {
|
||||
filter.selectedFromAndToValues = yearFrom + "-" + yearTo;
|
||||
} else if(yearFrom) {
|
||||
filter.selectedFromAndToValues = "from " + yearFrom;
|
||||
} else if(yearTo) {
|
||||
filter.selectedFromAndToValues = "until " + yearTo;
|
||||
}
|
||||
|
||||
if(!yearFrom && !yearTo) {
|
||||
validDates = false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,38 +7,56 @@
|
|||
</div>
|
||||
<div aria-expanded="false">
|
||||
<div>
|
||||
<ng-container *ngIf="!isOpen">
|
||||
<div *ngFor = "let value of getSelectedValues(filter,'num')" class="uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<div title = "{{value.name}}">
|
||||
<ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
|
||||
<input *ngIf="filter.filterType == 'checkbox'" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
<input *ngIf="filter.filterType == 'radio'" type="radio" (click)="uniqueFilterChange(value)"
|
||||
[name]=filter.filterId checked/>
|
||||
{{' '+_formatName(value)}}
|
||||
<span *ngIf = "showResultCount === true" >
|
||||
{{' ('+(value.number|number)+')'}}</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container>
|
||||
<!-- <div *ngFor = "let value of getSelectedValues(filter,'num')" class="uk-animation-fade filterItem searchFilterItem uk-text-small">-->
|
||||
<!-- <div title = "{{value.name}}">-->
|
||||
<!-- <ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">-->
|
||||
<!-- <input *ngIf="filter.filterType == 'checkbox'" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />-->
|
||||
<!-- <input *ngIf="filter.filterType == 'radio'" type="radio" (click)="uniqueFilterChange(value)"-->
|
||||
<!-- [name]=filter.filterId checked/>-->
|
||||
<!-- {{' '+_formatName(value)}}-->
|
||||
<!-- <span *ngIf = "showResultCount === true" >-->
|
||||
<!-- {{' ('+(value.number|number)+')'}}</span>-->
|
||||
<!-- </ng-container>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:filterValuesNum-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<div title = "{{value.name}}" [class]="(isDisabled || (showResultCount && value.number === 0))?'uk-text-muted':''" >
|
||||
<input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled || (showResultCount && value.number === 0)" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
<input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled || (showResultCount && value.number === 0)" type="radio" (click)="uniqueFilterChange(value)"
|
||||
[name]=filter.filterId value=false />
|
||||
{{' '+ _formatName(value) }}
|
||||
<span *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >
|
||||
{{' ('+(value.number|number)+')'}}
|
||||
</span>
|
||||
</div>
|
||||
<!-- <div *ngFor = "let value of getNotSelectedValues(filter,'num').slice(0,(!addShowMore?getNotSelectedValues(filter,'num').length:filterValuesNum-getSelectedValues(filter,'num').length))" class = "uk-animation-fade filterItem searchFilterItem uk-text-small">-->
|
||||
<!-- <div title = "{{value.name}}" [class]="(isDisabled || (showResultCount && value.number === 0))?'uk-text-muted':''" >-->
|
||||
<!-- <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled || (showResultCount && value.number === 0)" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />-->
|
||||
<!-- <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled || (showResultCount && value.number === 0)" type="radio" (click)="uniqueFilterChange(value)"-->
|
||||
<!-- [name]=filter.filterId value=false />-->
|
||||
<!-- {{' '+ _formatName(value) }}-->
|
||||
<!-- <span *ngIf = "showResultCount === true" [class]="(isDisabled || value.number === 0)?'uk-text-muted':''" >-->
|
||||
<!-- {{' ('+(value.number|number)+')'}}-->
|
||||
<!-- </span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div *ngFor="let value of getSelectedAndTopValues(filter, 6)"
|
||||
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<div title = "{{value.name}}">
|
||||
<ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
|
||||
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox"
|
||||
[disabled]="isDisabled || (showResultCount && value.number === 0)"
|
||||
[(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
|
||||
<input *ngIf="filter.filterType == 'radio'" type="radio"
|
||||
[disabled]="isDisabled || (showResultCount && value.number === 0)"
|
||||
[name]=filter.filterId [checked]="value.selected" (click)="uniqueFilterChange(value)"/>
|
||||
{{' '+_formatName(value)}}
|
||||
<span *ngIf = "showResultCount === true" >
|
||||
{{' ('+(value.number|number)+')'}}</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div *ngIf=" addShowMore && (filter.values.length) > filterValuesNum">
|
||||
<a *ngIf="!isOpen"
|
||||
<a
|
||||
[class]="((isDisabled)?'uk-disabled uk-link-muted ':' portal-link ') + ' uk-margin-small-top'"
|
||||
[attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">
|
||||
+ View more
|
||||
<span *ngIf="!isOpen">+ View more</span>
|
||||
<span *ngIf="isOpen">- View less</span>
|
||||
</a>
|
||||
|
||||
<div hidden [id]="'toggle-'+filter.filterId" class="uk-text-small uk-margin-small-bottom">
|
||||
|
|
@ -47,7 +65,7 @@
|
|||
<input class="uk-input uk-margin-small-bottom uk-width-1-1 " name="filter-keyword" placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">
|
||||
|
||||
<span *ngIf = "showResultCount === true" class="uk-width-5-6@m uk-width-1-1@s uk-align-right uk-margin-small-bottom">
|
||||
<span class="uk-width-1-4"> Sort by:</span>
|
||||
<span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
|
||||
<select [(ngModel)]="sortBy"
|
||||
class="uk-select uk-width-3-4@m uk-width-auto"
|
||||
id="form-horizontal-select" name="select_order">
|
||||
|
|
@ -58,39 +76,55 @@
|
|||
</div>
|
||||
|
||||
<div class="uk-modal-body uk-overflow-auto uk-height-max-small uk-padding-remove
|
||||
uk-margin-small-left uk-margin-small-right uk-margin-small-top">
|
||||
<ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">
|
||||
<div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem searchFilterItem">
|
||||
uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
|
||||
<!-- <ng-container *ngFor = "let value of getSelectedValues(filter, sortBy)">-->
|
||||
<!-- <div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem searchFilterItem">-->
|
||||
|
||||
<div title = "{{value.name}}">
|
||||
<input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
<input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"
|
||||
[name]=filter.filterId checked/>
|
||||
{{' ' + _formatName(value) + ' '}}
|
||||
<span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
|
||||
</div>
|
||||
<!-- <div title = "{{value.name}}">-->
|
||||
<!-- <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />-->
|
||||
<!-- <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"-->
|
||||
<!-- [name]=filter.filterId checked/>-->
|
||||
<!-- {{' ' + _formatName(value) + ' '}}-->
|
||||
<!-- <span class="filterNumber" *ngIf = "showResultCount === true" > ({{value.number|number}})</span>-->
|
||||
<!-- </div>-->
|
||||
|
||||
</div>
|
||||
</ng-container>
|
||||
<!-- </div>-->
|
||||
<!-- </ng-container>-->
|
||||
|
||||
<ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">
|
||||
<div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem searchFilterItem">
|
||||
<!-- <ng-container *ngFor = "let value of getNotSelectedValues(filter, sortBy)">-->
|
||||
<!-- <div *ngIf="filterKeywords(value.name)" class = "uk-animation-fade filterItem searchFilterItem">-->
|
||||
|
||||
<div title = "{{value.name}}">
|
||||
<input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
<input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"
|
||||
[name]=filter.filterId value=false />
|
||||
{{' ' + _formatName(value) + ' '}}
|
||||
<span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>
|
||||
</div>
|
||||
<!-- <div title = "{{value.name}}">-->
|
||||
<!-- <input *ngIf="filter.filterType == 'checkbox'" [disabled]="isDisabled" [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />-->
|
||||
<!-- <input *ngIf="filter.filterType == 'radio'" [disabled]="isDisabled" type="radio" (click)="uniqueFilterChange(value)"-->
|
||||
<!-- [name]=filter.filterId value=false />-->
|
||||
<!-- {{' ' + _formatName(value) + ' '}}-->
|
||||
<!-- <span *ngIf = "showResultCount === true" > ({{value.number|number}})</span>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </ng-container>-->
|
||||
<ng-container *ngFor="let value of sort(filter.values)"
|
||||
class="uk-animation-fade filterItem searchFilterItem uk-text-small">
|
||||
<div title = "{{value.name}}">
|
||||
<ng-container *ngIf="filter.filterType == 'checkbox' || filter.filterType == 'radio'">
|
||||
<input *ngIf="filter.filterType == 'checkbox'" type="checkbox"
|
||||
[disabled]="isDisabled || (showResultCount && value.number === 0)"
|
||||
[(ngModel)]="value.selected" (ngModelChange)="filterChange(value.selected)" />
|
||||
<input *ngIf="filter.filterType == 'radio'" type="radio"
|
||||
[disabled]="isDisabled || (showResultCount && value.number === 0)"
|
||||
[name]=filter.filterId [checked]="value.selected" (click)="uniqueFilterChange(value)"/>
|
||||
{{' '+_formatName(value)}}
|
||||
<span *ngIf = "showResultCount === true" >
|
||||
{{' ('+(value.number|number)+')'}}</span>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
<a [class]="(isDisabled)?'uk-disabled uk-link-muted ':' portal-link '"
|
||||
[attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">
|
||||
<span *ngIf="isOpen">- View less</span>
|
||||
</a>
|
||||
<!-- <a [class]="(isDisabled)?'uk-disabled uk-link-muted ':' portal-link '"-->
|
||||
<!-- [attr.uk-toggle]="'target: #toggle-'+filter.filterId" (click)="toggle()">-->
|
||||
<!-- <span *ngIf="isOpen">- View less</span>-->
|
||||
<!-- </a>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export class SearchFilterComponent {
|
|||
@Output() modalChange = new EventEmitter();
|
||||
@Output() onFilterChange = new EventEmitter();
|
||||
keyword = "";
|
||||
sortBy = "num";
|
||||
sortBy = "name";
|
||||
|
||||
public isOpen:boolean=false;
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ export class SearchFilterComponent {
|
|||
ngOnInit() {}
|
||||
|
||||
public _formatTitle(title,length){
|
||||
return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+((length >= 99)?length+"+":length)+")")
|
||||
return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title+" ("+length+")")
|
||||
}
|
||||
public _formatName(value){
|
||||
//let maxLineLength = 24;
|
||||
|
|
@ -59,14 +59,14 @@ export class SearchFilterComponent {
|
|||
return true;
|
||||
}
|
||||
filterChange(selected:boolean){
|
||||
if(selected){
|
||||
this.filter.countSelectedValues++;
|
||||
}else{
|
||||
this.filter.countSelectedValues--;
|
||||
}
|
||||
this.onFilterChange.emit({
|
||||
value: this.filter
|
||||
});
|
||||
if(selected){
|
||||
this.filter.countSelectedValues++;
|
||||
}else{
|
||||
this.filter.countSelectedValues--;
|
||||
}
|
||||
// this.onFilterChange.emit({
|
||||
// value: this.filter
|
||||
// });
|
||||
}
|
||||
uniqueFilterChange(value: Value) {
|
||||
let tmp = value.selected;
|
||||
|
|
@ -78,9 +78,9 @@ export class SearchFilterComponent {
|
|||
this.filter.countSelectedValues--;
|
||||
}
|
||||
|
||||
this.onFilterChange.emit({
|
||||
value: this.filter
|
||||
});
|
||||
// this.onFilterChange.emit({
|
||||
// value: this.filter
|
||||
// });
|
||||
}
|
||||
clearFilter() {
|
||||
for (var i=0; i < this.filter.values.length; i++){
|
||||
|
|
@ -91,6 +91,28 @@ export class SearchFilterComponent {
|
|||
value: this.filter
|
||||
});
|
||||
}
|
||||
|
||||
getSelectedAndTopValues(filter, topNum: number = 6):any{
|
||||
var values = [];
|
||||
|
||||
for (let i=0; i < topNum; i++){
|
||||
if(filter.values.length <= i) {
|
||||
break;
|
||||
}
|
||||
values.push(filter.values[i]);
|
||||
}
|
||||
|
||||
if(filter.countSelectedValues >0){
|
||||
for (let i=topNum; i < filter.values.length; i++){
|
||||
if(filter.values[i].selected){
|
||||
values.push(filter.values[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return values;
|
||||
}
|
||||
|
||||
getSelectedValues(filter, sortBy:string = "num"):any{
|
||||
var selected = [];
|
||||
if(filter.countSelectedValues >0){
|
||||
|
|
@ -141,6 +163,25 @@ export class SearchFilterComponent {
|
|||
return notSselected;
|
||||
}
|
||||
|
||||
sort(values: Value[]) {
|
||||
let sorted: Value[] = values.slice();
|
||||
if(this.sortBy == "name"){
|
||||
|
||||
sorted.sort((n1,n2)=> {
|
||||
if (n1.name > n2.name) {
|
||||
return 1;
|
||||
}
|
||||
|
||||
if (n1.name < n2.name) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
return sorted;
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.isOpen = !this.isOpen;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue