import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core'; import { MatAccordion } from '@angular/material'; import { ActivatedRoute } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; import { Observable } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { BaseComponent } from '../../../core/common/base/base.component'; import { ProjectCriteria } from '../../../models/criteria/project/ProjectCriteria'; import { RequestItem } from '../../../models/criteria/RequestItem'; import { TagsCriteria } from '../../../models/criteria/tags/TagsCriteria'; import { DatasetProfileModel } from '../../../models/datasetprofile/DatasetProfileModel'; import { ExternalSourcesItemModel } from '../../../models/external-sources/ExternalSourcesItemModel'; import { FacetSearchCriteriaModel } from '../../../models/facet-search/FacetSearchCriteriaModel'; import { ProjectModel } from '../../../models/projects/ProjectModel'; import { ProjectStateType } from '../../../models/projects/ProjectStateType'; import { DatasetService } from '../../../services/dataset/dataset.service'; import { ExternalSourcesService } from '../../../services/external-sources/external-sources.service'; import { ProjectService } from '../../../services/project/project.service'; @Component({ selector: 'app-facet', templateUrl: './facet-search.component.html', styleUrls: ['./facet-search.component.scss'], encapsulation: ViewEncapsulation.None, providers: [ProjectService] }) export class FacetSearchComponent extends BaseComponent implements OnInit, AfterViewInit { @Input() facetCriteria = new FacetSearchCriteriaModel(); @Output() facetCriteriaChange = new EventEmitter(); public filteringTagsAsync = false; public filteredTags: ExternalSourcesItemModel[]; ProjectStateType = ProjectStateType; projects: Observable; profiles: Observable; dmpOrganisations: Observable; projectOptions: Observable; projectStateOptions: Observable; @ViewChild('facetAccordion') accordion: MatAccordion; displayProjectStateValue = (option) => option['value']; displayProjectStateLabel = (option) => option['label']; displayProjectValue = (option) => option['id']; displayProjectLabel = (option) => option['label']; displayProfileValue = (option) => option['id']; displayProfileLabel = (option) => option['label']; displayDmpOrganisationsValue = (option) => option['id']; displayDmpOrganisationsLabel = (option) => option['name']; constructor( public activatedRoute: ActivatedRoute, public projectService: ProjectService, public languageService: TranslateService, public datasetProfileService: DatasetService, public externalSourcesService: ExternalSourcesService ) { super(); } ngOnInit() { setTimeout(x => { this.projectStateOptions = Observable.of( [ { label: this.languageService.instant('FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE'), value: ProjectStateType.Finished }, { label: this.languageService.instant('FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE'), value: ProjectStateType.OnGoing }, ]); }); this.profiles = this.datasetProfileService.getDatasetProfiles(); this.dmpOrganisations = this.externalSourcesService.searchDMPOrganizations(''); } ngAfterViewInit(): void { this.accordion.openAll(); } public projectStatusChanged(event) { this.facetCriteria.projectStatus = event.option.value.value; if (!event.option.selected) { this.facetCriteria.projectStatus = null; this.projects = Observable.of([]); this.facetCriteria.projects = []; } if (event.option.selected) { const projectCriteria = new ProjectCriteria(); projectCriteria.projectStateType = this.facetCriteria.projectStatus; projectCriteria['length'] = 10; const dataTableRequest: RequestItem = { criteria: projectCriteria }; this.projects = this.projectService.get(dataTableRequest); this.facetCriteria.projects = []; } this.facetCriteriaChange.emit(this.facetCriteria); } public projectChanged(event: any) { const eventValue = event.option.value.id; if (event.option.selected) { this.facetCriteria.projects.push(eventValue); } if (!event.option.selected) { const index = this.facetCriteria.projects.indexOf(eventValue); this.facetCriteria.projects.splice(index, 1); } this.facetCriteriaChange.emit(this.facetCriteria); } removeProject(project) { this.facetCriteria.projects.splice(this.facetCriteria.projects.indexOf(project), 1); this.facetCriteriaChange.emit(this.facetCriteria); } public profileChanged(event: any) { const eventValue = event.option.value.id; if (event.option.selected) { this.facetCriteria.datasetProfile.push(eventValue); } if (!event.option.selected) { const index = this.facetCriteria.datasetProfile.indexOf(eventValue); this.facetCriteria.datasetProfile.splice(index, 1); } this.facetCriteriaChange.emit(this.facetCriteria); } removeProfile(profile) { this.facetCriteria.datasetProfile.splice(this.facetCriteria.datasetProfile.indexOf(profile), 1); this.facetCriteriaChange.emit(this.facetCriteria); } public dmpOrganisationChanged(event: any) { const eventValue = event.option.value.id; if (event.option.selected) { this.facetCriteria.dmpOrganisations.push(eventValue); } if (!event.option.selected) { const index = this.facetCriteria.dmpOrganisations.indexOf(eventValue); this.facetCriteria.dmpOrganisations.splice(index, 1); } this.facetCriteriaChange.emit(this.facetCriteria); } public projectSearch(value: string): Observable { const projectCriteria = new ProjectCriteria(); projectCriteria.projectStateType = this.facetCriteria.projectStatus; projectCriteria['length'] = 10; projectCriteria.like = value; const dataTableRequest: RequestItem = { criteria: projectCriteria }; return this.projectService.get(dataTableRequest); } public dmpOrganisationSearch(value: string): Observable { return this.externalSourcesService.searchDMPOrganizations(value); } removeOrganisation(organisation) { this.facetCriteria.dmpOrganisations.splice(this.facetCriteria.dmpOrganisations.indexOf(organisation), 1); this.facetCriteriaChange.emit(this.facetCriteria); } public profileSearch(value: string) { return this.datasetProfileService.getDatasetProfiles(); } public controlModified() { this.facetCriteriaChange.emit(this.facetCriteria); } filterTags(value: string): void { this.filteredTags = undefined; if (value) { this.filteringTagsAsync = true; const requestItem: RequestItem = new RequestItem(); const criteria: TagsCriteria = new TagsCriteria(); criteria.like = value; requestItem.criteria = criteria; this.externalSourcesService.searchDatasetTags(requestItem) .pipe(takeUntil(this._destroyed)) .subscribe(items => { this.filteredTags = items; this.filteringTagsAsync = false; }); } } }