Filtros en el dashboard de Filament: HasFiltersForm e InteractsWithPageFilters

Hola, bienvenido. Los filtros del dashboard de Filament viven en la propia página: el trait HasFiltersForm añade un formulario encima de los widgets, y cada widget lee lo que se ha elegido en $this->pageFilters con el trait InteractsWithPageFilters. En esta lección vamos a sustituir el dashboard de serie por una página propia con el filtro de periodo del curso, los 5 presets de PeriodPreset más un rango personalizado, y lo vamos a conectar con Period.

Ya tenemos los datos, el periodo y las métricas, y aquí empezamos con la parte que se ve. Todavía no hay widgets: la página va a mostrar la etiqueta del periodo debajo del título, así comprobamos que el filtro funciona antes de pintar nada. Partimos del proyecto tal como lo dejó la lección 5, con el último commit hecho y composer qa en verde.

El recorrido del filtro empieza en la página. El trait HasFiltersForm usa a su vez HasFilters, que declara en la página una propiedad pública $filters con el atributo #[Url] de Livewire y deja activado $persistsFiltersInSession. Es decir, lo que elijas en el formulario va a la URL y además se guarda en la sesión, así que el periodo sobrevive a recargar la página y a salir y volver al dashboard sin que tengamos que hacer nada.

El formulario lo construye Filament con statePath('filters') y live() ya puestos, de modo que cada cambio en un campo actualiza $filters y vuelve a pintar la página. Al pintar cada widget, la página le pasa ese array como pageFilters. En el widget, el trait InteractsWithPageFilters declara public ?array $pageFilters con el atributo #[Reactive] de Livewire: cuando cambia el filtro de la página, el widget recibe el valor nuevo y se vuelve a pintar solo.

Nuestro filtro va a tener 3 claves: preset, from y to. ¿Y quién convierte ese array en algo con lo que se pueda trabajar? Un solo sitio: Period::fromFilters(), que vamos a escribir ahora. Si cada widget leyera $this->pageFilters['preset'] por su cuenta, tendríamos la misma traducción repetida en 6 widgets y en el PDF, y bastaría con que uno se equivocara con una fecha vacía para que el dashboard enseñara 2 periodos distintos a la vez. Así es como lo leerá un widget a partir de la lección 7:

En la lección 7 esa línea la escribiremos una sola vez, en un trait propio que usarán todos los widgets.