add card to saved page(s)

app/db/src/app/app.module.ts

@@ -16,6 +16,7 @@ import { WordsComponent } from './search/components/words/words.component';
 import { NoteComponent } from './search/components/note/note.component';
 import { SettingsComponent } from './common/components/settings/settings.component';
 
+import { AddToPageModalComponent } from './search/components/add-to-page-modal/add-to-page-modal.component';
 import { PageEditModalComponent } from './search/components/page-edit-modal/page-edit-modal.component';
 import { NoteEditModalComponent } from './search/components/note-edit-modal/note-edit-modal.component';
 import { VersePickerModalComponent } from './search/components/verse-picker/verse-picker-modal.component';
@@ -67,6 +68,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
     NoteComponent,
     PageEditModalComponent,
     NoteEditModalComponent,
+    AddToPageModalComponent,
     VersePickerModalComponent,
     SettingsComponent,
   ],

app/db/src/app/common/components/card.component.ts

@@ -8,6 +8,8 @@ import {
 import { CardItem, OpenData } from '../../models/app-state';
 import { BibleReference } from '../bible-reference';
 import { Observable } from 'rxjs';
+import { MatDialog } from '@angular/material/dialog';
+import { AddToPageModalComponent } from 'src/app/search/components/add-to-page-modal/add-to-page-modal.component';
 
 @Component({
   template: '',
@@ -24,7 +26,7 @@ export class CardComponent {
 
   icon$: Observable<string>;
 
-  constructor(protected elementRef: ElementRef) {}
+  constructor(protected elementRef: ElementRef, protected dialog: MatDialog) {}
 
   protected copyToClip(text: string, html: string) {
     function listener(e: ClipboardEvent) {
@@ -63,4 +65,10 @@ export class CardComponent {
   makePassage(p: string) {
     return BibleReference.makePassageFromReferenceKey(p);
   }
+
+  addToSavedPage() {
+    this.dialog.open(AddToPageModalComponent, {
+      data: this.cardItem,
+    });
+  }
 }

app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.html

@@ -0,0 +1,39 @@
+<div mat-dialog-title>
+  <mat-toolbar>
+    <mat-icon>save</mat-icon>
+    <div class="title">Add Card to Saved Page</div>
+  </mat-toolbar>
+</div>
+<mat-dialog-content class="content">
+  <mat-selection-list #pageList>
+    <mat-list-option
+      *ngFor="let page of this.pages$ | async"
+      [value]="page"
+      [checkBoxPosition]="before"
+    >
+      {{ page.title }}
+    </mat-list-option>
+
+    <mat-divider></mat-divider>
+  </mat-selection-list>
+  <br /><br />
+  <form [formGroup]="form" class="add-page-form">
+    <h4>Create New Page</h4>
+    <mat-form-field class="page-title">
+      <mat-label>Title</mat-label>
+      <input formControlName="title" matInput /> </mat-form-field
+    ><button
+      class="page-add-button"
+      mat-icon-button
+      mat-button
+      [disableRipple]="true"
+      (click)="addPage()"
+    >
+      <mat-icon>add</mat-icon>
+    </button>
+  </form>
+</mat-dialog-content>
+<div mat-dialog-actions>
+  <button mat-button (click)="save()">Save</button>
+  <button mat-button (click)="cancel()">Cancel</button>
+</div>

app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.scss

@@ -0,0 +1,24 @@
+.close-button {
+  float: right;
+  mat-icon {
+    font-size: 2rem;
+  }
+}
+
+.title {
+  width: 100%;
+  padding-left: 1rem;
+  font-size: 1.5rem;
+}
+
+.content {
+  min-width: 60vw;
+  min-height: 60vh;
+}
+
+.add-page-form {
+  padding-left: 16px;
+}
+.page-title {
+  width: calc(100% - 42px);
+}

app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.ts

@@ -0,0 +1,48 @@
+import { Component, Inject, ViewChild } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { AppService } from '../../../services/app.service';
+import { CardItem } from 'src/app/models/app-state';
+import { MatSelectionList } from '@angular/material/list';
+import { FormBuilder, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-add-to-page-modal-modal',
+  templateUrl: 'add-to-page-modal.component.html',
+  styleUrls: ['./add-to-page-modal.component.scss'],
+})
+export class AddToPageModalComponent {
+  form: FormGroup;
+  title: string;
+  pages$ = this.appService.select((state) => state.savedPages);
+
+  @ViewChild('pageList')
+  pageList: MatSelectionList;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public card: CardItem,
+    public dialogRef: MatDialogRef<AddToPageModalComponent>,
+    private appService: AppService,
+    private fb: FormBuilder
+  ) {
+    this.form = this.fb.group({
+      title: this.title,
+    });
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  addPage() {
+    this.appService.savePage(this.form.get('title').value);
+    this.form.get('title').setValue('');
+  }
+
+  save() {
+    for (const page of this.pageList.selectedOptions.selected) {
+      this.appService.addCardToSavedPage(page.value.id, this.card);
+    }
+
+    this.dialogRef.close();
+  }
+}

app/db/src/app/search/components/note/note.component.html

@@ -46,6 +46,10 @@
         <mat-icon>content_copy</mat-icon>
         <span>Copy Note</span>
       </button>
+      <button mat-menu-item (click)="addToSavedPage()">
+        <mat-icon>save</mat-icon>
+        <span>Add Card to Saved Page</span>
+      </button>
     </mat-menu>
   </span>
 </div>

app/db/src/app/search/components/note/note.component.ts

@@ -17,7 +17,7 @@ export class NoteComponent extends CardComponent {
     private appService: AppService,
     public dialog: MatDialog
   ) {
-    super(elementRef);
+    super(elementRef, dialog);
 
     this.icon$ = appService.select((state) => state.cardIcons.note);
   }

app/db/src/app/search/components/passage/passage.component.html

@@ -84,6 +84,10 @@
         <mat-icon>content_copy</mat-icon>
         <span>Copy Passage</span>
       </button>
+      <button mat-menu-item (click)="addToSavedPage()">
+        <mat-icon>save</mat-icon>
+        <span>Add Card to Saved Page</span>
+      </button>
     </mat-menu>
   </span>
 </div>

app/db/src/app/search/components/passage/passage.component.ts

@@ -3,6 +3,7 @@ import { BibleReference } from '../../../common/bible-reference';
 import { AppService } from '../../../services/app.service';
 import { CardComponent } from '../../../common/components/card.component';
 import { Paragraph } from '../../../models/app-state';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-passage',
@@ -32,9 +33,10 @@ export class PassageComponent extends CardComponent implements OnInit {
 
   constructor(
     protected elementRef: ElementRef,
-    private appService: AppService
+    private appService: AppService,
+    public dialog: MatDialog
   ) {
-    super(elementRef);
+    super(elementRef, dialog);
     this.icon$ = appService.select((state) => state.cardIcons.passage);
   }
 

app/db/src/app/search/components/strongs/strongs.component.html

@@ -79,6 +79,10 @@
         <mat-icon>content_copy</mat-icon>
         <span>Copy Strongs Definition</span>
       </button>
+      <button mat-menu-item (click)="addToSavedPage()">
+        <mat-icon>save</mat-icon>
+        <span>Add Card to Saved Page</span>
+      </button>
     </mat-menu>
   </span>
 </div>

app/db/src/app/search/components/strongs/strongs.component.ts

@@ -1,6 +1,7 @@
 import { Component, ElementRef, ViewChild } from '@angular/core';
 import { AppService } from '../../../services/app.service';
 import { CardComponent } from '../../../common/components/card.component';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-strongs',
@@ -13,9 +14,10 @@ export class StrongsComponent extends CardComponent {
 
   constructor(
     protected elementRef: ElementRef,
-    private appService: AppService
+    private appService: AppService,
+    public dialog: MatDialog
   ) {
-    super(elementRef);
+    super(elementRef, dialog);
     this.icon$ = appService.select((state) => state.cardIcons.strongs);
   }
 

app/db/src/app/search/components/words/words.component.html

@@ -42,6 +42,11 @@
         <mat-icon>content_copy</mat-icon>
         <span>Copy References</span>
       </button>
+
+      <button mat-menu-item (click)="addToSavedPage()">
+        <mat-icon>save</mat-icon>
+        <span>Add Card to Saved Page</span>
+      </button>
     </mat-menu>
   </span>
 </div>

app/db/src/app/search/components/words/words.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { AppService } from '../../../services/app.service';
 import { CardComponent } from '../../../common/components/card.component';
 import { WordLookupResult } from 'src/app/models/app-state';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-words',
@@ -14,9 +15,10 @@ export class WordsComponent extends CardComponent {
 
   constructor(
     protected elementRef: ElementRef,
-    private appService: AppService
+    private appService: AppService,
+    public dialog: MatDialog
   ) {
-    super(elementRef);
+    super(elementRef, dialog);
     this.icon$ = appService.select((state) => state.cardIcons.words);
   }
 

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

@@ -75,12 +75,17 @@ const initialState: AppState = {
 type AppAction =
   | {
       type: 'GET_SAVED_PAGE';
-      pageid: string;
+      pageId: string;
     }
   | {
       type: 'UPDATE_SAVED_PAGES';
       savedPages: SavedPage[];
     }
+  | {
+      type: 'ADD_CARD_TO_SAVED_PAGE';
+      card: CardItem;
+      pageId: string;
+    }
   | {
       type: 'ADD_CARD';
       card: CardItem;
@@ -144,7 +149,7 @@ function reducer(state: AppState, action: AppAction): AppState {
     }
     case 'GET_SAVED_PAGE': {
       const page = state.savedPages.find(
-        (o) => o.id.toString() === action.pageid
+        (o) => o.id.toString() === action.pageId
       );
 
       if (!page) {
@@ -157,6 +162,28 @@ function reducer(state: AppState, action: AppAction): AppState {
         cards: [...page.queries],
       };
     }
+    case 'ADD_CARD_TO_SAVED_PAGE': {
+      return {
+        ...state,
+        savedPages: [
+          ...state.savedPages.map((o) => {
+            if (o.id.toString() === action.pageId) {
+              let cards = [];
+              if (state.displaySettings.appendCardToBottom) {
+                cards = [...o.queries, action.card];
+              } else {
+                cards = [action.card, ...o.queries];
+              }
+              return {
+                ...o,
+                queries: cards,
+              };
+            }
+            return o;
+          }),
+        ],
+      };
+    }
     case 'ADD_CARD': {
       let cards = [];
 
@@ -279,7 +306,7 @@ export class AppService extends createStateService(reducer, initialState) {
   getSavedPage(pageid: string) {
     this.dispatch({
       type: 'GET_SAVED_PAGE',
-      pageid,
+      pageId: pageid,
     });
   }
 
@@ -350,6 +377,14 @@ export class AppService extends createStateService(reducer, initialState) {
     );
   }
 
+  addCardToSavedPage(pageId: string, card: CardItem) {
+    this.dispatch({
+      type: 'ADD_CARD_TO_SAVED_PAGE',
+      card,
+      pageId,
+    });
+  }
+
   //#endregion
 
   //#region Display Settings