MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

no message

This commit is contained in:
Ioannis Kalyvas 2018-10-05 13:03:22 +03:00
parent b8c78e7135
commit 6a72f8dbba
6 changed files with 501 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/models/facet-search/FacetSearchCriteriaModel.ts
View File

@ -1,4 +1,4 @@
import { ProjectStateType } from "../projects/ProjectStateType";
import { ProjectStateType } from '../projects/ProjectStateType';
export class FacetSearchCriteriaModel {
public projectStatus: ProjectStateType;

8
dmp-frontend/src/app/shared/components/facets/facet-search-component/facet-search-section.component.html
View File

@ -3,13 +3,13 @@
<input type="text" placeholder="{{ 'FACET-SEARCH.FILTER' | translate }}" matInput [formControl]="optionSearchControl">
</mat-form-field>
</div>
<mat-chip-list>
<mat-chip [removable]="removable" (removed)="removeOption(option)" *ngFor="let option of selectedOptions">{{ option }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
<mat-chip-list *ngIf="searchEnabled">
<mat-chip [removable]="true" (removed)="removeOption(option)" *ngFor="let option of selectedOptions">{{ displayLabel(option) }}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<mat-selection-list #optionsList (selectionChange)="selectionChanged($event)">
<mat-list-option *ngFor="let option of (options | async) | slice:0:10" [value]="displayValue(option)" [selected]="isOptionSelected(option)">
<mat-list-option *ngFor="let option of (options | async) | slice:0:10" [value]="option" [selected]="isOptionSelected(option)">
<p>{{ displayLabel(option) }}</p>
</mat-list-option>
</mat-selection-list>

17
dmp-frontend/src/app/shared/components/facets/facet-search-component/facet-search-section.component.ts
View File

@ -1,7 +1,8 @@
import { Component, ViewEncapsulation, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { FormControl } from '@angular/forms';
import { MatSelectionList } from '@angular/material';
import { MatSelectionList, MatListOption } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
@Component({
selector: 'app-facet-section-component',
@ -14,6 +15,9 @@ export class FacetSearchSectionComponent implements OnInit {
@Input()
searchEnabled = false;
@Input()
multipleSelect = true;
@Input()
filterOptions: (value) => Observable<any[]>;
@ -40,10 +44,17 @@ export class FacetSearchSectionComponent implements OnInit {
ngOnInit(): void {
if (!this.multipleSelect) { this.selectionList.selectedOptions = new SelectionModel<MatListOption>(this.multipleSelect); }
this.optionSearchControl.valueChanges.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
}
public selectionChanged(event: any) {
const eventValue = event.option.value;
if (event.option.selected) { this.selectedOptions.push(eventValue); }
if (!event.option.selected) {
const index = this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(eventValue));
this.selectedOptions.splice(index, 1);
}
this.selectedChanged.emit(event);
}
@ -54,11 +65,12 @@ export class FacetSearchSectionComponent implements OnInit {
this.selectionList.selectedOptions.selected[indexOfProject].selected = false;
this.selectionList.selectedOptions.selected.splice(indexOfProject, 1);
}
this.selectedOptions.splice(this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(project)), 1);
this.optionRemoved.emit(project);
}
public isOptionSelected(value) {
return this.selectedOptions.indexOf(value) !== -1;
return this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(value)) !== -1;
}
displayLabel(value) {
@ -68,4 +80,5 @@ export class FacetSearchSectionComponent implements OnInit {
displayValue(value) {
return this.displayValueFunc ? this.displayValueFunc(value) : value;
}
}

58
dmp-frontend/src/app/shared/components/facets/facet-search.component.html
View File

@ -5,14 +5,10 @@
{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<mat-selection-list #projectState role="listbox" (selectionChange)="projectStatusChanged($event)">
<mat-list-option [value]="ProjectStateType.Finished">
<p>{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE' | translate }}</p>
</mat-list-option>
<mat-list-option [value]="ProjectStateType.OnGoing">
<p>{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE' | translate }}</p>
</mat-list-option>
</mat-selection-list>
<app-facet-section-component [multipleSelect]="false" [options]="this.projectStateOptions" (selectedChanged)="projectStatusChanged($event)"
[displayTitleFunc]="displayProjectStateLabel" [displayValueFunc]="displayProjectStateValue">
</app-facet-section-component>
</mat-expansion-panel>
<mat-expansion-panel *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished">
<mat-expansion-panel-header>
@ -20,22 +16,11 @@
{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<mat-form-field>
<input type="text" placeholder="{{ 'FACET-SEARCH.PROJECT.FILTER' | translate }}" matInput [formControl]="projectSearchControl">
</mat-form-field>
</div>
<mat-chip-list>
<mat-chip [removable]="removable" (removed)="removeProject(project)" *ngFor="let project of facetCriteria.projects">{{
project }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
<mat-selection-list #project (selectionChange)="projectChanged($event)">
<mat-list-option *ngFor="let project of (projects | async) | slice:0:10" [value]="project.id" [selected]="projectIsSelected(project.id)">
<p>{{ project.label }}</p>
</mat-list-option>
</mat-selection-list>
<app-facet-section-component [options]="this.projects" (selectedChanged)="projectChanged($event)" [filterOptions]="projectSearch.bind(this)"
[searchEnabled]="true" (optionRemoved)="removeProject($event)" [displayTitleFunc]="displayProjectLabel"
[displayValueFunc]="displayProjectValue">
</app-facet-section-component>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
@ -43,11 +28,10 @@
{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<mat-selection-list (selectionChange)="profileChanged($event)">
<mat-list-option *ngFor="let profile of (profiles | async) | slice:0:10" [value]="profile.id">
<p>{{ profile.label }}</p>
</mat-list-option>
</mat-selection-list>
<app-facet-section-component [options]="this.profiles" (selectedChanged)="profileChanged($event)" [filterOptions]="profileSearch.bind(this)"
[searchEnabled]="true" (optionRemoved)="removeProfile($event)" [displayTitleFunc]="displayProfileLabel"
[displayValueFunc]="displayProfileValue">
</app-facet-section-component>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
@ -55,16 +39,10 @@
{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<div>
<mat-form-field>
<input type="text" placeholder="{{ 'FACET-SEARCH.DMP-ORGANISATIONS.FILTER' | translate }}" matInput
[formControl]="organisationSearchControl">
</mat-form-field>
</div>
<mat-selection-list (selectionChange)="dmpOrganisationChanged($event)">
<mat-list-option *ngFor="let dmpOrganisation of (dmpOrganisations | async) | slice:0:10" [value]="dmpOrganisation.id">
<p>{{ dmpOrganisation.name }}</p>
</mat-list-option>
</mat-selection-list>
<app-facet-section-component [options]="this.dmpOrganisations" (selectedChanged)="dmpOrganisationChanged($event)"
[filterOptions]="dmpOrganisationSearch.bind(this)" (optionRemoved)="removeOrganisation($event)" [searchEnabled]="true"
[displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
</app-facet-section-component>
</mat-expansion-panel>
</mat-accordion>

66
dmp-frontend/src/app/shared/components/facets/facet-search.component.ts
View File

@ -36,32 +36,25 @@ export class FacetSearchComponent implements OnInit {
@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;
projectStateOptions: Observable<any[]>;
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,
@ -72,14 +65,19 @@ export class FacetSearchComponent implements OnInit {
}
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('');
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;
this.facetCriteria.projectStatus = event.option.value.value;
if (!event.option.selected) {
this.facetCriteria.projectStatus = null;
this.projects = Observable.of([]);
@ -97,7 +95,7 @@ export class FacetSearchComponent implements OnInit {
}
public projectChanged(event: any) {
const eventValue = event.option.value;
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);
@ -107,18 +105,12 @@ export class FacetSearchComponent implements OnInit {
}
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;
const eventValue = event.option.value.id;
if (event.option.selected) {
this.facetCriteria.datasetProfile.push(eventValue);
}
@ -129,8 +121,13 @@ export class FacetSearchComponent implements OnInit {
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;
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);
@ -139,10 +136,6 @@ export class FacetSearchComponent implements OnInit {
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;
@ -152,7 +145,16 @@ export class FacetSearchComponent implements OnInit {
return this.projectService.get(dataTableRequest);
}
public dmpOrganisationSearch(value: string) {
this.dmpOrganisations = this.externalSourcesService.searchDMPOrganizations(value);
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();
}
}

1
dmp-frontend/src/assets/lang/en.json
View File

@ -380,6 +380,7 @@
}
},
"FACET-SEARCH": {
"FILTER": "Filter",
"PROJECT-STATUS": {
"TITLE": "Project Status",
"OPTIONS": {