Filament•2y ago

Create Action that opens a modal in a custom Livewire Component

Is it possible to create actions that opens a modal in a custom livewire component inside a filament custom page, if it is possible. What are the steps?

11 Replies

benedict.regoreOP•2y ago

here is my livewire component named Folder Class

<?php

namespace App\Filament\Livewire\AssetManagement;

use Domain\AssetManagement\Models\Folder as FolderModel;
use Livewire\Component;
use Filament\Pages\Actions;

class Folder extends Component 
{
    public $folder;

    public function mount(FolderModel $folder)
    {
        $this->folder = $folder;
    }

    public function render()
    {
        return view('filament.components.livewire.asset-management.folder');
    }

    public function getActions(): array
    {
        return [
            Actions\ActionGroup::make([
                Actions\Action::make('delete')
                        // ->label('Delete Folder')
                        // ->modalHeading('Delete Folder')
                        // ->modalWidth("md")
                        // ->requiresConfirmation()
                        // ->action('deleteFolder)
            ])->color('secondary'),
        ];
    }

    public function deleteFolder(){
        dd("DELETED");
    }

    
}

<?php

namespace App\Filament\Livewire\AssetManagement;

use Domain\AssetManagement\Models\Folder as FolderModel;
use Livewire\Component;
use Filament\Pages\Actions;

class Folder extends Component 
{
    public $folder;

    public function mount(FolderModel $folder)
    {
        $this->folder = $folder;
    }

    public function render()
    {
        return view('filament.components.livewire.asset-management.folder');
    }

    public function getActions(): array
    {
        return [
            Actions\ActionGroup::make([
                Actions\Action::make('delete')
                        // ->label('Delete Folder')
                        // ->modalHeading('Delete Folder')
                        // ->modalWidth("md")
                        // ->requiresConfirmation()
                        // ->action('deleteFolder)
            ])->color('secondary'),
        ];
    }

    public function deleteFolder(){
        dd("DELETED");
    }

    
}

view

<x-filament::card>
    <div class="flex items-center justify-between space-x-2 rtl:space-x-reverse">
        <x-dynamic-component class="h-12" component="heroicon-s-folder" />
        <div class="grow">
            <span>
                {{$folder->name}}
            </span>
        </div>

        <x-filament::pages.actions :actions="$this->getActions()" class="shrink-0" />
    </div>
</x-filament::card>

<x-filament::card>
    <div class="flex items-center justify-between space-x-2 rtl:space-x-reverse">
        <x-dynamic-component class="h-12" component="heroicon-s-folder" />
        <div class="grow">
            <span>
                {{$folder->name}}
            </span>
        </div>

        <x-filament::pages.actions :actions="$this->getActions()" class="shrink-0" />
    </div>
</x-filament::card>

wyChoong•2y ago

What is not working

benedict.regoreOP•2y ago

the modal is not opening

LeandroFerreira•2y ago

Did you check this section? https://filamentphp.com/docs/2.x/admin/pages/actions

Filament

Actions - Pages - Admin Panel - Filament

The elegant TALL stack admin panel for Laravel artisans.

wyChoong•2y ago

Is this a livewire component or custom page?

benedict.regoreOP•2y ago

yup but ive got this error Typed property Filament\Pages\Actions\Action::$livewire must not be accessed before initialization class Folder extends Component { public $folder; public function mount(FolderModel $folder) { $this->folder = $folder; } public function render() { return view('filament.components.livewire.asset-management.folder'); } public function getActions(): array { return [ Actions\ActionGroup::make([ Actions\Action::make('delete') ->action('deleteFolder') ->requiresConfirmation() ])->color('secondary'), ]; } public function deleteFolder(){ dd("DELETED"); } } livewire component

wyChoong•2y ago

Your page should wrap in <x-filament::page>

benedict.regoreOP•2y ago

yep i wrap it, heres my custom page

<x-filament::page>
    {{-- the folders --}}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 ">
        @foreach($this->getRootFolders() as $folder)
        <livewire:filament.livewire.asset-management.folder wire:key='{{$folder->id}}' :folder="$folder" />
        @endforeach
    </div>
</x-filament::page>

<x-filament::page>
    {{-- the folders --}}
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 ">
        @foreach($this->getRootFolders() as $folder)
        <livewire:filament.livewire.asset-management.folder wire:key='{{$folder->id}}' :folder="$folder" />
        @endforeach
    </div>
</x-filament::page>

wyChoong•2y ago

This is because the your custom component is not setup for filament action There are ways to make it works but might be too complicated to test

benedict.regoreOP•2y ago

okay thanks

Dan Harrin•2y ago

in v3 you can attach actions to custom lw components

Gaming

Programming

Create Action that opens a modal in a custom Livewire Component