08. Dialog Service

Dialog Service

Dialogs are very important in many applications. Sometimes you want to display some messages, get confirmation from users, display a template or a component, interact with dialogs and so on. Narik dialog service provides all of these features and above all, this service is fully independent of any UI library.

Using Dialog Service

For using Narik Dialog Service you should inject DialogService.
DialogService has many methods that you can use them.

export abstract class DialogService {
  abstract showDialog<T>(
    content: Type<any> | TemplateRef<any>,
    title?: string,
    data?: any,
    actions?: DialogAction[],
    options?: DialogOption,
    validateOnClose?: (
      dialogresult: DialogResult<T>
    ) => boolean | Promise<boolean>,
    onClose?: (dialogresult: DialogResult<T>) => void,
    providers?: StaticProvider[]
  ): DialogRef<T>;
  abstract showConfirm(
    message: string,
    title?: string,
    actions?: DialogAction[],
    onResult?: (dialogresult: DialogResult<any>) => void
  ): DialogRef<any>;
  abstract showMessageBox(message: string, title?: string): DialogRef<any>;
  abstract showInput(
    message: string,
    title?: string,
    fields?: EntityField[],
    entity?: any,
    onResult?: (dialogresult: DialogResult<DialogInputContent>) => void,
    actions?: DialogAction[],
    options?: DialogOption
  ): DialogRef<DialogInputContent>;
  abstract showTextInput(
    message: string,
    title?: string,
    placeHolder?: string,
    fieldType?: FieldTypes,
    defaultValue?: any,
    onResult?: (dialogresult: DialogResult<DialogInputContent>) => void,
    actions?: DialogAction[],
    options?: DialogOption
  ): DialogRef<any>;
  abstract showContent(content: string, title?: string): DialogRef<any>;
   abstract error(
    message: string | string[] | any,
    title?: string,
    options?: any
  ): any;
  abstract showMessage(
    message: string | string[],
    title?: string,
    type?: MessageType,
    options?: any
  ): any;
  abstract close(
    dialog: DialogRef<any> | string,
    dialogResult?: DialogResult<any>,
    eventSource?: "DIALOG" | "CONTENT"
  );
  abstract closeAll(force?: boolean);
}

Example:

export class Test{
    @NarikInject(DialogService)
    dialogService: DialogService;

    someMethod(errMessage)
    {
        this.dialogService.error(errMessage, "", {
            enableHtml: true
        });
    }

    someMethod2()
    {
        this.dialogService
        .showConfirm("info.delete-confirm")
        .closed.then((confirmResult: DialogResult<any>) => {
          if (confirmResult.dialogResult === "yes") {
              ...
          }
        });
    }

    someMethod3()
    {
        const dialog = this.dialogService.showDialog(
            DesignEditorComponent,
            entity.title,
            {
                data: content
            },
            [...DialogActions.ok_cancel],
            {
                isFullScreen: true
            }
        );
        dialog.events.subscribe((x: DialogEvent) => {
            if (x.eventType === "saveRequest") {
                this.saveContent(x.eventData);
            }
        });
        dialog.closed.then((x: DialogResult<DesignEditorComponent>) => {
            if (x.dialogResult === "ok") {
                this.saveContent(x.componentInstance.data);
            }
        });
    }

    someMethod4()
    {
        this.dialogService.showInput(
            "",
            "selectRole",
            [
                {
                    name: "role",
                    fieldType: FieldTypes.Radio,
                    options: {
                        placeHolder: "title"
                    },
                    dataInfo: {
                        dataKey: "Role",
                        dataProviderKey: "remote"
                    }
                }
            ],
            {
                role: currentRole
            },
            (x: DialogResult<DialogInputContent>) => {
                if (x.dialogResult === "ok" && x.data && x.data.role) {
                    this.isBusy = true;
                    ....
                }
            }
        );
    }
}

If a component opened with DialogService, you can inject DIALOG_REF inside that and with help of it, create some dialog actions.

Example

export class DialogContent()
{
    constructor(
        @Inject(DIALOG_REF) public dialog: DialogRef<any> ) {
    }

    someMethod(errMessage)
    {
        this.dialog.close();
    }

    someMethod(errMessage)
    {
        this.dialogRef.events.next({
            eventType: "saveRequest",
            eventData: this.data
        });
    }
}