Table reload in custom livewire tab by updating in another tab table record.
I have a resource page with Tab implementation. First tab for draft items loaded through livewire page. The second tab is with published items. I wants to refresh the second table when ever I am publishing a record in First tab. Below is the main page
public function getTabs(): array
{return [
'All' => Tab::make('All')->schema([
Livewire::make(ActiveListingTable::class)->key('active-listing-table')
]),
];
}
public function infolist(Infolist $infolist): Infolist
{return $infolist
->schema([
Tabs::make('Tabs')->contained(false)
->tabs([
Tabs\Tab::make('Draft')
->schema([
Livewire::make(DraftListingTable::class)->key('dradt-listing-table')->lazy()
])->extraAttributes([
'x-data' => '{ isActive: false }',
'x-init' => 'isActive = ($el.closest("[role=\'tablist\']").querySelector("[aria-selected=\'true\']") === $el)',
'x-effect' => 'if(isActive) { window.Livewire.emit(\'refreshDraftTable\') }',
'x-on:click' => 'isActive = true',
]),
Tabs\Tab::make('active-tasks')->label('Published')
->schema([
Livewire::make(ActiveListingTable::class)->key('active-listing-table')->lazy()
])->extraAttributes([
'x-data' => '{ isActive: false }',
'x-init' => 'isActive = ($el.closest("[role=\'tablist\']").querySelector("[aria-selected=\'true\']") === $el)',
'x-effect' => 'if(isActive) { window.Livewire.emit(\'refreshActiveTable\') }',
'x-on:click' => 'isActive = true',
]),
]),
]);
}
public function getTabs(): array
{return [
'All' => Tab::make('All')->schema([
Livewire::make(ActiveListingTable::class)->key('active-listing-table')
]),
];
}
public function infolist(Infolist $infolist): Infolist
{return $infolist
->schema([
Tabs::make('Tabs')->contained(false)
->tabs([
Tabs\Tab::make('Draft')
->schema([
Livewire::make(DraftListingTable::class)->key('dradt-listing-table')->lazy()
])->extraAttributes([
'x-data' => '{ isActive: false }',
'x-init' => 'isActive = ($el.closest("[role=\'tablist\']").querySelector("[aria-selected=\'true\']") === $el)',
'x-effect' => 'if(isActive) { window.Livewire.emit(\'refreshDraftTable\') }',
'x-on:click' => 'isActive = true',
]),
Tabs\Tab::make('active-tasks')->label('Published')
->schema([
Livewire::make(ActiveListingTable::class)->key('active-listing-table')->lazy()
])->extraAttributes([
'x-data' => '{ isActive: false }',
'x-init' => 'isActive = ($el.closest("[role=\'tablist\']").querySelector("[aria-selected=\'true\']") === $el)',
'x-effect' => 'if(isActive) { window.Livewire.emit(\'refreshActiveTable\') }',
'x-on:click' => 'isActive = true',
]),
]),
]);
}
6 Replies
DraftListingTable:
Active Listing Table:
@Jakub I took this logic from your post only. Can you please help me in this. I just wants to reload the table in one tab by update record in another tab table.
Thank in advance for your help
class DraftListingTable extends Component implements HasForms, HasTable
{use InteractsWithForms;
use InteractsWithTable;
protected $listeners = ['refreshDraftTable' => '$refresh'];
public static function table(Table $table): Table
{return $table
->query(Listing::query()->where('published', 0)->where('user_id', request()->user()->id))
->columns([ImageColumn::make('image_column')
->disk(config('filesystems.default', 'local'))
->default(function ($record) {
$result = 'DOMUS-LOGO.png';
$media = $record->medias->first();
if (! is_null($media)) {
$result = $media->path;
}
return $result;
}),
...
])
->recordUrl(fn (Listing $record): string => ListingViewResource::getUrl('view', ['record' => $record->hashid]))
->filters([
// Tables\Filters\TrashedFilter::make(),
])
->actions([
Tables\Actions\Action::make('Publish')
->form([
TextInput::make('confirm_text')
->required()
->hint('To confirm, please type \'Publish\' in the box below and click the Confirm Publication button.'),
])
->action(function ($record, $data, $livewire) {
//logic
})
->modalSubmitActionLabel('Confirm Publication'),
])
->headerActions([
CreateAction::make('create')
->url(fn (): string => route('filament.seller.resources.listings.create')),
// Tables\Actions\CreateAction::make()
// ->mutateFormDataUsing(fn (array $data): array => Listing::mutateFormDataBeforeCreate($data))
// ->visible(url()->current() != ListingResource::getUrl('listing')),
])
}
public function render()
{
return view('livewire.draft-listing-table');
}
}
class DraftListingTable extends Component implements HasForms, HasTable
{use InteractsWithForms;
use InteractsWithTable;
protected $listeners = ['refreshDraftTable' => '$refresh'];
public static function table(Table $table): Table
{return $table
->query(Listing::query()->where('published', 0)->where('user_id', request()->user()->id))
->columns([ImageColumn::make('image_column')
->disk(config('filesystems.default', 'local'))
->default(function ($record) {
$result = 'DOMUS-LOGO.png';
$media = $record->medias->first();
if (! is_null($media)) {
$result = $media->path;
}
return $result;
}),
...
])
->recordUrl(fn (Listing $record): string => ListingViewResource::getUrl('view', ['record' => $record->hashid]))
->filters([
// Tables\Filters\TrashedFilter::make(),
])
->actions([
Tables\Actions\Action::make('Publish')
->form([
TextInput::make('confirm_text')
->required()
->hint('To confirm, please type \'Publish\' in the box below and click the Confirm Publication button.'),
])
->action(function ($record, $data, $livewire) {
//logic
})
->modalSubmitActionLabel('Confirm Publication'),
])
->headerActions([
CreateAction::make('create')
->url(fn (): string => route('filament.seller.resources.listings.create')),
// Tables\Actions\CreateAction::make()
// ->mutateFormDataUsing(fn (array $data): array => Listing::mutateFormDataBeforeCreate($data))
// ->visible(url()->current() != ListingResource::getUrl('listing')),
])
}
public function render()
{
return view('livewire.draft-listing-table');
}
}
<?php
namespace App\Livewire;
class ActiveListingTable extends Component implements HasForms, HasTable
{
use InteractsWithForms;
use InteractsWithTable;
protected $listeners = ['refreshActiveTable' => '$refresh'];
public static function table(Table $table): Table
{
return $table
->recordUrl(
fn (Model $record): string => route('listings.view', ['record' => $record]),
)
->query(Listing::query()->where('published', 1)->where('user_id', request()->user()->id))
->columns([
ImageColumn::make('image_column')
->disk(config('filesystems.default', 'local'))
->default(function ($record) {
$result = 'DOMUS-LOGO.png';
$media = $record->medias->first();
if (! is_null($media)) {
$result = $media->path;
}
return $result;
})
->width(100)
->height('auto'),
...
])
->recordUrl(fn (Listing $record): string => ListingViewResource::getUrl('view', ['record' => $record->hashid]))
->filters([
// Tables\Filters\TrashedFilter::make(),
SelectFilter::make('published')->options([0 => 'Draft', 1 => 'Published']),
])
->actions([
])
->bulkActions([
Tables\Actions\BulkActionGroup::make([
]),
]);
}
public function render()
{
return view('livewire.active-listing-table');
}
}
<?php
namespace App\Livewire;
class ActiveListingTable extends Component implements HasForms, HasTable
{
use InteractsWithForms;
use InteractsWithTable;
protected $listeners = ['refreshActiveTable' => '$refresh'];
public static function table(Table $table): Table
{
return $table
->recordUrl(
fn (Model $record): string => route('listings.view', ['record' => $record]),
)
->query(Listing::query()->where('published', 1)->where('user_id', request()->user()->id))
->columns([
ImageColumn::make('image_column')
->disk(config('filesystems.default', 'local'))
->default(function ($record) {
$result = 'DOMUS-LOGO.png';
$media = $record->medias->first();
if (! is_null($media)) {
$result = $media->path;
}
return $result;
})
->width(100)
->height('auto'),
...
])
->recordUrl(fn (Listing $record): string => ListingViewResource::getUrl('view', ['record' => $record->hashid]))
->filters([
// Tables\Filters\TrashedFilter::make(),
SelectFilter::make('published')->options([0 => 'Draft', 1 => 'Published']),
])
->actions([
])
->bulkActions([
Tables\Actions\BulkActionGroup::make([
]),
]);
}
public function render()
{
return view('livewire.active-listing-table');
}
}
From my understanding you are doing the following
- created info list that has tabs , so you can swtich and show different tables
- you click on a tab Draft, and it shows listings with status of draft
- click on tab of published, shows active listings
- you are passing in a custom livewire component for each one
What you should do in this situation
- create a new page or go on the ListListings page
- create the getTabs function and setup filters on that
- you can pass in fitlers directly onto the tabs
- so wheenver yo uswitch between tabs, the table updates
- creating new records will also refresh the table
Here is example of some tabs i have
The table on the same page is like this
I could be misunderstanding the whole thing too lol
if ($submittedTasksCount > 0) {
$tabs['submitted'] = Tab::make('submitted')
->label('')
->icon('heroicon-o-inbox')
->badge($submittedTasksCount)
->badgeColor('purple')
->modifyQueryUsing(function (Builder $query) {
return $query->where('status', EStatus::SUBMITTED);
});
}
if ($feedbackTasksCount > 0) {
$tabs['feedback'] = Tab::make('feedback')
->icon('heroicon-o-chat-bubble-bottom-center-text')
->label('')
->badge($activeFeedbackTasksCount > 0 ? $activeFeedbackTasksCount : null)
->badgeColor('yellow')
->modifyQueryUsing(function (Builder $query) {
return $query->where('type', ETaskType::QUESTION);
});
}
if ($submittedTasksCount > 0) {
$tabs['submitted'] = Tab::make('submitted')
->label('')
->icon('heroicon-o-inbox')
->badge($submittedTasksCount)
->badgeColor('purple')
->modifyQueryUsing(function (Builder $query) {
return $query->where('status', EStatus::SUBMITTED);
});
}
if ($feedbackTasksCount > 0) {
$tabs['feedback'] = Tab::make('feedback')
->icon('heroicon-o-chat-bubble-bottom-center-text')
->label('')
->badge($activeFeedbackTasksCount > 0 ? $activeFeedbackTasksCount : null)
->badgeColor('yellow')
->modifyQueryUsing(function (Builder $query) {
return $query->where('type', ETaskType::QUESTION);
});
}
public function table(Table $table): Table
{
return parent::table($table)
->defaultGroup('project.name')
->defaultPaginationPageOption(50)
->poll('30')
->modifyQueryUsing(
fn (Builder $query) => $query
->with([
'project',
'thread',
'activeTimeRecords'
])
->whereIn('status', [EStatus::ACTIVE, EStatus::SUBMITTED, EStatus::QUEUED, EStatus::COMPLETED])
->whereHas('workspace', fn ($q) => $q->where('is_active', true))
)->emptyStateHeading('No tasks found.');
}
public function table(Table $table): Table
{
return parent::table($table)
->defaultGroup('project.name')
->defaultPaginationPageOption(50)
->poll('30')
->modifyQueryUsing(
fn (Builder $query) => $query
->with([
'project',
'thread',
'activeTimeRecords'
])
->whereIn('status', [EStatus::ACTIVE, EStatus::SUBMITTED, EStatus::QUEUED, EStatus::COMPLETED])
->whereHas('workspace', fn ($q) => $q->where('is_active', true))
)->emptyStateHeading('No tasks found.');
}
This is how it looks
Full code for the page if that ehlps
I think you made it more complex than it needs to be with the custom livewire stuff, to get the same result
if you can share screenshots of how the view looks, and what you want to do with it. Might be able to help more.
I am not that great at filament yet, to fully visualize how everythings works just from code =/
@Jakub Let me try and give you the full code earliest. Thank you for your prompt response