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:
AddressMapWidget
This component shows markers on the map for the addresses of the orders. Here is a simplified version of the component:
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?
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?
