clear search after query toggle

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

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"

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

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;

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();
     }

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,