From 32699e552fbd89851597e9d7d100f1a42d7ebf20 Mon Sep 17 00:00:00 2001
From: Jason Wall <jason@walljm.com>
Date: Thu, 6 Aug 2020 16:47:04 -0400
Subject: [PATCH] clear search after query toggle

---
 app/db/README.md                                      |  2 --
 .../components/settings/settings.component.html       | 11 +++++++----
 .../common/components/settings/settings.component.ts  |  6 ++++++
 app/db/src/app/models/app-state.ts                    |  1 +
 .../app/search/components/search-page/search.page.ts  |  8 +++++++-
 app/db/src/app/services/app.service.ts                |  1 +
 6 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/app/db/README.md b/app/db/README.md
index 867efbc3..9e04e4ea 100644
--- a/app/db/README.md
+++ b/app/db/README.md
@@ -54,8 +54,6 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
   - Custom Colors for Light/Dark modes
 - Dark / Light / NightLight Mode
 - Sync Card across Devices
-- Clear Search after Query
-- Strongs as modal not implemented yet
 - Merge saved pages lists when unlogged in -> login
 - Incorporate Jacob's Geo Work
 - Android and IOS mobile apps with Ionic Capactor
diff --git a/app/db/src/app/common/components/settings/settings.component.html b/app/db/src/app/common/components/settings/settings.component.html
index 4e72dfd7..69ca8c1a 100644
--- a/app/db/src/app/common/components/settings/settings.component.html
+++ b/app/db/src/app/common/components/settings/settings.component.html
@@ -1,5 +1,12 @@
 <mat-toolbar>Search Settings</mat-toolbar>
 <mat-nav-list>
+  <mat-list-item>
+    <mat-slide-toggle
+      [checked]="this.displaySettings.clearSearchAfterQuery"
+      (change)="toggleClearSearchAfterQuery($event)"
+      >Clear Search Bar after Query</mat-slide-toggle
+    >
+  </mat-list-item>
   <mat-list-item>
     <mat-slide-toggle
       [checked]="this.displaySettings.showStrongsAsModal"
@@ -14,7 +21,6 @@
       >Append Results Below</mat-slide-toggle
     >
   </mat-list-item>
-
   <mat-list-item>
     <mat-slide-toggle
       [checked]="this.displaySettings.insertCardNextToItem"
@@ -33,7 +39,6 @@
       >Show Paragraphs</mat-slide-toggle
     >
   </mat-list-item>
-
   <mat-list-item>
     <mat-slide-toggle
       [checked]="this.displaySettings.showParagraphHeadings"
@@ -41,7 +46,6 @@
       >Show Paragraph Headings</mat-slide-toggle
     >
   </mat-list-item>
-
   <mat-list-item>
     <mat-slide-toggle
       [checked]="this.displaySettings.showVerseNumbers"
@@ -49,7 +53,6 @@
       >Show Verse Numbers</mat-slide-toggle
     >
   </mat-list-item>
-
   <mat-list-item>
     <mat-slide-toggle
       [checked]="this.displaySettings.showVersesOnNewLine"
diff --git a/app/db/src/app/common/components/settings/settings.component.ts b/app/db/src/app/common/components/settings/settings.component.ts
index c960a06c..c9522032 100644
--- a/app/db/src/app/common/components/settings/settings.component.ts
+++ b/app/db/src/app/common/components/settings/settings.component.ts
@@ -44,6 +44,12 @@ export class SettingsComponent extends SubscriberComponent {
     });
   }
 
+  toggleClearSearchAfterQuery(toggle: MatSlideToggleChange) {
+    this.appService.updateDisplaySettings({
+      ...this.displaySettings,
+      clearSearchAfterQuery: toggle.checked,
+    });
+  }
   //#endregion
 
   //#region Passage Settings
diff --git a/app/db/src/app/models/app-state.ts b/app/db/src/app/models/app-state.ts
index edaafb0e..8b7ff325 100644
--- a/app/db/src/app/models/app-state.ts
+++ b/app/db/src/app/models/app-state.ts
@@ -31,6 +31,7 @@ export interface DisplaySettings {
   readonly showStrongsAsModal: boolean;
   readonly appendCardToBottom: boolean;
   readonly insertCardNextToItem: boolean;
+  readonly clearSearchAfterQuery: boolean;
 
   readonly fontSize: number;
   readonly fontFamily: string;
diff --git a/app/db/src/app/search/components/search-page/search.page.ts b/app/db/src/app/search/components/search-page/search.page.ts
index 29021786..cf869fcf 100644
--- a/app/db/src/app/search/components/search-page/search.page.ts
+++ b/app/db/src/app/search/components/search-page/search.page.ts
@@ -24,6 +24,7 @@ export class SearchPage extends SubscriberComponent implements OnInit {
   suggestions$ = this.appService.select((state) => state.autocomplete);
 
   savedPagedLoaded = false;
+  clearSearchAfterQuery = true;
 
   searchControl = new FormControl();
 
@@ -45,6 +46,8 @@ export class SearchPage extends SubscriberComponent implements OnInit {
     this.addSubscription(
       this.appService.state$.subscribe((state) => {
         this.savedPagedLoaded = state.savedPagesLoaded;
+        this.clearSearchAfterQuery =
+          state.displaySettings.clearSearchAfterQuery;
       })
     );
   }
@@ -108,7 +111,10 @@ export class SearchPage extends SubscriberComponent implements OnInit {
 
   async search(search: string) {
     // clear search box.
-    this.searchControl.setValue('');
+    if (this.clearSearchAfterQuery) {
+      this.searchControl.setValue('');
+    }
+
     if (this.autoCompleteTrigger) {
       this.autoCompleteTrigger.closePanel();
     }
diff --git a/app/db/src/app/services/app.service.ts b/app/db/src/app/services/app.service.ts
index a20dd161..59cc0a17 100644
--- a/app/db/src/app/services/app.service.ts
+++ b/app/db/src/app/services/app.service.ts
@@ -56,6 +56,7 @@ const initialState: AppState = {
     showStrongsAsModal: false,
     appendCardToBottom: true,
     insertCardNextToItem: true,
+    clearSearchAfterQuery: true,
     fontSize: 12,
     fontFamily: 'PT Serif',
     showVersesOnNewLine: false,