From 8c78d8a53da1b93b2ab06fa1b982e2809312f9a4 Mon Sep 17 00:00:00 2001 From: Carlo Minotti <50220438+minottic@users.noreply.github.com> Date: Wed, 10 Apr 2024 17:28:51 +0200 Subject: [PATCH] Submit search on enter * Submit search on enter --- .../search-window.component.html | 7 ++- .../search-window.component.spec.ts | 24 ++++++---- .../search-window/search-window.component.ts | 45 ++++++++----------- .../src/app/overview/overview.component.css | 9 ++++ .../src/app/overview/overview.component.html | 10 +++-- .../app/overview/overview.component.spec.ts | 10 +++++ scilog/src/app/overview/overview.component.ts | 23 +++++----- 7 files changed, 77 insertions(+), 51 deletions(-) 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 index 21382436..885b8ec3 100644 --- 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,6 +13,9 @@ + @@ -79,12 +82,12 @@ -
+
Showing results for: - {{searchString}} + {{searchedString}}
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 index 7ab16e7f..0903320b 100644 --- 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 @@ -35,14 +35,6 @@ describe('SearchWindowComponent', () => { expect(component).toBeTruthy(); }); - it('should call _prepareConfig on searchString emission', fakeAsync(() => { - const prepareConfigSpy = spyOn(component, '_prepareConfig'); - component.searchString = ''; - component.searchString = 'someSearch'; - tick(501); - expect(prepareConfigSpy).toHaveBeenCalledTimes(1); - })); - it('should _parseSearchString', () => { component.searchString = 'someSearch'; expect(component['_parseSearchString']()).toEqual( @@ -58,4 +50,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(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); + }); + }); + }); diff --git a/scilog/src/app/logbook/core/search-window/search-window.component.ts b/scilog/src/app/logbook/core/search-window/search-window.component.ts index 60c33d64..b3b5e63d 100644 --- a/scilog/src/app/logbook/core/search-window/search-window.component.ts +++ b/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 = 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 { }) } - } diff --git a/scilog/src/app/overview/overview.component.css b/scilog/src/app/overview/overview.component.css index 1f186ac7..84358b44 100644 --- a/scilog/src/app/overview/overview.component.css +++ b/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; +} + diff --git a/scilog/src/app/overview/overview.component.html b/scilog/src/app/overview/overview.component.html index 4781cf5d..e396fd83 100644 --- a/scilog/src/app/overview/overview.component.html +++ b/scilog/src/app/overview/overview.component.html @@ -1,11 +1,15 @@
- + Search search - - + diff --git a/scilog/src/app/overview/overview.component.spec.ts b/scilog/src/app/overview/overview.component.spec.ts index 2a4bab02..0d756df8 100644 --- a/scilog/src/app/overview/overview.component.spec.ts +++ b/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(component.logbookIconScrollService, 'reset'); + const prepareConfigSpy = spyOn(component, '_prepareConfig'); + component.submitSearch(); + expect(resetSpy).toHaveBeenCalledTimes(1); + expect(prepareConfigSpy).toHaveBeenCalledTimes(1); + }); + + }); diff --git a/scilog/src/app/overview/overview.component.ts b/scilog/src/app/overview/overview.component.ts index 8165da20..47df5d5f 100644 --- a/scilog/src/app/overview/overview.component.ts +++ b/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 { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-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 = new Subject(); _matCardSide = { 'logbook-module': 352, 'logbook-headline': 47 }; @ViewChild('logbookContainer', { static: true }) logbookContainer: ElementRef; 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());