argos/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.ts

import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatAccordion } from '@angular/material';
import { ActivatedRoute } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { BaseComponent } from '../../../core/common/base/base.component';
import { ProjectStateType } from '../../../core/common/enum/project-state-type';
import { DatasetProfileModel } from '../../../core/model/dataset/dataset-profile';
import { ExternalSourceItemModel } from '../../../core/model/external-sources/external-source-item';
import { ProjectListingModel } from '../../../core/model/project/project-listing';
import { ExploreDatasetCriteriaModel } from '../../../core/query/explore-dataset/explore-dataset-criteria';
import { ProjectCriteria } from '../../../core/query/project/project-criteria';
import { TagCriteria } from '../../../core/query/tag/tag-criteria';
import { DatasetService } from '../../../core/services/dataset/dataset.service';
import { ExternalSourcesService } from '../../../core/services/external-sources/external-sources.service';
import { ProjectService } from '../../../core/services/project/project.service';
import { RequestItem } from '../../../core/query/request-item';
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
import { AuthService } from '../../../core/services/auth/auth.service';

@Component({
	selector: 'app-explore-dataset-filters-component',
	templateUrl: './explore-dataset-filters.component.html',
	styleUrls: ['./explore-dataset-filters.component.scss']
})
export class ExploreDatasetFiltersComponent extends BaseComponent implements OnInit, AfterViewInit {

	@Input() facetCriteria = new ExploreDatasetCriteriaModel();
	@Output() facetCriteriaChange = new EventEmitter();
	public filteringTagsAsync = false;
	public filteredTags: ExternalSourceItemModel[];
	ProjectStateType = ProjectStateType;
	projects: Observable<ProjectListingModel[]>;
	profiles: Observable<DatasetProfileModel[]>;
	dmpOrganisations: Observable<ExternalSourceItemModel[]>;
	projectOptions: Observable<ProjectListingModel[]>;
	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'];

	tagsAutoCompleteConfiguration = {
		filterFn: this.filterTags.bind(this),
		initialItems: (excludedItems: any[]) => this.filterTags('').map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
		displayFn: (item) => item['name'],
		titleFn: (item) => item['name']
	};

	constructor(
		public activatedRoute: ActivatedRoute,
		public projectService: ProjectService,
		public languageService: TranslateService,
		public datasetProfileService: DatasetService,
		public externalSourcesService: ExternalSourcesService,
		private authentication: AuthService,
	) { 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 fields: Array<string> = new Array<string>();
			fields.push('asc');
			const dataTableRequest: DataTableRequest<ProjectCriteria> = new DataTableRequest(0, null, { fields: fields });
			dataTableRequest.criteria = new ProjectCriteria();
			dataTableRequest.criteria.projectStateType = this.facetCriteria.projectStatus;
			dataTableRequest.criteria['length'] = 10;

			this.projects = this.projectService.getPublicPaged(dataTableRequest).map(x => x.data);
			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<ProjectListingModel[]> {

		const projectCriteria = new ProjectCriteria();
		projectCriteria.projectStateType = this.facetCriteria.projectStatus;
		projectCriteria['length'] = 10;
		projectCriteria.like = value;

		const fields: Array<string> = new Array<string>();
		fields.push('asc');

		const dataTableRequest: DataTableRequest<ProjectCriteria> = new DataTableRequest(0, null, { fields: fields });
		dataTableRequest.criteria = projectCriteria;
		//const dataTableRequest: RequestItem<ProjectCriteria> = { criteria: projectCriteria };
		//return this.projectService.getPaged(dataTableRequest, "autocomplete").map(x => x.data);
		return this.projectService.getPublicPaged(dataTableRequest).map(x => x.data);
	}

	public dmpOrganisationSearch(value: string): Observable<ExternalSourceItemModel[]> {
		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): Observable<ExternalSourceItemModel[]> {
		this.filteredTags = undefined;
		this.filteringTagsAsync = true;
		const requestItem: RequestItem<TagCriteria> = new RequestItem();
		const criteria: TagCriteria = new TagCriteria();
		criteria.like = value;
		requestItem.criteria = criteria;
		return this.externalSourcesService.searchDatasetTags(requestItem);
		// .subscribe(items => {
		// 	this.filteredTags = items;
		// 	this.filteringTagsAsync = false;
		// });


	}
}