How to customize edit to pass parameter to your code and in delete button if you want to use sweet alert?

[anonymouse703]

Feature Request

Can customize button on edit and delete so that I can pass parameter in my code and can use sweet alert on delete

Summary

To be able to pass parameter in edit function and use alert warning before delete to avoid accidental mis-click

Why is this needed?

This is to prevent automatic delete of a record if a user accidentally click the delete button

Suggested Solution(s)

Add SWAL on delete

Other problem

I have this problem since the default in the button is route but in my web.php it's different since I only get the component class to display and let wire:click and render do the display and if I do php artisan route:list the the name of the route is not display and also I usually used wire:click in most of the button in edit and delete

this is my route

use App\Http\Livewire\discount\DiscountList;
Route::get('/discount', DiscountList::class)->name('discount');

In the default button of power grid is something like this

Button::make('edit', 'Edit')
               ->class('bg-indigo-500 cursor-pointer text-white px-3 py-2.5 m-1 rounded text-sm')
               ->route('discount.edit', ['discount' => 'id']),

but in my recent project I used bootstrap dataTable and I did like this

<button wire:click="editClientContact({{ $data->id }})" class="btn btn-info delete-header m-1 btn-sm" title="Edit"><i class="fa fa-pencil" aria-hidden="true"></i></button>

The scenario is I used modal in my forms so if I click edit I want to pass the id in wire:click to trigger my code same as in delete button to avoid accidental click of the user

[luanfreitasdev]

Hello!. It is not good practice to add too many responsibilities to a component.

As a suggestion, I would do the following:

• When user click delete, never redirect to delete route, instead call confirmation modal (may be another component) and it will do deletion.

I'll convert it into discussions so we can follow along. Let me know if it worked!.

Thanks

[anonymouse703]

@luanfreitasdev but in the client side it's also important to give a warning first before you delete a record.. Anyways, I just emit an event to fire up the SWAL

 public function actions(): array
    {
       return [
           Button::make('destroy', 'Delete')
               ->class('bg-red-500 cursor-pointer text-white px-3 py-2 m-1 rounded text-sm')
            /*    ->route('discount.destroy', ['discount' => 'id'])*/
            /*    ->method('delete')*/
                ->emit('deleteConfirmDiscount', ['key' => 'id']),
        ];
    }

and in my parent component I have to declare my SWAL events and delete function

 public function deleteConfirmDiscount($discountId)
    {
        // dd($discountId);
        $this->dispatchBrowserEvent('confirmDiscountDelete', [
            'title' => 'Are you sure?',
            'text' => "You won't be able to revert this!",
            'icon' => 'warning',
            'showCancelButton' => true,
            'confirmButtonColor' => '#3085d6',
            'cancelButtonColor' => '#d33',
            'confirmButtonText' => 'Yes, delete it!',
            'id' => $discountId
        ]);

    }

    public function deleteDiscount($discountId)
    {
        // dd($discountId);
        Discount::destroy($discountId);
        $this->emit('refreshTable');
        $this->resetPage();
    }

and then I have a script to fire my my SWAL

window.addEventListener('confirmDiscountDelete', event => {
        // alert('hey click');
        swal.fire({
            title: event.detail.title,
            text: event.detail.text,
            icon: event.detail.icon,
            showCancelButton: event.detail.showCancelButton,
            confirmButtonColor: event.detail.confirmButtonColor,
            cancelButtonColor: event.detail.cancelButtonColor,
            confirmButtonText: event.detail.confirmButtonText,
        }).then((result) => {
            if (result.isConfirmed) {
                window.livewire.emit('deleteDiscount', event.detail.id)
                swal.fire(
                    'Deleted!',
                    'Your file has been deleted.',
                    'success'
                )
            }
        });

[akulmehta]

@anonymouse703 instead of SWAL why not just use a modal?

[anonymouse703]

@akulmehta I like SWAL it's easy to use and no need to create another modal.

[akulmehta]

I see. It is good that you shared your solution and glad it is working for you.

[anonymouse703]

@akulmehta sharing is caring :)