Filament•3mo ago

Reload Page on table row action success

Hi, I have a EditPage for a resource that is showing a detail of the resource. In this page I have a Form (FormBuilder). Two of the fields are Livewire::make() components. Such components are two Tables (Created via the TableBuilder). On such tables I can "move" the rows between the two tables. To do so I have an action that updates the Team players. The action trigger the update of the table the action is triggered from, but the other table is not updated. The only way to have the updated data is to manually refresh the page. For example: Resource: Game Table 1: Team Red Players Table 2: Team Blue Players (Both table are the same Livewire Component, a TeamID is passed as a Livewire argument for the query builder of the table) I've been struggling with this issue for some time and any input would be welcome.

24 Replies

LeandroFerreira•3mo ago

https://filamentphp.com/docs/3.x/tables/advanced#resetting-the-table maybe?

Advanced - Table Builder - Filament

hitech95OP•3mo ago

The thing is that if I move a player from table A, table A is updated correcly but Table B is not. so I have to reset the other table. but I have no idea how. I was trying with dispatching an event to be listened but I had no luck. If necessary I can provide the full code 😄 Oh the EditPage is a customized page that extends EditPage. The best would be to invalidate that somehow and trigger a re-render.

LeandroFerreira•3mo ago

could you provide the code? You can use gist if it's big

hitech95OP•3mo ago

Yea, give me a minute!

hitech95OP•3mo ago

https://pastebin.com/21HMegVT I went with pastebin 😄 I've stripped all the fields that are not necessary as there were a lot. those tables are quite big.

Pastebin

class TeamListGame extends Page{ use Concerns\InteractsWithRecor...

Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

LeandroFerreira•3mo ago

you have a <div> {{ $this->table }}</div> in the view to render the table, right?

hitech95OP•3mo ago

Yes only that, and similar for the form

LeandroFerreira•3mo ago

ok, what happens if you add this <div wire:key="{{ str()->random() }}"> {{ $this->table }} </div>

hitech95OP•3mo ago

let me try that ~~The dialog is not showing up, I get the darker color but no modal is visible.~~ My bad I had a typo, it still only update the table I've clicked on and not the other one.

LeandroFerreira•3mo ago

hum, I don't know. I would need to try that. If you are able to create a minimal repo on github to reproduce this issue, I can take a look after

hitech95OP•3mo ago

Yes! And thanks for the time 😄 I've spent 10h on this trying on a solution. So having a proper input is awesome! Wow it took a lot of time to strip out lot of proprietary stuff... I'm going to give you the repo in a few minutes. How to use: - create a filament user - go inside player (resource) and create a player for the user - go in game and create a game - go to the edit page and add a player from the list. - click the players actions in the header

hitech95OP•3mo ago

https://github.com/hitech95/laravel_filament_table_switch

GitHub

GitHub - hitech95/laravel_filament_table_switch

Contribute to hitech95/laravel_filament_table_switch development by creating an account on GitHub.

hitech95OP•3mo ago

the player should be assigned to one of the teams, use the swithc button to move to the other team the default route is /admin if you have any question please let me know 😄

LeandroFerreira•3mo ago

I let you know Add in the TeamTable class

use Livewire\Attributes\On;
...

#[On('updateTeamTable')]
public function updateTeamTable() {}

use Livewire\Attributes\On;
...

#[On('updateTeamTable')]
public function updateTeamTable() {}

Then, dispatch this in the action

if ($done) {
    $action->success();
    $this->dispatch('updateTeamTable');

    return;
}

if ($done) {
    $action->success();
    $this->dispatch('updateTeamTable');

    return;
}

hitech95OP•3mo ago

ok but this event is broadcasted and for both tables are listening to the event right?

LeandroFerreira•3mo ago

both tables

hitech95OP•3mo ago

thanks it worked but I've encountered another issue. When I create an header action in the TeamsGame Page I'm getting a "unable to find component error app filament.resources.game-resource.teams-game". Any hint on that?

LeandroFerreira•3mo ago

Does it related with that event?

hitech95OP•3mo ago

no at 100%, just asking as a header button should also reset the teams and update the tables.

LeandroFerreira•3mo ago

maybe you could also dispatch the event after clicking

hitech95OP•3mo ago

Yea the issue is when I click the button (Header Action), livewire throws that error. So I'm probably doing something wrong.

LeandroFerreira•3mo ago

probably

hitech95OP•3mo ago

Any clue on what it could be? The only info i've found online is about wrong namespaces.

LeandroFerreira•3mo ago

hum no

Gaming

Programming

Reload Page on table row action success