refactor(fulltext-search): persist fulltext search term in input fiel…

…d (DSP-1674) (#539)

* refactor(fulltext-search): persists fulltext search term in the input field on page refresh. If a gravsearch query is performed, the input field is cleared

* fix: quick fix to decode the search term string

* refactor: only persists search term if user refreshes the full text search results page

src/app/main/services/component-communication-event.service.ts

@@ -36,5 +36,6 @@ export class EmitEvent {
 
 // possible events that can be emitted.
 export enum Events {
-    loginSuccess
+    loginSuccess,
+    gravSearchExecuted
 }

src/app/workspace/results/list-view/list-view.component.ts

@@ -2,6 +2,7 @@ import { Component, EventEmitter, Inject, Input, OnChanges, Output } from '@angu
 import { PageEvent } from '@angular/material/paginator';
 import { ApiResponseError, CountQueryResponse, IFulltextSearchParams, KnoraApiConnection, ReadResourceSequence } from '@dasch-swiss/dsp-js';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
+import { ComponentCommunicationEventService, EmitEvent, Events } from 'src/app/main/services/component-communication-event.service';
 import { NotificationService } from 'src/app/main/services/notification.service';
 import { AdvancedSearchParamsService } from '../../search/services/advanced-search-params.service';
 
@@ -117,7 +118,8 @@ export class ListViewComponent implements OnChanges {
     constructor(
         @Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
         private _advancedSearchParamsService: AdvancedSearchParamsService,
-        private _notification: NotificationService
+        private _notification: NotificationService,
+        private _componentCommsService: ComponentCommunicationEventService,
     ) { }
 
     ngOnChanges(): void {
@@ -207,6 +209,8 @@ export class ListViewComponent implements OnChanges {
             );
 
         } else if (this.search.mode === 'gravsearch') {
+            // emit 'gravSearchExecuted' event to the fulltext-search component in order to clear the input field
+            this._componentCommsService.emit(new EmitEvent(Events.gravSearchExecuted, true));
 
             // search mode: gravsearch
             if (this.pageEvent.pageIndex === 0) {

src/app/workspace/search/fulltext-search/fulltext-search.component.ts

@@ -7,6 +7,7 @@ import {
     Inject,
     Input,
     OnChanges,
+    OnDestroy,
     OnInit,
     Output,
     TemplateRef,
@@ -23,7 +24,9 @@ import {
     ProjectsResponse,
     ReadProject
 } from '@dasch-swiss/dsp-js';
+import { Subscription } from 'rxjs';
 import { DspApiConnectionToken } from 'src/app/main/declarations/dsp-api-tokens';
+import { ComponentCommunicationEventService, Events } from 'src/app/main/services/component-communication-event.service';
 import { NotificationService } from 'src/app/main/services/notification.service';
 import { SortingService } from 'src/app/main/services/sorting.service';
 import { SearchParams } from '../../results/list-view/list-view.component';
@@ -41,7 +44,7 @@ const resolvedPromise = Promise.resolve(null);
     templateUrl: './fulltext-search.component.html',
     styleUrls: ['./fulltext-search.component.scss']
 })
-export class FulltextSearchComponent implements OnInit, OnChanges {
+export class FulltextSearchComponent implements OnInit, OnChanges, OnDestroy {
 
     /**
      *
@@ -105,6 +108,8 @@ export class FulltextSearchComponent implements OnInit, OnChanges {
 
     projectIri: string;
 
+    componentCommsSubscription: Subscription;
+
     // in case of an (api) error
     error: any;
 
@@ -128,10 +133,20 @@ export class FulltextSearchComponent implements OnInit, OnChanges {
         private _notification: NotificationService,
         private _sortingService: SortingService,
         private _overlay: Overlay,
-        private _viewContainerRef: ViewContainerRef
+        private _viewContainerRef: ViewContainerRef,
+        private _componentCommsService: ComponentCommunicationEventService,
     ) { }
 
     ngOnInit(): void {
+
+        // on page refresh, split the url into an array of strings and assign the `searchQuery` to the last element of this array of strings
+        // this persists the search term in the search input field
+        const urlArray = window.location.pathname.split('/');
+        const currentSearchTerm = urlArray[urlArray.length - 1];
+        if(urlArray[urlArray.length - 2] === 'fulltext') {
+            this.searchQuery = decodeURI(decodeURI(currentSearchTerm));
+        }
+
         // filterbyproject is set as deprecated. To avoid breaking changes we still support it
         if (this.filterbyproject) {
             this.limitToProject = this.filterbyproject;
@@ -152,6 +167,12 @@ export class FulltextSearchComponent implements OnInit, OnChanges {
         if (this.projectfilter) {
             this.getAllProjects();
         }
+
+        // in the event of a grav search (advanced or expert search), clear the input field
+        this.componentCommsSubscription = this._componentCommsService.on(
+            Events.gravSearchExecuted, () => {
+                this.searchQuery = null;
+            });
     }
 
     ngOnChanges() {
@@ -168,6 +189,13 @@ export class FulltextSearchComponent implements OnInit, OnChanges {
         });
     }
 
+    ngOnDestroy() {
+        // unsubscribe from the componentCommsSubscription when component is destroyed
+        if (this.componentCommsSubscription !== undefined) {
+            this.componentCommsSubscription.unsubscribe();
+        }
+    }
+
     /**
      * get all public projects from DSP-API
      */