Filament•8mo ago

Table with a modal action that should contain a custom table-like form, is that even possible?

I have a table showing users, with an Action that opens a modal. I want the modal to contain a list of items that can be checked row-by-row, as well a comment field for each row, and a save button. The list of items are NOT Eloquent models, but something that is calculated on the User model. Let's say it is Family members (But again, NOT a Eloquent model yet) and each row should be able to toggle an on/off as well as a comment. I have added the modal with a custom view, where I can loop through the items, but I cannot figure out how to correctly add the form elements (checkboxes and input fields), as well as how do I receive the data in the Component? (I have lots of experience with Laravel, but almost none with Livewire and Filament) The code that generates the table with the action

$table
    ->query(
        ...
    )
    ->columns([
        ...
    ])
    ->actions([
        Action::make('openmodal')
            ->modalContent(fn($record): View => view(
                    'filament.pages.actions.user-modal', [  'user' => $record, ],
            ))
        )

$table
    ->query(
        ...
    )
    ->columns([
        ...
    ])
    ->actions([
        Action::make('openmodal')
            ->modalContent(fn($record): View => view(
                    'filament.pages.actions.user-modal', [  'user' => $record, ],
            ))
        )

Some of the code in the modal:

 @foreach($user->familyMembers as $item)
<tr>
    <td class="text-center">
        <x-filament::input.checkbox class="p-3"/> <!-- How to name this "for each family member"? -->
    </td>
    <td class="text-center">
        <x-filament::input class="p-3"/>  <!-- How to name this "for each family member"? -->
    </td>
    ...
</tr>

<!-- At the bottom i would like one last input field and a submit button -->

 @foreach($user->familyMembers as $item)
<tr>
    <td class="text-center">
        <x-filament::input.checkbox class="p-3"/> <!-- How to name this "for each family member"? -->
    </td>
    <td class="text-center">
        <x-filament::input class="p-3"/>  <!-- How to name this "for each family member"? -->
    </td>
    ...
</tr>

<!-- At the bottom i would like one last input field and a submit button -->

1 Reply

Martin LakridsOP•8mo ago

I have solved this an entire different and more simple way. Using just a regular Action with a form, and adding a Repeater field containing the fields of each related item. Then, in the action, using fillForm() to add the related models such that they are filled when opening the modal. Finally, receiving and handling the data is also done using the default Action. End result is something like this (NB, using TableRepeater plugin https://filamentphp.com/plugins/awcodes-table-repeater):

Action::make('editUser')
    ->fillForm(fn ($record): array => [
        'familyMembers' => $record->getFamilyMembersArray(),
    ])
    ->form([
        TableRepeater::make('familyMembers')
            ->headers([
                ...
            ])
            ->schema([
                Checkbox::make('active')->default(false),
                Placeholder::make('name')->content(fn ($state) => $state)->hiddenLabel(),
                TextInput::make('note'),
            ])
            ->columnSpan('full')
            ->addable(false)
            ->reorderable(false)
            ->deletable(false),


    ])
    ->action(function (array $data, $record): void {
        info('Got data', [$record, $data]);
    })

Action::make('editUser')
    ->fillForm(fn ($record): array => [
        'familyMembers' => $record->getFamilyMembersArray(),
    ])
    ->form([
        TableRepeater::make('familyMembers')
            ->headers([
                ...
            ])
            ->schema([
                Checkbox::make('active')->default(false),
                Placeholder::make('name')->content(fn ($state) => $state)->hiddenLabel(),
                TextInput::make('note'),
            ])
            ->columnSpan('full')
            ->addable(false)
            ->reorderable(false)
            ->deletable(false),


    ])
    ->action(function (array $data, $record): void {
        info('Got data', [$record, $data]);
    })

Gaming

Programming

Table with a modal action that should contain a custom table-like form, is that even possible?