@smartbit4all/dialog NPM

Smart Dialog

References

These packages must be updated in case of a new version:

@smartbit4all/view-context

How to use

Installation

Go to your project, open the terminal and use the following command:

npm i @smartbit4all/dialog

Then import it in the AppModule:

app.module.ts:

import { SmartdialogModule, SmartdialogService } from '@smartbit4all/dialog';
...
@NgModule({
    declarations: [...]
    imports: [
        ...
        SmartdialogModule,
    ],
    providers: [
        ...
	    SmartdialogService,
    ]
    ...
})

Usage #1

If you do not use the SmartViewContext package in your project or the dialog is not opened by the BFF, you have to create a service for you component.

Create a component for the content of the dialog. In the folder of the component create an Angular Service.

src/app/.../example-dialog/
- example-dialog.component.css
- example-dialog.component.html
- example-dialog.component.ts
- example-dialog.service.ts

Extend your service with the SmartdialogService. You can see an example for a specific service belove.

example-dialog.service.ts:

@Injectable({
    providedIn: 'root'
})
export class ExampleDialogService extends SmartdialogService {
    constructor(
        dialog: MatDialog,
        router: Router
    ) {
        super(dialog, router);
    }

    override handleAfterClosed(result: any): void {
        ...
    }

    openDialog(): void {
        const dialogData: SmartDialogData = { ... };
        this.createDialog(dialogData, SmartDialog);
    }

    onAction(params: any): void {
        this.closeDialog().then(() => {
            ...
        });
    }
}

In case if you use RouterOutlet in your dialog, it should be used like this:

example-dialog.component.html:

<router-outlet name="exampleNamedOutlet"></router-outlet>

app-routing.module.ts:

...
{
	path: 'example-url',
	component: ExampleComponent,
	outlet: 'exampleNamedOutlet'
}

example-dialog.service.ts:

const dialogData: SmartDialogData = {
    ...
    outlets: {
        exampleNamedOutlet: null
    }
};

Usage #2

If you use the SmartViewContext package in your project and the dialog is opened by the BFF, you do not have to create a service for you component.

view-context.pages.ts:

export enum Pages {
    VIEW_CONTEXT = 'viewContextUuid',
    EXAMPLE_DIALOG = 'exampleDialog'
}

view-context.handlers.ts:

export const viewContextHandlers: SmartViewHandlerModel[] = [
    {
        name: Pages.EXAMPLE_DIALOG,
        component: ExmapleDialogComponent
    }
];

Version logs

@smartbit4all/form v1.0.5

Type: Update

The openComponentAsDialog function returns the reference of the created dialog.

openComponentAsDialog(component: ComponentType<any>, viewName: string): MatDialogRef<any, any> { ... }

@smartbit4all/form v1.0.4

Type: Update

@smartbit4all/icon support.

@smartbit4all/form v1.0.1

Type: Update

The package has been published.

@smartbit4all/dialog v0.1.0

Type: Feature

From this version the usage of SmartViewContext is supported.

The SmartDialogService got a new function which creates a unified SmartDialogData object and opens the dialog.

export class SmartdialogService {

    ...

    openComponentAsDialog(component: ComponentType<any>, viewName: string): void {
        let smartDialog: SmartDialogData = {
            size: {},
            content: {
                title: viewName,
            },
            customComponent: component,
        };

        this.createDialog(smartDialog, component);
    }
}

@smartbit4all/dialog v0.0.7

Type: Feature

In this update a new way to handle dialogs and its data has been introduced.

With the SmartdialogService creating and closing a dialog has become easier and more unified. This service should be used as a parent class of a workflow specific service.