Reuse search window from overview

* Move search functionality to other component * Simplify overview search for later reuse * Pass event to toolbar to show filters * Reuse search window from overview * Use reset whenever possible for logic standard closes #376
paulscherrerinstitute · Apr 16, 2024 · 052cfce · 052cfce
1 parent 8c78d8a
commit 052cfce
Show file tree

Hide file tree

Showing 18 changed files with 215 additions and 275 deletions.
diff --git a/scilog/src/app/core/search-scroll.service.spec.ts b/scilog/src/app/core/search-scroll.service.spec.ts
@@ -2,6 +2,7 @@ import { TestBed } from '@angular/core/testing';
 import { AppConfigService } from '../app-config.service';
 
 import { SearchScrollService } from './search-scroll.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 const getConfig = () => ({});
 
@@ -10,9 +11,10 @@ describe('SearchScrollService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
       providers: [
         { provide: AppConfigService, useValue: { getConfig } },
-        { provide: SearchScrollService, useValue: {} },
+        SearchScrollService
       ],
     });
     service = TestBed.inject(SearchScrollService);
@@ -21,4 +23,11 @@ describe('SearchScrollService', () => {
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
+
+  it('should reset', () => {
+    const setSearchSpy = spyOn<any>(service, 'setSearchString');
+    service.reset('some');
+    expect(setSearchSpy).toHaveBeenCalledOnceWith('some');
+  });
+
 });
diff --git a/scilog/src/app/core/search-scroll.service.ts b/scilog/src/app/core/search-scroll.service.ts
@@ -1,22 +1,34 @@
 import { Injectable } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { SearchDataService } from '@shared/remote-data.service';
+import { SearchDataService, LogbookDataService } from '@shared/remote-data.service';
 import { ScrollBaseService } from '@shared/scroll-base.service';
 
-@Injectable()
-export class SearchScrollService extends ScrollBaseService {
-
-  currentViewSubscription: Subscription = null;
+export class SearchScrollBaseService extends ScrollBaseService {
+
+  protected dataService: SearchDataService | LogbookDataService
+
+  private setSearchString(searchString: string) {
+    this.dataService.searchString = searchString;
+  }
+
+  reset(searchString?: string) {
+    this.setSearchString(searchString);
+    super.reset();
+  }
+
+}
+
+@Injectable({ providedIn: 'root' })
+export class SearchScrollService extends SearchScrollBaseService {
 
   constructor(
-    private searchDataService: SearchDataService,
-  ) { 
+    protected dataService: SearchDataService,
+  ) {
     super();
   }
 
 
   getDataBuffer(index:number, count:number, config:any){
-    return this.searchDataService.getDataBuffer(index, count, config);
+    return this.dataService.getDataBuffer(index, count, config);
   }
 
 }
diff --git a/scilog/src/app/core/toolbar/toolbar.component.html b/scilog/src/app/core/toolbar/toolbar.component.html
@@ -12,18 +12,22 @@
     </button>
   </div>
   <div *ngIf='showSearch' class="searchWindow">
-    <search-window #searchWindow [configsArray]='config' (close)="closeSearch()" (selectedSnippet)="selectedSearchEntry($event)"></search-window>
+    <search-window #searchWindow [configsArray]='config' [searched]="searched" (close)="closeSearch()" (overviewSearch)="overviewSearch($event)"></search-window>
   </div>
   <div class="flexExpand">
-    <button mat-icon-button class='searchButton' (click)="openSearch()" *ngIf="!showMenuIcon && isLogbookOpen">
-        <mat-icon class='searchIcon'>
-          search
-        </mat-icon>
-        <span>
-          Search 
-        </span>
+    <button mat-icon-button class='searchButton' (click)="openSearch()" *ngIf="!showMenuIcon">
+      <mat-icon class='searchIcon'>
+        search
+      </mat-icon>
+      <span>
+        Search
+      </span>
+      <mat-icon class="searchIcon" style="color: red;" *ngIf="searched">
+        filter_list_alt
+      </mat-icon>
     </button>
   </div>
+
   <span>
     <span class="version-info" *ngIf="showVersionInfo" matTooltip="v0.9">
       {{ versionInfo }}

diff --git a/scilog/src/app/core/toolbar/toolbar.component.spec.ts b/scilog/src/app/core/toolbar/toolbar.component.spec.ts
@@ -6,6 +6,7 @@ import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-m
 
 import { ToolbarComponent } from './toolbar.component';
 import { AppConfigService } from 'src/app/app-config.service';
+import { By } from '@angular/platform-browser';
 
 const getConfig = () => ({});
 
@@ -31,4 +32,14 @@ describe('ToolbarComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should overviewSearch', () => {
+    component.showSearch = true;
+    fixture.detectChanges();
+    fixture.debugElement.query(
+      By.css('search-window')
+    ).triggerEventHandler('overviewSearch', 'searched');
+    expect(component.searched).toEqual('searched');
+  });
+
 });
diff --git a/scilog/src/app/core/toolbar/toolbar.component.ts b/scilog/src/app/core/toolbar/toolbar.component.ts
@@ -24,6 +24,7 @@ export class ToolbarComponent implements OnInit {
   @Input()
   showMenuIcon: boolean;
 
+  searched: string;
   subscriptions: Subscription[] = [];
   logbookName: string;
   isLogbookOpen = false;
@@ -46,8 +47,6 @@ export class ToolbarComponent implements OnInit {
     }
  }
 
- @ViewChild('searchWindow') searchWindow: SearchWindowComponent;
-
   views: Views[] = [];
   appConfig: AppConfig = this.appConfigService.getConfig();
 
@@ -92,9 +91,11 @@ export class ToolbarComponent implements OnInit {
     }));
     this.showVersionInfo = !this.showMenuIcon;
     console.log(this.showVersionInfo)
-
   }
 
+  overviewSearch($event) {
+    this.searched = $event
+  }
 
   logout() {
     console.log("logout");
@@ -137,11 +138,6 @@ export class ToolbarComponent implements OnInit {
 
   closeSearch(){
     this.showSearch = false;
-    this.searchWindow.reset();
-  }
-
-  selectedSearchEntry($event){
-
   }
 
   loadView(index: number){

diff --git a/scilog/src/app/logbook/core/search-window/search-window.component.css b/scilog/src/app/logbook/core/search-window/search-window.component.css
@@ -57,52 +57,3 @@
     width: 50vw !important;
 }
 
-.searchResults {
-    height: calc(50vh - 95px);
-    overflow: scroll;
-}
-
-.searchResults .header {
-    font-size: 20px;
-    color: var(--header-color);
-    padding-bottom: 20px;
-    padding-top: 10px;
-    padding: 15px;
-}
-
-.searchContainer {
-    overflow: scroll;
-    height: calc(50vh - 140px);
-}
-
-.statusMessage {
-    position: absolute;
-    bottom: 0px;
-    color: black;
-    padding: 10px;
-    font-size: 12px;
-    width: calc(100% - 20px);
-}
-
-.statusMessage > div {
-    padding-left:20px;
-}
-
-.statusMessage > div > span {
-    border-radius: 5px;
-    background-color: #004c63;
-    color: white;
-    box-shadow: 0 1px 4px 0 var(--default-shadow-0), 0 2px 8px 0 var(--default-shadow-1),
-        0 4px 8px -1px var(--default-shadow-2);
-    border: unset;
-    padding: 4px;
-    margin-left: 4px;
-}
-
-.spinner {
-    position: fixed;
-    z-index: 1031;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
diff --git a/scilog/src/app/logbook/core/search-window/search-window.component.html b/scilog/src/app/logbook/core/search-window/search-window.component.html
@@ -13,7 +13,7 @@
             </mat-form-field>
         </span>
         <span>
-            <button mat-icon-button (click)="submitSearch(searchString)">
+            <button mat-icon-button (click)="submitSearch()">
                 <mat-icon>search</mat-icon>
             </button>
             <button mat-icon-button (click)="closeSearch()">
@@ -22,7 +22,8 @@
         </span>
 
     </mat-toolbar>
-    <div class="searchHelp" *ngIf="showHelp">
+    <search *ngIf="logbookId && searched" [config]="config" (close)="closeSearch()"></search>
+    <div class="searchHelp" *ngIf="!logbookId || !searched ">
         <mat-divider></mat-divider>
         <div class="header">
             Suggestions...
@@ -32,7 +33,7 @@
                     @{{_sample_user}}
                 </button>
             </div>
-            <div>
+            <div *ngIf="tags[0]">
                 Tag:
                 <span *ngFor="let tag of tags.slice(0,3)">
                     <button class="suggestion-button" (click)="addToSearch('#' + tag)">
@@ -49,46 +50,12 @@
         <div class="header">
             Examples:
             <div>
-                Search everywhere for entries created by "{{_sample_user}}" that contain the word "alignment" and have a tag "{{tags[0]}}":
+                Search everywhere for entries created by "{{_sample_user}}" that contain the word "alignment" {{tags[0]? "and have a tag \"" + tags[0] + "\"": ""}}:
                 <button class="suggestion-button" (click)="addToSearch('#' + tags[0] + ' @' + _sample_user + ' alignment')">
-                    #{{tags[0]}} @{{_sample_user}} alignment
+                    {{tags[0]? "#" + tags[0]: ""}} @{{_sample_user}} alignment
                 </button>
             </div>
         </div>
 
     </div>
-    <div class="searchResults" *ngIf=showResults>
-        <div class="header">
-            Logbook view:
-            <mat-spinner *ngIf="!searchScrollService.isLoaded" [@spinner] class="spinner"></mat-spinner>
-            <div class="searchContainer">
-                <div *uiScroll="let snippet of searchScrollService.datasource; let i = index">
-                    <snippet [snippet]="snippet" [updatedAt]="snippet.updatedAt" [index]=i+1 [config]="config"
-                        [showEditButtonsMenu]="false" (selected)="selectedSnippet($event)">
-                    </snippet>
-                </div>
-            </div>
-        </div>
-        <!-- <div class="header">
-            Tasks:
-            <div *uiScroll="let snippet of searchScrollService.datasource; let i = index">
-                <snippet [snippet]="snippet" [updatedAt]="snippet.updatedAt" [index]=i+1 [config]="config"
-                    [showEditButtonsMenu]="false" (selected)="selectedSnippet($event)">
-                </snippet>
-            </div>
-        </div> -->
-
-
-    </div>
-
 </div>
-<div class="statusMessage" *ngIf=searchedString>
-    <mat-divider></mat-divider>
-    <div>
-        Showing results for:
-        <span>
-            {{searchedString}}
-        </span>
-    </div>
-
-</div>
diff --git a/scilog/src/app/logbook/core/search-window/search-window.component.spec.ts b/scilog/src/app/logbook/core/search-window/search-window.component.spec.ts
@@ -1,5 +1,5 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
 import { LogbookInfoService } from '@shared/logbook-info.service';
 import { AppConfigService } from 'src/app/app-config.service';
@@ -14,7 +14,6 @@ describe('SearchWindowComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ SearchWindowComponent ],
       providers: [
         { provide: AppConfigService, useValue: { getConfig } },
         { provide: MatDialog, useValue: {} },
@@ -50,20 +49,26 @@ 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);
-    });
+  it('should submitSearch logbook', () => {
+    const resetSpy = spyOn(component['searchScrollService'], 'reset');
+    const search = 'some';
+    component.searchString = search;
+    component.submitSearch();
+    expect(resetSpy).toHaveBeenCalledOnceWith(search);
+    expect(component.searched).toEqual(search);
+  });
+
+  it('should submitSearch overview', () => {
+    component.logbookId = undefined;
+    const search = 'some';
+    component.searchString = search;
+    const resetSpy = spyOn(component['logbookIconScrollService'], 'reset');
+    const emitSpy = spyOn(component.overviewSearch, 'emit');
+    const closeSearchSpy = spyOn(component, 'closeSearch');
+    component.submitSearch();
+    expect(resetSpy).toHaveBeenCalledOnceWith(search);
+    expect(emitSpy).toHaveBeenCalledOnceWith(search);
+    expect(closeSearchSpy).toHaveBeenCalled();
   });
 
 });