F
Filament•5w ago
PhanLys

Help me add data to a repeater field using a modal which is a table in a Livewire component.

Hello! I'm working on a school project, and this is my first time using Filament. I managed to create a repeater field, where clicking the 'Add' button opens a modal containing a filament table in a Livewire component (see the image). Now, I want the data to be added to the repeater when I click the 'Select' action in the table. Unfortunately, I don't know how to achieve this. Could anyone please help? (here is the table in livewire code) 
        return $table
            ->query(vattu::query())
            ->columns([
                TextColumn::make('TenVT')->label('Tên vật tư')->searchable(),
                TextColumn::make('donvitinh.TenDVT')->label('Đơn vị tính')->alignCenter(),
                TextColumn::make('KichThuoc')->label('Kích thước')->searchable(),
                TextColumn::make('MauSac')->label('Màu sắc')->searchable(),
                TextColumn::make('DacDiem')->label('Đặc điểm')->searchable(),
                IconColumn::make('LaTP')->label('Là thành phẩm')->boolean()->alignCenter(),
            ])
            ->filters([
                SelectFilter::make('LaTP')
                ->label('Loại vật tư')
                ->options([
                    '1' => 'Thành phẩm',
                    '0' => 'Nguyên vật liệu',
                ])
            ])
            ->actions([
                Tables\Actions\Action::make('tonkhoSelect')
                    ->label('Select')
                    ->color('primary')
                    // ->action() i dont have any idea to implement this

            ])
        return $table
            ->query(vattu::query())
            ->columns([
                TextColumn::make('TenVT')->label('Tên vật tư')->searchable(),
                TextColumn::make('donvitinh.TenDVT')->label('Đơn vị tính')->alignCenter(),
                TextColumn::make('KichThuoc')->label('Kích thước')->searchable(),
                TextColumn::make('MauSac')->label('Màu sắc')->searchable(),
                TextColumn::make('DacDiem')->label('Đặc điểm')->searchable(),
                IconColumn::make('LaTP')->label('Là thành phẩm')->boolean()->alignCenter(),
            ])
            ->filters([
                SelectFilter::make('LaTP')
                ->label('Loại vật tư')
                ->options([
                    '1' => 'Thành phẩm',
                    '0' => 'Nguyên vật liệu',
                ])
            ])
            ->actions([
                Tables\Actions\Action::make('tonkhoSelect')
                    ->label('Select')
                    ->color('primary')
                    // ->action() i dont have any idea to implement this

            ])
No description
5 Replies
LeandroFerreira
LeandroFerreira•5w ago
You could try registering a listener for the repeater field and dispatching a form event from the Livewire component to update the repeater state, something like this: https://discord.com/channels/883083792112300104/1313505581436244019/1313523857960865886
PhanLys
PhanLysOP•5w ago
But they are on different Livewire components, right? Can you listen to events from other Livewire components? Honestly, I don't understand much about Livewire. I found a guide on the Filament tutorial website, but it's not free
LeandroFerreira
LeandroFerreira•5w ago
yes, you can
LeandroFerreira
LeandroFerreira•5w ago
https://livewire.laravel.com/docs/events
Laravel
Events | Laravel
A full-stack framework for Laravel that takes the pain out of building dynamic UIs.
PhanLys
PhanLysOP•5w ago
Finally, I got it to work! I had thought that the resource file was also a Livewire component, but it turns out it's not. I added this code to the create page file, and it worked. 
    protected $listeners = ['vattuSelected' => 'handleVattuSelected'];

    public function handleVattuSelected($record): void
    {
        $state = $this->form->getState();

        $state['dsvattu'][] = [
            'id' => $record['id'],
            'TenVT' => $record['TenVT'],
            'soluong' => $record['soluong'],
            'ghichu' => $record['ghichu'],
        ];

        $this->form->fill($state);

    }
    protected $listeners = ['vattuSelected' => 'handleVattuSelected'];

    public function handleVattuSelected($record): void
    {
        $state = $this->form->getState();

        $state['dsvattu'][] = [
            'id' => $record['id'],
            'TenVT' => $record['TenVT'],
            'soluong' => $record['soluong'],
            'ghichu' => $record['ghichu'],
        ];

        $this->form->fill($state);

    }
                    ->action(function (vattu $record) {
                        $this->dispatch('vattuSelected', [
                                'id' => $record->id,
                                'TenVT' => $record->TenVT,
                                'soluong' => 1,
                                'ghichu' => '',
                            ]);
                        }
                    )
                    ->action(function (vattu $record) {
                        $this->dispatch('vattuSelected', [
                                'id' => $record->id,
                                'TenVT' => $record->TenVT,
                                'soluong' => 1,
                                'ghichu' => '',
                            ]);
                        }
                    )
Thank you.

Did you find this page helpful?