Introduced Facet Search Component On Dataset Public Listing
Ioannis Kalyvas
6 years ago
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-accordion>
|
||||||
<mat-selection-list #project role="listbox" (selectionChange)="projectStatusChanged($event)">
|
<mat-expansion-panel>
|
||||||
<h3 matSubheader>{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}</h3>
|
<mat-expansion-panel-header>
|
||||||
<mat-list-option [value]="ProjectStateType.Finished">
|
<mat-panel-title>
|
||||||
{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE' | translate }}
|
{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}
|
||||||
</mat-list-option>
|
</mat-panel-title>
|
||||||
<mat-list-option [value]="ProjectStateType.OnGoing">
|
</mat-expansion-panel-header>
|
||||||
{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE' | translate }}
|
<mat-selection-list #projectState role="listbox" (selectionChange)="projectStatusChanged($event)">
|
||||||
</mat-list-option>
|
<mat-list-option [value]="ProjectStateType.Finished">
|
||||||
</mat-selection-list>
|
<p>{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE' | translate }}</p>
|
||||||
<mat-divider></mat-divider>
|
</mat-list-option>
|
||||||
<mat-selection-list *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished"
|
<mat-list-option [value]="ProjectStateType.OnGoing">
|
||||||
(selectionChange)="projectChanged($event)">
|
<p>{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE' | translate }}</p>
|
||||||
<h3 matSubheader>{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}</h3>
|
</mat-list-option>
|
||||||
<mat-list-option *ngFor="let project of (projects | async) | slice:0:10" [value]="project.id">
|
</mat-selection-list>
|
||||||
{{ project.label }}
|
</mat-expansion-panel>
|
||||||
</mat-list-option>
|
<mat-expansion-panel *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished">
|
||||||
</mat-selection-list>
|
<mat-expansion-panel-header>
|
||||||
<mat-divider></mat-divider>
|
<mat-panel-title>
|
||||||
<mat-selection-list
|
{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}
|
||||||
(selectionChange)="profileChanged($event)">
|
</mat-panel-title>
|
||||||
<h3 matSubheader>{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}</h3>
|
</mat-expansion-panel-header>
|
||||||
<mat-list-option *ngFor="let profile of (profiles | async) | slice:0:10" [value]="profile.id">
|
<div>
|
||||||
{{ profile.label }}
|
<mat-form-field>
|
||||||
</mat-list-option>
|
<input type="text" placeholder="{{ 'FACET-SEARCH.PROJECT.FILTER' | translate }}" matInput [formControl]="projectSearchControl">
|
||||||
</mat-selection-list>
|
</mat-form-field>
|
||||||
<mat-divider></mat-divider>
|
</div>
|
||||||
<mat-selection-list
|
<mat-chip-list>
|
||||||
(selectionChange)="dmpOrganisationChanged($event)">
|
<mat-chip [removable]="removable" (removed)="removeProject(project)" *ngFor="let project of facetCriteria.projects">{{
|
||||||
<h3 matSubheader>{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}</h3>
|
project }}
|
||||||
<mat-list-option *ngFor="let dmpOrganisation of (dmpOrganisations | async) | slice:0:10" [value]="dmpOrganisation.id">
|
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||||
{{ dmpOrganisation.name }}
|
</mat-chip>
|
||||||
</mat-list-option>
|
</mat-chip-list>
|
||||||
</mat-selection-list>
|
<mat-selection-list #project (selectionChange)="projectChanged($event)">
|
||||||
</div>
|
<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