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 + + +
+ + Query + + +
+ +
+ + +
+
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 +