Optimizando el desarrollo en Laravel con Filament: Acciones

Imagen Acciones en Filament
Solucionex
29
Ago 25

Después de estructurar nuestra aplicación con recursos, dashboard y navegación, es hora de hacerla más interactiva. Hablamos de las acciones en los recursos, una herramienta que nos permite ejecutar tareas directamente desde los listados, vistas de detalle, etc. de los recursos, aportando dinamismo y control en nuestro panel administrativo.

 

Tipos de acciones

En Filament, las acciones son un pilar estructural que se pueden aplicar en diferentes contextos de la interfaz. Dependiendo del lugar donde se usen, pueden abrir modales, llamar a métodos de Livewire, lanzar eventos o redirigir a URLs. En este post, hablaremos sobre las acciones en componentes de Livewire.

Acciones en componentes Livewire personalizados

Estas acciones utilizan la clase Filament\Actions\Action. Pueden servir para abrir modales, ejecutar lógica de un componente, etc.

Para comenzar, necesitaremos crear un componente Livewire:

php artisan make:livewire ManageFav

Después, renderizamos nuestro componente en la página con:

@livewire('manage-fav')

 

Definir la acción

Para definir nuestra acción, debemos crear un método que devuelva la instancia de Action. El nombre del método debe coincidir con el nombre de la acción o terminar en Action.

public function favAction(): Action
	return Action::('add')
		->action(fn () => this->post->makeFav())

Una vez la hayamos definido, debemos incluirla en nuestra vista:

{{ $this->favAction }}
<x-filament-actions::modals />

 

Añadir argumentos

Podemos añadir argumentos a nuestra acción. Por ejemplo, si vamos a utilizar nuestra acción varias veces en diferentes entidades, podemos pasar el id de la entidad como un argumento para, posteriormente, recuperarlo y trabajar con él.

{{ ($this->makeFav)(['post' => $post->id]) }}

Luego, accedemos en nuestro action():

->action(fn (array $arguments) => Post::find($arguments['post'])?->delete())

 

Controlar la visibilidad

Podemos usar visible() o hidden() para controlar si debemos mostrar o ejecutar nuestra acción y después, combinarlo con isVisible() en la vista:

@if ($this->makeFav->isVisible())
   {{ $this->makeFav }}
@endif

 

Agrupar varias acciones

Si lo necesitamos, podemos agrupar varias acciones en un dropdown, usando <x-filament-actions::group>:

<x-filament-actions::group :actions="[
   $this->editAction,
   $this->viewAction,
   $this->favAction,
]" />

 

Conclusión

Las acciones en componentes Livewire nos ofrecenn una forma flexible de agregar interactividad a nuestro panel de administración. Integrarlas correctamente en nuestros componentes mejora la experiencia del usuario y mantiene nuestro código organizado.

 

Índice de posts sobre Filament

 

Fuentes: Documentación oficial de Filament

laravel