Filament•16mo ago

Load action modal in different livewire component

Hi there! I was wondering if there is a way to load a action modal/slide-over in a different livewire component than what it was created in. I am looking at needing this as the app layout is based on normal blade templates, and z indexes and stuff interfer and makes the slide overs and modal render "inside" the space for the component which called it, not the whole page (which is wanted behaviour). Any way to do this? Tried having a read at the docs, but my brain is completely fried...

Solution:

Well... yeah it's not as simple as a Filament action, but I think in this example the Livewire component would contain both the modal and the form, something like this: ```html <div id="custom-livewire-component"> <x-filament::modal id="custom-form"> <form wire:submit="create">...

Jump to solution

19 Replies

skybertOP•16mo ago

Quick mockup of wanted behaviour:

skybertOP•16mo ago

Additional info is that only livewire used here is inside the square in the middle, rest is "normal" blade

Patrick Boivin•16mo ago

Am I reading this correctly: You have a custom table in an area of your page, the table displays correctly but the action modals coming from the table are not? You would like the modals to be mounted towards the end of your DOM instead?

skybertOP•16mo ago

You are Reading it 100% correct 🙂

Patrick Boivin•16mo ago

Cool, and is this a row action or a header action? What does the action do actually? (just out of curiosity)

skybertOP•16mo ago

Row action 🙂 It should trigger a edit form simply. Code:

    public function table(Table $table): Table
    {
        return $table
            ->query(Attribute::query()->where('attribute_group_id', $this->getAttributeGroupsProperty()->pluck('id')->toArray()))
            ->defaultGroup(Group::make('attributeGroup.handle')->label('Attributt Gruppe')->getTitleFromRecordUsing(fn (Attribute $record): string => ucfirst($record->attributeGroup->name->first())))
            ->actions([
                Action::make('edit')
                    ->label('Rediger')
                    ->form([
                        TextInput::make('name')
                            ->label('Attributt Navn')
                            ->required(),
                    ])
                    ->slideOver()
                    ->icon('heroicon-m-pencil-square')
                    ->iconButton(),
            ])
            ->columns([
                TextColumn::make('name')->label('Attributt Navn'),
                LunarFieldType::make('type')->label('Attributt Type'),
            ]);
    }

    public function table(Table $table): Table
    {
        return $table
            ->query(Attribute::query()->where('attribute_group_id', $this->getAttributeGroupsProperty()->pluck('id')->toArray()))
            ->defaultGroup(Group::make('attributeGroup.handle')->label('Attributt Gruppe')->getTitleFromRecordUsing(fn (Attribute $record): string => ucfirst($record->attributeGroup->name->first())))
            ->actions([
                Action::make('edit')
                    ->label('Rediger')
                    ->form([
                        TextInput::make('name')
                            ->label('Attributt Navn')
                            ->required(),
                    ])
                    ->slideOver()
                    ->icon('heroicon-m-pencil-square')
                    ->iconButton(),
            ])
            ->columns([
                TextColumn::make('name')->label('Attributt Navn'),
                LunarFieldType::make('type')->label('Attributt Type'),
            ]);
    }

The structure looks something like this:

base.blade.php
-side-menu.blade.php
--attribiuteEdit.blade.php
---livewire:tenant.setttings

base.blade.php
-side-menu.blade.php
--attribiuteEdit.blade.php
---livewire:tenant.setttings

And on the last one there the filament stuff is loaded and livewire first utilized Code for that file so you have an idea:

@extends('../layouts/side-menu')

@section('subhead')
    <title>Rediger Attributt - {{ tenant('company') }} ({{ config('app.name', 'Laravel') }})</title>
@endsection

@section('subcontent')
    <div class="intro-y mt-8 flex items-center">
        <h2 class="mr-auto text-lg font-medium">Butikk Innstillinger</h2>
    </div>
    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 flex flex-col-reverse lg:col-span-3 lg:block 2xl:col-span-2">
            <div class="intro-y box mt-5">
                <div class="border-t border-slate-200/60 p-5 dark:border-darkmode-400">
                    <x-tickt.menus.settings-menu :menu_content="App\Menus\StoreSettings::menu()"/>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-9 2xl:col-span-10">
            <div class="intro-y box lg:mt-5">
                <div class="flex items-center border-b border-slate-200/60 p-5 dark:border-darkmode-400">
                    <h2 class="mr-auto text-base font-medium">Rediger Attributt: {{ $handle }}</h2>
                </div>
                <div class="p-5">
                    <livewire:tenant.settings.store.attributes.edit handle="collection" />
                </div>
            </div>
        </div>
    </div>
@endsection

@extends('../layouts/side-menu')

@section('subhead')
    <title>Rediger Attributt - {{ tenant('company') }} ({{ config('app.name', 'Laravel') }})</title>
@endsection

@section('subcontent')
    <div class="intro-y mt-8 flex items-center">
        <h2 class="mr-auto text-lg font-medium">Butikk Innstillinger</h2>
    </div>
    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 flex flex-col-reverse lg:col-span-3 lg:block 2xl:col-span-2">
            <div class="intro-y box mt-5">
                <div class="border-t border-slate-200/60 p-5 dark:border-darkmode-400">
                    <x-tickt.menus.settings-menu :menu_content="App\Menus\StoreSettings::menu()"/>
                </div>
            </div>
        </div>
        <div class="col-span-12 lg:col-span-9 2xl:col-span-10">
            <div class="intro-y box lg:mt-5">
                <div class="flex items-center border-b border-slate-200/60 p-5 dark:border-darkmode-400">
                    <h2 class="mr-auto text-base font-medium">Rediger Attributt: {{ $handle }}</h2>
                </div>
                <div class="p-5">
                    <livewire:tenant.settings.store.attributes.edit handle="collection" />
                </div>
            </div>
        </div>
    </div>
@endsection

Patrick Boivin•16mo ago

Ok, very cool! So first, I'm not sure I have the best solution... maybe someone will correct me. But I think I have an idea.

skybertOP•16mo ago

Rockin! Cause i have nonen hah, tried a few creative ways but have got none working

Patrick Boivin•16mo ago

Do you already have a @yield in your Blade where the modal should go ideally?

skybertOP•16mo ago

Nope, but thats quick to add

Patrick Boivin•16mo ago

Yep, and I presume you're comfortable with Livewire events?

skybertOP•16mo ago

Familiar with those yep 🙂 Have thought about that route, but have not quiiiteee seen how it could be hooked in "properly" First time filament user, coming from Nova so familiar land but quite unfamiliar at same time

Patrick Boivin•16mo ago

Ok so here's my idea: Add a @yield at the appropriate place in your page layout. Then, create a custom Livewire component that will be your custom modal and form (hidden by default). Then, from your table action, dispatch an event to open the custom modal, and pass the $record->id from the row so that the form can load and save to the appropriate place. Let me know if this sounds unclear, I think I can point you to some useful parts of the docs.

skybertOP•16mo ago

Hmm, i see the way you are thinking. So potentially then inside there load up a filament form? And for the modal/slide-over itself utilize this component? https://filamentphp.com/docs/3.x/support/blade-components/modal How would i then pass to the livewire component hmm?

Modal Blade component - Core Concepts - Filament

skybertOP•16mo ago

Or do i then need to "scratch" the filament stuff and "DIY" it you think?

Solution

Patrick Boivin•16mo ago

Well... yeah it's not as simple as a Filament action, but I think in this example the Livewire component would contain both the modal and the form, something like this:

<div id="custom-livewire-component">
    <x-filament::modal id="custom-form">
        <form wire:submit="create">
            {{ $this->form }}
            
            <button type="submit">
                Submit
            </button>
        </form>
    </x-filament::modal>
</div>

<div id="custom-livewire-component">
    <x-filament::modal id="custom-form">
        <form wire:submit="create">
            {{ $this->form }}
            
            <button type="submit">
                Submit
            </button>
        </form>
    </x-filament::modal>
</div>

Patrick Boivin•16mo ago

Another option possibly is to render just a Filament form with an independant action in it, then trigger this action from the table action.

Patrick Boivin•16mo ago

https://filamentphp.com/docs/3.x/actions/adding-an-action-to-a-livewire-component

Adding an action to a Livewire component - Actions - Filament

skybertOP•16mo ago

Hmm, from that i got an idea which i am starting to think: why did i not just to that: I can potentially just do a full page livewire component Wow

Gaming

Programming

Load action modal in different livewire component