MaDgIK
/
explore-services
13
0
Fork 0
Code Issues Pull Requests Projects Releases 22 Wiki Activity

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 2016-11-21 11:38:14 +00:00
parent 3a19e4a366
commit b43bf3934b
3 changed files with 86 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
portal-2/src/app/searchPages/searchUtils/searchFilter.component.ts
View File

@ -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);
// }
// }
}

45
portal-2/src/app/searchPages/searchUtils/searchPage.component.ts
View File

@ -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);

2
portal-2/src/index.html
View File

@ -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="/">