add note admin page.

cleaned up unused code
changed icons
fixed a couple bugs in the page/notes edit modals

app/db/src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { SearchPage } from './pages/search/search.page';
 import { SavedPagesAdminPage } from './pages/saved-pages-admin/saved-pages-admin.page';
+import { NotesAdminPage } from './pages/notes-admin/notes-admin.page';
 
 const routes: Routes = [
   {
@@ -29,6 +30,11 @@ const routes: Routes = [
     pathMatch: 'prefix',
     component: SavedPagesAdminPage,
   },
+  {
+    path: 'notes/admin',
+    pathMatch: 'prefix',
+    component: NotesAdminPage,
+  },
 ];
 
 @NgModule({

app/db/src/app/app.component.html

@@ -13,9 +13,16 @@
         <a mat-list-item [routerLink]="['search']"
           ><mat-icon color="accenovert">search</mat-icon> Search</a
         >
+
         <a mat-list-item [routerLink]="['saved', 'admin']"
-          ><mat-icon color="accenovert">library_books</mat-icon> Page Admin</a
+          ><mat-icon color="accenovert">all_inbox</mat-icon> Manage Saved
+          Pages</a
         >
+
+        <a mat-list-item [routerLink]="['notes', 'admin']"
+          ><mat-icon color="accenovert">library_books</mat-icon> Manage Notes</a
+        >
+
         <a mat-list-item (click)="showHelp()"
           ><mat-icon color="accenovert">help</mat-icon>Help</a
         >
@@ -27,8 +34,7 @@
           *ngFor="let p of savedPages$ | async"
           mat-list-item
           [routerLink]="['page', p.id]"
-          ><mat-icon color="accenovert">library_books</mat-icon>
-          {{ p.title }}</a
+          ><mat-icon color="accenovert">inbox</mat-icon> {{ p.title }}</a
         >
       </mat-nav-list>
     </mat-sidenav>

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

@@ -53,6 +53,8 @@ import { ClipboardModule } from '@angular/cdk/clipboard';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
+import { NotesAdminPage } from './pages/notes-admin/notes-admin.page';
+
 import { SavedPagesAdminPage } from './pages/saved-pages-admin/saved-pages-admin.page';
 import { SavedPageCardComponent } from './components/saved-page-card/saved-page-card.component';
 
@@ -77,6 +79,7 @@ import { AddToPageModalComponent } from './components/add-to-page-modal/add-to-p
 @NgModule({
   declarations: [
     AppComponent,
+    NotesAdminPage,
     SavedPagesAdminPage,
     SavedPageCardComponent,
     HelpModalComponent,

app/db/src/app/components/note/edit-modal/note-edit-modal.component.scss

@@ -9,6 +9,7 @@
   width: 100%;
   padding-left: 1rem;
   font-size: 1.5rem;
+  overflow: hidden;
 }
 
 .mat-form-field {

app/db/src/app/components/note/note-card.component.html

@@ -3,14 +3,17 @@
     icon$ | async
   }}</mat-icon>
   <span *ngIf="cardItem.data">{{ cardItem.data.title }}</span>
-  <button
-    mat-icon-button
-    class="card-close-button"
-    aria-label="Remove the note card from the list"
-    (click)="close($event)"
+
+  <ng-container *ngIf="inSearch">
+    <button
+      mat-icon-button
+      class="card-close-button"
+      aria-label="Remove the note card from the list"
+      (click)="close($event)"
+    >
+      <mat-icon>cancel</mat-icon>
+    </button></ng-container
   >
-    <mat-icon>cancel</mat-icon>
-  </button>
 </div>
 <div class="card-content" *ngIf="cardItem" #note>
   <ngx-md class="markdown" *ngIf="cardItem.data">{{
@@ -24,15 +27,23 @@
     </mat-expansion-panel-header>
     <ng-container *ngIf="prepXref(cardItem.data.xref) as refs">
       <div *ngFor="let ref of refs">
-        <button mat-raised-button class="reference" (click)="openPassage(ref)">
-          {{ ref.toString() }}
-        </button>
+        <ng-container *ngIf="inSearch">
+          <button
+            mat-raised-button
+            class="reference"
+            (click)="openPassage(ref)"
+          >
+            {{ ref.toString() }}
+          </button>
+        </ng-container>
+
+        <span *ngIf="!inSearch">{{ ref.toString() }}</span>
       </div>
     </ng-container>
   </mat-expansion-panel>
 </div>
 <div class="card-actions">
-  <span class="card-actions-left">
+  <span class="card-actions-left" *ngIf="inSearch">
     <button
       mat-icon-button
       aria-label="Remove the passage card from the list"
@@ -64,14 +75,17 @@
         <mat-icon>save</mat-icon>
         <span>Add Card to Saved Page</span>
       </button>
-      <button mat-menu-item (click)="moveCardUp()">
-        <mat-icon>arrow_upward</mat-icon>
-        <span>Move Card Up</span>
-      </button>
-      <button mat-menu-item (click)="moveCardDown()">
-        <mat-icon>arrow_downward</mat-icon>
-        <span>Move Card Down</span>
-      </button>
+
+      <ng-container *ngIf="inSearch">
+        <button mat-menu-item (click)="moveCardUp()">
+          <mat-icon>arrow_upward</mat-icon>
+          <span>Move Card Up</span>
+        </button>
+        <button mat-menu-item (click)="moveCardDown()">
+          <mat-icon>arrow_downward</mat-icon>
+          <span>Move Card Down</span>
+        </button>
+      </ng-container>
     </mat-menu>
   </span>
 </div>

app/db/src/app/components/note/note-card.component.ts

@@ -1,10 +1,11 @@
-import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
+import { Component, ViewChild, ElementRef, OnInit, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { NoteEditModalComponent } from './edit-modal/note-edit-modal.component';
 import { CardComponent } from '../../components/card.component';
 import { AppService } from '../../services/app.service';
 import { BibleReference } from '../../common/bible-reference';
 import { NoteItem } from '../../models/note-state';
+import { OkCancelModalComponent, OkCancelResult } from '../ok-cancel-modal/ok-cancel-modal.component';
 
 @Component({
   selector: 'app-note-card',
@@ -14,6 +15,9 @@ import { NoteItem } from '../../models/note-state';
 export class NoteCardComponent extends CardComponent {
   @ViewChild('note') noteElement: ElementRef;
 
+  @Input()
+  inSearch = true;
+
   constructor(protected elementRef: ElementRef, protected appService: AppService, public dialog: MatDialog) {
     super(elementRef, dialog, appService);
 
@@ -41,6 +45,18 @@ export class NoteCardComponent extends CardComponent {
   }
 
   delete() {
-    this.appService.deleteNote(this.cardItem.data as NoteItem);
+    this.dialog
+      .open(OkCancelModalComponent, {
+        data: {
+          title: 'Delete Note?',
+          content: `Do you want to permanently delete the note '${(this.cardItem.data as NoteItem).title}'?`,
+        },
+      })
+      .afterClosed()
+      .subscribe((ds: OkCancelResult) => {
+        if (ds.ok) {
+          this.appService.deleteNote(this.cardItem.data as NoteItem);
+        }
+      });
   }
 }

app/db/src/app/components/page-edit-modal/page-edit-modal.component.scss

@@ -9,6 +9,7 @@
   width: 100%;
   padding-left: 1rem;
   font-size: 1.5rem;
+  overflow: hidden;
 }
 
 .mat-form-field {

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

@@ -1,7 +1,7 @@
 <mat-toolbar>Page Settings</mat-toolbar>
 <mat-nav-list>
   <a mat-list-item (click)="savePage()">
-    <mat-icon matListIcon color="accenovert">save</mat-icon>
+    <mat-icon matListIcon color="accenovert">create</mat-icon>
     Save Results as New Page
   </a>
 
@@ -15,7 +15,7 @@
   </a>
 
   <a mat-list-item (click)="createNote()">
-    <mat-icon matListIcon color="accenovert">create</mat-icon>
+    <mat-icon matListIcon color="accenovert">note_add</mat-icon>
     Create a New Note
   </a>
 </mat-nav-list>

app/db/src/app/constants.ts

@@ -1,9 +1,3 @@
-export const CardIcons = {
-  Words: 'font_download',
-  Passage: 'menu_book',
-  Strongs: 'article',
-};
-
 export const CardFonts = [
   'Merriweather',
   'PT Sans',

app/db/src/app/pages/notes-admin/notes-admin.page.html

@@ -0,0 +1,16 @@
+<mat-toolbar>
+  <button type="button" mat-icon-button (click)="navService.toggleNav()">
+    <mat-icon md-48 aria-hidden="false" aria-label="Menu Toggle">menu</mat-icon>
+  </button>
+  <span class="page-title">Manage Your Notes</span>
+</mat-toolbar>
+<div class="page-content">
+  <ng-container *ngIf="notes$ | async as notes; else nonotes">
+    <mat-card *ngFor="let item of notes">
+      <app-note-card [cardItem]="item" [inSearch]="false"></app-note-card>
+    </mat-card>
+  </ng-container>
+  <ng-template #nonotes>
+    <span>&nbsp;</span>
+  </ng-template>
+</div>

app/db/src/app/pages/notes-admin/notes-admin.page.scss

@@ -0,0 +1,20 @@
+mat-card {
+  max-width: 800px;
+  margin: 1.5rem auto;
+  padding: 0;
+}
+
+.page-title {
+  width: 100%;
+  position: relative;
+  margin-left: 0.8rem;
+  margin-right: 0.8rem;
+}
+
+.page-content {
+  padding: 0 1rem 0 1rem;
+  overflow-y: scroll;
+  height: calc(100vh - 66px);
+  width: calc(100% - 15px);
+  margin-top: 2px;
+}

app/db/src/app/pages/notes-admin/notes-admin.page.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { AppService } from '../../services/app.service';
+import { NavService } from '../../services/nav.service';
+import { SubscriberBase } from '../../common/subscriber-base';
+import { CardItem, CardType } from 'src/app/models/card-state';
+
+@Component({
+  selector: 'app-notes-admin',
+  templateUrl: './notes-admin.page.html',
+  styleUrls: ['./notes-admin.page.scss'],
+})
+export class NotesAdminPage extends SubscriberBase implements OnInit {
+  notes$ = this.appService.select((state) =>
+    state.notes === null
+      ? null
+      : state.notes.value.map(
+          (o) =>
+            ({
+              qry: o.id,
+              data: o,
+              type: CardType.Note,
+            } as CardItem)
+        )
+  );
+
+  constructor(public navService: NavService, private appService: AppService) {
+    super();
+  }
+
+  ngOnInit() {
+    this.navService.closeNav(); // close the nav immediately.
+  }
+}

app/db/src/app/pages/saved-pages-admin/saved-pages-admin.page.html

@@ -2,7 +2,7 @@
   <button type="button" mat-icon-button (click)="navService.toggleNav()">
     <mat-icon md-48 aria-hidden="false" aria-label="Menu Toggle">menu</mat-icon>
   </button>
-  <span class="page-title">Saved Pages Admin</span>
+  <span class="page-title">Manage Your Saved Pages</span>
 </mat-toolbar>
 <div class="page-content">
   <ng-container *ngIf="savedPages$ | async as pages; else nopages">

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

@@ -39,7 +39,7 @@ export const initialState: AppState = {
     words: 'font_download',
     passage: 'menu_book',
     strongs: 'speaker_notes',
-    note: 'text_snippet',
-    savedPage: 'library_books',
+    note: 'note',
+    savedPage: 'inbox',
   },
 };

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

@@ -279,8 +279,31 @@ export function reducer(state: AppState, action: AppAction): AppState {
       };
     }
     case 'REMOVE_CARD': {
+      // potentially remove card from a saved page.
+      const currentSavedPage =
+        state.currentSavedPage !== null
+          ? {
+              ...state.currentSavedPage,
+              queries: state.currentSavedPage.queries.filter((q) => q !== action.card),
+            }
+          : null;
+
+      const savedPages =
+        state.currentSavedPage !== null
+          ? new Storable(
+              state.savedPages.value.map((o) => {
+                if (o === state.currentSavedPage) {
+                  return currentSavedPage;
+                }
+                return o;
+              })
+            )
+          : state.savedPages;
+
       return {
         ...state,
+        currentSavedPage,
+        savedPages,
         cards: [...state.cards.filter((c) => c !== action.card)],
       };
     }
@@ -298,6 +321,9 @@ export function reducer(state: AppState, action: AppAction): AppState {
         user: action.user,
       };
     }
+
+    //#region Notes
+
     case 'FIND_NOTES': {
       const notes = state.notes.value
         .filter((o) => o.title.search(action.qry) > -1)
@@ -442,5 +468,7 @@ export function reducer(state: AppState, action: AppAction): AppState {
         savedPages,
       };
     }
+
+    //#endregion
   }
 }

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

@@ -57,6 +57,7 @@ export class AppService extends createStateService(reducer, initialState) {
       card,
     });
   }
+
   moveCard(card: CardItem, direction: MoveDirection) {
     this.dispatch({
       type: 'MOVE_CARD',