Sweetalert2 CDN

Sweetalert2 en un componente javascript que permite mostrar alertas en forma de ventana emergente o pop-up, que da una apariencia de dinamicidad a las acciones realizadas en la aplicacion web.

Por ejemplo que al borrar un registro desde un formulario, salte una ventana pidiendo aprovación o denegación, y pudiendo programar acciones según cada elección.

Instalar sweetalert2 CDN

En su página de githbub viene la documentación de instalación y ejemplos de cómo usarlo. En este caso se va a instalar mediante CDN

https://sweetalert2.github.io/#download

En el layout que se desee utlizar hay que poner el siguiente código script CDN en la cabecera de la plantilla:

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Otra opción es instalarlo con npm con el siguiente comando ejecutado en consola

npm install sweetalert2

Funcionamiento de sweetalert2 en laravel

El funcionamiento es básicamente enviar eventos después de una tarea del controlador, y que la vista layout recoga dicho evento para ejecutar algún método javascript.

Vamos a ver las dos direcciones de emisión y recogida del evento

Del controlador a sweetalert2

El componente/controlador es el que inicia la acción y la vista lo recoge a través del javascript sweet alert 2

Emitir evento desde el controlador a sweetalert2

El controlador emite un evento con el método emit, por ejemplo al guardar en la base los datos de un formulario, y pasa como parámetro el nombre del método javascrip que lo va a recoger.

El método emit puede pasar además del nombre otros parámetros como algún mensaje a mostar en la alerta.

$this->emit('alert');
$this->emit('alert', 'Creado correctamente');

El método emitTo por su parte, permite especificar el controlador en concreto que va a escuchar el evento.
$this->emiTo('nombrecontrolador', 'nombreevento');

Recoger evento en sweetalert2

La plantilla principal o layout que se desee, debe recoger el evento emitido por el controlador, por lo que hay que poner el código javascript al final del layout, antes de la etiqueta de finalización del body.

Debe de ir entre etiquetas de script. Para capturar el evento se utiliza Livewire.on() y pasarle entre paréntesis 2 parámetros.

1. El nombre del evento
2. Una función anónima
   • Código a ejecutar, para este ejemplo el de sweetalert2 con el método Swal.fire. Este y todos los ejemplos se pueden ver en la web de sweetalert2.

<script>
Livewire.on('alert', function(){
Swal.fire('Good job!', 'You clicked the button!', 'success' )
})        
</script>

Mostrar mensajes en sweetalert2

Pero dentro de la función, también se puede pasar parámetros, como un mensaje a mostrar.

<script>
Livewire.on('alert', function(mensaje){
Swal.fire('Good job!', mensaje, 'success' )
})        
</script>

Recoger evento sweetalert2 específico

Para evitar que todos los componentes que escuchan el evento se renderizen, se puede utilizar el metodo emitTo, y pasar por parámetro el componente en concreto que va a escuchar dicho evento y el nombre del evento.

public $listeners = ['rendererizar' => 'render'];

En el caso de que el nombre del evento y el método que va a ejecutar se llamen igual, puede indicarse solamente uno, porque laravel livewire entiende que así es.
public $listeners = ['render' => 'render'];
public $listeners = ['render'];

De Sweetalert2 al controlador

En este caso es la vista a través de Sweet Alert 2 la que inicia la acción, y lo recoge el componente/controlador.

En concreto es 3 pasos:

1. En la vista haya un botón emita un evento
2. El javascript recoge en la propia vista con SweetAlert2
3. El javascritp emita otro evento al componete/controlador.

Emitir evento desde el botón de la vista al javascript

Lo primero en la vista colocar un botón enlace, que emite el evento con wire, por ejemplo:

<a class="btn btn-red ml-2" 
wire:click="$emit('deleteRegistro', {{$item->id}})">
Borrar
<i class="fas fa-trash"></i>
</a>

Emitir evento desde el sweetalert2 a controlador

Recoger entoces en la propia vista desde el código javascript

Igual que anteriormente, se abre la directiva push y se pone el CDN para importar el elemento Sweet Alert 2.

También se coloca el código de ejemplo copiado de la web del desarrollador.

Este ejemplo sería para borrar un registro con aviso previo.

Añadir la línea de Livewire para la escucha del evento

Livewire.on('deleteRegistro', registrotId => {... codigo javascript ...}

y asignare el codigo javascript

Después al confirmar la ventana se emite el evento con livewire, pasando el componente que escucha, el metodo que lo recoge, y el registro a borrar.

Livewire.emitTo('show-registro', 'delete', registroId);

Todo el código quedaría asi:

<a class="btn btn-red ml-2" 
 wire:click="$emit('deletePost', {{$item->id}})">
Borrar
<i class="fas fa-trash"></i></a>

@push('js')
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

        <script>
        
            Livewire.on('deleteRegistro', registroId => {
                Swal.fire({
                    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!'
                }).then((result) => {
                    if (result.isConfirmed) {

                        Livewire.emitTo('show-registro', 'delete', registroId);

                    Swal.fire(
                        'Deleted!',
                        'Your file has been deleted.',
                        'success'
                    )
                    }
                })
            });

        </script>
    @endpush

Recoger evento en el controlador

Siguiendo este ejemplo de borrar un registro de la base de datos, como el componete/controlador espera el evento, hay que declarar la propiedad que lo escucha con listeners

public $listeners = [ 'delete'];

Y también crear la función a la que la propiedad listeners se va dirigir.

Se recoge el registro y su clase, para acceder seguidamente a su método delete() que borrará directamente el registro de la base de datos.

public function delete(Registro $registro
$registro->delete();
}

Espero te sirva de ayuda.