diff --git a/src/src/app/app.module.ts b/src/src/app/app.module.ts
index b449bd10..36e893f2 100644
--- a/src/src/app/app.module.ts
+++ b/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,
diff --git a/src/src/app/components/card-edit-modal/card-edit-modal.component.html b/src/src/app/components/card-edit-modal/card-edit-modal.component.html
new file mode 100644
index 00000000..428f9a18
--- /dev/null
+++ b/src/src/app/components/card-edit-modal/card-edit-modal.component.html
@@ -0,0 +1,16 @@
+
+ save
+
+
+
+
+
+
+
+
+
diff --git a/src/src/app/components/card-edit-modal/card-edit-modal.component.scss b/src/src/app/components/card-edit-modal/card-edit-modal.component.scss
new file mode 100644
index 00000000..c3c7f766
--- /dev/null
+++ b/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;
+}
diff --git a/src/src/app/components/card-edit-modal/card-edit-modal.component.ts b/src/src/app/components/card-edit-modal/card-edit-modal.component.ts
new file mode 100644
index 00000000..d8cba5bd
--- /dev/null
+++ b/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,
+ 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;
+}
diff --git a/src/src/app/components/card.component.ts b/src/src/app/components/card.component.ts
index 087e42fb..27d882d3 100644
--- a/src/src/app/components/card.component.ts
+++ b/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,
+ },
+ });
+ }
}
diff --git a/src/src/app/components/page-edit-modal/page-edit-modal.component.ts b/src/src/app/components/page-edit-modal/page-edit-modal.component.ts
index 620520ca..b13c4ea7 100644
--- a/src/src/app/components/page-edit-modal/page-edit-modal.component.ts
+++ b/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,
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 {
diff --git a/src/src/app/components/passage/passage-card.component.html b/src/src/app/components/passage/passage-card.component.html
index b95557ac..f50324dd 100644
--- a/src/src/app/components/passage/passage-card.component.html
+++ b/src/src/app/components/passage/passage-card.component.html
@@ -102,6 +102,10 @@
more_vert
+