Draft: Resolve "Edit card query option in card context menu"

src/src/app/app.module.ts

@@ -41,6 +41,7 @@ import { MarkedOptions, MarkedRenderer } from 'ngx-markdown';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { AddToPageModalComponent } from './components/add-to-page-modal/add-to-page-modal.component';
+import { CardEditModalComponent } from './components/card-edit-modal/card-edit-modal.component';
 import { HelpModalComponent } from './components/help-modal/help-modal.component';
 import { NoteEditModalComponent } from './components/note/edit-modal/note-edit-modal.component';
 import { NoteCardComponent } from './components/note/note-card.component';
@@ -95,6 +96,7 @@ export function markedOptionsFactory(): MarkedOptions {
     VersePickerModalComponent,
     SettingsComponent,
     OkCancelModalComponent,
+    CardEditModalComponent,
   ],
   imports: [
     BrowserModule,

src/src/app/components/card-edit-modal/card-edit-modal.component.html

@@ -0,0 +1,16 @@
+<mat-toolbar>
+  <mat-icon>save</mat-icon>
+</mat-toolbar>
+<mat-dialog-content class="content">
+  <form [formGroup]="form">
+    <mat-form-field class="page-title">
+      <mat-label>Query</mat-label>
+      <input formControlName="qry" matInput />
+    </mat-form-field>
+  </form>
+
+  <div mat-dialog-actions>
+    <button mat-button (click)="save()">Save</button>
+    <button mat-button (click)="cancel()">Cancel</button>
+  </div>
+</mat-dialog-content>

src/src/app/components/card-edit-modal/card-edit-modal.component.scss

@@ -0,0 +1,25 @@
+.close-button {
+  float: right;
+}
+
+.title {
+  width: 100%;
+  padding-left: 1rem;
+  font-size: 1.5rem;
+  overflow: hidden;
+}
+
+.mat-mdc-form-field {
+  display: block;
+}
+
+.page-title {
+  min-width: 50vw;
+  padding-top: 12px;
+}
+
+.mat-mdc-dialog-content {
+  min-width: 60vw;
+  min-height: 20vh;
+  max-height: 80vh;
+}

src/src/app/components/card-edit-modal/card-edit-modal.component.ts

@@ -0,0 +1,45 @@
+import { Component, Inject } from '@angular/core';
+import { FormGroup, UntypedFormBuilder } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { CardItem } from 'src/app/models/card-state';
+import { AppService } from 'src/app/services/app.service';
+
+@Component({
+  selector: 'app-card-edit-modal',
+  templateUrl: 'card-edit-modal.component.html',
+  styleUrls: ['./card-edit-modal.component.scss'],
+})
+export class CardEditModalComponent {
+  form: FormGroup;
+  dialogTitle = 'Save Page using Current Cards';
+  oldCard: CardItem;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: CardEditModalData,
+    public dialogRef: MatDialogRef<CardEditModalComponent>,
+    private appService: AppService,
+    private fb: UntypedFormBuilder
+  ) {
+    this.oldCard = data.card;
+    this.form = this.fb.group(data.card);
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  save() {
+    this.appService.updateCard(
+      {
+        qry: this.form.get('qry').value,
+        type: this.form.get('type').value,
+      } as CardItem,
+      this.oldCard
+    );
+    this.dialogRef.close();
+  }
+}
+
+export interface CardEditModalData {
+  card: CardItem;
+}

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

@@ -1,5 +1,5 @@
 import { Clipboard } from '@angular/cdk/clipboard';
-import { Component,ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Observable } from 'rxjs';
 
@@ -8,6 +8,7 @@ import { SubscriberBase } from '../common/subscriber-base';
 import { AddToPageModalComponent } from '../components/add-to-page-modal/add-to-page-modal.component';
 import { CardItem } from '../models/card-state';
 import { AppService } from '../services/app.service';
+import { CardEditModalComponent } from './card-edit-modal/card-edit-modal.component';
 
 @Component({
   template: '',
@@ -83,4 +84,12 @@ export class CardComponent extends SubscriberBase {
   moveCardUp() {
     this.appService.moveCard(this.cardItem, MoveDirection.Up);
   }
+
+  editReferenceModal() {
+    this.dialog.open(CardEditModalComponent, {
+      data: {
+        card: { ...this.cardItem } as CardItem,
+      },
+    });
+  }
 }

src/src/app/components/page-edit-modal/page-edit-modal.component.ts

@@ -14,21 +14,21 @@ export class PageEditModalComponent {
   dialogTitle = 'Save Page using Current Cards';
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) public title: PageEditModalData,
+    @Inject(MAT_DIALOG_DATA) public data: PageEditModalData,
     public dialogRef: MatDialogRef<PageEditModalComponent>,
     private appService: AppService,
     private fb: UntypedFormBuilder
   ) {
-    if (title) {
+    if (data) {
       this.dialogTitle = 'Edit Page Name';
     } else {
-      title = {
+      data = {
         title: '',
         savedPage: null,
       };
     }
 
-    this.form = this.fb.group(title);
+    this.form = this.fb.group(data);
   }
 
   cancel() {
@@ -38,7 +38,7 @@ export class PageEditModalComponent {
   save() {
     if (this.dialogTitle === 'Edit Page Name') {
       this.appService.updateSavedPage({
-        ...this.title.savedPage,
+        ...this.data.savedPage,
         title: this.form.get('title').value,
       });
     } else {

src/src/app/components/passage/passage-card.component.html

@@ -102,6 +102,10 @@
       <mat-icon>more_vert</mat-icon>
     </button>
     <mat-menu #moreMenu="matMenu">
+      <button mat-menu-item (click)="editReferenceModal()">
+        <mat-icon>edit</mat-icon>
+        <span>Edit Reference</span>
+      </button>
       <button mat-menu-item (click)="copy()">
         <mat-icon>content_copy</mat-icon>
         <span>Copy Passage</span>

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

@@ -294,7 +294,7 @@ export const updateCardAction = (newCard: CardItem, oldCard: CardItem): AppActio
         ...state,
         currentCards: new Storable(
           state.currentCards.value.map((c) => {
-            if (c === oldCard) {
+            if (c.type === oldCard.type && c.qry === oldCard.qry) {
               return newCard;
             }
             return c;
@@ -824,6 +824,11 @@ export class AppService extends createReducingService(initialState) {
     );
   }
 
+  async updateCard(newCard: CardItem, oldCard: CardItem) {
+    const card = await this.getCardByQuery(newCard.qry.trim());
+    this.dispatch(updateCardAction(card, oldCard));
+  }
+
   async clearCards() {
     this.dispatch(clearCardsAction());
   }