change the layout in filters - add seleced filters below search box
git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@44585 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
argiro.kokogiannaki
parent
3a19e4a366
commit
b43bf3934b
|
|
@ -6,14 +6,43 @@ import { Filter, Value} from './searchHelperClasses.class';
|
|||
@Component({
|
||||
selector: 'search-filter',
|
||||
template: `
|
||||
<h4>{{filter.title}}</h4>
|
||||
<div *ngFor = "let value of filter.values.slice(0,5)" >
|
||||
<div class = "searchFilterBox">
|
||||
<a (click) = "showAll = !showAll">{{_formatTitle(filter.title,filter.values.length)}}
|
||||
<span *ngIf="!showAll" class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
|
||||
<span *ngIf="showAll" class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
|
||||
</a>
|
||||
<div class="values">
|
||||
<div>
|
||||
<div *ngFor = "let value of filter.values.slice(0,filter.countSelectedValues)" >
|
||||
<p>
|
||||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showAll" >
|
||||
<div *ngFor = "let value of filter.values.slice(filter.countSelectedValues)" >
|
||||
<p>
|
||||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--div *ngFor = "let value of filter.values.slice(0,5)" >
|
||||
<p *ngIf = "value.id != 'HEADER'" >
|
||||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
||||
</p>
|
||||
<h5 *ngIf = "value.id == 'HEADER'" >{{value.name}}</h5>
|
||||
</div>
|
||||
</div>
|
||||
<!--div *ngFor = "let value of filter.values.slice(0,5)" >
|
||||
<p *ngIf = "value.id != 'HEADER'" >
|
||||
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" />
|
||||
<span title = "{{value.name}}"> {{_formatName(value)}}</span><span *ngIf = "showResultCount === true" > ({{value.number}})</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a *ngIf = "!showAll && filter.values.length > 5" (click)="toggleShowAll()" > More</a>
|
||||
<span *ngIf = "filter.values.length > 5 && showAll" >
|
||||
|
|
@ -25,31 +54,29 @@ import { Filter, Value} from './searchHelperClasses.class';
|
|||
<h5 *ngIf = "value.id == 'HEADER'">{{value.name}}</h5>
|
||||
</div>
|
||||
<a (click)="toggleShowAll()" > Less</a>
|
||||
</span>
|
||||
</span-->
|
||||
|
||||
`
|
||||
})
|
||||
|
||||
export class SearchFilterComponent {
|
||||
// @Input() title;
|
||||
// @Input() filterId;
|
||||
// @Input() values; //array[] " name, id, number, selected"
|
||||
// @Input() countSelectedValues:number = 0; //array[] " name, id, number, selected"
|
||||
//@Output() change = new EventEmitter();
|
||||
|
||||
@Input() test:{value:number} ;
|
||||
@Input() filter:Filter;
|
||||
@Input() showResultCount:boolean = true;
|
||||
private showAll:boolean = false;
|
||||
private _maxCharacters:number =30;
|
||||
|
||||
|
||||
constructor () {
|
||||
// var str=(((value.name+" ("+value.number+")").length >_maxCharacters)?(value.name.substring(0,(_maxCharacters - (" ("+value.number+")").length - ('...').length))):value.name);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
||||
}
|
||||
|
||||
private _formatTitle(title,length){
|
||||
return (((title+" ("+length+")").length >this._maxCharacters)?(title.substring(0,(this._maxCharacters - (" ("+length+")").length - ('...').length))+"..."):title)
|
||||
}
|
||||
private _formatName(value){
|
||||
return (((value.name+" ("+value.number+")").length >this._maxCharacters)?(value.name.substring(0,(this._maxCharacters - (" ("+value.number+")").length - ('...').length))+"..."):value.name)
|
||||
}
|
||||
|
|
@ -63,13 +90,12 @@ export class SearchFilterComponent {
|
|||
filterChange(selected:boolean){
|
||||
if(selected){
|
||||
this.filter.countSelectedValues++;
|
||||
this.reorderFilterValues();
|
||||
}else{
|
||||
this.filter.countSelectedValues--;
|
||||
this.reorderFilterValues();
|
||||
}
|
||||
|
||||
//this.change.emit({
|
||||
//value: true
|
||||
//});
|
||||
}
|
||||
|
||||
reorderFilterValues() {
|
||||
|
|
@ -85,4 +111,16 @@ export class SearchFilterComponent {
|
|||
}
|
||||
}
|
||||
}
|
||||
// sliceSelected() {
|
||||
// let values: Value[] = [];
|
||||
//
|
||||
// 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);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,19 +14,35 @@ import {SearchFields} from '../../utils/properties/searchFields';
|
|||
<h1>{{pageTitle}}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div *ngIf="showRefine" class="row row-offcanvas row-offcanvas-right">
|
||||
<div class="col-xs-12 col-sm-3">
|
||||
<a *ngIf="isFiltered()" (click)="clearFilters()" > Clear Filters</a>
|
||||
<p *ngFor="let filter of filters " >
|
||||
<search-filter [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)"></search-filter>
|
||||
</p>
|
||||
</div>
|
||||
<div *ngIf="showRefine" class="">
|
||||
<div class="row row-offcanvas row-offcanvas-right">
|
||||
<div class="col-xs-12 col-sm-10 text-center col-md-offset-1 ">
|
||||
|
||||
<div class="col-xs-6 col-sm-9 sidebar-offcanvas" id="sidebar">
|
||||
<search-form [(keyword)]="keyword" (keywordChange)="keywordChanged($event)"></search-form>
|
||||
<search-download [totalResults]="totalResults" (downloadClick)="downloadClicked($event)"></search-download>
|
||||
<search-paging [(page)] = "page" [(size)] = "size" [(results)] = "results" [(baseUrl)] = "baseURLWithParameters" [(totalResults)] = "totalResults" ></search-paging>
|
||||
<search-result [results]="results" [totalResults]="totalResults" [status]=status [page]="page"></search-result>
|
||||
<search-form [(keyword)]="keyword" (keywordChange)="keywordChanged($event)"></search-form>
|
||||
<div>
|
||||
<span *ngFor="let filter of filters " >
|
||||
<span *ngIf = "filter.countSelectedValues > 0"> {{filter.title}}: </span>
|
||||
<span *ngFor="let value of filter.values.slice(0,filter.countSelectedValues); let i = index; let end = last; " >
|
||||
{{value.name}} <a (click) = "removeFilter(value, filter) "> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a>
|
||||
<span *ngIf="i != end">,</span>
|
||||
</span>
|
||||
</span>
|
||||
<a *ngIf="isFiltered()" (click)="clearFilters()" class = "btn text-right"> Clear Filters</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-offcanvas row-offcanvas-right">
|
||||
<div class="col-xs-12 col-sm-3">
|
||||
<p *ngFor="let filter of filters " >
|
||||
<search-filter [filter]="filter" [showResultCount]=showResultCount (change)="filterChanged($event)"></search-filter>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-xs-12 col-sm-9 " >
|
||||
<search-download [totalResults]="totalResults" (downloadClick)="downloadClicked($event)"></search-download>
|
||||
<search-paging [(page)] = "page" [(size)] = "size" [(results)] = "results" [(baseUrl)] = "baseURLWithParameters" [(totalResults)] = "totalResults" ></search-paging>
|
||||
<search-result [results]="results" [totalResults]="totalResults" [status]=status [page]="page"></search-result>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!showRefine" >
|
||||
|
|
@ -250,7 +266,10 @@ export class SearchPageComponent {
|
|||
this.location.go(location.pathname);
|
||||
this.goTo(1);
|
||||
}
|
||||
|
||||
removeFilter(value:Value,filter:Filter){
|
||||
filter.countSelectedValues--;
|
||||
value.selected = false;
|
||||
}
|
||||
goTo(page:number = 1){
|
||||
this.page = page;
|
||||
console.info("PAGE goto = "+this.page);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<!-- Temporarily add here custom style -->
|
||||
<style>
|
||||
.custom-hidden-dropdown-menu {position:static !important;}
|
||||
|
||||
.searchFilterBox .values {overflow:auto; max-height:200px; }
|
||||
</style>
|
||||
|
||||
<base href="/">
|
||||
|
|
|
|||
Loading…
Reference in New Issue