-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #10 from bolzplatzarena/dialog-service
Dialog service
- Loading branch information
Showing
25 changed files
with
1,962 additions
and
1,598 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
12 changes: 12 additions & 0 deletions
12
...s/components/src/lib/modules/dialog/components/dialog-layout/dialog-layout.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <h2 mat-dialog-title *ngIf="translateKey">{{ translateKey + '.title' | translate }}</h2> | ||
| <div mat-dialog-content> | ||
| <ng-content></ng-content> | ||
| </div> | ||
| <mat-dialog-actions align="end"> | ||
| <button mat-button (click)="close()"> | ||
| {{ 'bpa.global.no' | translate }} (Esc) | ||
| </button> | ||
| <button mat-button [disabled]="form.valid" (click)="submit()" cdkFocusInitial> | ||
| {{ 'bpa.global.okay' | translate }} (Enter) | ||
| </button> | ||
| </mat-dialog-actions> |
35 changes: 35 additions & 0 deletions
35
...cts/components/src/lib/modules/dialog/components/dialog-layout/dialog-layout.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; | ||
| import { FormGroup } from '@angular/forms'; | ||
| import { DialogComponent } from '../dialog.component'; | ||
| import { FormDialogComponent } from '../form-dialog.component'; | ||
|
|
||
| @Component({ | ||
| selector: 'bpa-dialog-layout', | ||
| templateUrl: './dialog-layout.component.html', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class DialogLayoutComponent<T> extends DialogComponent<T> implements OnInit { | ||
| @Input() dialog?: DialogComponent<T>; | ||
| @Input() translateKey!: string; | ||
|
|
||
| override registerEnterKey = false; | ||
| override registerEscKey = false; | ||
|
|
||
| get form(): FormGroup | { valid: true } { | ||
| return (this.dialog as FormDialogComponent<unknown>).form ?? { valid: true }; | ||
| } | ||
|
|
||
| ngOnInit(): void { | ||
| if (!this.dialog) { | ||
| throw new Error('DialogLayoutComponent requires a dialog input'); | ||
| } | ||
| } | ||
|
|
||
| override close(): void { | ||
| return this.dialog?.close(); | ||
| } | ||
|
|
||
| submit(): void | Promise<void> { | ||
| return this.dialog?.submit(); | ||
| } | ||
| } |
35 changes: 35 additions & 0 deletions
35
projects/components/src/lib/modules/dialog/components/dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { Directive, Inject } from '@angular/core'; | ||
| import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; | ||
|
|
||
| interface DialogData { | ||
| translateKey: string; | ||
| } | ||
|
|
||
| @Directive() | ||
| export abstract class DialogComponent<R> { | ||
| protected registerEnterKey = false; | ||
| protected registerEscKey = true; | ||
|
|
||
| constructor( | ||
| protected readonly dialogRef: MatDialogRef<unknown, R>, | ||
| @Inject(MAT_DIALOG_DATA) readonly data: DialogData, | ||
| ) { | ||
| const subscription = this.dialogRef.keydownEvents().subscribe(event => { | ||
| if (this.registerEscKey && (event.key === 'Escape')) { | ||
| this.close(); | ||
| } | ||
| if (this.registerEnterKey && (event.key === 'Enter')) { | ||
| this.submit(); | ||
| } | ||
| }); | ||
| this.dialogRef.afterClosed().subscribe(() => { | ||
| subscription.unsubscribe(); | ||
| }); | ||
| } | ||
|
|
||
| close(value?: R | undefined): void { | ||
| this.dialogRef.close(value); | ||
| } | ||
|
|
||
| abstract submit(): void | Promise<void>; | ||
| } |
28 changes: 28 additions & 0 deletions
28
projects/components/src/lib/modules/dialog/components/form-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| 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'; | ||
|
|
||
| interface DialogData { | ||
| translateKey: string; | ||
| } | ||
|
|
||
| @Directive() | ||
| export abstract class FormDialogComponent<R> extends DialogComponent<R> { | ||
| abstract readonly form: FormGroup; | ||
|
|
||
| constructor( | ||
| dialogRef: MatDialogRef<unknown, R>, | ||
| @Inject(MAT_DIALOG_DATA) data: DialogData, | ||
| ) { | ||
| super(dialogRef, data); | ||
| } | ||
|
|
||
| override close(): void { | ||
| this.dialogRef.close(undefined); | ||
| } | ||
|
|
||
| submit(): void { | ||
| this.dialogRef.close(this.form.getRawValue()); | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
...s/components/src/lib/modules/dialog/components/simple-dialog/simple-dialog.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <bpa-dialog-layout [dialog]="this" [translateKey]="data.translateKey"> | ||
| {{ data.translateKey + '.content' | translate }} | ||
| </bpa-dialog-layout> |
16 changes: 16 additions & 0 deletions
16
...cts/components/src/lib/modules/dialog/components/simple-dialog/simple-dialog.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
| import { DialogComponent } from '../dialog.component'; | ||
|
|
||
| @Component({ | ||
| templateUrl: './simple-dialog.component.html', | ||
| changeDetection: ChangeDetectionStrategy.OnPush, | ||
| }) | ||
| export class SimpleDialogComponent extends DialogComponent<boolean> { | ||
| override close() { | ||
| super.close(false); | ||
| } | ||
|
|
||
| submit(): void { | ||
| this.dialogRef.close(true); | ||
| } | ||
| } |
26 changes: 26 additions & 0 deletions
26
projects/components/src/lib/modules/dialog/dialog.module.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { CommonModule } from '@angular/common'; | ||
| import { NgModule } from '@angular/core'; | ||
| import { MatButtonModule } from '@angular/material/button'; | ||
| import { MatDialogModule } from '@angular/material/dialog'; | ||
| import { TranslateModule } from '@ngx-translate/core'; | ||
| import { SimpleDialogComponent } from './components/simple-dialog/simple-dialog.component'; | ||
| import { DialogLayoutComponent } from './components/dialog-layout/dialog-layout.component'; | ||
|
|
||
| @NgModule({ | ||
| declarations: [ | ||
| SimpleDialogComponent, | ||
| DialogLayoutComponent, | ||
| ], | ||
| imports: [ | ||
| CommonModule, | ||
| TranslateModule, | ||
| MatDialogModule, | ||
| MatButtonModule, | ||
| ], | ||
| exports: [ | ||
| MatDialogModule, | ||
| DialogLayoutComponent, | ||
| ], | ||
| }) | ||
| export class DialogModule { | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| export * from './dialog.module'; | ||
| // services | ||
| export * from './services/dialog.service'; | ||
| // components | ||
| export * from './components/dialog.component'; | ||
| export * from './components/form-dialog.component'; | ||
| export * from './components/dialog-layout/dialog-layout.component'; |
36 changes: 36 additions & 0 deletions
36
projects/components/src/lib/modules/dialog/services/dialog.service.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import { ComponentType } from '@angular/cdk/overlay'; | ||
| import { Injectable, TemplateRef } from '@angular/core'; | ||
| import { MatDialog } from '@angular/material/dialog'; | ||
| import { firstValueFrom, Observable, switchMap } from 'rxjs'; | ||
| import { SimpleDialogComponent } from '../components/simple-dialog/simple-dialog.component'; | ||
|
|
||
| @Injectable({ providedIn: 'root' }) | ||
| export class DialogService { | ||
| constructor(private readonly dialog: MatDialog) { | ||
| } | ||
|
|
||
| open<T, R, C = unknown>(component: ComponentType<T> | TemplateRef<T>, data?: C): Observable<R> { | ||
| return this.dialog.open(component, { | ||
| disableClose: true, | ||
| data, | ||
| }).afterClosed(); | ||
| } | ||
|
|
||
| confirm(translateKey: string): Promise<boolean> | ||
| confirm(translateKey: string, action: () => (Promise<void> | void)): Promise<void> | ||
| confirm(translateKey: string, action?: () => (Promise<void> | void)): Promise<void | boolean> { | ||
| return firstValueFrom( | ||
| this.open<SimpleDialogComponent, boolean>( | ||
| SimpleDialogComponent, | ||
| { translateKey }, | ||
| ).pipe( | ||
| switchMap(async value => { | ||
| if (value && action) { | ||
| await action(); | ||
| } | ||
| return Promise.resolve(value); | ||
| }), | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <h2 class="tw-p-4 tw-m-0" translate>content.headline.dialogs</h2> | ||
| <p class="tw-px-4" translate>content.text.dialogs</p> | ||
| <h3 translate>dialog.simple_dialog.title</h3> | ||
| <p translate>dialog.simple_dialog.content</p> | ||
| <button mat-stroked-button type="button" (click)="openDialog()">Open dialog</button> | ||
| <h3 translate>dialog.confirmation.title</h3> | ||
| <p translate>dialog.confirmation.content</p> | ||
| <button mat-stroked-button type="button" (click)="openConfirmation()">Open dialog</button> | ||
| <h3 translate>dialog.layout.title</h3> | ||
| <p translate>dialog.layout.content</p> | ||
| <button mat-stroked-button type="button" (click)="openCommon()">Open dialog</button> | ||
| <p translate>dialog.layout.form</p> | ||
| <button mat-stroked-button type="button" (click)="openForm()">Open dialog</button> |
Oops, something went wrong.