argos/dmp-frontend/src/app/shared/components/facets/facet-search.component.ts

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<ProjectModel[]>;
	profiles: Observable<DatasetProfileModel[]>;
	dmpOrganisations: Observable<ExternalSourcesItemModel[]>;
	projectOptions: Observable<ProjectModel[]>;
	projectStateOptions: Observable<any[]>;
	@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<ProjectCriteria> = { 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<ProjectModel[]> {
		const projectCriteria = new ProjectCriteria();
		projectCriteria.projectStateType = this.facetCriteria.projectStatus;
		projectCriteria['length'] = 10;
		projectCriteria.like = value;
		const dataTableRequest: RequestItem<ProjectCriteria> = { criteria: projectCriteria };
		return this.projectService.get(dataTableRequest);
	}

	public dmpOrganisationSearch(value: string): Observable<ExternalSourcesItemModel[]> {
		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<TagsCriteria> = 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;
				});

		}
	}
}