Filament•3mo ago

Call the "edit" modal for a record in a resource from a different page

Hi everyone. I have a "Reservation" Resource (and Model) that I use in a custom Livewire component to create a custom reservation calendar for a restaurant (Image attached). I'd like to be able to call the edit modal when I click on a reservation in the calendar, but I can't find the right way. - This link taught me about the mountable actions : - https://github.com/filamentphp/filament/blob/3.x/packages/actions/docs/06-adding-an-action-to-a-livewire-component.md - A few other searches here on discord taught me about the necessity to have a form but I can't seem to get the form schema directly from my resource ; - I already have the <x-filament-actions::modals /> call in my livewire component ; - I've searched and searched the github repo directly but searches get messy as they return help pages and tests, sometimes in contexts using the same nomenclature ("mountAction" for example). Can anyone point me in a direction that would allow me to call a "edit" method (or action) on my livewire component that wound return the modal and form of a normal "EditAction" for the resource and that I can pass my model to ? Thank you

Solution:

To anyone looking for a possible way to do this, I managed to do it by inferring code from @awcodes' "Quick Create" plugin : 1 / In your custom Livewire component add uses : ```use Filament\Forms\Concerns\InteractsWithForms; use Filament\Forms\Contracts\HasForms; [...]...

Jump to solution

2 Replies

Solution

Supergribbs•3mo ago

To anyone looking for a possible way to do this, I managed to do it by inferring code from @awcodes' "Quick Create" plugin : 1 / In your custom Livewire component add uses :

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
[...]
class [YOUR COMPONENT CLASS] extends Component implements HasForms, HasActions {
    use InteractsWithActions;
    use InteractsWithForms;

use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Forms\Contracts\HasForms;
[...]
class [YOUR COMPONENT CLASS] extends Component implements HasForms, HasActions {
    use InteractsWithActions;
    use InteractsWithForms;

2 / When you mount the component, bind the actions (here through a getActions() method which calls a getModelInstance() to pass the ID in the blade view :

[...]
use App\Models\[MODEL CLASS];
[...]
public function mount() {
    $this->getActions();
}
[...]
public function getActions() : array {
    $resource = App::make( 'App\Filament\Resources\[RESOURCE CLASS]' );
    return [
        CreateAction::make( 'create_app_models_[LOWERCASE RESOURCE NAME]' )
            ->model( 'App\Models\[MODEL CLASS]' )
            ->form( function( $arguments, $form ) use ( $resource ) {
                return $resource->form( $form->operation( 'create' )->columns() );
            } ),
        EditAction::make( 'edit_app_models_[LOWERCASE RESOURCE NAME]' )
            ->model( 'App\Models\[MODEL CLASS]' )
            ->record( function( $arguments ) {
                return [MODEL CLASS]::find( $arguments[ 'id' ] );
            } )
            ->form( function( $arguments, $form ) use ( $resource ) {
                return $resource->form( $form->operation( 'update' )->columns(), $this->getModelInstance( $arguments[ 'id' ] ) );
            } )
      ];
}

public function getModelInstance( $id ) {
    return [MODEL CLASS]::find( $id )->toArray();
}
[...]

[...]
use App\Models\[MODEL CLASS];
[...]
public function mount() {
    $this->getActions();
}
[...]
public function getActions() : array {
    $resource = App::make( 'App\Filament\Resources\[RESOURCE CLASS]' );
    return [
        CreateAction::make( 'create_app_models_[LOWERCASE RESOURCE NAME]' )
            ->model( 'App\Models\[MODEL CLASS]' )
            ->form( function( $arguments, $form ) use ( $resource ) {
                return $resource->form( $form->operation( 'create' )->columns() );
            } ),
        EditAction::make( 'edit_app_models_[LOWERCASE RESOURCE NAME]' )
            ->model( 'App\Models\[MODEL CLASS]' )
            ->record( function( $arguments ) {
                return [MODEL CLASS]::find( $arguments[ 'id' ] );
            } )
            ->form( function( $arguments, $form ) use ( $resource ) {
                return $resource->form( $form->operation( 'update' )->columns(), $this->getModelInstance( $arguments[ 'id' ] ) );
            } )
      ];
}

public function getModelInstance( $id ) {
    return [MODEL CLASS]::find( $id )->toArray();
}
[...]

Supergribbs•3mo ago

3/ In your component blade view, include the modals : <x-filament-actions::modals /> 4/ On every button or element where you need to bind a createAction, add this :

[...]
type="button"
wire:loading.attr="disabled"
wire:click="mountAction('create_app_models_[LOWERCASE RESOURCE NAME]')"
wire:target="mountAction('create_app_models_[LOWERCASE RESOURCE NAME]')"
aria-label="Add a [RESOURCE NAME]"

[...]
type="button"
wire:loading.attr="disabled"
wire:click="mountAction('create_app_models_[LOWERCASE RESOURCE NAME]')"
wire:target="mountAction('create_app_models_[LOWERCASE RESOURCE NAME]')"
aria-label="Add a [RESOURCE NAME]"

5/ Same thing on every button or element where you want to bind an editAction but with the ID passed :

wire:click="mountAction('edit_app_models_[LOWERCASE RESOURCE NAME]', { 'id': '{{ [ID OF THE TUPLE TO EDIT] }}' } )"
wire:target="mountAction('edit_app_models_[LOWERCASE RESOURCE NAME]', { 'id': '{{ [ID OF THE TUPLE TO EDIT] }}' } )"

wire:click="mountAction('edit_app_models_[LOWERCASE RESOURCE NAME]', { 'id': '{{ [ID OF THE TUPLE TO EDIT] }}' } )"
wire:target="mountAction('edit_app_models_[LOWERCASE RESOURCE NAME]', { 'id': '{{ [ID OF THE TUPLE TO EDIT] }}' } )"

And it ... kinda just works 🙂 See captures attached. Of course, this is a very straightforward version with hardcoded names (as it suits my needs here) but check https://github.com/awcodes/filament-quick-create/blob/3.x/src/QuickCreatePlugin.php for a more flexible way of doing this. (Ping @Zep Fietje, here is the explanation ! )

Gaming

Programming

Call the "edit" modal for a record in a resource from a different page