Filament•4mo ago

Open custom modal from anywhere

I want to open a modal from a notification. But 'Filament\Notifications\Actions' doesn't seem to have this capability. So i'm thinking i should dispatch an event to open the modal, but since it's from a notification, the user may be in any part of the system. So where should i put the modal code/event-listener?

Solution:

Allright, RenderHooks are definitely the solution here. I created a Livewire Component to handle the modal opening, and also a custom Action class (PdfListNotificationAction) to encapsulate all the mambo jambo required to set the custom modal content etc: ``` class ListPdfsModal extends Component implements HasForms, HasActions {...

Jump to solution

3 Replies

LeandroFerreira•4mo ago

I think you can register the modal using render hooks https://filamentphp.com/docs/3.x/support/render-hooks#registering-render-hooks Something like this

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_END,
    fn (): View => view('custom-modal')
);

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_END,
    fn (): View => view('custom-modal')
);

<!-- views/custom-modal.blade.php -->
<x-filament::modal id="custom-modal">
    <div>
        Content...
    </div>
</x-filament::modal>

<!-- views/custom-modal.blade.php -->
<x-filament::modal id="custom-modal">
    <div>
        Content...
    </div>
</x-filament::modal>

$this->dispatch('open-modal', id:'custom-modal');

$this->dispatch('open-modal', id:'custom-modal');

Render hooks - Core Concepts - Filament

CORONEL•4mo ago

Yeah, after a little more digging, i thought the same. I'm trying to get it done using RenderHooks, i'll post the code if its successful!

Solution

CORONEL•4mo ago

class ListPdfsModal extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;
    protected $listeners = ['openPdfListModal' => 'openPdfList'];
    public Service $service;
    public function openPdfList($service_id)
    {
        $this->dispatch('close-modal', id: 'database-notifications');
        $this->service = Service::find($service_id);
        $this->mountAction('list');
    }
    public function listAction(): Action
    {
        return PdfListNotificationAction::make('visualizar-pdfs')
            ->service($this->service);
    }

class ListPdfsModal extends Component implements HasForms, HasActions
{
    use InteractsWithActions;
    use InteractsWithForms;
    protected $listeners = ['openPdfListModal' => 'openPdfList'];
    public Service $service;
    public function openPdfList($service_id)
    {
        $this->dispatch('close-modal', id: 'database-notifications');
        $this->service = Service::find($service_id);
        $this->mountAction('list');
    }
    public function listAction(): Action
    {
        return PdfListNotificationAction::make('visualizar-pdfs')
            ->service($this->service);
    }

In the custom component view, i add the filament-action-modal component:

<div> <x-filament-actions::modals /> </div>

<div> <x-filament-actions::modals /> </div>

I register the the RenderHook in my AppServiceProvider:

FilamentView::registerRenderHook(
     PanelsRenderHook::BODY_END,
     fn (): string => Blade::render('@livewire(\'list-pdfs-modal\')'),
);

FilamentView::registerRenderHook(
     PanelsRenderHook::BODY_END,
     fn (): string => Blade::render('@livewire(\'list-pdfs-modal\')'),
);

Inside the Job that fires the Database Notification, i just pass an Action that dispatches the event my custom Component listens to:

Notification::make('pdf-job-done')
            ->title('PDFs Criados com sucesso!')
            ->actions([
                Action::make('visualizar-pdfs')
                    ->dispatch('openPdfListModal', [$this->service->id])
            ])->sendToDatabase($recipient);

Notification::make('pdf-job-done')
            ->title('PDFs Criados com sucesso!')
            ->actions([
                Action::make('visualizar-pdfs')
                    ->dispatch('openPdfListModal', [$this->service->id])
            ])->sendToDatabase($recipient);

And voilá! Works like a charm!

Gaming

Programming

Open custom modal from anywhere