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 { export class FacetSearchCriteriaModel {
public projectStatus: ProjectStateType; 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"> <input type="text" placeholder="{{ 'FACET-SEARCH.FILTER' | translate }}" matInput [formControl]="optionSearchControl">
</mat-form-field> </mat-form-field>
</div> </div>
<mat-chip-list> <mat-chip-list *ngIf="searchEnabled">
<mat-chip [removable]="removable" (removed)="removeOption(option)" *ngFor="let option of selectedOptions">{{ option }} <mat-chip [removable]="true" (removed)="removeOption(option)" *ngFor="let option of selectedOptions">{{ displayLabel(option) }}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
<mat-selection-list #optionsList (selectionChange)="selectionChanged($event)"> <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> <p>{{ displayLabel(option) }}</p>
</mat-list-option> </mat-list-option>
</mat-selection-list> </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 { Component, ViewEncapsulation, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
import { Observable } from 'rxjs/Observable'; import { Observable } from 'rxjs/Observable';
import { FormControl } from '@angular/forms'; import { FormControl } from '@angular/forms';
import { MatSelectionList } from '@angular/material'; import { MatSelectionList, MatListOption } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
@Component({ @Component({
selector: 'app-facet-section-component', selector: 'app-facet-section-component',
@ -14,6 +15,9 @@ export class FacetSearchSectionComponent implements OnInit {
@Input() @Input()
searchEnabled = false; searchEnabled = false;
@Input()
multipleSelect = true;
@Input() @Input()
filterOptions: (value) => Observable<any[]>; filterOptions: (value) => Observable<any[]>;
@ -40,10 +44,17 @@ export class FacetSearchSectionComponent implements OnInit {
ngOnInit(): void { 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); } }); this.optionSearchControl.valueChanges.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
} }
public selectionChanged(event: any) { 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); this.selectedChanged.emit(event);
} }
@ -54,11 +65,12 @@ export class FacetSearchSectionComponent implements OnInit {
this.selectionList.selectedOptions.selected[indexOfProject].selected = false; this.selectionList.selectedOptions.selected[indexOfProject].selected = false;
this.selectionList.selectedOptions.selected.splice(indexOfProject, 1); 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); this.optionRemoved.emit(project);
} }
public isOptionSelected(value) { public isOptionSelected(value) {
return this.selectedOptions.indexOf(value) !== -1; return this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(value)) !== -1;
} }
displayLabel(value) { displayLabel(value) {
@ -68,4 +80,5 @@ export class FacetSearchSectionComponent implements OnInit {
displayValue(value) { displayValue(value) {
return this.displayValueFunc ? this.displayValueFunc(value) : 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 }} {{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-selection-list #projectState role="listbox" (selectionChange)="projectStatusChanged($event)"> <app-facet-section-component [multipleSelect]="false" [options]="this.projectStateOptions" (selectedChanged)="projectStatusChanged($event)"
<mat-list-option [value]="ProjectStateType.Finished"> [displayTitleFunc]="displayProjectStateLabel" [displayValueFunc]="displayProjectStateValue">
<p>{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE' | translate }}</p>
</mat-list-option> </app-facet-section-component>
<mat-list-option [value]="ProjectStateType.OnGoing">
<p>{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE' | translate }}</p>
</mat-list-option>
</mat-selection-list>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished"> <mat-expansion-panel *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished">
<mat-expansion-panel-header> <mat-expansion-panel-header>
@ -20,22 +16,11 @@
{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }} {{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div>
<mat-form-field> <app-facet-section-component [options]="this.projects" (selectedChanged)="projectChanged($event)" [filterOptions]="projectSearch.bind(this)"
<input type="text" placeholder="{{ 'FACET-SEARCH.PROJECT.FILTER' | translate }}" matInput [formControl]="projectSearchControl"> [searchEnabled]="true" (optionRemoved)="removeProject($event)" [displayTitleFunc]="displayProjectLabel"
</mat-form-field> [displayValueFunc]="displayProjectValue">
</div> </app-facet-section-component>
<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>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
@ -43,11 +28,10 @@
{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }} {{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<mat-selection-list (selectionChange)="profileChanged($event)"> <app-facet-section-component [options]="this.profiles" (selectedChanged)="profileChanged($event)" [filterOptions]="profileSearch.bind(this)"
<mat-list-option *ngFor="let profile of (profiles | async) | slice:0:10" [value]="profile.id"> [searchEnabled]="true" (optionRemoved)="removeProfile($event)" [displayTitleFunc]="displayProfileLabel"
<p>{{ profile.label }}</p> [displayValueFunc]="displayProfileValue">
</mat-list-option> </app-facet-section-component>
</mat-selection-list>
</mat-expansion-panel> </mat-expansion-panel>
<mat-expansion-panel> <mat-expansion-panel>
<mat-expansion-panel-header> <mat-expansion-panel-header>
@ -55,16 +39,10 @@
{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }} {{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div>
<mat-form-field> <app-facet-section-component [options]="this.dmpOrganisations" (selectedChanged)="dmpOrganisationChanged($event)"
<input type="text" placeholder="{{ 'FACET-SEARCH.DMP-ORGANISATIONS.FILTER' | translate }}" matInput [filterOptions]="dmpOrganisationSearch.bind(this)" (optionRemoved)="removeOrganisation($event)" [searchEnabled]="true"
[formControl]="organisationSearchControl"> [displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
</mat-form-field> </app-facet-section-component>
</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>
</mat-expansion-panel> </mat-expansion-panel>
</mat-accordion> </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() @Output()
facetCriteriaChange = new EventEmitter(); facetCriteriaChange = new EventEmitter();
removable = true;
ProjectStateType = ProjectStateType; ProjectStateType = ProjectStateType;
projects: Observable<ProjectModel[]>; projects: Observable<ProjectModel[]>;
profiles: Observable<DatasetProfileModel[]>; profiles: Observable<DatasetProfileModel[]>;
dmpOrganisations: Observable<ExternalSourcesItemModel[]>; 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[]>; projectOptions: Observable<ProjectModel[]>;
@ViewChild('project') projectSelectionList: MatSelectionList; projectStateOptions: Observable<any[]>;
displayProjectStateValue = (option) => option['value']; displayProjectStateValue = (option) => option['value'];
displayProjectStateLabel = (option) => option['label']; displayProjectStateLabel = (option) => option['label'];
displayProjectValue = (option) => option['id']; displayProjectValue = (option) => option['id'];
displayProjectLabel = (option) => option['label']; displayProjectLabel = (option) => option['label'];
displayProfileValue = (option) => option['id'];
displayProfileLabel = (option) => option['label'];
displayDmpOrganisationsValue = (option) => option['id'];
displayDmpOrganisationsLabel = (option) => option['name'];
constructor( constructor(
public activatedRoute: ActivatedRoute, public activatedRoute: ActivatedRoute,
public projectService: ProjectService, public projectService: ProjectService,
@ -72,14 +65,19 @@ export class FacetSearchComponent implements OnInit {
} }
ngOnInit() { 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.profiles = this.datasetProfileService.getDatasetProfiles();
this.dmpOrganisations = this.externalSourcesService.searchDMPOrganizations(''); this.dmpOrganisations = this.externalSourcesService.searchDMPOrganizations('');
this.projectSearchControl.valueChanges.subscribe(x => this.projectSearch(x));
this.organisationSearchControl.valueChanges.subscribe(x => this.dmpOrganisationSearch(x));
} }
public projectStatusChanged(event) { public projectStatusChanged(event) {
this.facetCriteria.projectStatus = event.option.value; this.facetCriteria.projectStatus = event.option.value.value;
if (!event.option.selected) { if (!event.option.selected) {
this.facetCriteria.projectStatus = null; this.facetCriteria.projectStatus = null;
this.projects = Observable.of([]); this.projects = Observable.of([]);
@ -97,7 +95,7 @@ export class FacetSearchComponent implements OnInit {
} }
public projectChanged(event: any) { 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) { this.facetCriteria.projects.push(eventValue); }
if (!event.option.selected) { if (!event.option.selected) {
const index = this.facetCriteria.projects.indexOf(eventValue); const index = this.facetCriteria.projects.indexOf(eventValue);
@ -107,18 +105,12 @@ export class FacetSearchComponent implements OnInit {
} }
removeProject(project) { 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.facetCriteria.projects.splice(this.facetCriteria.projects.indexOf(project), 1);
this.facetCriteriaChange.emit(this.facetCriteria); this.facetCriteriaChange.emit(this.facetCriteria);
} }
public profileChanged(event: any) { public profileChanged(event: any) {
const eventValue = event.option.value; const eventValue = event.option.value.id;
if (event.option.selected) { if (event.option.selected) {
this.facetCriteria.datasetProfile.push(eventValue); this.facetCriteria.datasetProfile.push(eventValue);
} }
@ -129,8 +121,13 @@ export class FacetSearchComponent implements OnInit {
this.facetCriteriaChange.emit(this.facetCriteria); 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) { 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) { this.facetCriteria.dmpOrganisations.push(eventValue); }
if (!event.option.selected) { if (!event.option.selected) {
const index = this.facetCriteria.dmpOrganisations.indexOf(eventValue); const index = this.facetCriteria.dmpOrganisations.indexOf(eventValue);
@ -139,10 +136,6 @@ export class FacetSearchComponent implements OnInit {
this.facetCriteriaChange.emit(this.facetCriteria); this.facetCriteriaChange.emit(this.facetCriteria);
} }
public projectIsSelected(value: string) {
return this.facetCriteria.projects.indexOf(value) !== -1;
}
public projectSearch(value: string): Observable<ProjectModel[]> { public projectSearch(value: string): Observable<ProjectModel[]> {
const projectCriteria = new ProjectCriteria(); const projectCriteria = new ProjectCriteria();
projectCriteria.projectStateType = this.facetCriteria.projectStatus; projectCriteria.projectStateType = this.facetCriteria.projectStatus;
@ -152,7 +145,16 @@ export class FacetSearchComponent implements OnInit {
return this.projectService.get(dataTableRequest); return this.projectService.get(dataTableRequest);
} }
public dmpOrganisationSearch(value: string) { public dmpOrganisationSearch(value: string): Observable<ExternalSourcesItemModel[]> {
this.dmpOrganisations = this.externalSourcesService.searchDMPOrganizations(value); 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": { "FACET-SEARCH": {
"FILTER": "Filter",
"PROJECT-STATUS": { "PROJECT-STATUS": {
"TITLE": "Project Status", "TITLE": "Project Status",
"OPTIONS": { "OPTIONS": {