Laravel blade components

Cuando se tiene una vista con cierto código html y que es reutilzable en otras partes del código, se suele crear un componente de blade, en el que se guarda el código html y las clases utilizadas.

Con esto solamente habrá que llamar al componente para que muestre su contenido, simplificando el código de la aplicación web, evitando copiar, pegar, solventar erroes muchos sitios, tareas redundantes, duplicados innecesarios. En fin, crear componentes de blade mejora la codificación, ahora tiempo y aumenta la productividad del desarrolador.

Crear un componente de blade

Ubicarse en la carpeta resources\views y crear si no lo estuviera ya, una carpeta llamada components. Dentro crear un nuevo fichero con extensión blade.php. Es necesario que el nombre de fichero sea así para que funcione según las convenciones de laravel, por ejemplo:

resources\views\components\table.blade.php

Contenido de un componente de blade

Un ejemplo puede ser el siguiente

Tabla centrada

<div class="flex flex-col">
   <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
     <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
  <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
   {{$slot}}
   </div> 
</div>
</div>
</div>

Sincronizar valores entre componente Blade y el controlador

Se pueden llamar a componente de blade o utilizar componentes de jetstream, que en realidad son componentes de blade pero con ciertas clases que dan una apariencia optimizada y responsiva.

LLamar a componente de blade

Controlador: crear propiedad $nombrepropiedad
Componente blade: Sincronizar valores se hace etiquetando con wire:model="nombrepropiedad"
Mostrar contenido de la propiedad en la vista {{$nombrepropiedad}}

LLamar a componente de Jetstream

Para utilizar un componente de jetstream hay primero que publicar sus clases.

Después ya se pueden llamar utilizando la etiqueta <x-jet-nombredelcomponente>. Por ejemplo un input para buscar

<x-jet-input class="flex-1 mr-4" placeholder="Buscar..." type="text" wire:model=" nombrepropiedad"/>

Llamar con eventos Eventos

• Evento click: al hacer clic en el componente llamar al método del componente wire:click="metodo"

En el caso de que wire: no muestre los cambios en la vista, seguramente es porque no está todo el componente que al que se llama, dentro de la misma etiqueta div.

<div>
... codigo donde se llama a wire:
</div>

Metodos mágicos

Para pasar información desde la vista a al componente/controlador se utilizan los métodos mágicos. Estos se llaman así porque en este framework laravel, es sorprendente fácil que pueda comunicarse con eventos como un clic de ratón, de la vista al controlador de forma tán fácil simplemente con llamadas de código.

Por ejemplo:

Hacer clic en un botón y cambie la propiedad de ocultar una ventana modal, se utliza wire:onClic seguido del simbolo $ y el método set, pasando por parámetro el nombre de la variable y el valor de ésta.

<x-jet-secondary-button wire:onClick="$set('open', false)">
Cancelar
</x-jet-secondary-button>

Evitar renderizar vista al escribir

Las propiedades quedan vinculadas con los componentes, y cada vez que se interactiva con ellos ser renderiza y vuelve a refrescarse la vista. Esto nos lo más óptimo y lo que interesa es que se guarden los datos cuando se envíe el formulario.

Por ejemplo en un campo input, no hace falta que se renderize cada vez que se escribe, si no, simplemente que se guarde el valor del campo cuando se desencadene una acción como hacer clic en un botón.

Para esto se utiliza le método wire:model.defer

<x-jet-input type="text" class="w-full" wire:model.defer="title"/>

Refrescar vista después de modificar en base de datos

Para que la vista se entere y refresque con los datos modificados a través del controlador, hay que emitir eventos. Estos eventos se emiten en el controlador, por ejemplo después de guardar un registro en la base de datos, y deben ser recogidos por otro controlador de la vista encargada de renderizar y mostrar los nuevos datos.

El evento se emite con el método emit, y se pasa por parámetro un nombre

Código ejemplo en el controlador que guarda en bases de datos:
$this->emit('renderizar');

Recoger evento con Listeners

El evento lo recoge el controlador de la vista donde muestra los datos que visualiza una tabla. En éste hay que declarar la variable listeners, asignando el nombre del evento (renderizar) al que espera y el método del controlador que ejecuta (render)

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'];

Aprovechando el refresco o nuevo renderizado de la vista, se deben dejar los campos en blanco, utlizando el método reset para dejar las propiedades sin valor. Se le pasa tantos parámetros como propiedades del controlador se desee resetear. En el ejemplo, dejar los inputs de titulo y contenido en blanco después de guardar un registro.

$this->reset(['title', 'content']);

Estados de carga

Para dar un efecto cuando se está ejecutando un proceso, se puede utlizar el método loading, que realiza una mientras dure el tiempo de ejecución.

Mostrar componente con loading

Por ejemplo al guardar datos de un formulario, enseñar un mensaje informativo "Cargando ...".

<span
wire:loading.flex>
Cargando ...
</span>

Además si se desea que sea específico a un método del controlador, se indica con target y el nombre.

<span
wire:loading
wire:target="save">
Cargando ...
</span>

El estilo que toma wire:loading se visualiza en un display inline blog. Para cambiar esto, se puede cambiar utlizando el display flex, poniendo un punto y añadiendo flex. De igual forma utlizar otro display como grid, inline, table.

<span
wire:loading.flex
wire:target="save">
Cargando ...
</span>

Ocultar componente con loading

También se puede conseguir el efecto contrario, es decir, que se oculte un componente mientras dura el proceso en ejecución. Para esto utlizar el metodo loading.remove

Por ejemplo, ocultar el botón de crear mientas se está guardando el formulario en la base de datos.

<x-jet-danger-button
wire:click="save"
wire:loading.remove
wire:target="save">
Crear
</x-jet-danger-button>

Cambiar estilos y colores del componente con loading

Para cambiar la clase css utlizar loading.class seguido de la clase a utilizar.

Por ejemplo el botón cambie a un color azul.

<x-jet-danger-button
wire:click="save"
wire:loading.class="bg-blue-500"
wire:target="save">
Crear
</x-jet-danger-button>

Deshabilitar componente con loading

Para que el componente la clase css utlizar loading.attr seguido de disabled. Además que mientras esté deshabilitado tenga un tono menos opaco, para ello utilizar class dentro de la etiqueta del componente.

Por ejemplo, que el botón de Crear se quede deshabilitado.

<x-jet-danger-button
wire:click="save"
wire:loading.attr="disabled"
wire:target="save"
class="disabled:opacity-25">
Crear
</x-jet-danger-button>

Ejemplos de componentes habituales en un formulario

Los componentes jetstream que más se usan suelen ser los siguentes:

• Botones
  • <x-jet-secondary-button> es un botón con fondo blanco que no destaca.
  • <x-jet-danger-button> es un botón de color rojo que se utliza para destacar, por ejemplo al borrar o actualizar.

Resumen de código

• {{slot}}
• <x-jet-input>
• wire:model=" nombrepropiedad"
• wire:model.defer="nombrepropiedad"
• wire:click="metodo"
• wire:click="$set('open', false)
• wire:loading.flex
• wire:loading.flex (grid, inline, table, etc.)
• wire:loading.remove
• wire:loading.class="bg-blue-500"
• wire:loading.attr="disabled"
• wire:target="save"
• class="disabled:opacity-25"
• $this->emit('renderizar');
• public $listeners = ['rendererizar' => 'render'];
• public $listeners = ['render'];
• $this->reset(['open', 'title', 'content']);