Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

33 data in formdialog sollte von außen bestimmbar sein #38

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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')) {
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
}
Expand Down
7 changes: 5 additions & 2 deletions src/app/components/dialogs/dialogs.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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]],
Expand All @@ -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();
}
}
3 changes: 2 additions & 1 deletion src/app/i18n/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}
}
}
3 changes: 2 additions & 1 deletion src/app/i18n/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
}
}
}
Loading