Introduced confirm and confirmDelete functions in the Angular overlay service

[abjerner]

Implementing #6507

Based on Bjarne's PR for a confirm overlay, this PR adds the confirm and confirmDelete methods to the Angular overlay service.

The confirm function has some default settings:

• Specify the HTML view from Bjarne's PR
• Set closeButtonLabelKey to general_cancel
• Set submitButtonLabelKey to general_confirm
• Add a default close callback which just closes the overlay

It looks like this:

The confirmDelete functions does what confirm does, but then also:

• Set submitButtonStyle to danger
• Set submitButtonLabelKey to contentTypeEditor_yesDelete

It looks like this:

I haven't updated the code in Bjarne's PR, but:

const overlay = {
    view: "confirm",
    title: data[0],
    content: confirmationMessage,
    confirmMessage: "This will delete the account.",
    confirmMessageStyle: "danger",
    closeButtonLabel: data[1],
    submitButtonLabel: data[2],
    submitButtonStyle: "danger",
    close: function () {
        vm.deleteNotLoggedInUserButtonState = "danger";
        overlayService.close();
    },
    submit: function () {
        //performDelete();
        overlayService.close();
    }
};
overlayService.open(overlay);

could now be shortened to:

const overlay = {
    title: data[0],
    content: confirmationMessage,
    confirmMessage: "This will delete the account.",
    confirmMessageStyle: "danger",
    close: function () {
        vm.deleteNotLoggedInUserButtonState = "danger";
        overlayService.close();
    },
    submit: function () {
        //performDelete();
        overlayService.close();
    }
};
overlayService.confirmDelete(overlay);

[bjarnef]

I wonder if it would be better just with a single confirm function and specify the type using a property in the dialog/overlay object?

E.g.:

const overlay = {
    title: data[0],
    content: confirmationMessage,
    confirmType: "delete",
    confirmMessage: "This will delete the account.",
    close: function () {
        vm.deleteNotLoggedInUserButtonState = "danger";
        overlayService.close();
    },
    submit: function () {
        //performDelete();
        overlayService.close();
    }
};
overlayService.confirm(overlay);

confirmMessageStyle could be default set to danger for confirmType: "delete".

It would then just use the same function, but adjust the layout of the confirm like the existing properties like confirmMessageStyle.

[nul800sebastiaan]

Thanks @abjerner - we'll have a look soon!

[abjerner]

I've now updated the PR according to Bjarne's suggestions. This means that the confirmDelete function is gone, and the confirm function now has an extra confirmType option.

Usage is as following:

Default confirm dialog (no explicit type):

$scope.default = function () {
    overlayService.confirm({
        title: "Hest",
        content: "Please confirm me.",
        confirmMessage: "Click the green \"Confirm\" button below to confirm this dialog.",
        //confirmMessageStyle: "danger",
        close: function () {
            overlayService.close();
        },
        submit: function () {
            overlayService.close();
        }
    });
};

Delete dialog:

$scope.danger = function () {
    overlayService.confirm({
        title: "Hest",
        content: "Please delete me.",
        confirmType: "delete",
        confirmMessage: "This will delete the account.",
        //confirmMessageStyle: "danger",
        close: function () {
            overlayService.close();
        },
        submit: function () {
            overlayService.close();
        }
    });
};

As also suggested by Bjarne, when confirmType is set to delete, some of the other options are automatically populated if they haven't been specified by the user:

switch (overlay.confirmType) {

    case "delete":
        if (!overlay.confirmMessageStyle) overlay.confirmMessageStyle = "danger";
        if (!overlay.submitButtonStyle) overlay.submitButtonStyle = "danger";
        if (!overlay.submitButtonLabelKey) overlay.submitButtonLabelKey = "contentTypeEditor_yesDelete";
        break;
    
    default:
        if (!overlay.submitButtonLabelKey) overlay.submitButtonLabelKey = "general_confirm";

}

[nul800sebastiaan]

Wonderful, thanks @abjerner !

[nul800sebastiaan]

Now.. who's going to update the code for #5487 @abjerner @bjarnef ? 😁

[abjerner]

@nul800sebastiaan I can have a look at it tomorrow 😉