diff --git a/projects/components/src/lib/modules/dialog/components/dialog.component.ts b/projects/components/src/lib/modules/dialog/components/dialog.component.ts index 64d7e09..55bb0cc 100644 --- a/projects/components/src/lib/modules/dialog/components/dialog.component.ts +++ b/projects/components/src/lib/modules/dialog/components/dialog.component.ts @@ -1,18 +1,18 @@ import { Directive, Inject } from '@angular/core'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -interface DialogData { +export interface DialogData { translateKey: string; } @Directive() -export abstract class DialogComponent { +export abstract class DialogComponent { protected registerEnterKey = false; protected registerEscKey = true; constructor( protected readonly dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) readonly data: DialogData, + @Inject(MAT_DIALOG_DATA) readonly data: D, ) { const subscription = this.dialogRef.keydownEvents().subscribe(event => { if (this.registerEscKey && (event.key === 'Escape')) { diff --git a/projects/components/src/lib/modules/dialog/components/form-dialog.component.ts b/projects/components/src/lib/modules/dialog/components/form-dialog.component.ts index 2f298db..7a2c089 100644 --- a/projects/components/src/lib/modules/dialog/components/form-dialog.component.ts +++ b/projects/components/src/lib/modules/dialog/components/form-dialog.component.ts @@ -1,19 +1,19 @@ import { Directive, Inject } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { DialogComponent } from './dialog.component'; +import { DialogComponent, DialogData } from './dialog.component'; -interface DialogData { - translateKey: string; +export interface FormDialogData extends DialogData { + item?: D; } @Directive() -export abstract class FormDialogComponent extends DialogComponent { +export abstract class FormDialogComponent extends DialogComponent> { abstract readonly form: FormGroup; protected constructor( dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) data: DialogData, + @Inject(MAT_DIALOG_DATA) data: FormDialogData, ) { super(dialogRef, data); } diff --git a/src/app/components/dialogs/dialogs.component.ts b/src/app/components/dialogs/dialogs.component.ts index 531cabe..3125ea1 100644 --- a/src/app/components/dialogs/dialogs.component.ts +++ b/src/app/components/dialogs/dialogs.component.ts @@ -33,9 +33,12 @@ export class DialogsComponent { } protected openForm(): void { - this.dialog.open( + this.dialog.open< SimpleFormDialogComponent, - { info: 'Hello' }, + { email: string, name: string }, + { item: { email: string, name: string } }>( + SimpleFormDialogComponent, + { item: { email: 'Meine Email', name: 'Mein Name' } }, ).subscribe(value => { alert(JSON.stringify(value) + ' returned from the dialog'); }); diff --git a/src/app/components/dialogs/examples/form-dialog/form-dialog.component.ts b/src/app/components/dialogs/examples/form-dialog/form-dialog.component.ts index 7beb754..a4e95ee 100644 --- a/src/app/components/dialogs/examples/form-dialog/form-dialog.component.ts +++ b/src/app/components/dialogs/examples/form-dialog/form-dialog.component.ts @@ -5,6 +5,15 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { DialogLayoutComponent, FormDialogComponent } from '@bolzplatzarena/components'; +interface FormData { + email: string; + name: string; +} + +interface ItemData extends FormData { + id?: string; +} + @Component({ selector: 'app-form-dialog', templateUrl: './form-dialog.component.html', @@ -17,7 +26,7 @@ import { DialogLayoutComponent, FormDialogComponent } from '@bolzplatzarena/comp ReactiveFormsModule, ], }) -export class SimpleFormDialogComponent extends FormDialogComponent<{ email: string, name: string }> { +export class SimpleFormDialogComponent extends FormDialogComponent { form = this.fb.nonNullable.group({ email: ['', [Validators.required]], name: ['', [Validators.required]], @@ -26,10 +35,14 @@ export class SimpleFormDialogComponent extends FormDialogComponent<{ email: stri constructor( private readonly fb: FormBuilder, dialogRef: MatDialogRef<{ result: string }>, - @Inject(MAT_DIALOG_DATA) data: { info: unknown, translateKey: string }, + @Inject(MAT_DIALOG_DATA) data: { item: { email: string, name: string }, translateKey: string }, ) { super(dialogRef, data); + } + + override submit(): void { + alert('Form submitted for: ' + JSON.stringify(this.data.item)); - alert(data.info + ' given to the dialog'); + super.submit(); } } diff --git a/src/app/i18n/de.json b/src/app/i18n/de.json index 64c9308..00ebd93 100644 --- a/src/app/i18n/de.json +++ b/src/app/i18n/de.json @@ -83,7 +83,8 @@ }, "layout": { "title": "Layout gleich mitliefern lassen", - "content": "Keine Lust Überschrift und Buttons jedesmal zu schreiben? Dann kann man einfach eine Basis-Componente nutzen, welche die Überschrift und die Headline direkt mitliefern." + "content": "Keine Lust Überschrift und Buttons jedesmal zu schreiben? Dann kann man einfach eine Basis-Componente nutzen, welche die Überschrift und die Headline direkt mitliefern.", + "form": "Hier gibt es ein Beispiel mit einem Formular. Dieses Formular wird in einem Dialog angezeigt und kann auch direkt validiert werden." } } } diff --git a/src/app/i18n/en.json b/src/app/i18n/en.json index cc55662..ee2b784 100644 --- a/src/app/i18n/en.json +++ b/src/app/i18n/en.json @@ -84,7 +84,8 @@ }, "layout": { "title": "Use layout", - "content": "Wll, all the dialogs should look like the others. So you can use a simple component which provides the layout with headline, okay and cancel button." + "content": "Well, all the dialogs should look like the others. So you can use a simple component which provides the layout with headline, okay and cancel button.", + "form": "Here you can find a simple form, it is displayed in the dialog, the form is validated and the submit button is disabled until the form is valid." } } }