44024: test with select

src/app/search-page/search-page.component.html

 <div class="search-page">
-    <ds-search-form [query]="query" [scope]="(scopeObject?.payload | async)" [currentParams]="currentParams"></ds-search-form>
+    <ds-search-form [query]="query" [scope]="scopeObject?.payload" [currentParams]="currentParams" [scopes]="scopeList?.payload | async"></ds-search-form>
     <ds-search-results [searchResults]="results" [searchConfig]="searchOptions"></ds-search-results>
 </div>
\ No newline at end of file

src/app/search-page/search-page.component.ts

@@ -9,6 +9,7 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp
 import { SearchOptions } from '../search/search-options.model';
 import { CommunityDataService } from '../core/data/community-data.service';
 import { hasValue } from '../shared/empty.util';
+import { Community } from '../core/shared/community.model';
 
 /**
  * This component renders a simple item page.
@@ -30,11 +31,19 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   results: RemoteData<Array<SearchResult<DSpaceObject>>>;
   private currentParams = {};
   searchOptions: SearchOptions;
+  scopeList: RemoteData<Community[]>;
 
   constructor(private service: SearchService,
               private route: ActivatedRoute,
-              private communityService: CommunityDataService,
-  ) {
+              private communityService: CommunityDataService,) {
+    // Sample scope data
+    const defaultScope: Community = new Community();
+    defaultScope.id = '';
+    this.scopeList = communityService.findAll();
+    this.scopeList.payload = this.scopeList.payload.map((list) => {
+      list.unshift(defaultScope);
+      return list
+    });
   }
 
   ngOnInit(): void {
@@ -49,8 +58,8 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           pagination.id = 'search-results-pagination';
           pagination.currentPage = this.page;
           pagination.pageSize = +params.pageSize || 10;
-          const sort: SortOptions =  new SortOptions(params.sortField, params.sortDirection);
-          this.searchOptions =  {pagination: pagination, sort: sort};
+          const sort: SortOptions = new SortOptions(params.sortField, params.sortDirection);
+          this.searchOptions = { pagination: pagination, sort: sort };
           this.results = this.service.search(this.query, this.scope, this.searchOptions);
           if (hasValue(this.scope)) {
             this.scopeObject = this.communityService.findById(this.scope);

src/app/shared/search-form/search-form.component.html

-<form #form="ngForm" (ngSubmit)="onSubmit(form.value, scope?.id)">
+<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
     <div class="form-group input-group">
-        <input type="text" [ngModel]="query" name="query" class="form-control" aria-label="Search input">
-        <div class="input-group-btn" ngbDropdown>
-            <button type="submit" class="search-button btn btn-secondary">{{ scope ? scope.name : ('search.form.search_dspace' | translate) }}</button>
-            <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
-                    aria-haspopup="true" aria-expanded="false" id="searchDropdown" ngbDropdownToggle>
-                <span class="sr-only">Toggle Dropdown</span>
-            </button>
-            <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="searchDropdown">
-                <a class="dropdown-item" (click)="onSubmit(form.value)">{{ 'search.form.search_dspace' | translate }}</a>
-                <a class="dropdown-item" (click)="onSubmit(form.value, '7669c72a-3f2a-451f-a3b9-9210e7a4c02f')">{{ 'search.form.search' | translate }} OR2017 - Demonstration</a>
-                <a class="dropdown-item" (click)="onSubmit(form.value, '9076bd16-e69a-48d6-9e41-0238cb40d863')">{{ 'search.form.search' | translate }} Sample Community</a>
-            </div>
+        <input type="text" [(ngModel)]="query" name="query" class="form-control" aria-label="Search input">
+        <input type="text" [(ngModel)]="scopeId" name="scopeId" class="form-control" aria-label="Search input scopeId">
+        <select ngif="isNotEmpty(scopes)" [(ngModel)]="scopeId" name="scope" class="form-control" aria-label="Search scope" (change)="onChange()" [compareWith]="byId">
+            <option *ngFor="let scopeOption of scopes" [ngValue]="scopeOption.id" [value]="scopeOption.id">{{scopeOption?.name ? scopeOption.name : 'search.form.search_dspace' | translate}}</option>
+        </select>
+        <div class="input-group-btn">
+            <button type="submit" class="search-button btn btn-secondary">{{ ('search.form.search' | translate) }}</button>
         </div>
     </div>
 </form>

src/app/shared/search-form/search-form.component.ts

-import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+import { isNotEmpty, isEmpty, hasNoValue } from '../empty.util';
+import { Observable } from 'rxjs';
 
 /**
  * This component renders a simple item page.
@@ -13,20 +15,26 @@ import { Router, ActivatedRoute } from '@angular/router';
   styleUrls: ['./search-form.component.scss'],
   templateUrl: './search-form.component.html',
 })
-export class SearchFormComponent {
+export class SearchFormComponent implements OnInit {
   @Input() query: string;
-  @Input() scope: DSpaceObject;
-
+  @Input() scope: Observable<DSpaceObject>;
+  scopeId: string;
   // Optional existing search parameters
   @Input() currentParams: {};
+  @Input() scopes: DSpaceObject[];
+
+  ngOnInit(): void {
+    this.scope.subscribe((scopeObject) => {
+      this.scopeId = scopeObject.id;
+      console.log("Initialized: ", scopeObject.id);
+    });
+  }
 
   constructor(private router: Router) {
   }
 
-  onSubmit(form: any, scope ?: string) {
-    const data: any = Object.assign({}, form, { scope: scope });
+  onSubmit(data: any) {
     this.updateSearch(data);
-
   }
 
   updateSearch(data: any) {
@@ -41,4 +49,16 @@ export class SearchFormComponent {
     })
     ;
   }
+
+  private isNotEmpty(object: any) {
+    return isNotEmpty(object);
+  }
+
+  byId(id1: string, id2: string) {
+    return id1 === id2;
+  }
+
+  onChange(): void {
+    console.log('Scope: ', this.scope);
+  }
 }