Relation manager in action/modal

Curious, is it possible to display/edit relation manager in an action/modal instead?

12 Replies

I don't think this is possible at the moment. Depending on the use-case, you can probably get something similar by embedding a table in a custom modal.

KeyMe•10mo ago

sorry a little late but i took ur advice & added a table in livewire component & rendered in an action modal, the prebuilt header/row actions is there to click but aren't working? code is pretty much the same as in any relation manager class

Patrick Boivin•10mo ago

Not sure I understand, is this something you can show in a screenshot?

KeyMe•10mo ago

KeyMe•10mo ago

    public function table(Table $table): Table
    {
        return $table
            ->relationship(fn (): HasMany => $this->order->schedules())
            ->inverseRelationship('order')
            ->columns([
                TextColumn::make('installation_date'),
                TextColumn::make('location'),
                TextColumn::make('unit'),
                TextColumn::make('status')->badge()->formatStateUsing(fn ($state) => strtr($state, ['_' => ' '])),
            ])
            ->filters([
                //
            ])
            ->headerActions([
                Actions\CreateAction::make()
                    ->form([
                        Components\DateTimePicker::make('installation_date')
                            ->required(),
                        Components\TextInput::make('location')
                            ->required(),
                        Components\TextInput::make('unit')
                            ->numeric()
                            ->integer()
                            ->placeholder('Ex:- 2')
                            ->required(),
                        Components\Select::make('status')
                            ->options(ScheduleStatus::toOption())
                            ->required(),
                        Components\Textarea::make('remarks'),
                    ]),
            ])
            ->actions([
                Actions\ViewAction::make(),
                Actions\EditAction::make(),
                Actions\DeleteAction::make(),
            ]);

    public function table(Table $table): Table
    {
        return $table
            ->relationship(fn (): HasMany => $this->order->schedules())
            ->inverseRelationship('order')
            ->columns([
                TextColumn::make('installation_date'),
                TextColumn::make('location'),
                TextColumn::make('unit'),
                TextColumn::make('status')->badge()->formatStateUsing(fn ($state) => strtr($state, ['_' => ' '])),
            ])
            ->filters([
                //
            ])
            ->headerActions([
                Actions\CreateAction::make()
                    ->form([
                        Components\DateTimePicker::make('installation_date')
                            ->required(),
                        Components\TextInput::make('location')
                            ->required(),
                        Components\TextInput::make('unit')
                            ->numeric()
                            ->integer()
                            ->placeholder('Ex:- 2')
                            ->required(),
                        Components\Select::make('status')
                            ->options(ScheduleStatus::toOption())
                            ->required(),
                        Components\Textarea::make('remarks'),
                    ]),
            ])
            ->actions([
                Actions\ViewAction::make(),
                Actions\EditAction::make(),
                Actions\DeleteAction::make(),
            ]);

code in livewire component

Patrick Boivin•10mo ago

What happens when you click a row or header action? Any error message?

KeyMe•10mo ago

nothing happens

Patrick Boivin•10mo ago

Have you tried to implement a custom modal instead of using the action modal?

KeyMe•10mo ago

hm guess i could try, I'll let u know how it goes

KeyMe•10mo ago

It worked! 😄 altho.. 1. Not sure how to remove the button border to be like "update activity" action modal 2.How/where do i do something like $this->fillForm() to refresh the page?

KeyMe•10mo ago

View page:

Action::make('updateSchedule')
                        ->view('components.schedule-modal', ['order' => $this->record])

Action::make('updateSchedule')
                        ->view('components.schedule-modal', ['order' => $this->record])

components\schedule-modal.blade.php :

@livewire('schedule-table', ['order' => $order])

@livewire('schedule-table', ['order' => $order])

Livewire component:

<div>
  <x-filament::modal id="open-schedules" width="3xl">

    <x-slot name="heading">
      Installation schedules
    </x-slot>

    {{$this->table}}
    
  </x-filament::modal>

  <x-filament::button @click="$dispatch('open-modal', {id: 'open-schedules'})">
    Update Schedule
  </x-filament::button>

</div

<div>
  <x-filament::modal id="open-schedules" width="3xl">

    <x-slot name="heading">
      Installation schedules
    </x-slot>

    {{$this->table}}
    
  </x-filament::modal>

  <x-filament::button @click="$dispatch('open-modal', {id: 'open-schedules'})">
    Update Schedule
  </x-filament::button>

</div

Patrick Boivin•10mo ago

1. maybe ->link() or some custom CSS 2. I think you'll need to emit a Livewire event from the custom component to the page component in the event handler, you can call $this->form->fill() or whatever you need

Gaming

Programming

Relation manager in action/modal