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
{
    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!

Jump to solution

CCORONEL I want to open a modal from a notification. But 'Filament\Notifications\Actions'...

LeandroFerreira•7/9/24, 2:21 PM

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

Render hooks - Core Concepts - Filament

CORONELOP•7/9/24, 2:24 PM

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•7/9/24, 4:06 PM

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!