diff --git a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts index 763645cc1..1736f91c0 100644 --- a/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts +++ b/modules/ui/src/app/pages/risk-assessment/profile-form/profile-form.component.ts @@ -297,7 +297,7 @@ export class ProfileFormComponent implements OnInit, AfterViewInit { } onDiscardClick() { - this.discard.emit(this.selectedProfile!); + this.discard.emit(); } onDeleteClick(): void { diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html index 49c44420f..bb46d9ebd 100644 --- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.html @@ -47,7 +47,7 @@ (deleteCopy)="deleteCopy($event, vm.profiles)" (delete)="deleteProfile($event)" (copyProfile)="copyProfile($event, vm.profiles)" - (discard)="discard($event)"> + (discard)="discard()"> diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts index c23f0c7ab..6d19af162 100644 --- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.spec.ts @@ -407,55 +407,32 @@ describe('RiskAssessmentComponent', () => { 'openCloseDialog' ).and.returnValue(of(true)); - component.discard(null); + component.discard(); expect(openCloseDialogSpy).toHaveBeenCalled(); openCloseDialogSpy.calls.reset(); }); - describe('with no selected profile', () => { + describe('after dialog closed with discard selected', () => { beforeEach(() => { spyOn( component.form(), 'openCloseDialog' ).and.returnValue(of(true)); - component.discard(null); + component.discard(); }); - it('should call setFocusOnCreateButton', () => { + it('should update selected profile', () => { expect( - mockRiskAssessmentStore.setFocusOnCreateButton - ).toHaveBeenCalled(); + mockRiskAssessmentStore.updateSelectedProfile + ).toHaveBeenCalledWith(null); }); it('should close the form', () => { expect(component.isOpenProfileForm).toBeFalse(); }); }); - - describe('with selected profile', () => { - beforeEach(fakeAsync(() => { - spyOn( - component.form(), - 'openCloseDialog' - ).and.returnValue(of(true)); - component.discard(PROFILE_MOCK); - tick(100); - })); - - it('should call setFocusOnCreateButton', fakeAsync(() => { - expect( - mockRiskAssessmentStore.setFocusOnSelectedProfile - ).toHaveBeenCalled(); - })); - - it('should update selected profile', () => { - expect( - mockRiskAssessmentStore.updateSelectedProfile - ).toHaveBeenCalledWith(null); - }); - }); }); }); }); diff --git a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts index f85a4bd80..7fa83af91 100644 --- a/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts +++ b/modules/ui/src/app/pages/risk-assessment/risk-assessment.component.ts @@ -22,6 +22,7 @@ import { inject, viewChild, ChangeDetectorRef, + ElementRef, } from '@angular/core'; import { RiskAssessmentStore } from './risk-assessment.store'; import { SimpleDialogComponent } from '../../components/simple-dialog/simple-dialog.component'; @@ -93,6 +94,7 @@ export class RiskAssessmentComponent private store = inject(RiskAssessmentStore); private liveAnnouncer = inject(LiveAnnouncer); cd = inject(ChangeDetectorRef); + private elementRef = inject(ElementRef); private destroy$: Subject = new Subject(); dialog = inject(MatDialog); element = inject(ViewContainerRef); @@ -171,7 +173,9 @@ export class RiskAssessmentComponent name: profileName, onDelete: (idx = 0) => { this.closeFormAfterDelete(profileName, profile); - this.setFocus(idx); + timer(100).subscribe(() => { + this.setFocus(idx); + }); }, }); } else { @@ -203,36 +207,49 @@ export class RiskAssessmentComponent } } - discard(selectedProfile: Profile | null) { + discard() { this.liveAnnouncer.clear(); - this.openCloseDialog(selectedProfile); + this.openCloseDialog(); } copyProfile(profile: Profile, profiles: Profile[]) { this.copyProfileAndOpenForm(profile, profiles); } - private openCloseDialog(selectedProfile: Profile | null) { + private openCloseDialog() { this.form() ?.openCloseDialog() .pipe(takeUntil(this.destroy$)) .subscribe(close => { if (close) { - if (selectedProfile) { - timer(100).subscribe(() => { - this.store.setFocusOnSelectedProfile(); - }); - } else { - this.store.setFocusOnCreateButton(); - } this.isCopyProfile = false; this.isOpenProfileForm = false; this.store.updateSelectedProfile(null); this.cd.markForCheck(); + timer(100).subscribe(() => { + this.focusSelectedButton(); + }); } }); } + private focusSelectedButton() { + const selectedButton = this.elementRef.nativeElement.querySelector( + 'app-profile-item.selected .profile-item-container' + ); + if (selectedButton) { + selectedButton.focus(); + } else { + this.focusAddButton(); + } + } + + private focusAddButton(): void { + const addButton = + this.elementRef.nativeElement.querySelector('.add-entity-button'); + addButton?.focus(); + } + deleteCopy(copyOfProfile: Profile, profiles: Profile[]) { this.isCopyProfile = false; this.store.removeProfile(copyOfProfile.name, profiles); @@ -338,14 +355,15 @@ export class RiskAssessmentComponent } private setFocus(index: number): void { - const nextItem = window.document.querySelector( - `.profile-item-${index + 1}` - ) as HTMLElement; - const firstItem = window.document.querySelector( - `.profile-item-0` - ) as HTMLElement; - - this.store.setFocus({ nextItem, firstItem }); + const nextItem = this.elementRef.nativeElement.querySelectorAll( + 'app-profile-item .profile-item-info' + )[index]; + + if (nextItem) { + nextItem.focus(); + } else { + this.focusAddButton(); + } } private openSaveDialog(