Introduced Facet Search Component On Dataset Public Listing
parent
e0c302e67e
commit
b8c78e7135
@ -0,0 +1,3 @@
|
||||
text-center{
|
||||
text-align: center
|
||||
}
|
@ -0,0 +1,15 @@
|
||||
<div *ngIf="searchEnabled">
|
||||
<mat-form-field>
|
||||
<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>
|
||||
</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)">
|
||||
<p>{{ displayLabel(option) }}</p>
|
||||
</mat-list-option>
|
||||
</mat-selection-list>
|
@ -0,0 +1,71 @@
|
||||
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';
|
||||
|
||||
@Component({
|
||||
selector: 'app-facet-section-component',
|
||||
templateUrl: './facet-search-section.component.html',
|
||||
styleUrls: ['./facet-search-section.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
})
|
||||
export class FacetSearchSectionComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
searchEnabled = false;
|
||||
|
||||
@Input()
|
||||
filterOptions: (value) => Observable<any[]>;
|
||||
|
||||
@Input()
|
||||
options: Observable<any[]> = Observable.of([]);
|
||||
|
||||
@Input()
|
||||
displayTitleFunc: (value) => string;
|
||||
|
||||
@Input()
|
||||
displayValueFunc: (value) => string;
|
||||
|
||||
@Output()
|
||||
selectedChanged = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
optionRemoved = new EventEmitter();
|
||||
|
||||
optionSearchControl = new FormControl('');
|
||||
|
||||
private selectedOptions: any[] = [];
|
||||
|
||||
@ViewChild('optionsList') selectionList: MatSelectionList;
|
||||
|
||||
|
||||
ngOnInit(): void {
|
||||
this.optionSearchControl.valueChanges.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
|
||||
}
|
||||
|
||||
public selectionChanged(event: any) {
|
||||
this.selectedChanged.emit(event);
|
||||
}
|
||||
|
||||
public removeOption(project) {
|
||||
const list = this.selectionList.selectedOptions.selected.map(x => x.value);
|
||||
const indexOfProject = list.indexOf(project);
|
||||
if (this.selectionList.selectedOptions.selected[indexOfProject]) {
|
||||
this.selectionList.selectedOptions.selected[indexOfProject].selected = false;
|
||||
this.selectionList.selectedOptions.selected.splice(indexOfProject, 1);
|
||||
}
|
||||
this.optionRemoved.emit(project);
|
||||
}
|
||||
|
||||
public isOptionSelected(value) {
|
||||
return this.selectedOptions.indexOf(value) !== -1;
|
||||
}
|
||||
|
||||
displayLabel(value) {
|
||||
return this.displayTitleFunc ? this.displayTitleFunc(value) : value;
|
||||
}
|
||||
|
||||
displayValue(value) {
|
||||
return this.displayValueFunc ? this.displayValueFunc(value) : value;
|
||||
}
|
||||
}
|
@ -1,35 +1,70 @@
|
||||
<div>
|
||||
<mat-selection-list #project role="listbox" (selectionChange)="projectStatusChanged($event)">
|
||||
<h3 matSubheader>{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}</h3>
|
||||
<mat-list-option [value]="ProjectStateType.Finished">
|
||||
{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE' | translate }}
|
||||
</mat-list-option>
|
||||
<mat-list-option [value]="ProjectStateType.OnGoing">
|
||||
{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE' | translate }}
|
||||
</mat-list-option>
|
||||
</mat-selection-list>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-selection-list *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished"
|
||||
(selectionChange)="projectChanged($event)">
|
||||
<h3 matSubheader>{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}</h3>
|
||||
<mat-list-option *ngFor="let project of (projects | async) | slice:0:10" [value]="project.id">
|
||||
{{ project.label }}
|
||||
</mat-list-option>
|
||||
</mat-selection-list>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-selection-list
|
||||
(selectionChange)="profileChanged($event)">
|
||||
<h3 matSubheader>{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}</h3>
|
||||
<mat-list-option *ngFor="let profile of (profiles | async) | slice:0:10" [value]="profile.id">
|
||||
{{ profile.label }}
|
||||
</mat-list-option>
|
||||
</mat-selection-list>
|
||||
<mat-divider></mat-divider>
|
||||
<mat-selection-list
|
||||
(selectionChange)="dmpOrganisationChanged($event)">
|
||||
<h3 matSubheader>{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}</h3>
|
||||
<mat-list-option *ngFor="let dmpOrganisation of (dmpOrganisations | async) | slice:0:10" [value]="dmpOrganisation.id">
|
||||
{{ dmpOrganisation.name }}
|
||||
</mat-list-option>
|
||||
</mat-selection-list>
|
||||
</div>
|
||||
<mat-accordion>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ '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>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ '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>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ '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>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ '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>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
|
Binary file not shown.
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
Before Width: | Height: | Size: 3.2 KiB |
Loading…
Reference in New Issue