Use dispatch on custompage with filament 3
Hi, I've created a custom page using Laravel 10 and Filament 3. This page features a button that opens a modal and updates the model. Up to this point, everything works as expected. Once the user confirms the modal and saves the new model, I want to refresh the page or update the content modified by the modal.
The logic involves using ->after to send a dispatch event to update the content, but it doesn't seem to work. The dispatched events I send are not functioning at all.
How can I send an event that refreshes the page after the modal is confirmed?
Custom Page Class (Menu.php): use Illuminate\Http\Request; use Carbon\Carbon; use Carbon\CarbonPeriod; use Filament\Pages\Page; use Filament\Forms\Components; use Filament\Actions\EditAction; use Illuminate\Support\HtmlString;
class Menu extends Page implements HasForms, HasActions { use InteractsWithActions; use InteractsWithForms;
protected static ?string $navigationIcon = 'heroicon-o-document-text';
protected static string $view = 'filament.pages.menu';
public $debutsemaine;
public $finsemaine;
public $dates = [];
public $recettes = [];
public $matinmidisoir;
public $entreeplatdessert;
public $allrecette = [];
public $nbpersonne;
public $recipe;
public $ingredients = [];
public $recettemenu;
public $recettemenus;
public function mount(Request $request)
{
$next = $request->input('next');
$last = $request->input('last');
$datedebut = $request->input('datedebut');
if (isset($next)) {
$this->debutsemaine = Carbon::parse($next)->nextWeekday()->format('d-M-y');
$this->finsemaine = Carbon::parse($this->debutsemaine)->nextWeekday()->endOfWeek()->format('d-M-y');
} elseif (isset($last)) {
$this->debutsemaine = Carbon::parse($last)->previous(Carbon::MONDAY)->format('d-M-y');
$this->finsemaine = Carbon::parse($this->debutsemaine)->endOfWeek()->format('d-M-y');
} elseif (isset($datedebut)) {
$this->debutsemaine = Carbon::parse($datedebut)->format('d-M-y');
$this->finsemaine = Carbon::parse($this->debutsemaine)->endOfWeek()->format('d-M-y');
} else {
$this->debutsemaine = Carbon::now()->startOfWeek()->format('d-M-y');
$this->finsemaine = Carbon::now()->endOfWeek()->format('d-M-y');
}
$period = new CarbonPeriod(Carbon::parse($this->debutsemaine), 7);
foreach ($period as $date) {
$this->dates[] = $date->format('Y-m-d');
}
$this->recettes = Recette::all()->pluck('nomrecette', 'id')->prepend(trans('global.pleaseSelect'), '')->toArray();
$this->matinmidisoir = [ 'Midi', 'Gouter', 'Soir' ];
$this->entreeplatdessert = ['Entree' => 'Entree', 'Plat' => 'Plat', 'Dessert' => 'Dessert'];
$this->recettemenus = RecettesMenu::all()->keyBy('id')->toArray();
$this->allrecette = RecettesMenu::with('recette')
->whereDate('date', '>=', Carbon::parse($this->debutsemaine))
->whereDate('date', '<=', Carbon::parse($this->finsemaine))
->get()
->toArray();
}
protected function getRecettemenu($recettemenuId)
{
if ($this->recettemenu === null || $this->recettemenu->id !== $recettemenuId) {
$this->recettemenu = RecettesMenu::where('id', $recettemenuId)->first();
}
return $this->recettemenu;
}
public function showmenuAction()
{
return EditAction::make('showmenu')
->after(function ($record) {
$this->dispatchBrowserEvent('recettemenuUpdated', ['id' => $record->id, 'prixrecette' => '999']);
$this->dispatchBrowserEvent('post-created', ['title' => 'plop']);
$this->dispatchBrowserEvent('simple-event', ['message' => 'Hello World']);
})
->link()
->color('primary')
->record(function(array $arguments) {
return $this->getRecettemenu($arguments['recettemenu']);
})
->label(function(array $arguments) {
$recettemenu = $this->getRecettemenu($arguments['recettemenu']);
return new HtmlString('<span class="text-black text-xs">'. $recettemenu->recette->nomrecette .'</span>');
})
->form([
Forms\Components\Select::make('recette_id')
->relationship(name: 'recette', titleAttribute: 'nomrecette'),
Forms\Components\TextInput::make('nbpersonne')
->required()
->numeric(),
Forms\Components\TextInput::make('prixrecette')
->required()
->numeric(),
Forms\Components\Repeater::make('ingredientsRecette')
->columns(4)
->columnSpan('full')
->relationship()
->schema([
Forms\Components\Select::make('listingredients_id')
->relationship(name: 'listingredients', titleAttribute: 'nomingredient')
->required()
->label('Ingrédient'),
Forms\Components\TextInput::make('quantite')
->required()
->numeric()
->label('Quantité'),
])
->label('Ingredients de la Recette'),
]);
}
public function updateNbPersonne($recettemenuId)
{
$recettemenu = RecettesMenu::find($recettemenuId);
$recette = Recette::where('id', $recettemenu->recette_id)->first();
$pricerecette = $this->recettemenus[$recettemenuId]['nbpersonne'] * $recette->countfor_1;
$recettemenu->prixrecette = number_format($pricerecette, 2);
$recettemenu->nbpersonne = $this->recettemenus[$recettemenuId]['nbpersonne'];
$recettemenu->save();
$this->recettemenus[$recettemenuId]['prixrecette'] = $recettemenu->prixrecette;
}
}
Blade File:
@foreach ($allrecette as $recettemenu) @if ($recettemenu['perioderepas'] == $period && $recettemenu['entreeplatdessert'] == $entreeplatdessertd2 && \Carbon\Carbon::parse($recettemenu['date'])->isSameDay(\Carbon\Carbon::parse($date)))
<div class="w-full">
{{ ($this->showmenuAction)(['recettemenu' => $recettemenu['id']]) }}
</div>
<div class="w-1/6">
<input type="text" id="nbpersonnerecette_{{ $recettemenu['id'] }}" name="nbpersonnerepas" class="align-middle border rounded w-full h-3 p-1.5 text-[12px]" value="{{ $recettemenu['nbpersonne'] }}" wire:model="recettemenus.{{ $recettemenu['id'] }}.nbpersonne" wire:keydown.debounce.500ms="updateNbPersonne({{ $recettemenu['id'] }})">
</div>
<div class="w-1/6">
<input type="text"
id="prixrecette_{{ $recettemenu['id'] }}"
class="{{ $period }}_{{ \Carbon\Carbon::parse($date)->format('d-m-Y') }} align-middle appearance-none border-none w-full h-3 p-1.5 text-[12px]"
wire:model="recettemenus.{{ $recettemenu['id'] }}.prixrecette" value="{{ $recettemenu['prixrecette'] }}€" readonly>
</div>
</div>
@endif
and for test if dispatch is ok i have that :
<script>
window.livewire.on('priceUpdated', event => {
document.getElementById(`prixrecette_${event.id}`).textContent = `${event.price}€`;
});
</script>
<script>
window.livewire.on('post-created', () => {
console.log('plop');
});
</script>
Please or to participate in this conversation.