58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
|
import {JSONP_PROVIDERS} from '@angular/http';
|
|
import {Observable} from 'rxjs/Observable';
|
|
import { RouteParams, RouteConfig, ROUTER_DIRECTIVES, Router } from '@angular/router-deprecated';
|
|
import { Filter, Value} from './search.class';
|
|
|
|
@Component({
|
|
selector: 'search-filter',
|
|
template: `
|
|
<p>{{filter.title}} </p>
|
|
<p *ngFor = "let value of filter.values.slice(0,5)" >
|
|
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" /> <span> {{value.name}} ({{value.number}}) </span>
|
|
|
|
</p>
|
|
<a *ngIf = "!showAll && filter.values.length > 5" (click)="toggleShowAll()" > More</a>
|
|
<span *ngIf = "filter.values.length > 5 && showAll" >
|
|
<p *ngFor = "let value of filter.values.slice(5)" >
|
|
<input [(ngModel)]="value.selected" type="checkbox" (ngModelChange)="filterChange(value.selected)" /> <span> {{value.name}} ({{value.number}}) </span>
|
|
</p>
|
|
<a (click)="toggleShowAll()" > Less</a>
|
|
</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;
|
|
private showAll:boolean = false;
|
|
constructor () {
|
|
|
|
}
|
|
ngOnInit() {
|
|
|
|
}
|
|
|
|
toggleShowAll(){
|
|
this.showAll = !this.showAll;
|
|
}
|
|
|
|
filterChange(selected:boolean){
|
|
if(selected){
|
|
this.filter.countSelectedValues++;
|
|
}else{
|
|
this.filter.countSelectedValues--;
|
|
}
|
|
this.change.emit({
|
|
value: true
|
|
});
|
|
}
|
|
|
|
|
|
}
|