#Modal Action in Form with Table Modal Body

14 messages · Page 1 of 1 (latest)

cerulean adder
#

Hey everyone, I have a complex issue with my selection dialog. I hope I can explain it in 3 steps:

  1. I have an action button in a form, that opens a modal. This Modal contains a custom table via table builder to select a record, that should be used to pre-fill the form.
  2. For this, each table record, has a "Select" button. Clicking on this button dispatches an event to pass the data down to the form.
  3. The problem: The event is dispatched (can see it in Debug bar), but it does not reach the form or any function outside the Livewire class.

The form:

Tabs\Tab::make('Import')->schema([
   Actions::make([
      SelectProductAction::make('select_product'),

      SelectShippingAction::make('select_shipping'),
   ]),
]),

The modal action

class SelectProductAction extends Action {
   public static function getDefaultName(): ?string {
      return 'selectProductAction';
   }

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

      $this->label('Select Product');
      $this->modalHeading('Select Product');
      $this->modalSubmitAction(false);
      $this->modalCancelAction(false);
      $this->modalFooterActions([]);
      $this->modalContent(function (SelectProductAction $action): View {
         return view('filament.actions.select-product-modal-content', [
            'selectProductTable' => SelectProductTable::class,
         ]);
      });
      $this->action(fn ($data, $value, $state) => dd($data, $value, $state));
   }

   #[On('fooBarEvent')]
   public function onFooBar($data): void {
      // DOES NOT RECEIVE THE EVENT !
      dd("On fooBarEvent", $data);
   }
}
stiff merlinBOT
#

To help others find answers, you can mark your question as solved via Right click solution message -> Apps -> ✅ Mark Solution

cerulean adder
#

The table (Livewire component)

class SelectProductTable extends Component implements HasForms, HasTable {
   use InteractsWithForms;
   use InteractsWithTable;

   #[On('fooBarEvent')]
   public function onFooBar($data): void {
      // THIS WORKS !
      dd("On fooBarEvent", $data);
   }

   public function table(Table $table): Table {
      return $table
         ->query(Product::query())
         ->paginated([30])
         ->recordCheckboxPosition(RecordCheckboxPosition::BeforeCells)
         ->columns([
            Tables\Columns\TextColumn::make('id')->label('ID')->sortable(),

            Tables\Columns\TextColumn::make('product_number')->label('P/N')->sortable()->toggleable(),

            Tables\Columns\TextColumn::make('sales_price_net_eur')
               ->label('VK')
               ->tooltip('Verkaufspreis')
               ->badge()
               ->color(Color::Green)
               ->money('EUR')
               ->sortable(),
         ])
         ->actions([
            Action::make('select_product')
               ->label('Select')
               ->button()
               ->action(function ($record, $livewire) {
                  $this->dispatch('fooBarEvent', data: $record);
               }),
         ])
         ;
   }

   public function render(): View {
      return view('livewire.select-product-table');
   }
}
#

Modal Action in Form with Table Modal Body

lusty heron
lusty heron
cerulean adder
lusty heron
cerulean adder
#

@lusty heron SelectProductTable is of course a Livewire component

use Filament\Tables\Contracts\HasTable;
use Filament\Forms\Contracts\HasForms;
use Livewire\Attributes\On;
use Livewire\Component;

class SelectProductTable extends Component implements HasForms, HasTable {
lusty heron
cerulean adder
#

in short: #[On('fooBarEvent')] does not work in any component function thats not inside class SelectProductTable extends \Livewire\Component, where public function table() ... is dispatching the event.
Where I want it to work: class SelectProductAction extends Action ... public function onFooBar(), but I see now a Filament Action is not a Livewire component, is it ?

tepid kernel
lusty heron