Merge pull request 'OZG-5976 Handle Escape key' (#657) from...

Merge pull request 'OZG-5976 Handle Escape key' (#657) from OZG-5976-ESC-Taste-im-Bescheid-Wizard into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/657


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/ui/src/lib/ui/ozgcloud-dialog/ozgcloud-dialog.service.ts

@@ -10,6 +10,7 @@ export class OzgcloudDialogService {
   readonly WIZARD_DIALOG_CONFIG: DialogConfig = {
     width: '1000px',
     restoreFocus: false,
+    disableClose: true,
   };
 
   constructor(private dialog: Dialog) {}

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-abbrechen-button/vorgang-detail-bescheiden-abbrechen-button.component.html

-<button (click)="onClick()" class="absolute right-3 top-3 text-text" data-test-id="close-bescheid">
+<button
+  (click)="clickEmitter.emit()"
+  class="absolute right-3 top-3 text-text"
+  data-test-id="close-bescheid"
+>
   <mat-icon>close</mat-icon>
 </button>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-abbrechen-button/vorgang-detail-bescheiden-abbrechen-button.component.spec.ts

-import { Mock, mock } from '@alfa-client/test-utils';
-import { OzgcloudDialogService } from '@alfa-client/ui';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
-import { VorgangDetailBescheidenAbbrechenDialogComponent } from '../vorgang-detail-bescheiden-abbrechen-dialog/vorgang-detail-bescheiden-abbrechen-dialog.component';
 import { VorgangDetailBescheidenAbbrechenButtonComponent } from './vorgang-detail-bescheiden-abbrechen-button.component';
 
 describe('VorgangDetailBescheidenAbbrechenButtonComponent', () => {
   let component: VorgangDetailBescheidenAbbrechenButtonComponent;
   let fixture: ComponentFixture<VorgangDetailBescheidenAbbrechenButtonComponent>;
 
-  let ozgcloudDialogService: Mock<OzgcloudDialogService>;
-
   beforeEach(async () => {
-    ozgcloudDialogService = mock(OzgcloudDialogService);
-
     await TestBed.configureTestingModule({
       declarations: [VorgangDetailBescheidenAbbrechenButtonComponent],
       imports: [MatIcon],
-      providers: [
-        {
-          provide: OzgcloudDialogService,
-          useValue: ozgcloudDialogService,
-        },
-      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(VorgangDetailBescheidenAbbrechenButtonComponent);
@@ -33,15 +20,4 @@ describe('VorgangDetailBescheidenAbbrechenButtonComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  describe('onClick', () => {
-    it('should call ozgcloudDialogService.open', () => {
-      component.onClick();
-
-      expect(ozgcloudDialogService.openInCallingComponentContext).toHaveBeenCalledWith(
-        VorgangDetailBescheidenAbbrechenDialogComponent,
-        component.viewContainerRef,
-      );
-    });
-  });
 });

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-abbrechen-button/vorgang-detail-bescheiden-abbrechen-button.component.ts

-import { OzgcloudDialogService } from '@alfa-client/ui';
-import { Component, ViewContainerRef } from '@angular/core';
-import { VorgangDetailBescheidenAbbrechenDialogComponent } from '../vorgang-detail-bescheiden-abbrechen-dialog/vorgang-detail-bescheiden-abbrechen-dialog.component';
+import { Component, EventEmitter, Output } from '@angular/core';
 
 @Component({
   selector: 'alfa-vorgang-detail-bescheiden-abbrechen-button',
@@ -8,15 +6,5 @@ import { VorgangDetailBescheidenAbbrechenDialogComponent } from '../vorgang-deta
   styles: [],
 })
 export class VorgangDetailBescheidenAbbrechenButtonComponent {
-  constructor(
-    private readonly ozgcloudDialogService: OzgcloudDialogService,
-    readonly viewContainerRef: ViewContainerRef,
-  ) {}
-
-  public onClick(): void {
-    this.ozgcloudDialogService.openInCallingComponentContext<VorgangDetailBescheidenAbbrechenDialogComponent>(
-      VorgangDetailBescheidenAbbrechenDialogComponent,
-      this.viewContainerRef,
-    );
-  }
+  @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 }

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden.component.html

@@ -6,11 +6,13 @@
   data-test-id="bescheid-wizard"
 >
   <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-    <div class="flex h-full items-end items-center justify-center p-8">
+    <div class="flex h-full items-center justify-center p-8">
       <div
         class="relative h-full w-full max-w-7xl transform overflow-hidden rounded-lg bg-background-200 px-6 py-10 text-left shadow-xl transition-all"
       >
-        <alfa-vorgang-detail-bescheiden-abbrechen-button></alfa-vorgang-detail-bescheiden-abbrechen-button>
+        <alfa-vorgang-detail-bescheiden-abbrechen-button
+          (clickEmitter)="cancelWizard()"
+        ></alfa-vorgang-detail-bescheiden-abbrechen-button>
         <form [formGroup]="formService.form" class="flex h-full flex-row gap-11">
           <alfa-vorgang-detail-bescheiden-steps
             class="flex w-1/2"

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden.component.spec.ts

 import { BescheidResource, BescheidService } from '@alfa-client/bescheid-shared';
 import { PostfachService } from '@alfa-client/postfach-shared';
 import { Mock, dispatchEventFromFixture, mock, useFromMock } from '@alfa-client/test-utils';
+import { OzgcloudDialogService } from '@alfa-client/ui';
 import { VorgangService, VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -8,11 +9,13 @@ import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
 import { MatIcon } from '@angular/material/icon';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
+import { Subscription, of } from 'rxjs';
 import { createBescheidResource } from '../../../../../bescheid-shared/src/test/bescheid';
 import { createVorgangWithEingangResource } from '../../../../../vorgang-shared/test/vorgang';
 import { BescheidenFormService } from './bescheiden.formservice';
 import { VorgangDetailBescheidenResultComponent } from './vorgang-detail-bescheiden-result/vorgang-detail-bescheiden-result.component';
 import { VorgangDetailBescheidenAbbrechenButtonComponent } from './vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-abbrechen-button/vorgang-detail-bescheiden-abbrechen-button.component';
+import { VorgangDetailBescheidenAbbrechenDialogComponent } from './vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-abbrechen-dialog/vorgang-detail-bescheiden-abbrechen-dialog.component';
 import { VorgangDetailBescheidenStepsComponent } from './vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps.component';
 import { VorgangDetailBescheidenComponent } from './vorgang-detail-bescheiden.component';
 
@@ -23,8 +26,8 @@ describe('VorgangDetailBescheidenComponent', () => {
   let bescheidService: Mock<BescheidService>;
   let vorgangService: Mock<VorgangService>;
   let formService: BescheidenFormService;
-  let dialogRef: Mock<DialogRef>;
   let postfachService: Mock<PostfachService>;
+  let ozgcloudDialogService: Mock<OzgcloudDialogService>;
 
   let vorgangWithEingangResource: VorgangWithEingangResource;
   let bescheidDraftResource: BescheidResource;
@@ -35,8 +38,8 @@ describe('VorgangDetailBescheidenComponent', () => {
     bescheidService = mock(BescheidService);
     vorgangService = mock(VorgangService);
     formService = new BescheidenFormService(new UntypedFormBuilder(), useFromMock(bescheidService));
-    dialogRef = mock(DialogRef);
     postfachService = mock(PostfachService);
+    ozgcloudDialogService = mock(OzgcloudDialogService);
 
     vorgangWithEingangResource = createVorgangWithEingangResource();
     bescheidDraftResource = createBescheidResource();
@@ -70,7 +73,7 @@ describe('VorgangDetailBescheidenComponent', () => {
         },
         {
           provide: DialogRef,
-          useValue: dialogRef,
+          useValue: { keydownEvents: of(KeyboardEvent), close: jest.fn(), disableClose: false },
         },
         {
           provide: DIALOG_DATA,
@@ -80,12 +83,17 @@ describe('VorgangDetailBescheidenComponent', () => {
           provide: PostfachService,
           useValue: postfachService,
         },
+        {
+          provide: OzgcloudDialogService,
+          useValue: ozgcloudDialogService,
+        },
       ],
       imports: [ReactiveFormsModule],
     }).compileComponents();
 
     fixture = TestBed.createComponent(VorgangDetailBescheidenComponent);
     component = fixture.componentInstance;
+
     fixture.detectChanges();
   });
 
@@ -109,13 +117,40 @@ describe('VorgangDetailBescheidenComponent', () => {
 
       expect(patchValues).toBeCalledWith(bescheidDraftResource);
     });
+
+    it('should call handleEscapeKey', () => {
+      component.handleEscapeKey = jest.fn();
+
+      component.ngOnInit();
+
+      expect(component.handleEscapeKey).toHaveBeenCalled();
+    });
+  });
+
+  describe('handleEscapeKey', () => {
+    it('should subscribe to dialogRef.keydownEvents', () => {
+      component.handleEscapeKey();
+
+      expect(component.keydownEventsSubscription).toBeInstanceOf(Subscription);
+    });
+  });
+
+  describe('ngOnDestroy', () => {
+    it('should unsubscribe keydownEventsSubscription', () => {
+      component.keydownEventsSubscription = new Subscription();
+      jest.spyOn(component.keydownEventsSubscription, 'unsubscribe');
+
+      component.ngOnDestroy();
+
+      expect(component.keydownEventsSubscription.unsubscribe).toHaveBeenCalled();
+    });
   });
 
   describe('onClose', () => {
     it('should call dialogRef.close', () => {
       component.onClose();
 
-      expect(dialogRef.close).toHaveBeenCalled();
+      expect(component.dialogRef.close).toHaveBeenCalled();
     });
 
     it('should call vorgang service to reload current vorgang', () => {
@@ -135,7 +170,18 @@ describe('VorgangDetailBescheidenComponent', () => {
     it('should close dialog ref', () => {
       dispatchEventFromFixture(fixture, bescheidenResult, 'closeDialog');
 
-      expect(dialogRef.close).toHaveBeenCalled();
+      expect(component.dialogRef.close).toHaveBeenCalled();
+    });
+  });
+
+  describe('cancelWizard', () => {
+    it('should call ozgcloudDialogService.open', () => {
+      component.cancelWizard();
+
+      expect(ozgcloudDialogService.openInCallingComponentContext).toHaveBeenCalledWith(
+        VorgangDetailBescheidenAbbrechenDialogComponent,
+        component.viewContainerRef,
+      );
     });
   });
 });

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden.component.ts

 import { BescheidResource } from '@alfa-client/bescheid-shared';
 import { PostfachService } from '@alfa-client/postfach-shared';
+import { OzgcloudDialogService } from '@alfa-client/ui';
 import { VorgangService } from '@alfa-client/vorgang-shared';
 import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { Subscription, filter } from 'rxjs';
 import { BescheidenFormService } from './bescheiden.formservice';
 import { BescheidenDialogData } from './bescheiden.model';
+import { VorgangDetailBescheidenAbbrechenDialogComponent } from './vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-abbrechen-dialog/vorgang-detail-bescheiden-abbrechen-dialog.component';
 
 @Component({
   selector: 'alfa-vorgang-detail-bescheiden',
   templateUrl: './vorgang-detail-bescheiden.component.html',
   providers: [BescheidenFormService],
 })
-export class VorgangDetailBescheidenComponent implements OnInit {
+export class VorgangDetailBescheidenComponent implements OnDestroy, OnInit {
   private readonly bescheidDraftResource: BescheidResource;
 
+  keydownEventsSubscription: Subscription;
+
   public activeStep: number = 1;
 
   constructor(
@@ -22,6 +27,8 @@ export class VorgangDetailBescheidenComponent implements OnInit {
     private readonly vorgangService: VorgangService,
     private readonly postfachService: PostfachService,
     @Inject(DIALOG_DATA) private readonly dialogData: BescheidenDialogData,
+    private readonly ozgcloudDialogService: OzgcloudDialogService,
+    readonly viewContainerRef: ViewContainerRef,
   ) {
     this.bescheidDraftResource = dialogData.bescheidDraftResource;
   }
@@ -29,6 +36,17 @@ export class VorgangDetailBescheidenComponent implements OnInit {
   ngOnInit(): void {
     this.formService.setVorgangWithEingangResource(this.dialogData.vorgangWithEingangResource);
     this.formService.patchValues(this.bescheidDraftResource);
+    this.handleEscapeKey();
+  }
+
+  handleEscapeKey(): void {
+    this.keydownEventsSubscription = this.dialogRef.keydownEvents
+      .pipe(filter((event) => event.key === 'Escape'))
+      .subscribe(() => this.cancelWizard());
+  }
+
+  ngOnDestroy(): void {
+    this.keydownEventsSubscription.unsubscribe();
   }
 
   public onClose(): void {
@@ -36,4 +54,11 @@ export class VorgangDetailBescheidenComponent implements OnInit {
     this.vorgangService.reloadCurrentVorgang();
     this.postfachService.setPostfachMailOnReload();
   }
+
+  public cancelWizard(): void {
+    this.ozgcloudDialogService.openInCallingComponentContext<VorgangDetailBescheidenAbbrechenDialogComponent>(
+      VorgangDetailBescheidenAbbrechenDialogComponent,
+      this.viewContainerRef,
+    );
+  }
 }