Add openAccess in quick selection and make it responsive. Remove enter behaviour for select inputs in advanced-search-input

searchPages/searchUtils/advancedSearchForm.component.html

@@ -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,17 +15,8 @@
     </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 class="uk-card-body uk-height-medium uk-overflow-auto">
         <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>
@@ -129,11 +120,16 @@
               Please check your dates
             </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">

searchPages/searchUtils/advancedSearchForm.component.ts

@@ -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() {

searchPages/searchUtils/newSearchPage.component.html

@@ -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>

searchPages/searchUtils/quick-selections.component.ts

@@ -6,19 +6,29 @@ 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>
+      <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 class="uk-margin-left">
+            <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>
+      </div>
+    </div>
   `
 })
 export class QuickSelectionsComponent {
@@ -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");

sharedComponents/advanced-search-input/advanced-search-input.component.ts

@@ -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);
-      }
       event.preventDefault();
       this.searchEmitter.emit();
     }