Proposal: Implementing Delete confirmation using Livewire Inbuilt Confirm Directive

[hemant-kr-meena]

Proposal:

Introduce macros named confirm and confirmPrompt in the Button class. These macros will simplify adding confirmation and prompt dialogs, ensuring consistency and preventing accidental deletions or crucial actions.

Simple Confirm Popup

Button::macro('confirm', function (string $message) {
    $this->dynamicProperties['confirm'] = [
        "component" => "button",
        "attribute" => "wire:confirm",
        "value"     => $message,
    ];

    return $this;
});

Confirm Prompt Popup with input

Button::macro('confirmPrompt', function (string $message,string $confirm_value) {
    $this->dynamicProperties['confirmPrompt'] = [
        "component" => "button",
        "attribute" => "wire:confirm.prompt",
        "value"     => "$message |$confirm_value",
    ];

    return $this;
});

[SuGDevelopers]

any implementation or how I could have this change in my project?

[hemant-kr-meena]

Yes in my recent project, I implement this logic to confirm before taking action.
As we know we use macros for additional functionality to add id and trigger dispatch events. In the same way, we can add wire:confirm attribute to buttons.
Read more Livewire wire:confirm

In my case, I add some new macros in AppServiceProvider for buttons and call then like other methods.

Approach 1

Button::macro('confirm', function (string $message) {
    $this->dynamicProperties['confirm'] = [
        "component" => "button",
        "attribute" => "wire:confirm",
        "value"     => $message,
    ];

    return $this;
});

Approach 2

Button::macro('confirmPrompt', function (string $message,string $confirm_value) {
    $this->dynamicProperties['confirmPrompt'] = [
        "component" => "button",
        "attribute" => "wire:confirm.prompt",
        "value"     => "$message |$confirm_value",
    ];

    return $this;
});

If You agree with suggestions, I will create a pull request with these functions. We can merge both functions and achieve the same result using a single macro. But by defining both methods we help users choose which option they want.

Tell me what you think.

The results are the same as above images.

[hemant-kr-meena]

User can call them like

Button::add('edit')->id()->confirm("Are you sure you want to delete ?")

[SuGDevelopers]

I have set it as a trait to be used in all my tables... thanks for the contribution... it works super well

[hemant-kr-meena]

I'm glad that it's helpful for you.

[hemant-kr-meena]

feature added in #1599