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

Open custom modal from anywhere

Solution

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

Open custom modal from anywhere

Open custom modal from anywhere

Similar Threads

Similar Threads

Similar Threads