ACS-8254 [ADF] Add functionality to pass data on confirmation in DialogComponent (#9845)

This commit is contained in:
Darya Blavanovich
2024-06-21 16:14:53 +02:00
committed by GitHub
parent 215b9c2e4b
commit 785b5821a0
6 changed files with 28 additions and 6 deletions

View File

@@ -89,9 +89,12 @@ function openDialog() {
title: 'Dialog title', title: 'Dialog title',
contentComponent: ExampleDialogComponent, contentComponent: ExampleDialogComponent,
componentData: { nodeId: 'nodeId', name: 'node name' } // any data can be passed 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: {} }
} }
``` ```

View File

@@ -26,7 +26,8 @@ interface DialogData {
descriptionTemplate?: TemplateRef<any>; descriptionTemplate?: TemplateRef<any>;
headerIcon?: string; headerIcon?: string;
additionalActionButtons?: AdditionalDialogActionButton[]; additionalActionButtons?: AdditionalDialogActionButton[];
componentData: any; componentData?: any;
dataOnConfirm$?: Subject<any>
} }
``` ```
@@ -50,6 +51,7 @@ interface DialogData {
| descriptionTemplate | `TemplateRef<any>` | | Inserts a description template. (optional) | | descriptionTemplate | `TemplateRef<any>` | | Inserts a description template. (optional) |
| additionalActionButtons | `AdditionalDialogActionButton[]` | | Inserts additional base-styled buttons into the action bar on the left. (optional) | | additionalActionButtons | `AdditionalDialogActionButton[]` | | Inserts additional base-styled buttons into the action bar on the left. (optional) |
| componentData | `any` | | Data that injected in contentComponent. (optional) | | componentData | `any` | | Data that injected in contentComponent. (optional) |
| dataOnConfirm$ | `Subject<any>` | | Data to be passed on confirm action after dialog closed. (optional) |
## See also ## See also

View File

@@ -50,4 +50,4 @@ function openDialog() {
- [Dialog Component](../dialogs/dialog.md) - [Dialog Component](../dialogs/dialog.md)
- [Dialog Data Interface](../interfaces/dialog.interface.md) - [Dialog Data Interface](../interfaces/dialog.interface.md)
- [AdditionalDialogActionButton Interface](./additional-dialog-action-button.md) - [AdditionalDialogActionButton Interface](../interfaces/additional-dialog-action-button.interface.md)

View File

@@ -36,6 +36,7 @@ export interface DialogData {
headerIcon?: string; headerIcon?: string;
additionalActionButtons?: AdditionalDialogActionButton[]; additionalActionButtons?: AdditionalDialogActionButton[];
componentData?: any; componentData?: any;
dataOnConfirm$?: Subject<any>;
} }
export interface AdditionalDialogActionButton { export interface AdditionalDialogActionButton {

View File

@@ -23,6 +23,7 @@ import { DialogData } from './dialog-data.interface';
import { DialogSize } from './dialog.model'; import { DialogSize } from './dialog.model';
import { CoreTestingModule } from '../../testing'; import { CoreTestingModule } from '../../testing';
import { Component, DebugElement, inject } from '@angular/core'; import { Component, DebugElement, inject } from '@angular/core';
import { Subject } from 'rxjs';
@Component({ @Component({
selector: 'adf-dummy-component' selector: 'adf-dummy-component'
@@ -38,6 +39,8 @@ describe('DialogComponent', () => {
let cancelButton: HTMLButtonElement; let cancelButton: HTMLButtonElement;
let confirmButton: HTMLButtonElement; let confirmButton: HTMLButtonElement;
let dialogContainer: HTMLElement; let dialogContainer: HTMLElement;
const mockId = 'mockId';
const mockDataOnConfirm$ = new Subject();
const data: DialogData = { const data: DialogData = {
title: 'Title', title: 'Title',
@@ -96,7 +99,7 @@ describe('DialogComponent', () => {
describe('confirm action', () => { describe('confirm action', () => {
const mockButtonTitle = 'mockTitle'; const mockButtonTitle = 'mockTitle';
beforeEach(() => { beforeEach(() => {
setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle }); setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle, dataOnConfirm$: mockDataOnConfirm$ });
fixture.detectChanges(); fixture.detectChanges();
}); });
@@ -124,11 +127,19 @@ describe('DialogComponent', () => {
expect(confirmButton.getAttribute('disabled')).toBeTruthy(); expect(confirmButton.getAttribute('disabled')).toBeTruthy();
}); });
it('should close dialog', () => { it('should close dialog and pass default value', () => {
component.onConfirm(); component.onConfirm();
expect(dialogRef.close).toHaveBeenCalledWith(true); 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', () => { it('should set correct button title', () => {
expect(component.confirmButtonTitle).toEqual(mockButtonTitle); expect(component.confirmButtonTitle).toEqual(mockButtonTitle);
}); });

View File

@@ -43,6 +43,7 @@ export class DialogComponent implements OnDestroy {
cancelButtonTitle: string; cancelButtonTitle: string;
dialogSize: DialogSizes; dialogSize: DialogSizes;
additionalActionButtons: AdditionalDialogActionButton[]; additionalActionButtons: AdditionalDialogActionButton[];
dataOnConfirm: any;
dataInjector: Injector; dataInjector: Injector;
@@ -68,12 +69,16 @@ export class DialogComponent implements OnDestroy {
if (data.isConfirmButtonDisabled$) { if (data.isConfirmButtonDisabled$) {
data.isConfirmButtonDisabled$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => this.isConfirmButtonDisabled$.next(value)); 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() { onConfirm() {
this.isConfirmButtonDisabled$.next(true); this.isConfirmButtonDisabled$.next(true);
this.dialogRef.close(true); this.dialogRef.close(this.dataOnConfirm || true);
} }
ngOnDestroy() { ngOnDestroy() {