diff --git a/app/db/src/app/app.component.html b/app/db/src/app/app.component.html index 26cff1ee..140cccb1 100644 --- a/app/db/src/app/app.component.html +++ b/app/db/src/app/app.component.html @@ -38,29 +38,6 @@ position="end" [opened]="false" > - Page Settings - - - save Save Results as New - Page - - - - save Update Page with - Results - - - - create Create a New Note - - - diff --git a/app/db/src/app/app.component.ts b/app/db/src/app/app.component.ts index ad3440a2..3deba5b9 100644 --- a/app/db/src/app/app.component.ts +++ b/app/db/src/app/app.component.ts @@ -6,10 +6,8 @@ import { Observable } from 'rxjs'; import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout'; import { map, shareReplay } from 'rxjs/operators'; import { MatSidenav } from '@angular/material/sidenav'; -import { MatDialog } from '@angular/material/dialog'; -import { PageEditModalComponent } from './search/components/saved-page/page-edit-modal/page-edit-modal.component'; -import { NoteEditModalComponent } from './search/components/note/edit-modal/note-edit-modal.component'; import { SubscriberComponent } from './common/components/subscriber.component'; +import { MatSnackBar } from '@angular/material/snack-bar'; @Component({ selector: 'app-root', @@ -21,6 +19,7 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit { mainPages$ = this.appService.select((state) => state.mainPages); fontSize$ = this.appService.select((state) => state.displaySettings.value.cardFontSize + 'pt'); cardFont$ = this.appService.select((state) => state.displaySettings.value.cardFontFamily); + error$ = this.appService.select((state) => state.error); isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset).pipe( map((result) => result.matches), @@ -35,13 +34,21 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit { private navService: NavService, private storageService: StorageService, private breakpointObserver: BreakpointObserver, - private dialog: MatDialog + private snackBar: MatSnackBar ) { super(); this.storageService.initSavedPages(); this.storageService.initDisplaySettings(); + this.addSubscription( + this.error$.subscribe((err) => { + this.snackBar.open(`Oh no! ${err.msg}`, 'Error', { + duration: 4 * 1000, + }); + }) + ); + //#region Handle recieving updates from firebase this.addSubscription( @@ -82,16 +89,4 @@ export class AppComponent extends SubscriberComponent implements AfterViewInit { ngAfterViewInit(): void { this.navService.setSidenav(this.sidenav, this.settings); } - - savePage() { - this.dialog.open(PageEditModalComponent); - } - - updatePage() { - this.appService.updateSavedPage(); - } - - createNote() { - this.dialog.open(NoteEditModalComponent); - } } diff --git a/app/db/src/app/app.module.ts b/app/db/src/app/app.module.ts index df2d4371..6cf9db15 100644 --- a/app/db/src/app/app.module.ts +++ b/app/db/src/app/app.module.ts @@ -20,11 +20,12 @@ import { PageEditModalComponent } from './search/components/saved-page/page-edit import { NoteEditModalComponent } from './search/components/note/edit-modal/note-edit-modal.component'; import { VersePickerModalComponent } from './search/components/verse-picker-modal/verse-picker-modal.component'; +import { OkCancelModalComponent } from './common/components/ok-cancel-modal/ok-cancel-modal.component'; import { SettingsComponent } from './common/components/settings/settings.component'; + import { PassageCardComponent } from './search/components/passage/passage-card.component'; import { WordsCardComponent } from './search/components/words/words-card.component'; import { NoteCardComponent } from './search/components/note/note-card.component'; - import { StrongsComponent } from './search/components/strongs/strongs.component'; import { StrongsCardComponent } from './search/components/strongs/card/strongs-card.component'; import { StrongsModalComponent } from './search/components/strongs/modal/strongs-modal.component'; @@ -81,6 +82,7 @@ import { ClipboardModule } from '@angular/cdk/clipboard'; AddToPageModalComponent, VersePickerModalComponent, SettingsComponent, + OkCancelModalComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), diff --git a/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-modal.component.html b/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-modal.component.html new file mode 100644 index 00000000..a89dd84f --- /dev/null +++ b/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-modal.component.html @@ -0,0 +1,6 @@ +

{{ data.title }}

+
{{ data.content }}
+
+ + +
diff --git a/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-modal.component.scss b/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-modal.component.scss new file mode 100644 index 00000000..37e015ef --- /dev/null +++ b/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-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; +} + +.mat-form-field { + display: block; +} + +.note-content { + min-width: 75vw; + + textarea { + min-height: 15rem; + } +} diff --git a/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-modal.component.ts b/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-modal.component.ts new file mode 100644 index 00000000..5d897dcd --- /dev/null +++ b/app/db/src/app/common/components/ok-cancel-modal/ok-cancel-modal.component.ts @@ -0,0 +1,35 @@ +import { Component, Inject } from '@angular/core'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; + +@Component({ + selector: 'app-ok-cancel-modal', + templateUrl: 'ok-cancel-modal.component.html', + styleUrls: ['./ok-cancel-modal.component.scss'], +}) +export class OkCancelModalComponent { + constructor( + @Inject(MAT_DIALOG_DATA) public data: OkCancelData, + public dialogRef: MatDialogRef + ) {} + + cancel() { + this.dialogRef.close({ + ok: false, + }); + } + + ok() { + this.dialogRef.close({ + ok: true, + }); + } +} + +export interface OkCancelData { + title: string; + content: string; +} +export interface OkCancelResult { + ok: boolean; + data: any | undefined; +} 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 4811b3ab..65720ab6 100644 --- a/app/db/src/app/common/components/settings/settings.component.html +++ b/app/db/src/app/common/components/settings/settings.component.html @@ -1,3 +1,25 @@ +Page Settings + + + save + Save Results as New Page + + + + save + Update {{ page.title }} with Results + + + + create + Create a New Note + + + Search Settings @@ -73,7 +95,7 @@
Card Font Family
- + @@ -121,7 +143,7 @@ class="auth-button" (click)="login()" > - Login with Google + Login with Google   login 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 d220dd3f..bdb40671 100644 --- a/app/db/src/app/common/components/settings/settings.component.ts +++ b/app/db/src/app/common/components/settings/settings.component.ts @@ -2,13 +2,20 @@ import { Component } from '@angular/core'; import { AppService } from 'src/app/services/app.service'; import { MatSlideToggleChange } from '@angular/material/slide-toggle'; import { SubscriberComponent } from '../subscriber.component'; -import { DisplaySettings } from 'src/app/models/app-state'; +import { DisplaySettings, SavedPage } from 'src/app/models/app-state'; import { CardFonts } from 'src/app/constants'; import { MatSelectChange } from '@angular/material/select'; import { MatSliderChange } from '@angular/material/slider'; import { AngularFireAuth } from '@angular/fire/auth'; import { auth } from 'firebase/app'; import { Storable } from 'src/app/models/storable'; +import { PageEditModalComponent } from '../../../search/components/saved-page/page-edit-modal/page-edit-modal.component'; +import { NoteEditModalComponent } from '../../../search/components/note/edit-modal/note-edit-modal.component'; +import { MatDialog } from '@angular/material/dialog'; +import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-cancel-modal.component'; +import { MatSnackBar } from '@angular/material/snack-bar'; +import { SearchPage } from 'src/app/search/components/search-page/search.page'; +import { NavService } from 'src/app/services/nav.service'; @Component({ selector: 'app-settings', @@ -20,9 +27,17 @@ export class SettingsComponent extends SubscriberComponent { fonts: string[]; cardFontFamily = ''; cardFontSize = 10; + + currentSavedPage$ = this.appService.select((state) => state.currentSavedPage); user$ = this.appService.select((state) => state.user); - constructor(public appService: AppService, public authService: AngularFireAuth) { + constructor( + public appService: AppService, + private navService: NavService, + public authService: AngularFireAuth, + private dialog: MatDialog, + private snackBar: MatSnackBar + ) { super(); this.fonts = CardFonts; this.addSubscription( @@ -52,10 +67,46 @@ export class SettingsComponent extends SubscriberComponent { console.log('Authenticated.'); }); } + logout() { this.authService.signOut(); } + //#region Page Settings + + savePage() { + this.navService.closeSettings(); + this.dialog.open(PageEditModalComponent); + } + + updatePage(page: SavedPage) { + this.dialog + .open(OkCancelModalComponent, { + data: { + title: 'Update Saved Page', + content: `Do you want to update saved page: ${page.title}?`, + }, + }) + .afterClosed() + .subscribe((ds: OkCancelResult) => { + console.log(ds); + if (ds.ok) { + this.appService.updateSavedPage(); + this.navService.closeSettings(); + this.snackBar.open(`${page.title} has been updated!`, '', { + duration: 3 * 1000, + }); + } + }); + } + + createNote() { + this.navService.closeSettings(); + this.dialog.open(NoteEditModalComponent); + } + + //#endregion + //#region Font Settings cardFontSelected(evt: MatSelectChange) { diff --git a/app/db/src/app/models/app-state.ts b/app/db/src/app/models/app-state.ts index 23b5bd36..3a562a3d 100644 --- a/app/db/src/app/models/app-state.ts +++ b/app/db/src/app/models/app-state.ts @@ -1,7 +1,7 @@ import { IStorable } from './storable'; export interface AppState { - readonly currentPage: SavedPage; + readonly currentSavedPage: SavedPage; readonly savedPages: IStorable; readonly savedPagesLoaded: boolean; readonly mainPages: readonly Page[]; 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 1bcff784..f2582006 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 @@ -74,7 +74,7 @@ export class SearchPage extends SubscriberComponent implements OnInit { // if this is a saved page const id = this.activatedRoute.snapshot.paramMap.get('id'); this.onSavedPagedLoaded(id); - this.navService.close(); // close the nav immediately. + this.navService.closeNav(); // close the nav immediately. } else { // its a blank search. load nothing. } diff --git a/app/db/src/app/services/app.service.ts b/app/db/src/app/services/app.service.ts index 5994a224..713a055d 100644 --- a/app/db/src/app/services/app.service.ts +++ b/app/db/src/app/services/app.service.ts @@ -47,7 +47,7 @@ const initialState: AppState = { }, ], autocomplete: [], - currentPage: null, + currentSavedPage: null, savedPages: { createdOn: new Date(0).toISOString(), value: [], @@ -216,10 +216,10 @@ function reducer(state: AppState, action: AppAction): AppState { } case 'UPDATE_CURRENT_PAGE': { const savedPages = new Storable([ - ...state.savedPages.value.filter((o) => o.id === state.currentPage.id), + ...state.savedPages.value.filter((o) => o.id === state.currentSavedPage.id), { - id: state.currentPage.id, - title: state.currentPage.title, + id: state.currentSavedPage.id, + title: state.currentSavedPage.title, queries: [...state.cards], }, ]); @@ -254,7 +254,7 @@ function reducer(state: AppState, action: AppAction): AppState { return { ...state, - currentPage: page, + currentSavedPage: page, cards: [...page.queries], }; } diff --git a/app/db/src/app/services/nav.service.ts b/app/db/src/app/services/nav.service.ts index 668b4872..facc4cc1 100644 --- a/app/db/src/app/services/nav.service.ts +++ b/app/db/src/app/services/nav.service.ts @@ -13,19 +13,27 @@ export class NavService { this.settings = settings; } - public open() { + public openNav() { return this.sidenav.open(); } - public async close() { + public async closeNav() { const r = await this.sidenav.close(); return r; } - public toggle(): void { + public toggleNav(): void { this.sidenav.toggle(); } + public openSettings() { + return this.settings.open(); + } + + public async closeSettings() { + const r = await this.settings.close(); + return r; + } public toggleSettings(): void { this.settings.toggle(); }