Question 17564 in Laravel Question posted in
The official Laravel Documentation can be found here.

Livewire Powergrid with Laravel – how to create a alert/confirmation after "Delete" button click?

I’m using Laravel with TailwindCSS, so I assume that, the SweetAlert wouldn’t work.
I’m also using Livewire Powergrid, which works fine, but I don’t know how to emit simple alert window after clicking f.e. "Delete" button.

Inside actions method, there’s option emit() but I really don’t know what it does.

 Button::make('destroy', 'Delete')
        ->class('bg-red-500 cursor-pointer text-white px-3 m-1 rounded text-sm hover:bg-red-800')
        ->emit(),

What does it call and where? Should I put emited method inside UsersTable(powergrid component) or somewhere else?

Can someone explain? There’s other possibility to achieve the alert window with confirmation?

Tags:

2

Answers


  1. 0

    You have to pass the method name within emit and that method has to be defined in the same class (I am using PowerGrid Component), example :

    // rowActionEvent is my method name and the second parameter is data array which has to be passes ad parameter to rowActionEvent method
Button::make('destroy', 'Delete')
    ->class('bg-red-500 cursor-pointer text-white px-3 m-1 rounded text-sm hover:bg-red-800')
    ->emit('rowActionEvent', ['id' => 'id']),

    In the same class, define the method also

    protected function getListeners()
{
    return array_merge(
        parent::getListeners(),
        [
            'rowActionEvent',
        ]);
}

public function rowActionEvent(array $data): void
{
    $message = 'You have clicked #' . $data['id'];

    $this->dispatchBrowserEvent('showAlert', ['message' => $message]);
}

    In the frontend (blade file or the view file) define the showAlert javascript.

        <script>
        window.addEventListener('showAlert', event => {
            alert(event.detail.message);
        })
    </script>
    Login or Signup to reply.
  2. 0

    In my case , I had to add both the event and the listener to the mother component , instead of the PowerGrid class (cause it was not working )

    Inside Powergrid class (UserTable) , I have these buttons inside actions function

     public function actions(): array
{
   return [
       Button::make('edit', 'Edit')
           ->class('btn btn-info')
           ->route('admin.users.edit', ['userId' => 'id']),

       Button::make('destroy', 'Delete')
           ->class('btn btn-danger')
           ->emit('deleteUser', ['key' => 'id']),


    ];
}

    Livewire Mother Component

     class Users extends Component
 {
public $userId ;

use LivewireAlert;

protected $listeners = ['deleteUser' , 'confirmDelete'];
public function deleteUser($userId){
    $this->userId = $userId['userId'];
    $this->alert('warning', 'Are you sure , you want to delete this user ? ' , [
        'icon'=>'warning',
        'showConfirmButton' => true,
        'showCancelButton' => true,
        'confirmButtonText' => 'Delete',
        'cancelButtonText' => 'Cancel',
        'onConfirmed' => 'confirmed',
        'allowOutsideClick' => false,
        'timer' => null ,
        'position' => 'center',
        'onConfirmed' => 'confirmDelete'
    ]);
 }

Public function confirmDelete(){
     Admin::destroy($this->userId);

    $this->flash('success', 'User Successfully deleted', [
        'position' => 'center',
        'timer' => 3000,
        'toast' => false,
        'icon' => 'success',
    ], '/admin/users');

}

public function render()
{
    return view('livewire.admin.users')->layout('layouts.admin.admin-template');
}
}

    Livewire Mother Component Blade

    <div>
<div class="row mb-2">
    <div class="col-6 d-flex align-items-center">
        <h3 class="mb-0">Users {{ $userId }}</h3>
    </div>
    <div class="col-6 text-end">
        <a class="btn bg-gradient-dark mb-0" href="{{ 
route('admin.users.create') }}"><i class="fas fa-plus"></i>&nbsp;&nbsp;Add
             New User</a>
    </div>

</div>
<div class="col mb-3">
    <div class="card">
        <div class="card-body p-3">
            <livewire:admin-table/>
        </div>
    </div>
</div>
</div>

    sample image 1

    I used Livewire Alert package

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search