mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
ACS-8254 [ADF] Add functionality to pass data on confirmation in DialogComponent (#9845)
This commit is contained in:
committed by
GitHub
parent
215b9c2e4b
commit
785b5821a0
@@ -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: {} }
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@@ -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
|
||||||
|
|
||||||
|
@@ -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)
|
||||||
|
@@ -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 {
|
||||||
|
@@ -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);
|
||||||
});
|
});
|
||||||
|
@@ -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() {
|
||||||
|
Reference in New Issue
Block a user