Componente de mostrar mensaje de acción realizada en Laravel Livewire

- Andrés Cruz

In english
Componente de mostrar mensaje de acción realizada  en Laravel Livewire

Si estás empleando Livewire, te pudieras pregunta cómo podemos mostrar un mensaje por unos pocos segundos para que luego ocultarlo; esto es particularmente útil para cuando hacemos una operación de inserción, actualización, eliminación, el usuario se autenticó, etc; estos mensajes se conocer como mensajes de accion realizada, no son mensajes de confirmación en Livewire como vimos antes ya que, el usuario no podrá cancelar la acción realizada, solamente aparecerá un mensaje para que el usuario sepa que acción se acaba de realizar.

En Livewire se puede implementar este tipo de componentes muy facilmente; pero para lograr algo de inspiración, tenemos un componente que es interesante de ver, y es:

https://github.com/laravel/jetstream/blob/2.x/resources/views/components/action-message.blade.php

El cual con ayuda de Alpine.js, permite determinar el tiempo de vida para visualizar este trozo de HTML:

<div x-data="{ shown: false, timeout: null }"
    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);  })"
    x-show.transition.out.opacity.duration.1500ms="shown"
    x-transition:leave.opacity.duration.1500ms
    style="display: none;"
    {{ $attributes->merge(['class' => 'text-sm text-gray-600']) }}>
    {{ $slot->isEmpty() ? 'Saved.' : $slot }}
</div>

En la práctica podemos crear uno basado en el anterior como:

@if (session('status'))
    <div x-data="{ shown: false }"
        x-init="clearTimeout(2000); shown = true; timeout = setTimeout(() => { shown = false }, 2000);"
        x-show.transition.out.opacity.duration.1500ms="shown" x-transition:leave.opacity.duration.1500ms>
        <div class="p-1 mt-1 bg-purple-500 rounded-md">
            <x-card class="m-0">
                <h3 class="text-xl">
                    {{ session('status') }}
                </h3>
            </x-card>
        </div>
    </div>
@endif

Lo importante es emplear Alpine.js para ocultar el contenido mediante la función de setTimeout pasado cierto tiempo, por lo demás, ya conocemos como mostrar un componente de acción relizada que se muestra por pocos segundos.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.