78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import {Component, Input, Output, EventEmitter} from '@angular/core';
|
|
import {Observable} from 'rxjs/Observable';
|
|
|
|
import { Filter, Value} from './searchHelperClasses.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;
|
|
if(this.showAll == false) {
|
|
this.reorderFilterValues();
|
|
}
|
|
}
|
|
|
|
filterChange(selected:boolean){
|
|
if(selected){
|
|
this.filter.countSelectedValues++;
|
|
}else{
|
|
this.filter.countSelectedValues--;
|
|
}
|
|
|
|
//this.change.emit({
|
|
//value: true
|
|
//});
|
|
}
|
|
|
|
reorderFilterValues() {
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
}
|