From 785b5821a02a15b34a62cfeb8d2bf68cedaecb26 Mon Sep 17 00:00:00 2001 From: Darya Blavanovich <166367848+DaryaBalvanovich@users.noreply.github.com> Date: Fri, 21 Jun 2024 16:14:53 +0200 Subject: [PATCH] ACS-8254 [ADF] Add functionality to pass data on confirmation in DialogComponent (#9845) --- docs/core/dialogs/dialog.md | 5 ++++- docs/core/interfaces/dialog.interface.md | 4 +++- docs/core/models/dialog.model.md | 2 +- .../lib/dialogs/dialog/dialog-data.interface.ts | 1 + .../lib/dialogs/dialog/dialog.component.spec.ts | 15 +++++++++++++-- .../src/lib/dialogs/dialog/dialog.component.ts | 7 ++++++- 6 files changed, 28 insertions(+), 6 deletions(-) diff --git a/docs/core/dialogs/dialog.md b/docs/core/dialogs/dialog.md index ae1403e6ed..1f464d8e10 100644 --- a/docs/core/dialogs/dialog.md +++ b/docs/core/dialogs/dialog.md @@ -89,9 +89,12 @@ function openDialog() { title: 'Dialog title', contentComponent: ExampleDialogComponent, componentData: { nodeId: 'nodeId', name: 'node name' } // any data can be passed + dataOnConfirm$: of({ nodeId, data: {} }) }; - this.dialog.open(DialogComponent, { data }); + const dialogInstance = this.dialog.open(DialogComponent, { data }); + + dialogInstance.afterClosed().subscribe((data) => data) // data = { nodeId, data: {} } } ``` diff --git a/docs/core/interfaces/dialog.interface.md b/docs/core/interfaces/dialog.interface.md index 96560993db..dcef63c623 100644 --- a/docs/core/interfaces/dialog.interface.md +++ b/docs/core/interfaces/dialog.interface.md @@ -26,7 +26,8 @@ interface DialogData { descriptionTemplate?: TemplateRef; headerIcon?: string; additionalActionButtons?: AdditionalDialogActionButton[]; - componentData: any; + componentData?: any; + dataOnConfirm$?: Subject } ``` @@ -50,6 +51,7 @@ interface DialogData { | descriptionTemplate | `TemplateRef` | | Inserts a description template. (optional) | | additionalActionButtons | `AdditionalDialogActionButton[]` | | Inserts additional base-styled buttons into the action bar on the left. (optional) | | componentData | `any` | | Data that injected in contentComponent. (optional) | +| dataOnConfirm$ | `Subject` | | Data to be passed on confirm action after dialog closed. (optional) | ## See also diff --git a/docs/core/models/dialog.model.md b/docs/core/models/dialog.model.md index 724d6b070d..7a48b458af 100644 --- a/docs/core/models/dialog.model.md +++ b/docs/core/models/dialog.model.md @@ -50,4 +50,4 @@ function openDialog() { - [Dialog Component](../dialogs/dialog.md) - [Dialog Data Interface](../interfaces/dialog.interface.md) -- [AdditionalDialogActionButton Interface](./additional-dialog-action-button.md) +- [AdditionalDialogActionButton Interface](../interfaces/additional-dialog-action-button.interface.md) diff --git a/lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts b/lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts index 2bfcc1c439..4df173c70b 100644 --- a/lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts +++ b/lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts @@ -36,6 +36,7 @@ export interface DialogData { headerIcon?: string; additionalActionButtons?: AdditionalDialogActionButton[]; componentData?: any; + dataOnConfirm$?: Subject; } export interface AdditionalDialogActionButton { diff --git a/lib/core/src/lib/dialogs/dialog/dialog.component.spec.ts b/lib/core/src/lib/dialogs/dialog/dialog.component.spec.ts index d2bab1b9b6..c0a8225a91 100644 --- a/lib/core/src/lib/dialogs/dialog/dialog.component.spec.ts +++ b/lib/core/src/lib/dialogs/dialog/dialog.component.spec.ts @@ -23,6 +23,7 @@ import { DialogData } from './dialog-data.interface'; import { DialogSize } from './dialog.model'; import { CoreTestingModule } from '../../testing'; import { Component, DebugElement, inject } from '@angular/core'; +import { Subject } from 'rxjs'; @Component({ selector: 'adf-dummy-component' @@ -38,6 +39,8 @@ describe('DialogComponent', () => { let cancelButton: HTMLButtonElement; let confirmButton: HTMLButtonElement; let dialogContainer: HTMLElement; + const mockId = 'mockId'; + const mockDataOnConfirm$ = new Subject(); const data: DialogData = { title: 'Title', @@ -96,7 +99,7 @@ describe('DialogComponent', () => { describe('confirm action', () => { const mockButtonTitle = 'mockTitle'; beforeEach(() => { - setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle }); + setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle, dataOnConfirm$: mockDataOnConfirm$ }); fixture.detectChanges(); }); @@ -124,11 +127,19 @@ describe('DialogComponent', () => { expect(confirmButton.getAttribute('disabled')).toBeTruthy(); }); - it('should close dialog', () => { + it('should close dialog and pass default value', () => { component.onConfirm(); expect(dialogRef.close).toHaveBeenCalledWith(true); }); + it('should close dialog and pass dataOnConfirm$', () => { + mockDataOnConfirm$.next(mockId); + + component.onConfirm(); + + expect(dialogRef.close).toHaveBeenCalledWith(mockId); + }); + it('should set correct button title', () => { expect(component.confirmButtonTitle).toEqual(mockButtonTitle); }); diff --git a/lib/core/src/lib/dialogs/dialog/dialog.component.ts b/lib/core/src/lib/dialogs/dialog/dialog.component.ts index 4396779455..4c02452e68 100644 --- a/lib/core/src/lib/dialogs/dialog/dialog.component.ts +++ b/lib/core/src/lib/dialogs/dialog/dialog.component.ts @@ -43,6 +43,7 @@ export class DialogComponent implements OnDestroy { cancelButtonTitle: string; dialogSize: DialogSizes; additionalActionButtons: AdditionalDialogActionButton[]; + dataOnConfirm: any; dataInjector: Injector; @@ -68,12 +69,16 @@ export class DialogComponent implements OnDestroy { if (data.isConfirmButtonDisabled$) { data.isConfirmButtonDisabled$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => this.isConfirmButtonDisabled$.next(value)); } + + if (data.dataOnConfirm$) { + data.dataOnConfirm$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => (this.dataOnConfirm = value)); + } } } onConfirm() { this.isConfirmButtonDisabled$.next(true); - this.dialogRef.close(true); + this.dialogRef.close(this.dataOnConfirm || true); } ngOnDestroy() {