2019-09-23 10:17:03 +02:00
|
|
|
|
2018-10-05 12:03:22 +02:00
|
|
|
import { SelectionModel } from '@angular/cdk/collections';
|
2019-01-18 18:03:45 +01:00
|
|
|
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
2018-11-27 18:33:17 +01:00
|
|
|
import { FormControl } from '@angular/forms';
|
2019-09-23 10:17:03 +02:00
|
|
|
import { MatListOption, MatSelectionList } from '@angular/material/list';
|
2019-12-11 15:51:03 +01:00
|
|
|
import { BaseComponent } from '@common/base/base.component';
|
|
|
|
import { Observable, of as observableOf } from 'rxjs';
|
|
|
|
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
|
|
|
|
|
2018-10-05 08:56:50 +02:00
|
|
|
|
|
|
|
@Component({
|
2019-01-18 18:03:45 +01:00
|
|
|
selector: 'app-explore-dataset-filter-item-component',
|
|
|
|
templateUrl: './explore-dataset-filter-item.component.html',
|
|
|
|
styleUrls: ['./explore-dataset-filter-item.component.scss']
|
2018-10-05 08:56:50 +02:00
|
|
|
})
|
2019-01-18 18:03:45 +01:00
|
|
|
export class ExploreDatasetFilterItemComponent extends BaseComponent implements OnInit {
|
2018-10-05 08:56:50 +02:00
|
|
|
|
|
|
|
@Input()
|
|
|
|
searchEnabled = false;
|
|
|
|
|
2018-10-08 17:14:27 +02:00
|
|
|
@Input()
|
|
|
|
requestDelay = 200;
|
|
|
|
|
2018-10-05 12:03:22 +02:00
|
|
|
@Input()
|
|
|
|
multipleSelect = true;
|
|
|
|
|
2018-10-05 08:56:50 +02:00
|
|
|
@Input()
|
|
|
|
filterOptions: (value) => Observable<any[]>;
|
|
|
|
|
|
|
|
@Input()
|
2019-09-23 10:17:03 +02:00
|
|
|
options: Observable<any[]> = observableOf([]);
|
2018-10-05 08:56:50 +02:00
|
|
|
|
|
|
|
@Input()
|
|
|
|
displayTitleFunc: (value) => string;
|
|
|
|
|
|
|
|
@Input()
|
|
|
|
displayValueFunc: (value) => string;
|
|
|
|
|
|
|
|
@Output()
|
|
|
|
selectedChanged = new EventEmitter();
|
|
|
|
|
|
|
|
@Output()
|
|
|
|
optionRemoved = new EventEmitter();
|
|
|
|
|
|
|
|
optionSearchControl = new FormControl('');
|
|
|
|
|
|
|
|
private selectedOptions: any[] = [];
|
|
|
|
|
2019-09-23 10:17:03 +02:00
|
|
|
@ViewChild('optionsList', { static: true }) selectionList: MatSelectionList;
|
2018-10-05 08:56:50 +02:00
|
|
|
|
2019-01-18 18:03:45 +01:00
|
|
|
constructor() { super(); }
|
2018-10-05 08:56:50 +02:00
|
|
|
|
|
|
|
ngOnInit(): void {
|
2018-10-05 12:03:22 +02:00
|
|
|
if (!this.multipleSelect) { this.selectionList.selectedOptions = new SelectionModel<MatListOption>(this.multipleSelect); }
|
2019-09-23 10:17:03 +02:00
|
|
|
this.optionSearchControl.valueChanges.pipe(debounceTime(this.requestDelay),
|
2019-12-11 15:51:03 +01:00
|
|
|
distinctUntilChanged())
|
2018-11-27 18:33:17 +01:00
|
|
|
.pipe(takeUntil(this._destroyed))
|
|
|
|
.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
|
2018-10-05 08:56:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
public selectionChanged(event: any) {
|
2018-10-05 12:03:22 +02:00
|
|
|
const eventValue = event.option.value;
|
|
|
|
if (event.option.selected) { this.selectedOptions.push(eventValue); }
|
|
|
|
if (!event.option.selected) {
|
|
|
|
const index = this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(eventValue));
|
|
|
|
this.selectedOptions.splice(index, 1);
|
|
|
|
}
|
2018-10-05 08:56:50 +02:00
|
|
|
this.selectedChanged.emit(event);
|
|
|
|
}
|
|
|
|
|
2019-08-01 09:54:40 +02:00
|
|
|
public removeOption(grant) {
|
2018-10-05 08:56:50 +02:00
|
|
|
const list = this.selectionList.selectedOptions.selected.map(x => x.value);
|
2019-08-01 09:54:40 +02:00
|
|
|
const indexOfGrant = list.indexOf(grant);
|
|
|
|
if (this.selectionList.selectedOptions.selected[indexOfGrant]) {
|
|
|
|
this.selectionList.selectedOptions.selected[indexOfGrant].selected = false;
|
|
|
|
this.selectionList.selectedOptions.selected.splice(indexOfGrant, 1);
|
2018-10-05 08:56:50 +02:00
|
|
|
}
|
2019-08-01 09:54:40 +02:00
|
|
|
this.selectedOptions.splice(this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(grant)), 1);
|
|
|
|
this.optionRemoved.emit(grant);
|
2018-10-05 08:56:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
public isOptionSelected(value) {
|
2018-10-05 12:03:22 +02:00
|
|
|
return this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(value)) !== -1;
|
2018-10-05 08:56:50 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
displayLabel(value) {
|
|
|
|
return this.displayTitleFunc ? this.displayTitleFunc(value) : value;
|
|
|
|
}
|
|
|
|
|
|
|
|
displayValue(value) {
|
|
|
|
return this.displayValueFunc ? this.displayValueFunc(value) : value;
|
|
|
|
}
|
2018-10-05 12:03:22 +02:00
|
|
|
|
2018-10-05 08:56:50 +02:00
|
|
|
}
|