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

import { Component, OnInit, ViewEncapsulation, Input, ViewChild, Output, EventEmitter } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { BreadCrumbResolverService } from '../../../services/breadcrumb/breadcrumb-resolver.service';
import { Observable } from 'rxjs/Observable';
import { FacetSearchCriteriaModel } from '../../../models/facet-search/FacetSearchCriteriaModel';
import { ProjectStateType } from '../../../models/projects/ProjectStateType';
import { ProjectModel } from '../../../models/projects/ProjectModel';
import { ProjectService } from '../../../services/project/project.service';
import { ProjectCriteria } from '../../../models/criteria/project/ProjectCriteria';
import { DataTableRequest } from '../../../models/data-table/DataTableRequest';
import { ProjectListingModel } from '../../../models/projects/ProjectListingModel';
import { MatSelectionList, MatListOption, MatSelectionListChange } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { DatasetProfileService } from '../../../services/dataset-profile.service';
import { DatasetService } from '../../../services/dataset/dataset.service';
import { DatasetProfileModel } from '../../../models/datasetprofile/DatasetProfileModel';
import { RequestItem } from '../../../models/criteria/RequestItem';
import { ExternalSourcesService } from '../../../services/external-sources/external-sources.service';
import { ExternalSourcesItemModel } from '../../../models/external-sources/ExternalSourcesItemModel';
import { FormControl } from '@angular/forms';
import { LanguageService } from '../../../services/language/language.service';
import { TranslateService } from '@ngx-translate/core';

@Component({
	selector: 'app-facet',
	templateUrl: './facet-search.component.html',
	styleUrls: ['./facet-search.component.scss'],
	encapsulation: ViewEncapsulation.None,
	providers: [ProjectService]
})
export class FacetSearchComponent implements OnInit {

	@Input()
	facetCriteria = new FacetSearchCriteriaModel();

	@Output()
	facetCriteriaChange = new EventEmitter();




	removable = true;
	ProjectStateType = ProjectStateType;
	projects: Observable<ProjectModel[]>;
	profiles: Observable<DatasetProfileModel[]>;
	dmpOrganisations: Observable<ExternalSourcesItemModel[]>;
	projectSearchControl = new FormControl('');
	organisationSearchControl = new FormControl('');

	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 },
		]);
	projectOptions: Observable<ProjectModel[]>;

	@ViewChild('project') projectSelectionList: MatSelectionList;

	displayProjectStateValue = (option) => option['value'];
	displayProjectStateLabel = (option) => option['label'];

	displayProjectValue = (option) => option['id'];
	displayProjectLabel = (option) => option['label'];

	constructor(
		public activatedRoute: ActivatedRoute,
		public projectService: ProjectService,
		public languageService: TranslateService,
		public datasetProfileService: DatasetService,
		public externalSourcesService: ExternalSourcesService
	) {
	}

	ngOnInit() {
		this.profiles = this.datasetProfileService.getDatasetProfiles();
		this.dmpOrganisations = this.externalSourcesService.searchDMPOrganizations('');
		this.projectSearchControl.valueChanges.subscribe(x => this.projectSearch(x));
		this.organisationSearchControl.valueChanges.subscribe(x => this.dmpOrganisationSearch(x));
	}

	public projectStatusChanged(event) {
		this.facetCriteria.projectStatus = event.option.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;
		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) {
		const list = this.projectSelectionList.selectedOptions.selected.map(x => x.value);
		const indexOfProject = list.indexOf(project);
		if (this.projectSelectionList.selectedOptions.selected[indexOfProject]) {
			this.projectSelectionList.selectedOptions.selected[indexOfProject].selected = false;
			this.projectSelectionList.selectedOptions.selected.splice(indexOfProject, 1);
		}
		this.facetCriteria.projects.splice(this.facetCriteria.projects.indexOf(project), 1);
		this.facetCriteriaChange.emit(this.facetCriteria);
	}

	public profileChanged(event: any) {
		const eventValue = event.option.value;
		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);
	}

	public dmpOrganisationChanged(event: any) {
		const eventValue = event.option.value;
		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 projectIsSelected(value: string) {
		return this.facetCriteria.projects.indexOf(value) !== -1;
	}

	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) {
		this.dmpOrganisations = this.externalSourcesService.searchDMPOrganizations(value);
	}
}