Action modal customization

[bvicini]

Package

Panel builder

Package Version

v3.2.99

How can we help you?

I want to open a modal when clicking a table action button, but having 3 buttons: Cancel and other two. I simply need to check the returned value (the pressed button). Is there a way to replace the default buttons or at least add buttons to be inline with those? Tried to work with modalContent() but the icon and the heading are not styled as in the modal appearing with requireConfirmation() (the icon i smaller and is right aligned, same as the heading): it's very frustrating to have dialogs styled differently with the same functions called! Tried to ignore modalIcon and modalHeading and display it myself with terrible styling results (the output is shifted to the right even if I declare text-center o use flex). Inside modalContent() i don't find a way to use the information on icon and heading. Is there a simple way to obtain the goal to have only the buttons I need in the modal?

[Lisfe00]

You can add actions to the table along with the default actions or remove them by removing
Tables\Actions\EditAction::make() and Tables\Actions\DeleteAction::make().

To style modal you can use

->form([]) to add form
'->modalDescription()'
'->modalHeading()'
'->modalIcon()'
->modalWidth()
->modalSubmitActionLabel()
->modalSubmitAction()
and others...

in the ->modalContent() you can out a view blade.
Example: ->modalContent((fn () => view('path'))

[bvicini]

Thanks. I already tried all of those (except maybe "others"), but the final view isn't really custom, because I can only insert my content as as a slot between the output of modalicon()/modaleheading() and two buttons (cancel and accept). Is this uncorrect or did I something wrong? Didn't want to create a full livewire component just to add a third button to a modal (I want as much as possible stand with filament views in case they will change in future) and my hope is that there is a less invasive way to get the result. More, I cannot style the iconmodal and iconheading the same way of default confirmation modal: both appear left aligned and I didn't find a way to style.

[Lisfe00]

Can you send the action?

[bvicini]

Using modal content alone brings me closer to solution from a design point of view, but i cannot access the parameters passed to modalicon and modalheading, so the view is fixed: that is clearly not an acceptable solution. Thank you

[bvicini]

Thanks a lot for your effort! Maybe I have some issue with tailwind configuration? This is what I'm trying to achieve

This is what I get using modalContent, modalIcon, modalHeading

with this code:

Action::make('handle-compiler')
    ->label(fn ($record): string => $record->editing_compiler ? 'INT' : 'AVV')
    ->icon(fn ($record): string => $record->editing_compiler ? 'icon-compiler-edit' : 'icon-compiler-create')
    ->modalContent(function ($record, $action) {
          return view('filament.actions.modal-confirm-option', [
             'record' => $record,
             'action' => $action,
          ]);
        })
    ->modalWidth('md')
    ->modalHeading(' ')
    ->action(function ($record, $data, $action) {
        // Handle the button pressed
                    $buttonPressed = $action->data('button_pressed');
                    if ($buttonPressed === 'approve') {
                        // Handle the "Approve" button
                        $record->approve();
                    } elseif ($buttonPressed === 'reject') {
                        // Handle the "Reject" button
                        $record->reject();
                    }
                })              
     ->color('my-actions')
     ->iconButton(),

and this view

<div>
    <p class="text-gray-400 text-sm mt-2">Sure you want an icecream?</p>
    <div class="mt-6 flex space-x-4">
        <x-filament::button color="success">
            Approve
        </x-filament::button>
        <x-filament::button color="danger">
            Reject
        </x-filament::button>
    </div>
</div>

This is what I get suppressing modalIcon and modalHeading, using modalContent alone

with this code

Action::make('handle-compiler2')
                ->label(fn ($record): string => $record->editing_compiler ? 'INTERROMPI COSTRUZIONE FORM' : 'AVVIA COSTRUZIONE NUOVO FORM')
                ->icon(fn ($record): string => $record->editing_compiler ? 'icon-compiler-edit' : 'icon-compiler-create')
                ->color('my-actions')
                /*->modalDescription(function($record) {
                    if($record->editing_compiler) return "Questa operazione compie unicamente una modifica informativa. Nessun file o record di database sarà eliminato! Consulta l'help in linea per le di un nuovo form." ;
                    return "Questa operazione non compie alcuna modifica in laraschool, se non di tipo puramente informativo. Consulta l'help in linea per la procedura di effettiva costruzione di un nuovo form." ;
                })*/
                ->modalContent(function ($record, $action) {
                    return view('filament.actions.modal-confirm-option2', [
                        'record' => $record,
                        'action' => $action,
                    ]);
                })
                ->modalWidth('md')
                ->modalHeading('AVVIA COSTRUZIONE NUOVO COMPILER')
                ->modalIcon(fn ($record): string => $record->editing_compiler ? 'icon-compiler-edit' : 'icon-compiler-create')
                ->action(function ($record, $data, $action) {
                    // Handle the button pressed
                    $buttonPressed = $action->data('button_pressed');
                    if ($buttonPressed === 'approve') {
                        // Handle the "Approve" button
                        $record->approve();
                    } elseif ($buttonPressed === 'reject') {
                        // Handle the "Reject" button
                        $record->reject();
                    }
                }),

and this view:

<div class="flex flex-col items-center">
    <x-filament::icon icon="icon-compiler-edit" class="text-purple-500 -mt-6 rounded-full bg-purple-200 p-2 fi-modal-icon h-11 w-11"/>

    <h1 class="mt-4 font-extrabold">AVVIA COSTRUZIONE NUOVO COMPILER</h1>
    <p class="text-gray-400 text-sm mt-2">Sure you want an icecream?</p>
    <div class="mt-6 flex space-x-4">
        <x-filament::button color="success">
            Approve
        </x-filament::button>
        <x-filament::button color="danger">
            Reject
        </x-filament::button>
    </div>
</div>

[e2d2-dev]

Hi,

just use ->extraModalFooterActions([ YourAction1, YourAction2 ]). I usually disable the regular SubmitAction with ->modalSubmitAction(false) when i need more Options.

To Align all Actions equally use ->modalFooterActionsAlignment(Alignment::Center), You can also disable the CancelAction with ->modalCancelAction(false).

There is no need to create views for something like that. But there are three more options. If You need more space, because You have a lot of buttons add

->infolist([
    Actions([
        YourAction1,
        YourAction2,
    ])
])

or when You need a describing Text

->infolist([
    TextEntry::make('YourActionText1')
        ->action(YourAction1::make())
])

or when You want a hiding Text

->infolist([
    Section::make('name')->headerActions([YourAction1])
        ->collapsed()
        ->schema([
            TextEntry::make('text1')
                ->state('text1')
     ])
])

Hope that helps :)

ciao ed

[bvicini]

How chicken can I be? Totally missed a section of the docs :( . Thank you very much for your effort and patience. Now all work in the required way . Greetings

[abrahamputraprakasa]

awesome thanks for ->modalSubmitAction(false). searching all over the internet, seems like every custom modal must have that suck "Submit" button.!