diff --git a/dmp-frontend/src/app/core/model/dataset/dataset-profile.ts b/dmp-frontend/src/app/core/model/dataset/dataset-profile.ts index e926bd9d9..7c1e6e37a 100644 --- a/dmp-frontend/src/app/core/model/dataset/dataset-profile.ts +++ b/dmp-frontend/src/app/core/model/dataset/dataset-profile.ts @@ -1,7 +1,7 @@ export interface DatasetProfileModel { - id: String; - label: String; + id: string; + label: string; } // export class DatasetProfileModel implements Serializable { diff --git a/dmp-frontend/src/app/core/model/organisation/organization.ts b/dmp-frontend/src/app/core/model/organisation/organization.ts index d623e9623..58e807273 100644 --- a/dmp-frontend/src/app/core/model/organisation/organization.ts +++ b/dmp-frontend/src/app/core/model/organisation/organization.ts @@ -1,8 +1,8 @@ import { Status } from "../../common/enum/Status"; export interface OrganizationModel { - id: String; - name: String; - label: String; + id: string; + name: string; + label: string; status: Status; } diff --git a/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html b/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html index 07ffaead9..c9359f353 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html +++ b/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html @@ -1,4 +1,57 @@ - +
+
{{'CRITERIA.FILTERS'| translate}}
+
+ + + + + +
+
{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}
+ Active + Inactive +
+ +
+
{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}
+ + + + arrow_drop_down + +
+ +
+
{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}
+ + + + arrow_drop_down + +
+ +
+
{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}
+ + + + arrow_drop_down + +
+
+
+ + + diff --git a/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.scss b/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.scss index 9c5d328da..6849ebbc0 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.scss +++ b/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.scss @@ -1,9 +1,102 @@ .facet-search-component { - .mat-form-field { - width: 100%; - } + .mat-form-field { + width: 100%; + } - .tags-chips { - padding: 0px; - } + .tags-chips { + padding: 0px; + } +} + +.search ::ng-deep.mat-form-field-infix { + margin-left: 1em; +} + +.category-title { + color: #2e75b6; + margin-top: 8px; + margin-bottom: 12px; +} + +.import { + margin: 10px; + padding: 0px; +} + +.filters { + border: 1px solid #e4e4e4; + border-radius: 5px; +} + +.filters-title { + width: 90px; + color: #2e75b6; + background-color: white; + padding: 0px 20px; + margin-top: -10px; + margin-left: 20px; + text-transform: uppercase; +} + +.style-icon { + color: #adadad; +} + +::ng-deep .mat-checkbox-inner-container { + background: white; +} + +::ng-deep .mat-focused .mat-form-field-label { + color: #2e75b6 !important; +} + +::ng-deep.mat-form-field-underline { + background-color: #adadad !important; +} + +::ng-deep.mat-form-field-ripple { + background-color: #2e75b6 !important; +} + +// ::ng-deep .mat-checkbox { +// background-color: #f6f6f6 !important; +// } + +::ng-deep .mat-checkbox .mat-checkbox-frame { + border: 1px solid #aaaaaa; +} + +::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, +.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, +.mat-accent .mat-pseudo-checkbox-checked, +.mat-accent .mat-pseudo-checkbox-indeterminate, +.mat-pseudo-checkbox-checked, +.mat-pseudo-checkbox-indeterminate { + background-color: #2e75b6; +} + +::ng-deep .mat-ripple-element { + background-color: #2e74b649 !important; +} + +::ng-deep .mat-radio-container { + border-radius: 1em; + background: white; +} + +::ng-deep .mat-radio-button .mat-radio-outer-circle { + border: 1px solid #aaaaaa; +} + +::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle { + border-color: #2e75b6; +} + +::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle { + color: #2e75b6; + background-color: #2e75b6; +} + +.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element { + background-color: #2e74b649; } diff --git a/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.ts b/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.ts index b8d5d9ad3..5b8fc877b 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.ts +++ b/dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.ts @@ -1,35 +1,55 @@ -import { BaseComponent } from "../../../core/common/base/base.component"; -import { Component, AfterViewInit, OnInit, Input, EventEmitter, Output, ViewChild } from "@angular/core"; -import { ExploreDmpCriteriaModel } from "../../../core/query/explore-dmp/explore-dmp-criteria"; -import { MatAccordion } from "@angular/material"; +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 { ExternalSourceItemModel } from "../../../core/model/external-sources/external-source-item"; import { Observable } from "rxjs"; -import { ExternalSourcesService } from "../../../core/services/external-sources/external-sources.service"; -import { ProjectListingModel } from "../../../core/model/project/project-listing"; -import { ProjectService } from "../../../core/services/project/project.service"; -import { ProjectCriteria } from "../../../core/query/project/project-criteria"; -import { DataTableRequest } from "../../../core/model/data-table/data-table-request"; +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 { DatasetService } from "../../../core/services/dataset/dataset.service"; +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 BaseComponent implements OnInit, AfterViewInit { +export class ExploreDmpFiltersComponent extends BaseCriteriaComponent implements OnInit, AfterViewInit { @Input() facetCriteria = new ExploreDmpCriteriaModel(); @Output() facetCriteriaChange = new EventEmitter(); + @Input() displayTitleFunc: (value) => string; ProjectStateType = ProjectStateType; projects: Observable; profiles: Observable; dmpOrganisations: Observable; projectOptions: Observable; projectStateOptions: Observable; + 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']; @@ -44,13 +64,50 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit, 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, - ) { super(); } + 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 => { @@ -65,7 +122,15 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit, } ngAfterViewInit(): void { - this.accordion.openAll(); + // this.accordion.openAll(); + } + + OnChange($event){ + console.log($event); + } + + OnIndeterminateChange($event){ + console.log($event); } controlModified() { @@ -87,13 +152,18 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit, } projectStatusChanged(event) { - this.facetCriteria.projectStatus = event.option.value.value; - if (!event.option.selected) { + console.log(event); + this.facetCriteria.projectStatus = event.value; + // this.facetCriteria.projectStatus = +event.source.ariaLabel; // For checkboxes + // this.facetCriteria.projectStatus = event.option.value.value; // For + if (!event.source.checked) { this.facetCriteria.projectStatus = null; this.projects = Observable.of([]); this.facetCriteria.projects = []; } - if (event.option.selected) { + // if (event.checked) { + // if (event.option.selected) { + if (event.source.checked) { const fields: Array = new Array(); fields.push('asc'); const dataTableRequest: DataTableRequest = new DataTableRequest(0, null, { fields: fields }); @@ -122,6 +192,20 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit, 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) { @@ -139,6 +223,34 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit, 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); } @@ -161,4 +273,50 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit, 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 = new Array(); + fields.push('asc'); + const projectRequestItem: DataTableRequest = 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 = new Array(); + fields.push('asc'); + const profileRequestItem: DataTableRequest = 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 = new Array(); + fields.push('asc'); + const dataTableRequest: DataTableRequest = 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; + } } diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html index daeb2a07a..1abf4fe43 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html +++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html @@ -17,6 +17,7 @@
+