Adds any option on grant status filter sections on /explore and /explore-plans, makes tooltip font-size larger

This commit is contained in:
apapachristou 2019-09-13 13:52:24 +03:00
parent 07e239be92
commit c7b60cc6e3
6 changed files with 26 additions and 31 deletions

View File

@ -3,33 +3,29 @@
<div class="row" style="justify-content: center;"> <div class="row" style="justify-content: center;">
<mat-form-field class="col-11 search"> <mat-form-field class="col-11 search">
<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="dmpCriteriaName" <input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="dmpCriteriaName" [(ngModel)]="facetCriteria.like" (ngModelChange)="controlModified()">
[(ngModel)]="facetCriteria.like" (ngModelChange)="controlModified()">
<mat-icon matSuffix class="style-icon">search</mat-icon> <mat-icon matSuffix class="style-icon">search</mat-icon>
<app-multiple-auto-complete [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()" <app-multiple-auto-complete [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()" placeholder="{{'CRITERIA.DATA-SETS.TAGS' | translate}}" [configuration]="tagsAutoCompleteConfiguration">
placeholder="{{'CRITERIA.DATA-SETS.TAGS' | translate}}" [configuration]="tagsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</mat-form-field> </mat-form-field>
<div class="col-10 gray-container"> <div class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6> <h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
<mat-list-item> <mat-list-item>
<mat-radio-button value="0" (change)="grantStatusChanged($event)"> <mat-radio-button value="null" checked (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button>
{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button>
</mat-list-item> </mat-list-item>
<mat-list-item> <mat-list-item>
<mat-radio-button value="1" (change)="grantStatusChanged($event)"> <mat-radio-button value="0" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button>
{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button> </mat-list-item>
<mat-list-item>
<mat-radio-button value="1" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
</mat-list-item> </mat-list-item>
</div> </div>
<div class="col-10 gray-container"> <div class="col-10 gray-container">
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DMP' | translate}}</h6> <h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DMP' | translate}}</h6>
<mat-form-field> <mat-form-field>
<app-multiple-auto-complete <app-multiple-auto-complete placeholder="{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}" [configuration]="dmpAutoCompleteConfiguration" (optionSelected)="onDmpOptionSelected($event)" (optionRemoved)="onDmpOptionRemoved($event)">
placeholder="{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}"
[configuration]="dmpAutoCompleteConfiguration"
(optionSelected)="onDmpOptionSelected($event)" (optionRemoved)="onDmpOptionRemoved($event)">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon> <mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field> </mat-form-field>
@ -38,9 +34,7 @@
<div class="col-10 gray-container"> <div class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT.TITLE' | translate }}</h6> <h6 class="category-title">{{ 'FACET-SEARCH.GRANT.TITLE' | translate }}</h6>
<mat-form-field> <mat-form-field>
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}" <app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}" [configuration]="grantAutoCompleteConfiguration" (optionSelected)="onGrantOptionSelected($event)" (optionRemoved)="onGrantOptionRemoved($event)">
[configuration]="grantAutoCompleteConfiguration"
(optionSelected)="onGrantOptionSelected($event)" (optionRemoved)="onGrantOptionRemoved($event)">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon> <mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field> </mat-form-field>
@ -49,9 +43,7 @@
<div class="col-10 gray-container"> <div class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}</h6> <h6 class="category-title">{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}</h6>
<mat-form-field> <mat-form-field>
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-SPEC' | translate }}" <app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-SPEC' | translate }}" [configuration]="profileAutoCompleteConfiguration" (optionSelected)="onProfileOptionSelected($event)" (optionRemoved)="onProfileOptionRemoved($event)">
[configuration]="profileAutoCompleteConfiguration"
(optionSelected)="onProfileOptionSelected($event)" (optionRemoved)="onProfileOptionRemoved($event)">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon> <mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field> </mat-form-field>
@ -60,10 +52,7 @@
<div class="col-10 gray-container"> <div class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}</h6> <h6 class="category-title">{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}</h6>
<mat-form-field> <mat-form-field>
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate }}" <app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate }}" [configuration]="organizationAutoCompleteConfiguration" (optionSelected)="onOrganizationOptionSelected($event)" (optionRemoved)="onOrganizationOptionRemoved($event)">
[configuration]="organizationAutoCompleteConfiguration"
(optionSelected)="onOrganizationOptionSelected($event)"
(optionRemoved)="onOrganizationOptionRemoved($event)">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon> <mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field> </mat-form-field>

View File

@ -133,13 +133,14 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
public grantStatusChanged(event) { public grantStatusChanged(event) {
this.facetCriteria.grantStatus = event.value; this.facetCriteria.grantStatus = event.value;
if (!event.source.checked) { if (event.value === 'null') {
this.facetCriteria.grantStatus = null; this.facetCriteria.grantStatus = null;
this.grants = Observable.of([]); this.grants = Observable.of([]);
this.facetCriteria.grants = []; this.facetCriteria.grants = [];
} }
// if (event.option.selected) { // if (event.option.selected) {
if (event.source.checked) { // if (event.source.checked) {
else {
// const grantCriteria = new GrantCriteria(); // const grantCriteria = new GrantCriteria();
// grantCriteria.grantStateType = this.facetCriteria.grantStatus; // grantCriteria.grantStateType = this.facetCriteria.grantStatus;
//grantCriteria['length'] = 10; //grantCriteria['length'] = 10;

View File

@ -10,6 +10,7 @@
<div class="col-10 gray-container"> <div class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6> <h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
<mat-list-item><mat-radio-button value="null" checked (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="0" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button></mat-list-item> <mat-list-item><mat-radio-button value="0" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="1" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button></mat-list-item> <mat-list-item><mat-radio-button value="1" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button></mat-list-item>
</div> </div>

View File

@ -120,19 +120,19 @@ export class ExploreDmpFiltersComponent extends BaseCriteriaComponent implements
this.profiles = this.datasetProfileService.getDatasetProfiles(); this.profiles = this.datasetProfileService.getDatasetProfiles();
const fields: Array<string> = new Array<string>(); const fields: Array<string> = new Array<string>();
fields.push('asc'); fields.push('asc');
this.dmpOrganisations = this.organisationService.searchPublicOrganisations(new DataTableRequest<OrganisationCriteria>(0 , null, { fields: fields })).map(x => x.data); this.dmpOrganisations = this.organisationService.searchPublicOrganisations(new DataTableRequest<OrganisationCriteria>(0, null, { fields: fields })).map(x => x.data);
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {
// this.accordion.openAll(); // this.accordion.openAll();
} }
OnChange($event){ OnChange($event) {
console.log($event); console.log($event);
} }
OnIndeterminateChange($event){ OnIndeterminateChange($event) {
console.log($event); console.log($event);
} }
controlModified() { controlModified() {
@ -157,14 +157,16 @@ export class ExploreDmpFiltersComponent extends BaseCriteriaComponent implements
this.facetCriteria.grantStatus = event.value; this.facetCriteria.grantStatus = event.value;
// this.facetCriteria.grantStatus = +event.source.ariaLabel; // For checkboxes // this.facetCriteria.grantStatus = +event.source.ariaLabel; // For checkboxes
// this.facetCriteria.grantStatus = event.option.value.value; // For <app-explore-dmp-filter-item-component> // this.facetCriteria.grantStatus = event.option.value.value; // For <app-explore-dmp-filter-item-component>
if (!event.source.checked) { // if (!event.source.checked) {
if (event.value === 'null') {
this.facetCriteria.grantStatus = null; this.facetCriteria.grantStatus = null;
this.grants = Observable.of([]); this.grants = Observable.of([]);
this.facetCriteria.grants = []; this.facetCriteria.grants = [];
} }
// if (event.checked) { // if (event.checked) {
// if (event.option.selected) { // if (event.option.selected) {
if (event.source.checked) { // if (event.source.checked) {
else {
const fields: Array<string> = new Array<string>(); const fields: Array<string> = new Array<string>();
fields.push('asc'); fields.push('asc');
const dataTableRequest: DataTableRequest<GrantCriteria> = new DataTableRequest(0, null, { fields: fields }); const dataTableRequest: DataTableRequest<GrantCriteria> = new DataTableRequest(0, null, { fields: fields });

View File

@ -962,6 +962,7 @@
"GRANT-STATUS": { "GRANT-STATUS": {
"TITLE": "Grant Status", "TITLE": "Grant Status",
"OPTIONS": { "OPTIONS": {
"ANY": "Any",
"ACTIVE": "Active", "ACTIVE": "Active",
"INACTIVE": "Inactive" "INACTIVE": "Inactive"
} }

View File

@ -49,5 +49,6 @@
} }
.mat-tooltip{ .mat-tooltip{
text-align: center; text-align: center;
font-size: 11px;
} }