Skip to content
Snippets Groups Projects
Commit 921874a9 authored by OZGCloud's avatar OZGCloud
Browse files

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: default avatarOZGCloud <ozgcloud@mgm-tp.com>
parents 2d6c30d8 f9c190cf
Branches
Tags
No related merge requests found
Showing
with 90 additions and 48 deletions
......@@ -10,6 +10,7 @@ export class OzgcloudDialogService {
readonly WIZARD_DIALOG_CONFIG: DialogConfig = {
width: '1000px',
restoreFocus: false,
disableClose: true,
};
constructor(private dialog: Dialog) {}
......
<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>
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,
);
});
});
});
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>();
}
......@@ -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"
......
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,
);
});
});
});
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,
);
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment