Laravel Livewire 11 Uso del componente de Modal o Dialogo

Este apartado es una expansión del componente de alerta que mostramos anteriormente en otro capítulo:

 

La razón de esta expansión se debe a que queremos adaptar el módulo CRUD que creamos para las categorías para que se integre visualmente lo mejor posible con lo que tenemos en Livewire por defecto; si revisamos algunas opciones disponibles por Livewire, como la de borrar grupos:

Verás que existe un componente existente que podemos reutilizar fácilmente; el llamado confirmation-modal el cual dispone de 3 partes:

1. El título (title).

2. El contenido (content).

3. Las acciones (footer).

Con este cuerpo en mente, para el listado, vamos a realizar la siguiente adaptación:

resources/views/livewire/dashboard/category/index.blade.php

***
{{ $categories->links() }}
<x-confirmation-modal wire:model="confirmingDeleteCategory">
    <x-slot name="title">
        {{ __('Delete Category') }}
    </x-slot>

    <x-slot name="content">
        {{ __('Are you sure you want to delete this category?') }}
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="$toggle('confirmingDeleteCategory')" wire:loading.attr="disabled">
            {{ __('Cancel') }}
        </x-secondary-button>

        <x-danger-button class="ml-3" wire:click="delete()"
            wire:loading.attr="disabled">
            {{ __('Delete') }}
        </x-danger-button>
    </x-slot>
</x-confirmation-modal>

Explicación del código anterior

Rellenamos con los datos correspondientes el título y el contenido; el más interesante es la opción de eliminar una categoría la cual fue migrada al apartado de acciones, para cuando presionemos un botón de eliminar; aunque tiene un cambio importante, ya que, ahora no estamos pasando por referencia la categoría que queremos eliminar, esto lo establecemos desde antes, desde el apartarlo de los enlaces de acciones en la tabla de categorías:

<x-danger-button wire:click="seletedCategoryToDelete({{ $c }})">
   Eliminar
</x-danger-button>

Este proceso intermediario se debe a que, no podemos pasar la referencia de la categoría directamente, ya que, en el listado tenemos N cantidad de categorías y solamente un modal; por lo tanto, cuando presionamos sobre eliminar una categoría, lo que hacemos es guardar la referencia a la categoría que queremos eliminar en una propiedad en la clase componente:

public function seletedCategoryToDelete(Category $category) {
  $this->categoryToDelete = $category;
}

La definición de la función selectedCategoryToDelete() se encuentra definida en la clase componente:

app/Http/Livewire/Dashboard/Category/Index.php

class Index extends Component
{

    use WithPagination;

    public $confirmingDeleteCategory;
    public $categoryToDelete;

    public function seletedCategoryToDelete(Category $category)
    {
        $this->confirmingDeleteCategory = true;
        $this->categoryToDelete = $category;
    }

    public function delete()
    {
        $this->dispatch("deleted");
        $this->confirmingDeleteCategory = false;
        $this->categoryToDelete->delete();
    }
}

Transcripción del vídeo

Antes de comenzar con la temática de este video Te quería comentar de que por aquí cambié de px que era lo que tenía antes en el th o los th y los tds ha simplemente p para que el pading sea tanto vertical como horizontal pero otra vez el estilo ya depende mucho de ti de como lo quieras adaptar y tu visión Entonces ahora sí el siguiente componente que vamos a querer presentar sería el de confirmation model Fíjate que este es bueno emplea el de model si escribimos acá model aquí Tenemos uno llamado modal y si lo verificamos un poco vas a ver que bueno es un poco abstracto realmente no es que sea complicado pero si tiene algunas clases de tel o algunos atributos de Alpine y lo más importante es que este está adaptado para lo que sería el esquema clásico que colocamos un título colocamos el mensaje y también la parte del Flutter que corresponde a los botones de acciones con su ccs listo para emplear entiéndase las clases de Tailwind mientras que esto es un poco más genérico lo puedes mostrar por ejemplo para colocar una imagen o algo por el estilo entonces aquí puedes ver una posible adaptación del dem modal ya que es un componente dentro otro componente Bueno ya no es algo nuevo porque ya lo hemos hecho pero aún así Creo que es importante mencionarlo Entonces vamos a emplear este porque es el que se adapta nuestras necesidades y qué es exactamente lo que queremos hacer recordemos que que por aquí tenemos un diálogo de confirmación claro es un poquito sobrio es el que tenemos definido ahí por defecto para lo que sería javascript y lo podemos aprovechar un poco más entonces importante para que entiendas la implementación que vamos a realizar que es un poquito se pudiera decir elaborada con respecto a lo que hemos hecho antes si realizamos acá vas a ver que tenemos un diálogo de confirmación aquí lo tenemos justamente este el de confirm de confirmación que tenemos acá por cada item es decir que si tuviéramos 10 categorías aquí listadas aquí tuviéramos 10 diálogos de confirmación pero no sucede lo mismo con este que solamente lo vamos a emplear una sola vez Es decir vamos a tener uno por n categorías aquí listadas y que por supuesto esas n categorías aquí listadas las pudiéramos eliminar con este diálogo Entonces a lo que quiero llegar es que necesitamos un mecanismo con el cual nosotros podamos primero seleccionar la categoría y luego adaptar el modal para que realice su acción que es o cancelar y no hacer nada o eliminarlo Entonces es el Por qué te voy a mostrar ahora un poquito la implementación es un poco lo que te comento aquí tenemos este diálogo y lo queremos obviamente cambiar por algo más bonito porque la idea de de esta sección es trabajar con los componentes y estilos ya sea que creemos algunos nosotros o reutilicemos lo existente Entonces el de confirmación lo Us de la siguiente forma y lo puedes ver ahí si habilitaste la parte parte de equipos y vas eliminar un equipo ya ahí lo puedes ver de igual manera ahorita lo vamos a emplear como te digo Aquí tenemos tres bloques el de título para colocar ahí como quien dice la acción principal delete en este caso categoría el contenido que indica Bueno vas a eliminar la categoría seguro que lo quieres eliminar y va a ser permanente y cualquier cosa y el foter para colocar ahí las acciones Cancelar y eliminar usualmente la implementación que vamos a llevar a cabo sería como la siguiente colocamos aquí el confirmation model por aquí colocamos lo que tú puedes bueno ver en pantalla en base a lo comentado las acciones bueno los botones típicos de si quieres eliminarlo no lo quieres eliminar etcétera y es un poco lo comentado.

Ahorita te lo explico de igual manera aquí la parte más interesante es que vamos a crear un método a nivel de la clase del componente que permita seleccionar Cuál es la categoría que vamos a eliminar y ya con eso vamos a adaptar el modal A cuál categoría queremos eliminar Entonces por aquí vamos a tener una propiedad que indica qué categoría queremos eliminar que es la que a la final vamos a eliminar mediante el método de delete por aquí tal cual puedes ver categoría to delete le colocamos un delete Entonces ese sería el esquema tenemos un paso más otra vez para seleccionar la categoría que queremos eliminar y aquí eliminamos una por vez entonces podemos adaptarlo de esa forma por lo demás aquí también tenemos una propiedad que indica si mostramos o no el diálogo de confirmación que eso sí no te lo he comentado pero s realiza mediante un v-model si es true lo mostramos y si es falso lo ocultamos Entonces es eso ya la explicación ya invertimos un rato el tiempo Entonces vamos a comenzar la adaptación.

Adaptación

Voy a colocarlo por aquí arriba y escribimos ahora lo que sería x confirmation modal voy a colocarlo perdón mejor por aquí abajo por los links aunque da igual realmente y lo escribí confirmation model por aquí vamos a colocar el slot el primero sería para el el título por ejemplo coloco otra vez aquí emplea el TR si quieres para las traducciones o coloca directamente el texto el siguiente Sería para e el contenido content Bueno si estás seguro que quieres eliminar la categoría seleccionada y y por aquí los botones de acciones que sería un poquito lo más elaborado aquí se llama footer según veíamos y por aquí colocamos x secondary button este creo que no lo hemos empleado pero es a la final un botón con otro diseño aquí empleamos el event clit y en el cual colocamos un toggle un toggle para la propiedad que ya vamos a crear colocamos toggle y aquí le indicamos el nombre de la propiedad confirm delete category:

<x-confirmation-modal wire:model="confirmingDeleteCategory">
    <x-slot name="title">
        {{ __('Delete Category') }}
    </x-slot>

    <x-slot name="content">
        {{ __('Are you sure you want to delete this category?') }}
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="$toggle('confirmingDeleteCategory')" wire:loading.attr="disabled">
            {{ __('Cancel') }}
        </x-secondary-button>

        <x-danger-button class="ml-3" wire:click="delete()"
            wire:loading.attr="disabled">
            {{ __('Delete') }}
        </x-danger-button>
    </x-slot>
</x-confirmation-modal>

Esto como te digo es la que nosotros vamos a definir por aquí a nivel de nuestra propiedad digo de nuestra clase colocamos public y aquí la tenemos esta public Disculpa public vamos a crear aquí una función que sea select category to delete la cual recibe una categoría sería la del listado tal cual veíamos y por aquí aquí colocamos t confirm delete category va a ser igual a true, entonces ahora sería otra que vamos a ampliar aquí que indica cuál es la que vamos a eliminar aquí sería category category to delete category to delete va a ser igual a la categoría que haya seleccionado el usuario y ya con eso sabemos cuál categoría vamos a querer eliminar y en el delete ya vamos a terminarlo ya que estamos acá ya no recibiríamos nada de esto voy a comentar ahí para tenerlo de referencia sino directamente category to delete aparte de esto también y ahorita vamos a darle sentido a esto confirm delete category sería igual a falso como te digo true para mostrarlo y falso para ocultarlo:

    public function delete()
    {
        $this->dispatch("deleted");
        $this->confirmingDeleteCategory = false;
        $this->categoryToDelete->delete();
    }

Entonces ya como en este punto terminó su propósito lo ocultamos bien esto sería todos los cambios que vamos a realizar aquí me parece vamos a regresar acá y esto lo que hace es el toggle se refiere coloco en falso y si es falso lo coloco en true ya tenemos Aquí una función que podemos emplear de gratis Entonces es lo que estamos haciendo la cual recibe el nombre de la propiedad que tenemos aquí definida y eso sería todo por acá entonces lo que hace aquí es si usualmente si esto se está mostrando entiéndase también significa que esto es true por lo tanto siempre va a colocar falso Porque la única forma que podamos acceder a este botón Es que esto se esté mostrando y por lo tanto tiene que ser true aquí lo otra vez escribí mal confirmation Entonces por aquí colocamos realmente el cualquier cosa voy a colocar aquí cancel o close lo que tú quieras y ahí tenemos la función de este botón el siguiente botón Sería para ya realizar la acción o la acción colocamos tanger Aquí voy a colocar delete category este sería rojo y este sería así como un gris y por aquí vamos a llamar al método que implementamos antes que sería el de delete y ahora en el listado en vez de llamar directamente al de delete llamaríamos al de confirm delete que definimos por acá este select category to delete y ahora ahora desde el de delete llamaríamos al select category to delete y lo demás se mantiene que pasar el parámetro bien Vamos a probar y te hago ahorita un repasito aquí ya aparece Okay por me aparece así Ahora que me equivoqué aquí okay Aquí me había faltado las impresiones de Play estaban así otro detallito importante es que por aquí le tenemos que definir el de War model colocamos acá el de con firming delete category y ahí no aparece no tenemos errores perfecto damos a delete Ah perdón No hemos cambiado el bendito evento Aquí también tenemos que quitar la propagación sería y ahora y ahora Aquí está tal cual puedes ver aparece un poquito pegado le podemos colocar Aquí también una clase que sea marg left de unos tres guardamos y ahí lo tenemos y ahí serían los botones Cancelar no hace nada voy a crear aquí uno rapidito para eliminarla a ver í la creo voy a la siguiente página y doy eliminar y puedes ver que funciona correctamente entonces en resumidas cuentas como te indicaba lo importante es que notes de que ahora tenemos solo un diálogo para todos los botones y es por eso que tenemos que hacer el paso de intermedio de seleccionar la categoría que queremos eliminar Y a partir de ahí tenemos la categoría que queremos eliminar ya la tenemos configurada a nivel de la clase y por lo tanto lo único que hacemos Es verificar mediante el diálogo de confirmación si la queremos eliminar o no la queremos eliminar y bueno lo básicamente lo que viste y esta propiedad Recuerda que es clave y la empleamos es para indicar Si queremos o no Mostrar nuestro diálogo de confirmación por lo demás es una implementaciones o implementaciones similares a lo que hicimos antes el cit para realizar dicha acción o alguna acción en particular y el resto para colocar el contenido así que sin más que decir vamos a la siguiente clase.

07-09-2024 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Laravel Livewire 11 Uso del componente de Modal o Dialogo