Merge pull request #38 from bolzplatzarena/33-data-in-formdialog-soll…

…te-von-außen-bestimmbar-sein

33 data in formdialog sollte von außen bestimmbar sein

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<R> {
+export abstract class DialogComponent<R, D extends DialogData = DialogData> {
   protected registerEnterKey = false;
   protected registerEscKey = true;
 
   constructor(
     protected readonly dialogRef: MatDialogRef<unknown, R>,
-    @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')) {

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<D = unknown> extends DialogData {
+  item?: D;
 }
 
 @Directive()
-export abstract class FormDialogComponent<R> extends DialogComponent<R> {
+export abstract class FormDialogComponent<R, D = unknown> extends DialogComponent<R, FormDialogData<D>> {
   abstract readonly form: FormGroup;
 
   protected constructor(
     dialogRef: MatDialogRef<unknown, R>,
-    @Inject(MAT_DIALOG_DATA) data: DialogData,
+    @Inject(MAT_DIALOG_DATA) data: FormDialogData<D>,
   ) {
     super(dialogRef, data);
   }

src/app/components/dialogs/dialogs.component.ts

@@ -33,9 +33,12 @@ export class DialogsComponent {
   }
 
   protected openForm(): void {
-    this.dialog.open<SimpleFormDialogComponent, { email: string, name: string }, { info: string }>(
+    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');
     });

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<FormData, ItemData> {
   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();
   }
 }

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."
     }
   }
 }

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."
     }
   }
 }