Filament•8mo ago

Create a "carousel" modal on ListRecords

Hi everyone ! I want to make a special thing to navigate through records on a table using a tweak of "ViewAction" (when you click on a row in the table $table->recordAction() I've made a copy of the ViewAction class to add Previous/Next button in extraFooterActions But I struggle on changing the content of the "data" on the modal form instance. Just below you'll find my actual class ! Thank's for your help 🙂

1 Reply

JibayMcsOP•8mo ago

class CarouselAction extends Action
{
    protected ?Closure $mutateRecordDataUsing = null;

    protected Model | Closure | null $record;

    public static function getDefaultName(): ?string
    {
        return 'carousel';
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->hiddenLabel();

        $this->modalWidth('full');

        $this->modalHeading(fn(): string => __('filament-actions::view.single.modal.heading', ['label' => $this->getRecordTitle()]));

        $this->modalSubmitAction(false);
        $this->modalCancelAction(false);

        $this->stickyModalHeader();
        $this->stickyModalFooter();

        $this->extraModalFooterActions(self::getNavigationActions());

        $this->modalFooterActionsAlignment(Alignment::Center);

        $this->color('gray');

        $this->disabledForm();

        $this->fillForm(function (HasActions $livewire, Model $record): array {
            if ($translatableContentDriver = $livewire->makeFilamentTranslatableContentDriver()) {
                $data = $translatableContentDriver->getRecordAttributesToArray($record);
            } else {
                $data = $record->attributesToArray();
            }

            if ($this->mutateRecordDataUsing) {
                $data = $this->evaluate($this->mutateRecordDataUsing, ['data' => $data]);
            }

            return $data;
        });
    }

    // The rest of the code below ....
}

class CarouselAction extends Action
{
    protected ?Closure $mutateRecordDataUsing = null;

    protected Model | Closure | null $record;

    public static function getDefaultName(): ?string
    {
        return 'carousel';
    }

    protected function setUp(): void
    {
        parent::setUp();

        $this->hiddenLabel();

        $this->modalWidth('full');

        $this->modalHeading(fn(): string => __('filament-actions::view.single.modal.heading', ['label' => $this->getRecordTitle()]));

        $this->modalSubmitAction(false);
        $this->modalCancelAction(false);

        $this->stickyModalHeader();
        $this->stickyModalFooter();

        $this->extraModalFooterActions(self::getNavigationActions());

        $this->modalFooterActionsAlignment(Alignment::Center);

        $this->color('gray');

        $this->disabledForm();

        $this->fillForm(function (HasActions $livewire, Model $record): array {
            if ($translatableContentDriver = $livewire->makeFilamentTranslatableContentDriver()) {
                $data = $translatableContentDriver->getRecordAttributesToArray($record);
            } else {
                $data = $record->attributesToArray();
            }

            if ($this->mutateRecordDataUsing) {
                $data = $this->evaluate($this->mutateRecordDataUsing, ['data' => $data]);
            }

            return $data;
        });
    }

    // The rest of the code below ....
}

public function mutateRecordDataUsing(?Closure $callback): static
    {
        $this->mutateRecordDataUsing = $callback;

        return $this;
    }

    function getNavigationActions(): array
    {
        return [
            Action::make('next')
                ->action(function (?Model $record, Table $table) {
                    $parentAction = collect($table->getActions())->filter(fn($action) => $action instanceof CarouselAction)->first();
                    $records = $table->getRecords();
                    $index = array_search($record, $records->items());
                    $next = $records[$index + 1] ?? $records[0];

                    // Not triggered
                    $parentAction->mutateFormDataUsing(fn($data) => dd($data));

                    // Some tries
                    /* $parentAction->mutateFormDataUsing(fn() => $next->attributesToArray());
                    $parentAction->formData($next->attributesToArray());
                    $parentAction->fillForm($next->attributesToArray()); */
                }),

            // TODO
            Action::make('prev'),
        ];
    }

public function mutateRecordDataUsing(?Closure $callback): static
    {
        $this->mutateRecordDataUsing = $callback;

        return $this;
    }

    function getNavigationActions(): array
    {
        return [
            Action::make('next')
                ->action(function (?Model $record, Table $table) {
                    $parentAction = collect($table->getActions())->filter(fn($action) => $action instanceof CarouselAction)->first();
                    $records = $table->getRecords();
                    $index = array_search($record, $records->items());
                    $next = $records[$index + 1] ?? $records[0];

                    // Not triggered
                    $parentAction->mutateFormDataUsing(fn($data) => dd($data));

                    // Some tries
                    /* $parentAction->mutateFormDataUsing(fn() => $next->attributesToArray());
                    $parentAction->formData($next->attributesToArray());
                    $parentAction->fillForm($next->attributesToArray()); */
                }),

            // TODO
            Action::make('prev'),
        ];
    }

Gaming

Programming

Create a "carousel" modal on ListRecords