323 lines
12 KiB
TypeScript
323 lines
12 KiB
TypeScript
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
|
|
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
|
|
import { MatAccordion, fadeInItems, MatGridTileHeaderCssMatStyler } from "@angular/material";
|
|
import { ActivatedRoute } from "@angular/router";
|
|
import { TranslateService } from "@ngx-translate/core";
|
|
import { Observable } from "rxjs";
|
|
import { takeUntil } from "rxjs/operators";
|
|
import { ValidationErrorModel } from "../../../common/forms/validation/error-model/validation-error-model";
|
|
import { ProjectStateType } from '../../../core/common/enum/project-state-type';
|
|
import { DataTableRequest } from "../../../core/model/data-table/data-table-request";
|
|
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 { ExploreDmpCriteriaModel } from "../../../core/query/explore-dmp/explore-dmp-criteria";
|
|
import { ProjectCriteria } from "../../../core/query/project/project-criteria";
|
|
import { DatasetService } from "../../../core/services/dataset/dataset.service";
|
|
import { DmpService } from "../../../core/services/dmp/dmp.service";
|
|
import { ExternalSourcesService } from "../../../core/services/external-sources/external-sources.service";
|
|
import { ProjectService } from "../../../core/services/project/project.service";
|
|
import { MultipleAutoCompleteConfiguration } from "../../../library/auto-complete/multiple/multiple-auto-complete-configuration";
|
|
import { BaseCriteriaComponent } from "../../misc/criteria/base-criteria.component";
|
|
import { OrganizationModel } from "../../../core/model/organisation/organization";
|
|
import { OrganisationCriteria } from "../../../core/query/organisation/organisation-criteria";
|
|
import { OrganisationService } from "../../../core/services/organisation/organisation.service";
|
|
|
|
@Component({
|
|
selector: 'app-explore-dmp-filters-component',
|
|
templateUrl: './explore-dmp-filters.component.html',
|
|
styleUrls: ['./explore-dmp-filters.component.scss']
|
|
})
|
|
export class ExploreDmpFiltersComponent extends BaseCriteriaComponent implements OnInit, AfterViewInit {
|
|
|
|
@Input() facetCriteria = new ExploreDmpCriteriaModel();
|
|
@Output() facetCriteriaChange = new EventEmitter();
|
|
@Input() displayTitleFunc: (value) => string;
|
|
ProjectStateType = ProjectStateType;
|
|
projects: Observable<ProjectListingModel[]>;
|
|
profiles: Observable<DatasetProfileModel[]>;
|
|
dmpOrganisations: Observable<ExternalSourceItemModel[]>;
|
|
projectOptions: Observable<ProjectListingModel[]>;
|
|
projectStateOptions: Observable<any[]>;
|
|
filteringOrganisationsAsync = false;
|
|
filteredOrganisations: ExternalSourceItemModel[];
|
|
status: ProjectStateType;
|
|
IsChecked: boolean;
|
|
IsIndeterminate: boolean;
|
|
LabelAlign: string;
|
|
IsDisabled: boolean;
|
|
Active: string;
|
|
Inactive: string;
|
|
|
|
@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'];
|
|
|
|
profileAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
|
filterFn: this.filterProfile.bind(this),
|
|
initialItems: (excludedItems: any[]) =>
|
|
this.getProfiles()
|
|
.map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
|
|
displayFn: (item) => item['label'],
|
|
titleFn: (item) => item['label']
|
|
};
|
|
|
|
organizationAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
|
filterFn: this.filterOrganisation.bind(this),
|
|
initialItems: (excludedItems: any[]) =>
|
|
this.getOrganisations()
|
|
.map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
|
|
displayFn: (item) => item['name'],
|
|
titleFn: (item) => item['name']
|
|
}
|
|
|
|
projectAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
|
filterFn: this.filterProject.bind(this),
|
|
initialItems: (excludedItems: any[]) =>
|
|
this.filterProject('')
|
|
.map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
|
|
displayFn: (item) => item['label'],
|
|
titleFn: (item) => item['label']
|
|
}
|
|
|
|
constructor(
|
|
public activatedRoute: ActivatedRoute,
|
|
public languageService: TranslateService,
|
|
public projectService: ProjectService,
|
|
public datasetProfileService: DatasetService,
|
|
public organisationService: OrganisationService,
|
|
public externalSourcesService: ExternalSourcesService,
|
|
private dmpService: DmpService
|
|
) {
|
|
super(new ValidationErrorModel());
|
|
this.IsChecked = false;
|
|
this.IsIndeterminate = false;
|
|
this.LabelAlign = 'after';
|
|
this.IsDisabled = false;
|
|
this.Active = "0";
|
|
this.Inactive = "1";
|
|
}
|
|
|
|
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();
|
|
}
|
|
|
|
OnChange($event){
|
|
console.log($event);
|
|
}
|
|
|
|
OnIndeterminateChange($event){
|
|
console.log($event);
|
|
}
|
|
|
|
controlModified() {
|
|
this.facetCriteriaChange.emit(this.facetCriteria);
|
|
}
|
|
|
|
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;
|
|
return this.projectService.getPublicPaged(dataTableRequest).map(x => x.data);
|
|
}
|
|
|
|
projectStatusChanged(event) {
|
|
console.log(event);
|
|
this.facetCriteria.projectStatus = event.value;
|
|
// this.facetCriteria.projectStatus = +event.source.ariaLabel; // For checkboxes
|
|
// this.facetCriteria.projectStatus = event.option.value.value; // For <app-explore-dmp-filter-item-component>
|
|
if (!event.source.checked) {
|
|
this.facetCriteria.projectStatus = null;
|
|
this.projects = Observable.of([]);
|
|
this.facetCriteria.projects = [];
|
|
}
|
|
// if (event.checked) {
|
|
// if (event.option.selected) {
|
|
if (event.source.checked) {
|
|
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);
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
onProfileOptionSelected(items: DatasetProfileModel[]) {
|
|
this.facetCriteria.datasetProfile.splice(0);
|
|
this.facetCriteria.datasetProfile.push(...items.map(x => x.id));
|
|
this.facetCriteriaChange.emit(this.facetCriteria);
|
|
}
|
|
|
|
onProfileOptionRemoved(item: DatasetProfileModel) {
|
|
const index = this.facetCriteria.datasetProfile.indexOf(item.id);
|
|
if (index >= 0) {
|
|
this.facetCriteria.datasetProfile.splice(index, 1);
|
|
this.facetCriteriaChange.emit(this.facetCriteria);
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
onOrganizationOptionSelected(items: OrganizationModel[]) {
|
|
this.facetCriteria.dmpOrganisations.splice(0);
|
|
this.facetCriteria.dmpOrganisations.push(...items.map(x => x.id));
|
|
this.facetCriteriaChange.emit(this.facetCriteria);
|
|
}
|
|
|
|
onOrganizationOptionRemoved(item: OrganizationModel) {
|
|
const index = this.facetCriteria.dmpOrganisations.indexOf(item.id);
|
|
if (index >= 0) {
|
|
this.facetCriteria.dmpOrganisations.splice(index, 1);
|
|
this.facetCriteriaChange.emit(this.facetCriteria);
|
|
}
|
|
}
|
|
|
|
onProjectOptionSelected(items: ProjectListingModel[]) {
|
|
this.facetCriteria.projects.splice(0);
|
|
this.facetCriteria.projects.push(...items.map(x => x.id));
|
|
this.facetCriteriaChange.emit(this.facetCriteria);
|
|
}
|
|
|
|
onProjectOptionRemoved(item: ProjectListingModel) {
|
|
const index = this.facetCriteria.projects.indexOf(item.id);
|
|
if (index >= 0) {
|
|
this.facetCriteria.projects.splice(index, 1);
|
|
this.facetCriteriaChange.emit(this.facetCriteria);
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
profileSearch(value: string) {
|
|
return this.datasetProfileService.getDatasetProfiles();
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
getProfiles() {
|
|
return this.datasetProfileService.getDatasetProfiles();
|
|
}
|
|
|
|
getOrganisations() {
|
|
return this.externalSourcesService.searchDMPOrganizations('');
|
|
}
|
|
|
|
filterProject(query: string) {
|
|
const fields: Array<string> = new Array<string>();
|
|
fields.push('asc');
|
|
const projectRequestItem: DataTableRequest<ProjectCriteria> = new DataTableRequest(0, null, { fields: fields });
|
|
projectRequestItem.criteria = new ProjectCriteria();
|
|
projectRequestItem.criteria.like = query;
|
|
return this.projectService.getPublicPaged(projectRequestItem).map(x => x.data);
|
|
}
|
|
|
|
filterProfile(query: string) {
|
|
const fields: Array<string> = new Array<string>();
|
|
fields.push('asc');
|
|
const profileRequestItem: DataTableRequest<ExploreDatasetCriteriaModel> = new DataTableRequest(0, null, { fields: fields });
|
|
profileRequestItem.criteria = new ExploreDatasetCriteriaModel();
|
|
profileRequestItem.criteria.like = query;
|
|
|
|
return this.dmpService.getPublicPaged(profileRequestItem).map(x => x.data);
|
|
}
|
|
|
|
filterOrganisation(value: string) {
|
|
this.filteringOrganisationsAsync = true;
|
|
const fields: Array<string> = new Array<string>();
|
|
fields.push('asc');
|
|
const dataTableRequest: DataTableRequest<OrganisationCriteria> = new DataTableRequest(0, null, { fields: fields });
|
|
dataTableRequest.criteria = new OrganisationCriteria();
|
|
dataTableRequest.criteria.labelLike = value;
|
|
|
|
return this.organisationService.searchInternalOrganisations(dataTableRequest).map(x => x.data);
|
|
}
|
|
|
|
displayLabel(value) {
|
|
return this.displayTitleFunc ? this.displayTitleFunc(value) : value;
|
|
}
|
|
|
|
isOptionSelected(profile: any) {
|
|
return this.formGroup.value.map(x => x.id).indexOf(profile.id) !== -1;
|
|
}
|
|
}
|