Este artículo tiene más de un año de antigüedad, el contenido pudiera estar obsoleto.
Notifiaciones con laravel livewire
Con livewire se pueden despachar eventos al navegador para ser detectados con javascript y poder realizar algun tipo de accion en el front end.
Despachando eventos en el navegador
Entonces basicamente la documentacion de livewire indica que hay que hacer algo como esto:
1$this->dispatchBrowserEvent('name-updated', ['newName' => $value]);
Y con javascript podemos detectar ese evento:
1<script>2window.addEventListener('name-updated', event => {3 alert('Name updated to: ' + event.detail.newName);4})5</script>
Ejemplo practico
Supongamos que queremos levantar una notificacion cuando se ejecuta una accion con un componente: Lo que tenemos que hacer es despachar el evento con ciertas caracteristicas que nos permitan hacer de nuestra notificacion funcional y para eso haremos esto:
1$this->dispatchBrowserEvent('notification', [2 'body' => 'El registro fue actualizado correctamente',3 'timeout' => 40004]);
Aca basicamente le indicamos a nuestra notificacion que va a tener un cuerpo (body) y un tiempo de espera (timeout) de 4 segundos para que se cierre automaticamente. Y nuestra notificacion va a lucir de esta manera:
1<div 2 x-data="{body: ''}" 3 x-show="body.length" 4 x-cloak 5 x-on:notification.window="body = $event.detail.body; setTimeout(() => body = '', $event.detail.timeout || 2000)" 6 class="fixed inset-0 flex px-4 py-6 items-start pointer-events-none"> 7 <div class="w-full flex flex-col items-center space-y-4"> 8 <div class="max-w-sm w-full bg-gray-900 rounded-lg pointer-events-auto"> 9 <div class="p-4 flex items-center">10 <div class="ml-2 w-0 flex-1 text-white">11 <span x-text="body"></span>12 </div>13 <button class="inline-flex text-gray-400" x-on:click="body = ''">14 <span class="sr-only">Close</span>15 <span class="text-2xl">×</span>16 </button>17 </div>18 </div>19 </div>20</div>
DRY
Tambien podemos re usar la misma notificacion sin importar que estemos livewire, por ejemplo, en alguna parte de nuestra aplicacion podemos tener algo como esto:
1session()->flash('notification', 'Texto de notificacion');
Los cambios que tenemos que hacer son los siguientes:
1<div 2 x-data="{body: ''}" 3 x-show="body.length" 4 x-cloak 5 x-on:notification.window="body = $event.detail.body; setTimeout(() => body = '', $event.detail.timeout || 2000)" 6 class="fixed inset-0 flex px-4 py-6 items-start pointer-events-none" 7 x-init=" 8 @if (session()->has('notification')) 9 window.onload = () => {10 window.dispatchEvent(new CustomEvent('notification', {11 detail: {12 body: '{{ session('notification') }}',13 timeout: 300014 }15 }))16 }17 @endif18 "19 >20 <div class="w-full flex flex-col items-center space-y-4">21 <div class="max-w-sm w-full bg-gray-900 rounded-lg pointer-events-auto">22 <div class="p-4 flex items-center">23 <div class="ml-2 w-0 flex-1 text-white">24 <span x-text="body"></span>25 </div>26 <button class="inline-flex text-gray-400" x-on:click="body = ''">27 <span class="sr-only">Close</span>28 <span class="text-2xl">×</span>29 </button>30 </div>31 </div>32 </div>33</div>
Nota: esto lo saque de un curso de https://codecourse.com/