Submit search on enter

scilog/src/app/logbook/core/search-window/search-window.component.html

@@ -13,6 +13,9 @@
             </mat-form-field>
         </span>
         <span>
+            <button mat-icon-button (click)="submitSearch(searchString)">
+                <mat-icon>search</mat-icon>
+            </button>
             <button mat-icon-button (click)="closeSearch()">
                 <mat-icon>close</mat-icon>
             </button>
@@ -79,12 +82,12 @@
     </div>
 
 </div>
-<div class="statusMessage" *ngIf=showResults>
+<div class="statusMessage" *ngIf=searchedString>
     <mat-divider></mat-divider>
     <div>
         Showing results for:
         <span>
-            {{searchString}}
+            {{searchedString}}
         </span>
     </div>
 

scilog/src/app/logbook/core/search-window/search-window.component.spec.ts

@@ -58,4 +58,20 @@ describe('SearchWindowComponent', () => {
     expect(component.searchString).toEqual('someSearch');
   });
 
+  [
+    ['some', false, true, 1],
+    ['', true, false, 0]
+  ].forEach((t, i) => {
+    it(`should submitSearch ${i}`, () => {
+      component.searchString = 'someSearch';
+      const resetSpy = spyOn(component.searchScrollService, 'reset');
+      const prepareConfigSpy = spyOn<any>(component, '_prepareConfig');
+      component.submitSearch(t[0] as string);
+      expect(component.showHelp).toEqual(t[1] as boolean);
+      expect(component.showResults).toEqual(t[2] as boolean);
+      expect(resetSpy).toHaveBeenCalledTimes(t[3] as number);
+      expect(prepareConfigSpy).toHaveBeenCalledTimes(t[3] as number);
+    });
+  });
+
 });

scilog/src/app/logbook/core/search-window/search-window.component.ts

@@ -1,9 +1,8 @@
 import { Component, OnInit, Output, EventEmitter, Input, ElementRef, ViewChild } from '@angular/core';
 import { SearchScrollService } from '@shared/search-scroll.service';
 import { WidgetConfig, WidgetItemConfig } from '@model/config';
-import { Subject, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { SearchDataService } from '@shared/remote-data.service';
-import { debounceTime } from 'rxjs/operators';
 import { UserPreferencesService } from '@shared/user-preferences.service';
 import { LogbookInfoService } from '@shared/logbook-info.service';
 import { TagService } from '@shared/tag.service';
@@ -46,15 +45,14 @@ export class SearchWindowComponent implements OnInit {
 
   @ViewChild('searchSnippets') searchSnippets: ElementRef;
 
-  private _searchString: string = '';
-  searchStringSubject: Subject<void> = new Subject();
+  searchString: string = '';
   searchSnippetIndex: string = '';
   showResults = false;
   showHelp = true;
   tags: string[] = [];
   _sample_user: string = "";
   subscriptions: Subscription[] = [];
-
+  searchedString: string;
 
   constructor(
     public searchScrollService: SearchScrollService,
@@ -71,21 +69,15 @@ export class SearchWindowComponent implements OnInit {
     this.config = this._prepareConfig();
     this.searchScrollService.initialize(this.config);
 
-    this.subscriptions.push(this.searchStringSubject.pipe(debounceTime(500)).subscribe(() => {
-      if (this._searchString.length > 0) {
-        this.showResults = !this.showHelp;
-        this.searchScrollService.config = this._prepareConfig();
-        this.searchScrollService.reset();
-      } else {
-        this.showHelp = true;
-        this.showResults = false;
-      }
-    }));
     this._initialize_help();
 
     this.subscriptions.push(this.hotkeys.addShortcut({ keys: 'esc', description: { label: 'Close search', group: "General" } }).subscribe(() => {
       this.closeSearch();
     }));
+    this.subscriptions.push(this.hotkeys.addShortcut({ keys: 'enter', description: { label: 'Submit search', group: "General" } }).subscribe(() => {
+      if (this.searchString)
+        this.submitSearch(this.searchString);
+    }));
 
   }
   ngAfterViewInit(): void {
@@ -136,16 +128,6 @@ export class SearchWindowComponent implements OnInit {
     this.closeSearch();
   }
 
-  public get searchString(): string {
-    return this._searchString;
-  }
-  public set searchString(value: string) {
-    if (this.searchString.length > 0) {
-      this.showHelp = false;
-    }
-    this._searchString = value;
-    this.searchStringSubject.next();
-  }
 
   private _parseSearchString(): SearchResult {
     let searchResult: SearchResult = {
@@ -187,6 +169,18 @@ export class SearchWindowComponent implements OnInit {
     return _config;
   }
 
+  submitSearch(searchText: string = '') {
+    this.searchedString = searchText;
+    if (searchText) {
+      this.showHelp = false;
+      this.showResults = true;
+      this.searchScrollService.config = this._prepareConfig();
+      this.searchScrollService.reset();
+    } else {
+      this.showHelp = true;
+      this.showResults = false;
+    }
+  };
 
   ngOnDestroy(): void {
     //Called once, before the instance is destroyed.
@@ -196,5 +190,4 @@ export class SearchWindowComponent implements OnInit {
     })
   }
 
-
 }

scilog/src/app/overview/overview.component.css

@@ -46,3 +46,12 @@ mat-button-toggle-group {
   left: 50%;
   transform: translate(-50%, -50%);
 }
+
+.search {
+  width: 180px;
+}
+
+.expanded-search {
+  width: 540px;
+}
+

scilog/src/app/overview/overview.component.html

@@ -1,11 +1,15 @@
 <app-toolbar></app-toolbar>
 <div class="overview-container">
-  <mat-form-field class="example-form-field">
+  <mat-form-field [ngClass]=searchClass>
     <mat-label>
       Search <mat-icon>search</mat-icon>
     </mat-label>
-    <input matInput type="text" [(ngModel)]="searchString">
-    <button mat-button *ngIf="searchString" matSuffix mat-icon-button aria-label="Clear" (click)="searchString=''">
+    <input matInput type="text" [(ngModel)]="searchString" (keyup.enter)="submitSearch(searchString)">
+    <button mat-button *ngIf="searchString" matSuffix mat-icon-button aria-label="Search"
+      (click)="submitSearch(searchString)">
+      <mat-icon>search</mat-icon>
+    </button>
+    <button mat-button *ngIf="searchString" matSuffix mat-icon-button aria-label="Clear" (click)="submitSearch()">
       <mat-icon>close</mat-icon>
     </button>
   </mat-form-field>

scilog/src/app/overview/overview.component.spec.ts

@@ -154,4 +154,14 @@ describe('OverviewComponent', () => {
     expect(onResizedSpy).toHaveBeenCalled();
   });
 
+  it('should submitSearch', () => {
+    component.searchString = 'someSearch';
+    const resetSpy = spyOn<any>(component.logbookIconScrollService, 'reset');
+    const prepareConfigSpy = spyOn<any>(component, '_prepareConfig');
+    component.submitSearch();
+    expect(resetSpy).toHaveBeenCalledTimes(1);
+    expect(prepareConfigSpy).toHaveBeenCalledTimes(1);
+  });
+
+
 });

scilog/src/app/overview/overview.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core';
 import { Logbooks } from '@model/logbooks';
-import { Subject, Subscription } from 'rxjs';
+import { Subscription } from 'rxjs';
 import { UserPreferencesService } from '@shared/user-preferences.service';
 import { CollectionConfig, WidgetItemConfig } from '@model/config';
 import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
@@ -10,7 +10,6 @@ import { LogbookInfoService } from '@shared/logbook-info.service';
 import { CookiesService } from '@shared/cookies.service';
 import { LogbookDataService } from '@shared/remote-data.service';
 import { LogbookIconScrollService } from './logbook-icon-scroll-service.service';
-import { debounceTime } from 'rxjs/operators';
 import { ResizedEvent } from '@shared/directives/resized.directive';
 import { animate, style, transition, trigger } from '@angular/animations';
 
@@ -48,10 +47,10 @@ export class OverviewComponent implements OnInit {
   logbookSubscription: Subscription = null;
   subscriptions: Subscription[] = [];
   private _searchString: string = '';
-  searchStringSubject: Subject<void> = new Subject();
   _matCardSide = { 'logbook-module': 352, 'logbook-headline': 47 };
   @ViewChild('logbookContainer', { static: true }) logbookContainer: ElementRef<HTMLElement>;
   matCardType: MatCardType = 'logbook-module';
+  searchClass = 'search';
 
 
   constructor(
@@ -60,9 +59,7 @@ export class OverviewComponent implements OnInit {
     public dialog: MatDialog,
     private logbookInfo: LogbookInfoService,
     private cookie: CookiesService,
-    private dataService: LogbookDataService) {
-
-  }
+    private dataService: LogbookDataService) {}
 
   ngOnInit(): void {
     this.logbookInfo.logbookInfo = null;
@@ -82,11 +79,6 @@ export class OverviewComponent implements OnInit {
       this.logbookIconScrollService.groupSize = this.groupSize(this.logbookContainer.nativeElement.clientWidth);
       this.logbookIconScrollService.initialize(this.config);
     }));
-    this.subscriptions.push(this.searchStringSubject.pipe(debounceTime(500)).subscribe(() => {
-      this.logbookIconScrollService.config = this._prepareConfig();
-      this.logbookIconScrollService.reset();
-
-    }));
   }
 
 
@@ -144,8 +136,8 @@ export class OverviewComponent implements OnInit {
     return this._searchString;
   }
   public set searchString(value: string) {
+    this.searchClass = 'expanded-search';
     this._searchString = value;
-    this.searchStringSubject.next();
     this.dataService.searchString = this._searchString;
   }
 
@@ -224,6 +216,13 @@ export class OverviewComponent implements OnInit {
     return _config;
   }
 
+  submitSearch(searchString: string='') {
+    this.searchString = searchString;
+    this.searchClass = 'search';
+    this.logbookIconScrollService.config = this._prepareConfig();
+    this.logbookIconScrollService.reset();
+  }
+
   ngOnDestroy(): void {
     this.subscriptions.forEach(
       (subscription) => subscription.unsubscribe());