Add openAccess in quick selection and make it responsive. Remove enter behaviour for select inputs in advanced-search-input
This commit is contained in:
parent
4711531dec
commit
ca4da85090
|
|
@ -1,5 +1,5 @@
|
|||
<ng-container *ngIf="!simpleView">
|
||||
<div class="uk-margin-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
|
||||
<div class="uk-margin-small-bottom uk-grid uk-grid-small uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-2-5@m uk-width-1-1 uk-flex uk-flex-middle uk-flex-center uk-flex-left@m">
|
||||
<span class="uk-text-small" [class.uk-light]="dark">Advanced search in
|
||||
<span *ngIf="disableSelect" class="uk-text-small uk-text-bold" [class.uk-light]="dark">{{entities.getLabel(entityType)}}</span>
|
||||
|
|
@ -15,125 +15,121 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="uk-card uk-card-default uk-box-shadow-medium" [class.dark]="dark">
|
||||
<form *ngIf="!simpleView"
|
||||
[class]="((isDisabled )?'uk-disabled ':'')
|
||||
+' advancedSearchForm uk-tile uk-padding-small uk-margin-medium-bottom'">
|
||||
<div>
|
||||
<div class="uk-card-body uk-height-medium uk-overflow-auto">
|
||||
<div>
|
||||
<table class=" uk-table uk-table-responsive uk-table-small uk-margin-remove">
|
||||
<tr>
|
||||
<td class="uk-text-muted uk-text-uppercase">Field to search</td>
|
||||
<td class="uk-text-muted uk-text-uppercase uk-width-1-2">Term</td>
|
||||
</tr>
|
||||
<tr *ngFor="let selectedField of selectedFields; let i = index">
|
||||
<td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection" panelClass="matSelectionPanel"
|
||||
(ngModelChange)="fieldIdsChanged(i,selectedField.id)"><!--(click)="fieldIdsChanged(i)" -->
|
||||
<mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
|
||||
</mat-select></td>
|
||||
<td *ngIf="selectedField.type == 'keyword' || selectedField.type == 'identifier'">
|
||||
<div class="uk-inline uk-width-expand">
|
||||
<a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
|
||||
(click)="selectedField.value = ''"
|
||||
uk-icon="icon: close"></a>
|
||||
<input type="text" class="form-control uk-input"
|
||||
placeholder="Type keywords..."
|
||||
[(ngModel)]="selectedField.value" name="value[{{i}}]">
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <quick-selections [resultTypes]="resultTypes" (typeChange)="queryChanged()" [isDisabled]="isDisabled"
|
||||
[quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
|
||||
[properties]="properties" class="uk-grid "
|
||||
></quick-selections>
|
||||
<hr *ngIf="resultTypes || quickFilter" class="uk-margin-small">-->
|
||||
<table class=" uk-table uk-table-responsive uk-table-small uk-margin-remove">
|
||||
<tr>
|
||||
<td class="uk-text-muted uk-text-uppercase">Field to search</td>
|
||||
<td class="uk-text-muted uk-text-uppercase uk-width-1-2">Term</td>
|
||||
</tr>
|
||||
<tr *ngFor="let selectedField of selectedFields; let i = index">
|
||||
<td><mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection" panelClass="matSelectionPanel"
|
||||
(ngModelChange)="fieldIdsChanged(i,selectedField.id)"><!--(click)="fieldIdsChanged(i)" -->
|
||||
<mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
|
||||
</mat-select></td>
|
||||
<td *ngIf="selectedField.type == 'keyword' || selectedField.type == 'identifier'">
|
||||
<div class="uk-inline uk-width-expand">
|
||||
<a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
|
||||
(click)="selectedField.value = ''"
|
||||
uk-icon="icon: close"></a>
|
||||
<input type="text" class="form-control uk-input"
|
||||
placeholder="Type keywords..."
|
||||
[(ngModel)]="selectedField.value" name="value[{{i}}]">
|
||||
</div>
|
||||
|
||||
|
||||
</td>
|
||||
<td *ngIf="selectedField.type == 'date'">
|
||||
<date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand"
|
||||
[validDateTo]=validDateTo></date-filter>
|
||||
</td>
|
||||
<td *ngIf=" selectedField.id && selectedField.type == 'vocabulary'">
|
||||
<static-autocomplete [properties]=properties *ngIf=" selectedField.id" [vocabularyId]=selectedField.param
|
||||
[fieldId]=selectedField.id
|
||||
[list]=this.fieldList[selectedField.id] [entityName]="entityType"
|
||||
[selectedValue]=selectedField.value [showSelected]=true
|
||||
[placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
|
||||
[multipleSelections]=false
|
||||
(selectedValueChanged)="valueChanged($event,i)"
|
||||
(listUpdated)="listUpdated($event,selectedField.id)"></static-autocomplete>
|
||||
</td>
|
||||
<td *ngIf=" selectedField.id && selectedField.type == 'refine'" class="uk-width-1-3">
|
||||
<static-autocomplete [properties]=properties [list]=this.fieldList[selectedField.id]
|
||||
[fieldId]=selectedField.id [entityName]="entityType" [fieldName]=[selectedField.id]
|
||||
[selectedValue]=selectedField.value [showSelected]=true
|
||||
[placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
|
||||
[multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)"
|
||||
(listUpdated)="listUpdated($event,selectedField.id)"
|
||||
(updateValueLabel)="updatedValueLabel($event, i)"></static-autocomplete>
|
||||
</td>
|
||||
<td *ngIf="selectedField.type == 'entity'">
|
||||
<entities-autocomplete [properties]=properties [fieldId]=selectedField.id [entityType]=selectedField.param
|
||||
</td>
|
||||
<td *ngIf="selectedField.type == 'date'">
|
||||
<date-filter [dateValue]=selectedField.dateValue [validDateFrom]=validDateFrom class="uk-width-expand"
|
||||
[validDateTo]=validDateTo></date-filter>
|
||||
</td>
|
||||
<td *ngIf=" selectedField.id && selectedField.type == 'vocabulary'">
|
||||
<static-autocomplete [properties]=properties *ngIf=" selectedField.id" [vocabularyId]=selectedField.param
|
||||
[fieldId]=selectedField.id
|
||||
[list]=this.fieldList[selectedField.id] [entityName]="entityType"
|
||||
[selectedValue]=selectedField.value [showSelected]=true
|
||||
[placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
|
||||
[multipleSelections]=false
|
||||
(selectedValueChanged)="valueChanged($event,i)"
|
||||
(updateValueLabel)="updatedValueLabel($event, i)">
|
||||
</entities-autocomplete>
|
||||
</td>
|
||||
(listUpdated)="listUpdated($event,selectedField.id)"></static-autocomplete>
|
||||
</td>
|
||||
<td *ngIf=" selectedField.id && selectedField.type == 'refine'" class="uk-width-1-3">
|
||||
<static-autocomplete [properties]=properties [list]=this.fieldList[selectedField.id]
|
||||
[fieldId]=selectedField.id [entityName]="entityType" [fieldName]=[selectedField.id]
|
||||
[selectedValue]=selectedField.value [showSelected]=true
|
||||
[placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
|
||||
[multipleSelections]=false (selectedValueChanged)="valueChanged($event,i)"
|
||||
(listUpdated)="listUpdated($event,selectedField.id)"
|
||||
(updateValueLabel)="updatedValueLabel($event, i)"></static-autocomplete>
|
||||
</td>
|
||||
<td *ngIf="selectedField.type == 'entity'">
|
||||
<entities-autocomplete [properties]=properties [fieldId]=selectedField.id [entityType]=selectedField.param
|
||||
[selectedValue]=selectedField.value [showSelected]=true
|
||||
[placeHolderMessage]="'Search for '+selectedField.name" [title]="selectedField.name"
|
||||
[multipleSelections]=false
|
||||
(selectedValueChanged)="valueChanged($event,i)"
|
||||
(updateValueLabel)="updatedValueLabel($event, i)">
|
||||
</entities-autocomplete>
|
||||
</td>
|
||||
|
||||
<td *ngIf="selectedField.type == 'boolean'" class="input-group">
|
||||
<td *ngIf="selectedField.type == 'boolean'" class="input-group">
|
||||
<span class="input-group-addon">
|
||||
<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param
|
||||
value="true">Yes<br>
|
||||
</span>
|
||||
<span class="input-group-addon">
|
||||
<span class="input-group-addon">
|
||||
<input type="radio" [(ngModel)]="selectedField.value" [name]=selectedField.param
|
||||
value="false">No<br>
|
||||
</span>
|
||||
</td>
|
||||
<td style="min-width: 75px;"><mat-select *ngIf="i+1 <selectedFields.length"
|
||||
[(ngModel)]="selectedFields[i+1].operatorId"
|
||||
name="selectOp_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
|
||||
<mat-option *ngFor="let op of operators" (change)="fieldOperatorChanged(i+1, op.id, op.id)"
|
||||
(click)="fieldOperatorChanged(i+1, op.id, op.id)" [value]="op.id">{{op.id}}</mat-option>
|
||||
</mat-select>
|
||||
<div *ngIf="i == selectedFields.length-1 " class=" uk-text-right" style="margin-top: 55px;">
|
||||
<span class="uk-text-muted uk-text-uppercase uk-margin-small-right " > Add rule</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class=" ">
|
||||
</td>
|
||||
<td style="min-width: 75px;"><mat-select *ngIf="i+1 <selectedFields.length"
|
||||
[(ngModel)]="selectedFields[i+1].operatorId"
|
||||
name="selectOp_{{i}}" [disableOptionCentering]="true" class="matSelection uk-input" panelClass="matSelectionPanel">
|
||||
<mat-option *ngFor="let op of operators" (change)="fieldOperatorChanged(i+1, op.id, op.id)"
|
||||
(click)="fieldOperatorChanged(i+1, op.id, op.id)" [value]="op.id">{{op.id}}</mat-option>
|
||||
</mat-select>
|
||||
<div *ngIf="i == selectedFields.length-1 " class=" uk-text-right" style="margin-top: 55px;">
|
||||
<span class="uk-text-muted uk-text-uppercase uk-margin-small-right " > Add rule</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class=" ">
|
||||
<span type="button" class="uk-icon-button portal-button-reverse clickable "
|
||||
(click)="removeField(i)">
|
||||
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg" data-svg="minus"><rect height="1" width="18" y="9" x="1"></rect></svg></span>
|
||||
</span>
|
||||
<div *ngIf="i == selectedFields.length-1 " class="uk-margin-small-top">
|
||||
<div *ngIf="i == selectedFields.length-1 " class="uk-margin-small-top">
|
||||
<span type="button"
|
||||
class="uk-icon-button portal-button clickable "
|
||||
(click)="addField()">
|
||||
<span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg" data-svg="plus"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></span>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class=" uk-text-center">
|
||||
<div *ngIf="!validDateFrom && validDateTo" class="uk-text-danger">
|
||||
Please check your <u>from</u> date
|
||||
</div>
|
||||
<div *ngIf="!validDateTo && validDateFrom" class="uk-text-danger">
|
||||
Please check your <u>to</u> date
|
||||
</div>
|
||||
<div *ngIf="!validDateFrom && !validDateTo" class="uk-text-danger">
|
||||
Please check your dates
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class=" uk-text-center">
|
||||
<div *ngIf="!validDateFrom && validDateTo" class="uk-text-danger">
|
||||
Please check your <u>from</u> date
|
||||
</div>
|
||||
<div *ngIf="!validDateTo && validDateFrom" class="uk-text-danger">
|
||||
Please check your <u>to</u> date
|
||||
</div>
|
||||
<div *ngIf="!validDateFrom && !validDateTo" class="uk-text-danger">
|
||||
Please check your dates
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button (click)="queryChanged()" type="submit"
|
||||
class=" uk-button uk-padding uk-padding-remove-top uk-padding-remove-bottom portal-button uk-padding uk-padding-remove-top uk-padding-remove-bottom " style="position: absolute;bottom: -19px;left: 45%;"> Search
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<a class="uk-card-footer uk-link-reset uk-tile-primary uk-flex uk-flex-center uk-light">
|
||||
<button (click)="queryChanged()" class="uk-button uk-button-text">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<icon name="search" [flex]="true"></icon>
|
||||
<span class="uk-margin-small-left">Search</span>
|
||||
</span>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div *ngIf="simpleView" class="uk-flex uk-flex-center uk-flex-wrap">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import {Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {ChangeDetectorRef, Component, EventEmitter, Input, Output} from '@angular/core';
|
||||
import {ActivatedRoute, Router} from '@angular/router';
|
||||
|
||||
import {AdvancedField, Filter} from '../searchUtils/searchHelperClasses.class';
|
||||
import {AdvancedField, Filter} from './searchHelperClasses.class';
|
||||
import {SearchFields} from '../../utils/properties/searchFields';
|
||||
import {Dates} from '../../utils/string-utils.class';
|
||||
import {EnvProperties} from '../../utils/properties/env-properties';
|
||||
|
|
@ -45,9 +45,7 @@ export class AdvancedSearchFormComponent {
|
|||
@Input() showSwitchSearchLink: boolean = true;
|
||||
sub;
|
||||
|
||||
constructor(private route: ActivatedRoute, private router: Router) {
|
||||
|
||||
}
|
||||
constructor(private route: ActivatedRoute, private router: Router, private cdr: ChangeDetectorRef) {}
|
||||
|
||||
ngOnDestroy() {
|
||||
if (this.sub instanceof Subscriber) {
|
||||
|
|
@ -109,6 +107,7 @@ export class AdvancedSearchFormComponent {
|
|||
|
||||
disableSelectChange(value) {
|
||||
this.disableSelect = value;
|
||||
this.cdr.detectChanges();
|
||||
}
|
||||
|
||||
addField() {
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@
|
|||
<div>
|
||||
<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
|
||||
[texts]="pageContents['top']"></helper>
|
||||
<div *ngIf="resultTypes" class="uk-flex uk-flex-center uk-background-muted uk-border-rounded">
|
||||
<div *ngIf="resultTypes" class="uk-flex uk-flex-center uk-padding-small uk-padding-remove-vertical uk-background-muted uk-border-rounded">
|
||||
<quick-selections class="uk-margin-bottom uk-margin-top" [resultTypes]="resultTypes" (typeChange)="queryChanged($event)"
|
||||
[isDisabled]="disabled" [actionRoute]="true">
|
||||
</quick-selections>
|
||||
|
|
|
|||
|
|
@ -6,18 +6,28 @@ import {ConfigurationService} from "../../utils/configuration/configuration.serv
|
|||
import {Subscription} from "rxjs";
|
||||
import {ActivatedRoute, Router} from "@angular/router";
|
||||
import {properties} from "../../../../environments/environment";
|
||||
import {OpenaireEntities} from "../../utils/properties/searchFields";
|
||||
|
||||
@Component({
|
||||
selector: 'quick-selections',
|
||||
template: `
|
||||
<div *ngIf="quickFilter" class="uk-margin-small-bottom">
|
||||
<mat-slide-toggle name="qf" [(ngModel)]="quickFilter.selected" (ngModelChange)="quickFilterChanged()">
|
||||
<span class="uk-text-bold">{{quickFilter.value}}</span>
|
||||
</mat-slide-toggle>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-middle uk-text-small">
|
||||
<div class="uk-text-meta">Include:</div>
|
||||
<ng-container *ngFor="let value of resultTypes.values">
|
||||
<div class="uk-margin-left">
|
||||
<input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/>
|
||||
<label class="uk-margin-small-left" (click)="input.click()">{{value.name}}</label>
|
||||
<div class="uk-width-auto@s uk-width-1-3 uk-flex uk-flex-right uk-text-meta uk-margin-small-right">Include:</div>
|
||||
<div class="uk-width-expand">
|
||||
<div class="uk-grid uk-grid-small uk-flex-middle uk-child-width-auto@l uk-child-width-1-2@s uk-child-width-1-1" uk-grid>
|
||||
<ng-container *ngFor="let value of resultTypes.values">
|
||||
<div>
|
||||
<input #input type="checkbox" class="uk-checkbox" [(ngModel)]="value.selected" (ngModelChange)="changed()"/>
|
||||
<label class="uk-margin-small-left" (click)="input.click()">{{value.name}}</label>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
})
|
||||
|
|
@ -123,16 +133,16 @@ export class QuickSelectionsComponent {
|
|||
this.resultTypes.countSelectedValues = selected.length;
|
||||
this.resultTypes.values = [];
|
||||
if(this.showPublications){
|
||||
this.resultTypes.values.push({name: "Publications" , id:"publications",selected:selected.indexOf("publications")!=-1, number:0});
|
||||
this.resultTypes.values.push({name: OpenaireEntities.PUBLICATIONS , id:"publications",selected:selected.indexOf("publications")!=-1, number:0});
|
||||
}
|
||||
if(this.showDatasets){
|
||||
this.resultTypes.values.push({name: "Research data" , id:"datasets",selected:selected.indexOf("datasets")!=-1, number:0});
|
||||
this.resultTypes.values.push({name: OpenaireEntities.DATASETS , id:"datasets",selected:selected.indexOf("datasets")!=-1, number:0});
|
||||
}
|
||||
if(this.showSoftware){
|
||||
this.resultTypes.values.push({name: "Software" , id:"software",selected:selected.indexOf("software")!=-1, number:0});
|
||||
this.resultTypes.values.push({name: OpenaireEntities.SOFTWARE , id:"software",selected:selected.indexOf("software")!=-1, number:0});
|
||||
}
|
||||
if(this.showOrp){
|
||||
this.resultTypes.values.push({name: "Other research products" , id:"other",selected:selected.indexOf("other")!=-1, number:0});
|
||||
this.resultTypes.values.push({name: OpenaireEntities.OTHER , id:"other",selected:selected.indexOf("other")!=-1, number:0});
|
||||
}
|
||||
}
|
||||
this.typeChange.emit("filters_update");
|
||||
|
|
|
|||
|
|
@ -42,16 +42,9 @@ export class AdvancedSearchInputComponent implements AfterContentInit, OnDestroy
|
|||
|
||||
@HostListener('window:keydown.enter', ['$event'])
|
||||
enter(event: KeyboardEvent) {
|
||||
let input: InputComponent | EntitiesSelectionComponent = this.inputs.toArray().find(input => input.focused);
|
||||
if (!input) {
|
||||
input = this.entities.toArray().find(input => input.input.focused);
|
||||
}
|
||||
let input: InputComponent = this.inputs.toArray().find(input => input.focused && input.type !== 'select');
|
||||
if (input) {
|
||||
if (input instanceof EntitiesSelectionComponent) {
|
||||
input.input.focus(false, event);
|
||||
} else {
|
||||
input.focus(false, event);
|
||||
}
|
||||
input.focus(false, event);
|
||||
event.preventDefault();
|
||||
this.searchEmitter.emit();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue