Add searchForm input in all search pages

deposit/searchDataprovidersToDeposit.component.ts

@@ -59,7 +59,7 @@ import {properties} from "../../../environments/environment";
  
         </form>
       </div>
-      <search-dataproviders  [simpleView]="true" type="deposit" simpleSearchLink="/participate/deposit/search" [includeOnlyResultsAndFilter]="true" >
+      <search-dataproviders  [simpleView]="true" [searchForm]="{class: null, dark: false}" type="deposit" simpleSearchLink="/participate/deposit/search" [includeOnlyResultsAndFilter]="true" >
       </search-dataproviders>
     </div>
     `

searchPages/searchDataProviders.component.ts

@@ -8,7 +8,7 @@ import {SearchFields} from '../utils/properties/searchFields';
 import {SearchCustomFilter, SearchUtilsClass} from './searchUtils/searchUtils.class';
 
 import {EnvProperties} from '../utils/properties/env-properties';
-import {NewSearchPageComponent} from "./searchUtils/newSearchPage.component";
+import {NewSearchPageComponent, SearchForm} from "./searchUtils/newSearchPage.component";
 import {DatasourcesHelperClass} from "./searchUtils/datasourcesHelper.class";
 import {properties} from "../../../environments/environment";
 
@@ -34,7 +34,7 @@ import {properties} from "../../../environments/environment";
       [openaireLink]=openaireLink
       [includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter"
       [piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
-      [searchForm]="{class: '', dark: false}"
+      [searchForm]="searchForm"
       [entitiesSelection]="type=='all'"  [showSwitchSearchLink]="showSwitchSearchLink"  
       [filters]="filters"
       [simpleView]="simpleView" formPlaceholderText="Search by name, description, subject..." 
@@ -53,6 +53,7 @@ export class SearchDataProvidersComponent {
   @Input() piwikSiteId = null;
   @Input() customFilter:SearchCustomFilter= null;
   @Input() tableViewLink;
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: true};
   public results =[];
   public filters =[];
   public searchUtils:SearchUtilsClass = new SearchUtilsClass();

searchPages/searchOrganizations.component.ts

@@ -7,7 +7,7 @@ import {ErrorMessagesComponent} from '../utils/errorMessages.component';
 import {SearchFields} from '../utils/properties/searchFields';
 import {SearchCustomFilter, SearchUtilsClass} from './searchUtils/searchUtils.class';
 import {EnvProperties} from '../utils/properties/env-properties';
-import {NewSearchPageComponent} from "./searchUtils/newSearchPage.component";
+import {NewSearchPageComponent, SearchForm} from "./searchUtils/newSearchPage.component";
 import {properties} from "../../../environments/environment";
 
 
@@ -31,6 +31,7 @@ import {properties} from "../../../environments/environment";
         [openaireLink]=openaireLink
         [piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
         [includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter"
+        [searchForm]="searchForm"
         [sort]="false"
         [filters]="filters"
         [simpleView]="simpleView" formPlaceholderText="Search by organization name..."
@@ -46,6 +47,7 @@ export class SearchOrganizationsComponent {
   private errorMessages: ErrorMessagesComponent;
   properties:EnvProperties;
   @Input() piwikSiteId = null;
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: true};
   public results =[];
   public filters =[];
   public searchUtils:SearchUtilsClass = new SearchUtilsClass();

searchPages/searchProjects.component.ts

@@ -7,20 +7,20 @@ import {ErrorMessagesComponent} from '../utils/errorMessages.component';
 import {SearchFields} from '../utils/properties/searchFields';
 import {SearchCustomFilter, SearchUtilsClass} from './searchUtils/searchUtils.class';
 import {EnvProperties} from '../utils/properties/env-properties';
-import {NewSearchPageComponent} from "./searchUtils/newSearchPage.component";
+import {NewSearchPageComponent, SearchForm} from "./searchUtils/newSearchPage.component";
 import {RangeFilter} from "../utils/rangeFilter/rangeFilterHelperClasses.class";
 import {properties} from "../../../environments/environment";
 
 @Component({
-    selector: 'search-projects',
+  selector: 'search-projects',
-    template: `
+  template: `
-      <new-search-page
+    <new-search-page
         pageTitle="{{(simpleView?'':'Advanced ')}} Search for {{ 'projects' | titlecase }}"
         entityType="project"
         type="projects"
         [results]="results"
         [searchUtils]="searchUtils"
-        [sortedByChanged]="searchUtils.sortBy" 
+        [sortedByChanged]="searchUtils.sortBy"
         [fieldIds]="fieldIds" [fieldIdsMap]="fieldIdsMap" [selectedFields]="selectedFields"
         [csvParams]="csvParams" csvPath="projects"
         [simpleSearchLink]="simpleSearchLink" [advancedSearchLink]="advancedSearchLink"
@@ -30,36 +30,38 @@ import {properties} from "../../../environments/environment";
         [oldTotalResults]="oldTotalResults"
         [openaireLink]=openaireLink
         [piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
+        [searchForm]="searchForm"
         [includeOnlyResultsAndFilter]="includeOnlyResultsAndFilter"
         [filters]="filters"
         [rangeFilters]="rangeFilters" [rangeFields]="rangeFields"
         [simpleView]="simpleView" formPlaceholderText="Search by title, acronym, project code..."
         [showSwitchSearchLink]="showSwitchSearchLink"
         [sort]="false" [showBreadcrumb]="showBreadcrumb"
-      >
+    >
-      </new-search-page>
+    </new-search-page>
-
+  
-    `
+  `
- })
+})
 
 export class SearchProjectsComponent {
   private errorCodes: ErrorCodes;
   private errorMessages: ErrorMessagesComponent;
-@Input() piwikSiteId = null;
+  @Input() piwikSiteId = null;
-@Input() customFilter:SearchCustomFilter= null;
+  @Input() customFilter: SearchCustomFilter = null;
-  public results =[];
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: true};
-  public filters =[];
+  public results = [];
+  public filters = [];
   public rangeFilters: RangeFilter[] = [];
-
+  
-  public searchUtils:SearchUtilsClass = new SearchUtilsClass();
+  public searchUtils: SearchUtilsClass = new SearchUtilsClass();
-  public searchFields:SearchFields = new SearchFields();
+  public searchFields: SearchFields = new SearchFields();
-
+  
-  public fieldIds:  string[] = this.searchFields.PROJECT_ADVANCED_FIELDS;
+  public fieldIds: string[] = this.searchFields.PROJECT_ADVANCED_FIELDS;
   public fieldIdsMap = this.searchFields.PROJECT_FIELDS;
-  public rangeFields:string[][] = this.searchFields.PROJECT_RANGE_FIELDS;
+  public rangeFields: string[][] = this.searchFields.PROJECT_RANGE_FIELDS;
-  public selectedFields:AdvancedField[] =  [];
+  public selectedFields: AdvancedField[] = [];
-  properties:EnvProperties;
+  properties: EnvProperties;
-
+  
   public resourcesQuery = "(oaftype exact project)";
   public csvParams: string;
   public disableForms: boolean = false;
@@ -69,7 +71,7 @@ export class SearchProjectsComponent {
   public pagingLimit: number = 0;
   public isPiwikEnabled;
   public refineFields: string[] = this.searchFields.PROJECT_REFINE_FIELDS;
-  @ViewChild(NewSearchPageComponent, { static: true }) searchPage: NewSearchPageComponent;
+  @ViewChild(NewSearchPageComponent, {static: true}) searchPage: NewSearchPageComponent;
   @Input() simpleView: boolean = true;
   @Input() simpleSearchLink: string = "";
   advancedSearchLink: string = "";
@@ -77,119 +79,128 @@ export class SearchProjectsComponent {
   @Input() openaireLink: string;
   @Input() includeOnlyResultsAndFilter: boolean = false;
   @Output() searchPageUpdates = new EventEmitter();
-  @Input() showSwitchSearchLink:boolean = true;
+  @Input() showSwitchSearchLink: boolean = true;
   @Input() showBreadcrumb: boolean = false;
   subs: any[] = [];
   searchResultsSub: any;
   searchFiltersSub: any;
-
+  
-  constructor (private route: ActivatedRoute, private _searchProjectsService: SearchProjectsService ) {
+  constructor(private route: ActivatedRoute, private _searchProjectsService: SearchProjectsService) {
-    this.results =[];
+    this.results = [];
     this.errorCodes = new ErrorCodes();
     this.errorMessages = new ErrorMessagesComponent();
     this.searchUtils.status = this.errorCodes.LOADING;
     this.searchUtils.refineStatus = this.errorCodes.LOADING;
   }
-
+  
   ngOnInit() {
-
+    
-    this.properties= properties;
+    this.properties = properties;
     if (!this.simpleSearchLink) {
       this.simpleSearchLink = this.properties.searchLinkToProjects;
     }
     this.advancedSearchLink = this.properties.searchLinkToAdvancedProjects;
-    this.searchUtils.baseUrl = (this.simpleView)?this.simpleSearchLink:this.advancedSearchLink;
+    this.searchUtils.baseUrl = (this.simpleView) ? this.simpleSearchLink : this.advancedSearchLink;
-     this.pagingLimit = properties.pagingLimit;
+    this.pagingLimit = properties.pagingLimit;
-     this.isPiwikEnabled = properties.enablePiwikTrack;
+    this.isPiwikEnabled = properties.enablePiwikTrack;
-
+    
     this.searchUtils.status = this.errorCodes.LOADING;
     var firstLoad = true;
-
+    
     this.subs.push(this.route.queryParams.subscribe(params => {
       this.loadPaging = true;
-      if(params['page'] && this.searchUtils.page != params['page']) {
+      if (params['page'] && this.searchUtils.page != params['page']) {
         this.loadPaging = false;
         this.oldTotalResults = this.searchUtils.totalResults;
       }
       var refine = true;
-      if(this.searchPage.searchUtils.refineStatus == this.errorCodes.DONE) {
+      if (this.searchPage.searchUtils.refineStatus == this.errorCodes.DONE) {
         if (params['page'] != undefined && this.filters && !firstLoad && this.searchUtils.page != +params['page']) {
           refine = false;
         }
-
+        
         if (params['size'] != undefined && this.filters && !firstLoad && this.searchUtils.size != params['size']) {
           refine = false;
         }
       }
-      let page = (params['page']=== undefined)?1:+params['page'];
+      let page = (params['page'] === undefined) ? 1 : +params['page'];
-      this.searchUtils.page = ( page <= 0 ) ? 1 : page;
+      this.searchUtils.page = (page <= 0) ? 1 : page;
-
+      
       this.searchUtils.validateSize(params['size']);
-
+      
       this.searchPage.fieldIds = this.fieldIds;
       this.selectedFields = [];
-      this.searchPage.prepareSearchPage(this.fieldIds, this.selectedFields, this.refineFields, this.rangeFields, this.fieldIdsMap,this.customFilter,params, "project");
+      this.searchPage.prepareSearchPage(this.fieldIds, this.selectedFields, this.refineFields, this.rangeFields, this.fieldIdsMap, this.customFilter, params, "project");
-      if(refine) {
+      if (refine) {
-        this._getFilters(this.searchPage.getSearchAPIQueryForAdvancedSearhFields(), this.searchUtils.page, 0, "", true, this.searchPage.getSearchAPIQueryForRangeFields(params)+this.searchPage.getSearchAPIQueryForRefineFields(params, firstLoad));
+        this._getFilters(this.searchPage.getSearchAPIQueryForAdvancedSearhFields(), this.searchUtils.page, 0, "", true, this.searchPage.getSearchAPIQueryForRangeFields(params) + this.searchPage.getSearchAPIQueryForRefineFields(params, firstLoad));
       } else {
         this.searchUtils.refineStatus = this.errorCodes.DONE;
       }
-      this.getResults(this.searchPage.getSearchAPIQueryForAdvancedSearhFields(),  this.searchUtils.page, this.searchUtils.size, refine, this.searchPage.getSearchAPIQueryForRangeFields(params)+this.searchPage.getSearchAPIQueryForRefineFields(params, firstLoad));
+      this.getResults(this.searchPage.getSearchAPIQueryForAdvancedSearhFields(), this.searchUtils.page, this.searchUtils.size, refine, this.searchPage.getSearchAPIQueryForRangeFields(params) + this.searchPage.getSearchAPIQueryForRefineFields(params, firstLoad));
       firstLoad = false;
     }));
   }
+  
   ngOnDestroy() {
-    if(this.searchResultsSub) {
+    if (this.searchResultsSub) {
       this.searchResultsSub.unsubscribe();
     }
-    if(this.searchFiltersSub) {
+    if (this.searchFiltersSub) {
       this.searchFiltersSub.unsubscribe();
     }
     for (let sub of this.subs) {
       sub.unsubscribe();
     }
   }
-
+  
   public _getFilters(parameters: string, page: number, size: number, sortBy: string, refine: boolean, refineFieldsFilterQuery = null) {
     if (page <= this.pagingLimit || this.searchUtils.refineStatus == this.errorCodes.LOADING) {
       this.searchUtils.refineStatus = this.errorCodes.LOADING;
       this.disableRefineForms = true;
-      this.searchPageUpdates.emit({disableForms: this.disableForms, disableRefineForms: this.disableRefineForms, searchUtils: this.searchUtils});
+      this.searchPageUpdates.emit({
-      this.searchFiltersSub = this._searchProjectsService.advancedSearchProjects(parameters,  page, size, this.properties,(refine) ? this.searchPage.getRefineFieldsQuery() : null, this.searchPage.getFields(), refineFieldsFilterQuery)
+        disableForms: this.disableForms,
-      //.switchMap(
+        disableRefineForms: this.disableRefineForms,
+        searchUtils: this.searchUtils
+      });
+      this.searchFiltersSub = this._searchProjectsService.advancedSearchProjects(parameters, page, size, this.properties, (refine) ? this.searchPage.getRefineFieldsQuery() : null, this.searchPage.getFields(), refineFieldsFilterQuery)
+        //.switchMap(
         .subscribe(
           data => {
             let totalResults = data[0];
             let filters = data[2];
             this.filtersReturned(refine, filters, totalResults, page);
-
+            
           },
           err => {
             this.filters = this.searchPage.prepareFiltersToShow([], 0);
             this.rangeFilters = this.searchPage.prepareRangeFiltersToShow();
-
+            
             this.handleError("Error getting refine filters for projects: ", err);
             this.searchUtils.refineStatus = this.errorMessages.getErrorCode(err.status);
-
+            
             this.disableRefineForms = false;
-            this.searchPageUpdates.emit({disableForms: this.disableForms, disableRefineForms: this.disableRefineForms, searchUtils: this.searchUtils})
+            this.searchPageUpdates.emit({
+              disableForms: this.disableForms,
+              disableRefineForms: this.disableRefineForms,
+              searchUtils: this.searchUtils
+            })
           }
         );
     }
   }
-
+  
-
+  
   public filtersReturned(refine: boolean, filters: Filter[], totalResults, page: number) {
     if (refine) {
       this.filters = this.searchPage.prepareFiltersToShow(filters, totalResults);
       this.rangeFilters = this.searchPage.prepareRangeFiltersToShow();
     }
-
+    
     this.searchUtils.refineStatus = this.errorCodes.DONE;
-    if(totalResults == 0) {
+    if (totalResults == 0) {
       this.searchUtils.refineStatus = this.errorCodes.NONE;
     }
-
+    
     if (this.searchUtils.refineStatus == this.errorCodes.DONE) {
       // Page out of limit!!!
       let totalPages: any = totalResults / (this.searchUtils.size);
@@ -200,23 +211,27 @@ export class SearchProjectsComponent {
         this.searchUtils.refineStatus = this.errorCodes.OUT_OF_BOUND;
       }
     }
-
+    
-    if(this.searchUtils.refineStatus != this.errorCodes.DONE && this.searchUtils.status != this.searchUtils.refineStatus) {
+    if (this.searchUtils.refineStatus != this.errorCodes.DONE && this.searchUtils.status != this.searchUtils.refineStatus) {
       if (this.searchResultsSub) {
         this.searchResultsSub.unsubscribe();
       }
       this.resultsReturned(refine, [], totalResults, page);
     }
-
+    
     this.disableRefineForms = false;
-    this.searchPageUpdates.emit({disableForms: this.disableForms, disableRefineForms: this.disableRefineForms, searchUtils: this.searchUtils})
+    this.searchPageUpdates.emit({
+      disableForms: this.disableForms,
+      disableRefineForms: this.disableRefineForms,
+      searchUtils: this.searchUtils
+    })
   }
-
+  
-  public getResults(parameters:string, page: number, size: number, refine: boolean, refineFieldsFilterQuery = null){
+  public getResults(parameters: string, page: number, size: number, refine: boolean, refineFieldsFilterQuery = null) {
-    if(page > this.pagingLimit) {
+    if (page > this.pagingLimit) {
-      size=0;
+      size = 0;
     }
-    if(page <= this.pagingLimit || this.searchUtils.status == this.errorCodes.LOADING) {
+    if (page <= this.pagingLimit || this.searchUtils.status == this.errorCodes.LOADING) {
       // if(parameters!= null && parameters != ''  ) {
       //   this.csvParams ="&fq=( "+this.resourcesQuery + "and (" + parameters + "))";
       // }else{
@@ -225,67 +240,75 @@ export class SearchProjectsComponent {
       // this.csvParams += (refineFieldsFilterQuery?refineFieldsFilterQuery:'');
       //
       // //var errorCodes:ErrorCodes = new ErrorCodes();
-
+      
-      this.csvParams = (parameters ? ("&fq=("+parameters) : "") + (parameters ? ")" : "");
+      this.csvParams = (parameters ? ("&fq=(" + parameters) : "") + (parameters ? ")" : "");
       this.csvParams += (refineFieldsFilterQuery ? refineFieldsFilterQuery : "");
-
+      
       this.searchUtils.status = this.errorCodes.LOADING;
       //this.searchPage.openLoading();
       this.disableForms = true;
-      this.searchPageUpdates.emit({disableForms: this.disableForms, disableRefineForms: this.disableRefineForms, searchUtils: this.searchUtils});
+      this.searchPageUpdates.emit({
+        disableForms: this.disableForms,
+        disableRefineForms: this.disableRefineForms,
+        searchUtils: this.searchUtils
+      });
       this.results = [];
       this.searchUtils.totalResults = 0;
-
+      
       //console.info("Advanced Search for Publications: Execute search query "+parameters);
-      this.searchResultsSub = this._searchProjectsService.advancedSearchProjects(parameters,  page, size, this.properties,null, this.searchPage.getFields(), refineFieldsFilterQuery).subscribe(
+      this.searchResultsSub = this._searchProjectsService.advancedSearchProjects(parameters, page, size, this.properties, null, this.searchPage.getFields(), refineFieldsFilterQuery).subscribe(
-      //this._searchProjectsService.advancedSearchProjects(parameters,  page, size, this.properties,(refine) ? this.searchPage.getRefineFieldsQuery() : null, this.searchPage.getFields(), refineFieldsFilterQuery).subscribe(
+        //this._searchProjectsService.advancedSearchProjects(parameters,  page, size, this.properties,(refine) ? this.searchPage.getRefineFieldsQuery() : null, this.searchPage.getFields(), refineFieldsFilterQuery).subscribe(
-          data => {
+        data => {
-            let totalResults = data[0];
+          let totalResults = data[0];
-            let results = data[1];
+          let results = data[1];
-            this.resultsReturned(refine, results, totalResults, page);
+          this.resultsReturned(refine, results, totalResults, page);
-          },
+        },
-          err => {
+        err => {
-              //console.log(err);
+          //console.log(err);
-              this.handleError("Error getting projects", err);
+          this.handleError("Error getting projects", err);
-              this.searchUtils.status = this.errorMessages.getErrorCode(err.status);
+          this.searchUtils.status = this.errorMessages.getErrorCode(err.status);
-              //this.searchUtils.totalResults = null;
+          //this.searchUtils.totalResults = null;
-              //TODO check erros (service not available, bad request)
+          //TODO check erros (service not available, bad request)
-              // if( ){
+          // if( ){
-              //   this.searchUtils.status = errorCodes.ERROR;
+          //   this.searchUtils.status = errorCodes.ERROR;
-              // }
+          // }
-              //var errorCodes:ErrorCodes = new ErrorCodes();
+          //var errorCodes:ErrorCodes = new ErrorCodes();
-              //this.searchUtils.status = errorCodes.NOT_AVAILABLE;
+          //this.searchUtils.status = errorCodes.NOT_AVAILABLE;
-              /*if(err.status == '404') {
+          /*if(err.status == '404') {
-                this.searchUtils.status = this.errorCodes.NOT_FOUND;
+            this.searchUtils.status = this.errorCodes.NOT_FOUND;
-              } else if(err.status == '500') {
+          } else if(err.status == '500') {
-                this.searchUtils.status = this.errorCodes.ERROR;
+            this.searchUtils.status = this.errorCodes.ERROR;
-              } else {
+          } else {
-                this.searchUtils.status = this.errorCodes.NOT_AVAILABLE;
+            this.searchUtils.status = this.errorCodes.NOT_AVAILABLE;
-              }*/
+          }*/
-
+          
-              //this.searchPage.closeLoading();
+          //this.searchPage.closeLoading();
-              this.disableForms = false;
+          this.disableForms = false;
-            this.searchPageUpdates.emit({disableForms: this.disableForms, disableRefineForms: this.disableRefineForms, searchUtils: this.searchUtils})
+          this.searchPageUpdates.emit({
-            this.searchPage.hideFilters = false;
+            disableForms: this.disableForms,
-          }
+            disableRefineForms: this.disableRefineForms,
+            searchUtils: this.searchUtils
+          })
+          this.searchPage.hideFilters = false;
+        }
       );
     }
   }
-
+  
   public resultsReturned(refine: boolean, results: any, totalResults, page: number) {
     this.searchUtils.totalResults = totalResults;
     this.results = results;
-    if(!refine) {
+    if (!refine) {
       this.searchPage.buildPageURLParameters(this.filters, this.rangeFilters, false);
     }
-
+    
     this.searchPage.hideFilters = false;
-
+    
     this.searchUtils.status = this.errorCodes.DONE;
     if (this.searchUtils.totalResults == 0) {
       this.searchUtils.status = this.errorCodes.NONE;
     }
-
+    
     if (this.searchUtils.status == this.errorCodes.DONE) {
       // Page out of limit!!!
       let totalPages: any = this.searchUtils.totalResults / (this.searchUtils.size);
@@ -297,19 +320,23 @@ export class SearchProjectsComponent {
         this.searchUtils.status = this.errorCodes.OUT_OF_BOUND;
       }
     }
-
+    
-    if(this.searchUtils.status != this.errorCodes.DONE && this.searchUtils.refineStatus != this.searchUtils.status) {
+    if (this.searchUtils.status != this.errorCodes.DONE && this.searchUtils.refineStatus != this.searchUtils.status) {
-      if(this.searchFiltersSub) {
+      if (this.searchFiltersSub) {
         this.searchFiltersSub.unsubscribe();
       }
       this.filtersReturned(refine, [], totalResults, page);
     }
-
+    
     this.disableForms = false;
-    this.searchPageUpdates.emit({disableForms: this.disableForms, disableRefineForms: this.disableRefineForms, searchUtils: this.searchUtils})
+    this.searchPageUpdates.emit({
+      disableForms: this.disableForms,
+      disableRefineForms: this.disableRefineForms,
+      searchUtils: this.searchUtils
+    })
   }
-
+  
   private handleError(message: string, error) {
-    console.error("Projects advanced Search Page: "+message, error);
+    console.error("Projects advanced Search Page: " + message, error);
   }
 }

searchPages/searchResearchResults.component.ts

@@ -7,7 +7,7 @@ import {ErrorMessagesComponent} from '../utils/errorMessages.component';
 import {SearchFields} from '../utils/properties/searchFields';
 import {SearchCustomFilter, SearchUtilsClass} from './searchUtils/searchUtils.class';
 import {EnvProperties} from '../utils/properties/env-properties';
-import {NewSearchPageComponent} from "./searchUtils/newSearchPage.component";
+import {NewSearchPageComponent, SearchForm} from "./searchUtils/newSearchPage.component";
 import {RangeFilter} from "../utils/rangeFilter/rangeFilterHelperClasses.class";
 import {properties} from "../../../environments/environment";
 import {ContextsService} from "../claims/claim-utils/service/contexts.service";
@@ -31,6 +31,7 @@ import {ContextsService} from "../claims/claim-utils/service/contexts.service";
         [oldTotalResults]="oldTotalResults"
         [openaireLink]=openaireLink
         [piwikSiteId]=piwikSiteId [hasPrefix]="hasPrefix"
+        [searchForm]="searchForm"
         [filters]="filters" [quickFilter]="quickFilter"
         [rangeFilters]="rangeFilters" [rangeFields]="rangeFields"
         [simpleView]="simpleView" formPlaceholderText="Search by title, author, abstract, DOI, orcid..."
@@ -39,7 +40,6 @@ import {ContextsService} from "../claims/claim-utils/service/contexts.service";
         [stickyForm]="stickyForm"
     >
     </new-search-page>
-  
   `
 })
 
@@ -53,6 +53,7 @@ export class SearchResearchResultsComponent {
   private errorMessages: ErrorMessagesComponent;
   @Input() piwikSiteId = properties.piwikSiteId;
   @Input() hasPrefix: boolean = true;
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: true};
   public results = [];
   public filters = [];
   public rangeFilters: RangeFilter[] = [];

searchPages/searchUtils/newSearchPage.component.ts

@@ -26,6 +26,11 @@ import {Subscriber} from "rxjs";
 import {IndexInfoService} from "../../utils/indexInfo.service";
 import { Option } from '../../sharedComponents/input/input.component';
 
+export interface SearchForm {
+  class: string,
+  dark: boolean
+}
+
 declare var UIkit: any;
 
 @Component({
@@ -59,10 +64,7 @@ export class NewSearchPageComponent {
   @Input() customFilter: SearchCustomFilter;
   @Input() sort: boolean = true;
   @Input() sortedByChanged: string = "";
-  @Input() searchForm = {
+  @Input() searchForm: SearchForm = {class: 'search-form', dark: true};
-    class: 'search-form',
-    dark: true
-  };
   //From simple:
   @Input() rangeFilters: RangeFilter[] = [];
   @Input() rangeFields: string[][] = [];

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

@@ -17,7 +17,7 @@ import {ClickEvent} from "../../utils/click/click-outside-or-esc.directive";
 @Component({
   selector: '[search-input]',
   template: `
-    <div class="uk-flex uk-flex-right uk-width-1-1">
+    <div *ngIf="initialized" class="uk-flex uk-flex-right uk-width-1-1">
       <div #searchInput click-outside-or-esc (clickOutside)="click($event)" class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
         <div class="uk-flex uk-flex-middle">
           <div class="uk-width-expand">
@@ -53,6 +53,7 @@ export class SearchInputComponent implements OnInit {
   @ViewChild('searchInput') searchInput: ElementRef;
   @ViewChild('input') input: InputComponent;
   public expanded: boolean = true;
+  public initialized: boolean = false;
   
   constructor(private cdr: ChangeDetectorRef) {
   }
@@ -75,6 +76,7 @@ export class SearchInputComponent implements OnInit {
   
   ngOnInit() {
     this.expanded = !this.expandable;
+    this.initialized = true;
   }
   
   expand(value: boolean) {