Wire in saved page merge strategies to the UI

app/db/src/app/common/bible-reference.ts

@@ -1107,10 +1107,10 @@ class StringUtils {
 }
 
 export enum Overlap {
-  Intersect,
+  Intersect = 'Is Overlapping',
-  Subset,
+  Subset = 'Is Contained In',
-  Equal,
+  Equal = 'Is Equal',
-  None,
+  None = 'None',
 }
 
 export interface Book {

app/db/src/app/common/card-operations.ts

@@ -28,7 +28,7 @@ export function maybeMergeCards(leftCard: CardItem, rightCard: CardItem, strateg
   return null;
 }
 
-export function mergeCardList(cardList: CardItem[], strategy: Overlap) {
+export function mergeCardList(cardList: readonly CardItem[], strategy: Overlap): CardItem[] {
   if (strategy === Overlap.None || cardList.length === 0) {
     return [...cardList];
   }

app/db/src/app/components/settings/settings.component.html

@@ -59,6 +59,26 @@
   </mat-list-item>
 </mat-nav-list>
 
+<mat-toolbar>Saved Page Settings</mat-toolbar>
+<mat-nav-list>
+  <div class="setting-item">
+    <div class="settings-h2">Card Merging Strategy</div>
+    <mat-form-field class="full-width">
+      <mat-select
+        [(value)]="cardMergeStrategy"
+        (selectionChange)="pageCardMergeSettingsSelected($event)"
+      >
+        <mat-option
+          *ngFor="let overlap of cardMergeStrategies"
+          [value]="overlap"
+        >
+          {{ overlap }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+</mat-nav-list>
+
 <mat-toolbar>Display Settings</mat-toolbar>
 <mat-nav-list>
   <mat-list-item>
@@ -95,7 +115,7 @@
 <mat-nav-list>
   <div class="setting-item">
     <div class="settings-h2">Card Font Family</div>
-    <mat-form-field class="card-fonts">
+    <mat-form-field class="full-width">
       <mat-select
         [(value)]="cardFontFamily"
         (selectionChange)="cardFontSelected($event)"

app/db/src/app/components/settings/settings.component.scss

@@ -1,6 +1,3 @@
-.card-fonts {
-  width: 100%;
-}
 .font-size-slider {
   width: 100%;
 }

app/db/src/app/components/settings/settings.component.ts

@@ -20,6 +20,7 @@ import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-ca
 import { PageEditModalComponent } from 'src/app/components/page-edit-modal/page-edit-modal.component';
 import { NoteEditModalComponent } from 'src/app/components/note/edit-modal/note-edit-modal.component';
 import { SavedPage } from 'src/app/models/page-state';
+import { Overlap } from 'src/app/common/bible-reference';
 
 @Component({
   selector: 'app-settings',
@@ -31,6 +32,8 @@ export class SettingsComponent extends SubscriberBase {
   fonts: string[];
   cardFontFamily = '';
   cardFontSize = 10;
+  cardMergeStrategy = Overlap.Equal;
+  cardMergeStrategies = [];
 
   currentSavedPage$ = this.appService.select((state) => state.currentSavedPage);
   user$ = this.appService.select((state) => state.user);
@@ -44,11 +47,15 @@ export class SettingsComponent extends SubscriberBase {
   ) {
     super();
     this.fonts = CardFonts;
+    for (const enumIdx in Overlap) {
+      this.cardMergeStrategies.push(Overlap[enumIdx]);
+    }
     this.addSubscription(
       this.appService.state$.subscribe((state) => {
         this.displaySettings = state.displaySettings.value;
         this.cardFontFamily = state.displaySettings.value.cardFontFamily;
         this.cardFontSize = state.displaySettings.value.cardFontSize;
+        this.cardMergeStrategy = state.pageSettings.value.mergeStrategy;
       })
     );
 
@@ -111,6 +118,14 @@ export class SettingsComponent extends SubscriberBase {
 
   //#endregion
 
+  //#region Saved Page Settings
+
+  pageCardMergeSettingsSelected(evt: MatSelectChange) {
+    this.appService.changeCardMergeSettings(evt.value);
+  }
+
+  //#endregion
+
   //#region  Font Settings
 
   cardFontSelected(evt: MatSelectChange) {

app/db/src/app/services/app-state-actions.ts

@@ -1,9 +1,10 @@
-import { Error, DisplaySettings, User } from '../models/app-state';
+import { Error, DisplaySettings, PageSettings, User } from '../models/app-state';
 import { IStorable } from '../common/storable';
 import { NoteItem } from '../models/note-state';
 import { MoveDirection } from '../common/move-direction';
 import { SavedPage } from '../models/page-state';
 import { CardItem } from '../models/card-state';
+import { Overlap } from '../common/bible-reference';
 
 export class AppActionFactory {
   static newGetSavedPage(pageId: string) {
@@ -217,6 +218,14 @@ export type AppAction =
       type: 'UPDATE_ERROR';
       error: Error;
     }
+  | {
+      type: 'UPDATE_CARD_MERGE_STRATEGY';
+      cardMergeStrategy: Overlap;
+    }
+  | {
+      type: 'UPDATE_PAGE_SETTINGS';
+      settings: IStorable<PageSettings>;
+    }
   | {
       type: 'UPDATE_CARD_FONT_SIZE';
       cardFontSize: number;

app/db/src/app/services/app-state-reducer.ts

@@ -1,10 +1,11 @@
 import { UUID } from 'angular2-uuid';
 
-import { AppState, DisplaySettings } from '../models/app-state';
+import { AppState, DisplaySettings, PageSettings } from '../models/app-state';
 import { IStorable, Storable } from '../common/storable';
 import { NoteItem } from '../models/note-state';
 
 import { MoveDirection } from '../common/move-direction';
+import { mergeCardList } from '../common/card-operations';
 
 import { AppAction } from './app-state-actions';
 import { initialState } from './app-state-initial-state';
@@ -43,6 +44,30 @@ export function reducer(state: AppState, action: AppAction): AppState {
   }
 
   switch (action.type) {
+    //#region
+
+    case 'UPDATE_CARD_MERGE_STRATEGY': {
+      const settings = new Storable<PageSettings>({
+        ...state.displaySettings.value,
+        mergeStrategy: action.cardMergeStrategy,
+      });
+      return reducer(state, {
+        type: 'UPDATE_PAGE_SETTINGS',
+        settings,
+      });
+    }
+
+    case 'UPDATE_PAGE_SETTINGS': {
+      return maybeMutateStorable(state, action.settings, state.pageSettings, (item) => {
+        return {
+          ...state,
+          pageSettings: item,
+        };
+      });
+    }
+
+    //#endregion
+
     //#region  Display Settings
 
     case 'UPDATE_DISPLAY_SETTINGS': {
@@ -129,7 +154,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
         {
           id: state.currentSavedPage.id,
           title: state.currentSavedPage.title,
-          queries: [...state.cards], // need a function that processes the cards to merge references.
+          queries: [...mergeCardList(state.cards, state.pageSettings.value.mergeStrategy)],
         },
       ]);
 
@@ -145,7 +170,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
           // create a new saved page object
           title: action.title,
           id: UUID.UUID().toString(),
-          queries: [...state.cards], // need a function that processes the cards to merge references.
+          queries: [...mergeCardList(state.cards, state.pageSettings.value.mergeStrategy)],
         },
       ]);
 
@@ -171,7 +196,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
       const savedPages = new Storable([
         ...state.savedPages.value.map((o) => {
           if (o.id.toString() === action.pageId) {
-            let cards = [];
+            let cards = [] as CardItem[];
             if (state.displaySettings.value.appendCardToBottom) {
               cards = [...o.queries, action.card];
             } else {
@@ -179,7 +204,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
             }
             return {
               ...o,
-              queries: cards,
+              queries: mergeCardList(cards, state.pageSettings.value.mergeStrategy),
             };
           }
           return o;

app/db/src/app/services/app.service.ts

@@ -134,6 +134,17 @@ export class AppService extends createStateService(reducer, initialState) {
 
   //#endregion
 
+  //#region Saved Page Settings
+
+  changeCardMergeSettings(strategy: Overlap) {
+    this.dispatch({
+      type: 'UPDATE_CARD_MERGE_STRATEGY',
+      cardMergeStrategy: strategy,
+    });
+  }
+
+  //#endregion
+
   //#region Display Settings
 
   changeCardFontFamily(cardFont: string) {

app/db/src/styles/app.scss

@@ -145,3 +145,7 @@ a {
   box-shadow: none !important;
   border: 1px solid #eee;
 }
+
+.full-width {
+  width: 100%;
+}