You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import { Component, ViewEncapsulation, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
|
|
import { Observable } from 'rxjs/Observable';
|
|
import { FormControl } from '@angular/forms';
|
|
import { MatSelectionList } from '@angular/material';
|
|
|
|
@Component({
|
|
selector: 'app-facet-section-component',
|
|
templateUrl: './facet-search-section.component.html',
|
|
styleUrls: ['./facet-search-section.component.scss'],
|
|
encapsulation: ViewEncapsulation.None,
|
|
})
|
|
export class FacetSearchSectionComponent implements OnInit {
|
|
|
|
@Input()
|
|
searchEnabled = false;
|
|
|
|
@Input()
|
|
filterOptions: (value) => Observable<any[]>;
|
|
|
|
@Input()
|
|
options: Observable<any[]> = Observable.of([]);
|
|
|
|
@Input()
|
|
displayTitleFunc: (value) => string;
|
|
|
|
@Input()
|
|
displayValueFunc: (value) => string;
|
|
|
|
@Output()
|
|
selectedChanged = new EventEmitter();
|
|
|
|
@Output()
|
|
optionRemoved = new EventEmitter();
|
|
|
|
optionSearchControl = new FormControl('');
|
|
|
|
private selectedOptions: any[] = [];
|
|
|
|
@ViewChild('optionsList') selectionList: MatSelectionList;
|
|
|
|
|
|
ngOnInit(): void {
|
|
this.optionSearchControl.valueChanges.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
|
|
}
|
|
|
|
public selectionChanged(event: any) {
|
|
this.selectedChanged.emit(event);
|
|
}
|
|
|
|
public removeOption(project) {
|
|
const list = this.selectionList.selectedOptions.selected.map(x => x.value);
|
|
const indexOfProject = list.indexOf(project);
|
|
if (this.selectionList.selectedOptions.selected[indexOfProject]) {
|
|
this.selectionList.selectedOptions.selected[indexOfProject].selected = false;
|
|
this.selectionList.selectedOptions.selected.splice(indexOfProject, 1);
|
|
}
|
|
this.optionRemoved.emit(project);
|
|
}
|
|
|
|
public isOptionSelected(value) {
|
|
return this.selectedOptions.indexOf(value) !== -1;
|
|
}
|
|
|
|
displayLabel(value) {
|
|
return this.displayTitleFunc ? this.displayTitleFunc(value) : value;
|
|
}
|
|
|
|
displayValue(value) {
|
|
return this.displayValueFunc ? this.displayValueFunc(value) : value;
|
|
}
|
|
}
|