Filament•2mo ago

Add modal actions in panel header

I wanna add a dropdown to the panel header next to the user menu and then use the regular filament Actions (inside an ActionGroup). I know, that this is something similar to awcodes/filament-quick-create, but I need way more customization options. I could get the dropdown/ActionGroup already working:

// Service provider register():
FilamentView::registerRenderHook(
    PanelsRenderHook::USER_MENU_BEFORE,
    fn (): string => Blade::render("@livewire('admin.quick-create-menu')"),
);

// Service provider register():
FilamentView::registerRenderHook(
    PanelsRenderHook::USER_MENU_BEFORE,
    fn (): string => Blade::render("@livewire('admin.quick-create-menu')"),
);

<!-- admin/quick-create-menu.blade.php -->
<div class="flex items-center gap-2">
    {{ $quickCreateMenu }}
</div>

<!-- admin/quick-create-menu.blade.php -->
<div class="flex items-center gap-2">
    {{ $quickCreateMenu }}
</div>

// QuickCreateMenu.php
class QuickCreateMenu extends Component implements HasActions
{
    use InteractsWithActions;

    public function render()
    {
        return view('livewire.admin.quick-create-menu', [
            'quickCreateMenu' => ActionGroup::make([
                Action::make("my-resource")
                  ->label("Create my resource")
                  ->url(route(...))
            ])
              ...
        ]);
    }
}

// QuickCreateMenu.php
class QuickCreateMenu extends Component implements HasActions
{
    use InteractsWithActions;

    public function render()
    {
        return view('livewire.admin.quick-create-menu', [
            'quickCreateMenu' => ActionGroup::make([
                Action::make("my-resource")
                  ->label("Create my resource")
                  ->url(route(...))
            ])
              ...
        ]);
    }
}

This is already working. I can click on the ActionGroup-icon in the header, which opens the dropdown and then click on the "Create my resource" link which opens the Create-Page. So far, so good. The problem comes with actions with modals. None of these actions are doing anything:

Action::make("xxx")
      ->requiresConfirmation()
      ->action(fn() => dd(1)),
Action::make("zzz")
    ->schema([
        TextInput::make("test")
    ])
    ->action(fn($data) => dd($data))

Action::make("xxx")
      ->requiresConfirmation()
      ->action(fn() => dd(1)),
Action::make("zzz")
    ->schema([
        TextInput::make("test")
    ])
    ->action(fn($data) => dd($data))

Any ideas how to fix this?

9 Replies

LeandroFerreira•2mo ago

did you add <x-filament-actions::modals /> in the view?

bernhardOP•2mo ago

Thanks for responding! I tried this alredy:

<div class="flex items-center gap-2">
    {{ $quickCreateMenu }}
    <x-filament-actions::modals />
</div>

<div class="flex items-center gap-2">
    {{ $quickCreateMenu }}
    <x-filament-actions::modals />
</div>

Not working

awcodes•2mo ago

Make sure you are on ^4.0.2 and run artisan filament:assets.

bernhardOP•2mo ago

Am on 4.0.3 and command was used

awcodes•2mo ago

Maybe this: https://filamentphp.com/docs/4.x/components/action#adding-the-action

Rendering an action in a Livewire component - Components - Filament

awcodes•2mo ago

If the actions aren’t defined on the liverwire component they don’t get auto registered in the action cache

bernhardOP•2mo ago

I have this already tried I guess

<div class="flex items-center gap-2">
    {{ $this->quickCreateMenuAction }}
    <x-filament-actions::modals />
</div>

<div class="flex items-center gap-2">
    {{ $this->quickCreateMenuAction }}
    <x-filament-actions::modals />
</div>

public function quickCreateMenuAction(): ActionGroup
{
    return ActionGroup::make(...)
            ->icon('heroicon-o-plus')
            ->iconButton();
}

public function quickCreateMenuAction(): ActionGroup
{
    return ActionGroup::make(...)
            ->icon('heroicon-o-plus')
            ->iconButton();
}

Property [$quickCreateMenuAction] not found on component: [admin.quick-create-menu] Ok

public function quickCreateMenuAction(): Action
{
    return Action::make("quickCreateMenu")
        ->requiresConfirmation();
}

public function quickCreateMenuAction(): Action
{
    return Action::make("quickCreateMenu")
        ->requiresConfirmation();
}

Is working. So i guess it doesn't work with ActionGroups

awcodes•2mo ago

Hmm, sounds like it might be a bug. I would expect groups to work too. 🤔

bernhardOP•2mo ago

well i think, it has to do with not having a name. as far as i understand the docs, the name of the action has to be the same as the name of the method (+Action). but a Group has no name

Gaming

Programming

Add modal actions in panel header

Did you find this page helpful?