diff --git a/app/db/src/app/app.module.ts b/app/db/src/app/app.module.ts index 5aa575e4..4a12cf40 100644 --- a/app/db/src/app/app.module.ts +++ b/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, ], diff --git a/app/db/src/app/common/components/card.component.ts b/app/db/src/app/common/components/card.component.ts index 61fc14a7..e5056cab 100644 --- a/app/db/src/app/common/components/card.component.ts +++ b/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; - 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, + }); + } } diff --git a/app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.html b/app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.html new file mode 100644 index 00000000..4d180f7b --- /dev/null +++ b/app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.html @@ -0,0 +1,39 @@ +
+ + save +
Add Card to Saved Page
+
+
+ + + + {{ page.title }} + + + + +

+
+

Create New Page

+ + Title + +
+
+
+ + +
diff --git a/app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.scss b/app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.scss new file mode 100644 index 00000000..e5aef938 --- /dev/null +++ b/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); +} diff --git a/app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.ts b/app/db/src/app/search/components/add-to-page-modal/add-to-page-modal.component.ts new file mode 100644 index 00000000..e4e376d7 --- /dev/null +++ b/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, + 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(); + } +} diff --git a/app/db/src/app/search/components/note/note.component.html b/app/db/src/app/search/components/note/note.component.html index 4fc46197..29ce8af9 100644 --- a/app/db/src/app/search/components/note/note.component.html +++ b/app/db/src/app/search/components/note/note.component.html @@ -46,6 +46,10 @@ content_copy Copy Note + diff --git a/app/db/src/app/search/components/note/note.component.ts b/app/db/src/app/search/components/note/note.component.ts index a768f156..3becc6b9 100644 --- a/app/db/src/app/search/components/note/note.component.ts +++ b/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); } diff --git a/app/db/src/app/search/components/passage/passage.component.html b/app/db/src/app/search/components/passage/passage.component.html index 343b20cf..24e49a60 100644 --- a/app/db/src/app/search/components/passage/passage.component.html +++ b/app/db/src/app/search/components/passage/passage.component.html @@ -84,6 +84,10 @@ content_copy Copy Passage + diff --git a/app/db/src/app/search/components/passage/passage.component.ts b/app/db/src/app/search/components/passage/passage.component.ts index 2bc18197..8f8e97d4 100644 --- a/app/db/src/app/search/components/passage/passage.component.ts +++ b/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); } diff --git a/app/db/src/app/search/components/strongs/strongs.component.html b/app/db/src/app/search/components/strongs/strongs.component.html index efca1ae8..44415f06 100644 --- a/app/db/src/app/search/components/strongs/strongs.component.html +++ b/app/db/src/app/search/components/strongs/strongs.component.html @@ -79,6 +79,10 @@ content_copy Copy Strongs Definition + diff --git a/app/db/src/app/search/components/strongs/strongs.component.ts b/app/db/src/app/search/components/strongs/strongs.component.ts index 6fa431f7..4b475239 100644 --- a/app/db/src/app/search/components/strongs/strongs.component.ts +++ b/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); } diff --git a/app/db/src/app/search/components/words/words.component.html b/app/db/src/app/search/components/words/words.component.html index 58b7429c..3800e4cc 100644 --- a/app/db/src/app/search/components/words/words.component.html +++ b/app/db/src/app/search/components/words/words.component.html @@ -42,6 +42,11 @@ content_copy Copy References + + diff --git a/app/db/src/app/search/components/words/words.component.ts b/app/db/src/app/search/components/words/words.component.ts index 6b10c39a..45b1a173 100644 --- a/app/db/src/app/search/components/words/words.component.ts +++ b/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); } diff --git a/app/db/src/app/services/app.service.ts b/app/db/src/app/services/app.service.ts index 7e3c130d..46c95447 100644 --- a/app/db/src/app/services/app.service.ts +++ b/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