Diálogo de Confirmación en UNA SOLA LíNEA en Laravel Livewire: Wire:Confirm

▶

Aquí te quiero presentar una pequeña maravilla que realmente yo siempre estoy leyendo la documentación de los cursos que voy como quien dice haciendo sobre la marcha para como quien dice siempre tener lo último de lo último y viene precisamente siendo esto el de:

wire:confirm

Ya creo que esto nos dice bastante y ya pudéramos inclusive dejarlo hasta acá porque obviamente o sea es bastante obvio pero de igual manera vamos a hacer una pequeña demostración. Simplemente vamos a modificar el botón que por defecto, llama a un método llamado delete, para que ahora, definiendo el parámetro anterior, aparezca un dialogo de confirmación y al precionarlo, se ejecuta el script definido en wire:click:

<flux:button class="ml-3" variant='danger' size="xs" wire:click="delete({{ $c }})" wire:confirm="Are you sure you want to delete this category?">
     {{ __('Delete') }}
</flux:button>

Con confirm() de JavaScript

Un diálogo de confirmación no es más que una caja de diálogo que se muestra en el navegador para confirmar una acción que se realizará en una aplicación web. Por ejemplo, si un usuario hace clic en un botón que borra un registro en una tabla, se puede mostrar un cuadro de diálogo de confirmación que pregunte al usuario si está seguro de que desea borrar el registro. veamos como implementar uno en Livewire.

Laravel Livewire es genial, realizar operaciones que requieren de ambos lados, es decir, el cliente y el servidor siempre son pesadas ya que tenemos que crear rest apis, y conectar ambos entes, o desde vanilla JavaScript, enviar peticiones fetch, devolver json, evaluar respuesta, hacer cambios en el html... un verdadero lío y mucho trabajo para hacer actualizaciones; Livewire nos abstrae de todo esto empleando eventos y funciones, además de una estructura base para poder comunicar el cliente y servidor de una manera muy directa.

El problema radica que esta facilidad a veces nos trae inflexibilidad, y realizar operaciones sencillas como eliminar, quedan demasiadas sencillas y directas con livewire; generalmente tenemos en Livewire algo como:

<flux:button wire:click="delete({{ $p }})" href="#">
      Eliminar

Que en la práctica si le pegamos un clic al elemento HTML que tiene definido dicho atributo ELIMINA DE UNO EL ELEMENTO, cosa que seguramente no vas a querer porque puede que nuestro usuario le dé un clic por error a esa opción; para las eliminaciones es buena práctica colocar un dialogo de confirmacion; asi que, para evitar eliminar registros con un solo clic, en el mismo elemento que contiene el wire:click, puedes colocarle un onclick de JavaScript con dicho diálogo de confirmación:

<flux:button onclick="confirm('¿Seguro que quieres eliminar?') || event.stopImmediatePropagation()"  wire:click="delete({{ $p }})" href="#">
      Eliminar
</flux:button>

La clave aquí es el stopImmediatePropagation que detiene la programación del evento; livewire en su core emplea eventos en el cliente para llamar a eventos en el servidor, eventos de JavaScript que también podemos detener.