How to synchronize filters between Livewire components in Filament Dashboard Custome Page?
i'm working on a Filament dashboard that displays orders and their locations on a map. I have two Livewire components: ListOrders and AddressMapWidget.
in dashboard-order.blade.php
@vite('resources/css/app.css')
<x-filament-panels::page>
<div class="">
@livewire('widgets.address_map_widget')
@livewire('list-orders',)
</div>
</x-filament-panels::page>
his component filters orders by date (today or yesterday) using buttons. Here is a simplified version of the component:
class ListOrders extends Component
{
public $activeDate = 'today'; // Default active date is 'today'
public function setActiveDate($date)
{
$this->activeDate = $date;
}
public function getFilteredOrder()
{
$dateFilter = $this->activeDate === 'yesterday' ? Carbon::yesterday() : Carbon::today();
// Additional logic
}
public function render()
{
return view('livewire.list-orders', [
'orders' => $this->getFilteredOrders(),
]);
}
}
AddressMapWidget
This component shows markers on the map for the addresses of the orders. Here is a simplified version of the component:
class AddressMapWidget extends MapWidget
{
protected function getData(): array
{
$orders = Order::with('address')->get();
$data = [];
foreach ($orders as $order) {
$data[] = [
'location' => [
'lat' => $order->address->lat ?? 0,
'lng' => $order->address->lng ?? 0,
],
'label' => 'Address (' . $order->address->address . ')',
];
}
return $data;
}
}
I want the map in AddressMapWidget to update automatically when the filter is changed in ListOrders, showing only markers that match the selected date. How can I make these components communicate so the map updates based on the date filter in ListOrders? Are there best practices for this in Filament or Livewire?2 Replies
Maybe using livewire events?
https://filamentphp.com/content/leandrocfe-how-to-refresh-widgets-when-table-actions-are-fired
This is using LW2, but you could use the same approach in LW3
https://livewire.laravel.com/docs/events
Filament
How to Refresh Widgets When Table Actions Are Fired by Leandro Ferr...
A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS.
Laravel
Events | Laravel
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
yes I used Livewire3, thank you for providing a reference, I will try it thank you very much
I have a situation where I have multiple Livewire Components, such as an Order component and a Driver component. When I interact with the Order component, the Driver component updates automatically. However, the AddressMapWidget does not update automatically, and I have to manually reload the page to see the changes in the AddressMapWidget. Could this be because the AddressMapWidget extends from MapWidget rather than from a Livewire Component? Is there a solution to ensure that the AddressMapWidget updates automatically when I interact with the Order component?