F
Filament•16mo ago
Mark Chaney

Attempting to use ListeRecords Tabs in with Standalone Tables with a modified trait

So i setup a simple trait that does the basics and it kind of works. The problem is that on initial page load, the query is happening twice. The second issue is that i have to click a tab twice for it to do the modifier. Seems on the first click it just loads the last query and ive confirmed that with ray, the second one uses the modifier. So how can i avoid it running the table query twice on page load and then having to click twice? PropertiesTable livewire component 
public function tableQuery(): Builder
{
    $query = Property::query()
        ->addAvailableUnitsSum();

    $query = $this->tabbedQuery($query);

    return $query;
}

public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', 1)),
        'inactive' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', 0)),
    ];
}

public function table(Table $table): Table
{
    return $table->query($this->tableQuery());
}
public function tableQuery(): Builder
{
    $query = Property::query()
        ->addAvailableUnitsSum();

    $query = $this->tabbedQuery($query);

    return $query;
}

public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', 1)),
        'inactive' => Tab::make()
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', 0)),
    ];
}

public function table(Table $table): Table
{
    return $table->query($this->tableQuery());
}
Trait File 
namespace App\Http\Livewire\Traits;

use Illuminate\Database\Eloquent\Builder;

trait FilamentTabs
{
    public ?string $activeTab = null;

    protected function tabbedQuery($query): Builder
    {
        $tabs = $this->getTabs();

        if (! filled($this->activeTab) && count($tabs) > 0) {
            $this->activeTab = array_key_first($tabs);
        }

        if (
            filled($this->activeTab) &&
            array_key_exists($this->activeTab, $tabs)
        ) {
            $tabs[$this->activeTab]->modifyQuery($query);
        }

        return $query;
    }

    public function generateTabLabel(string $key): string
    {
        return (string) str($key)
            ->replace(['_', '-'], ' ')
            ->ucfirst();
    }
}
namespace App\Http\Livewire\Traits;

use Illuminate\Database\Eloquent\Builder;

trait FilamentTabs
{
    public ?string $activeTab = null;

    protected function tabbedQuery($query): Builder
    {
        $tabs = $this->getTabs();

        if (! filled($this->activeTab) && count($tabs) > 0) {
            $this->activeTab = array_key_first($tabs);
        }

        if (
            filled($this->activeTab) &&
            array_key_exists($this->activeTab, $tabs)
        ) {
            $tabs[$this->activeTab]->modifyQuery($query);
        }

        return $query;
    }

    public function generateTabLabel(string $key): string
    {
        return (string) str($key)
            ->replace(['_', '-'], ' ')
            ->ucfirst();
    }
}
`
Solution:
@awcodes https://gist.github.com/MACscr/baaeeddbfe39c85840410c66257596ae. Not perfect, but works quite well for standalone usage of table tabs
Jump to solution
15 Replies
Mark Chaney
Mark ChaneyOP•16mo ago
I guess i really need to figure out the proper way to modify a table query when it comes to standalone
awcodes
awcodes•16mo ago
I want to help but I can’t follow this discord code formatting on my phone. 😅
Mark Chaney
Mark ChaneyOP•16mo ago
@awcodes well i guess i just need to know how i can dynamically modify a query when using standalone tables. Its different than using hte panel builder version. Same methods arent available as far as i can tell Hmm, using 
->modifyQueryUsing(fn (Builder $query) => $this->tabbedQuery($query))
->modifyQueryUsing(fn (Builder $query) => $this->tabbedQuery($query))
on the table seems to work Im betting there is a cleaner way though
awcodes
awcodes•16mo ago
@archilex can answer this one way better than me. But it should still be fairly simple in stand alone too. Is it just the tab click that changes the query? So, it’s really just a hijacked filter? Maybe you don’t need to directly modify the query but update the query string instead and let the query handle itself. I could be making this up too, sorry.
Mark Chaney
Mark ChaneyOP•16mo ago
yes, i did think about having a wire:click just enable/disable a filter, but I like being able to add these tabs without adding more filters
awcodes
awcodes•16mo ago
Fair enough. Just sounds a lot like his filter sets plugin.
Mark Chaney
Mark ChaneyOP•16mo ago
oh, for sure. I even have a filter sets license. I just only needed this small set of features. That author is the one that implemented it for core for the panel builder version as always though, i have to rebuild everything for the standalone version. lol
awcodes
awcodes•16mo ago
I do the same sometimes. Well, I tagged him so maybe he’ll respond. Lol.
Mark Chaney
Mark ChaneyOP•16mo ago
oh man, i love this feature. You can even apply filters on top of it. customers are going to love it
awcodes
awcodes•16mo ago
Imagine how excited they’ll be to have the full screen available instead of your modals. Jk. 😜
Solution
Mark Chaney
Mark Chaney•16mo ago
@awcodes https://gist.github.com/MACscr/baaeeddbfe39c85840410c66257596ae. Not perfect, but works quite well for standalone usage of table tabs
awcodes
awcodes•16mo ago
Good job.
Mark Chaney
Mark ChaneyOP•16mo ago
Well it looks like toggling columns or sorting screws things up, so looks like i need to take those into consideration @awcodes no rush, but mind marking this thread as unsolved if possible?
awcodes
awcodes•16mo ago
Sorry. I’ll try when I get home. Doesn’t look I can from my phone.
Mark Chaney
Mark ChaneyOP•16mo ago
So since im now using 
<?php

namespace App\Http\Livewire\Traits;

trait FilamentTableTabs
{
    public ?string $activeTab = null;

    public function tableTabsMount(): void
    {
        if (
            blank($this->activeTab) &&
            count($tabs = $this->getTabs())
        ) {
            $this->activeTab = array_key_first($tabs);
        }
    }

    public function updatedActiveTab(): void
    {
        $tabs = $this->getTabs();

        $query = $this->getTable()->getQuery();

        if (
            filled($this->activeTab) &&
            array_key_exists($this->activeTab, $tabs)
        ) {
            $tabs[$this->activeTab]->modifyQuery($query);
        }

        $this->getTable()->query($query);
    }

    public function getTabs(): array
    {
        return [];
    }

    public function generateTabLabel(string $key): string
    {
        return (string) str($key)
            ->replace(['_', '-'], ' ')
            ->ucfirst();
    }
}
<?php

namespace App\Http\Livewire\Traits;

trait FilamentTableTabs
{
    public ?string $activeTab = null;

    public function tableTabsMount(): void
    {
        if (
            blank($this->activeTab) &&
            count($tabs = $this->getTabs())
        ) {
            $this->activeTab = array_key_first($tabs);
        }
    }

    public function updatedActiveTab(): void
    {
        $tabs = $this->getTabs();

        $query = $this->getTable()->getQuery();

        if (
            filled($this->activeTab) &&
            array_key_exists($this->activeTab, $tabs)
        ) {
            $tabs[$this->activeTab]->modifyQuery($query);
        }

        $this->getTable()->query($query);
    }

    public function getTabs(): array
    {
        return [];
    }

    public function generateTabLabel(string $key): string
    {
        return (string) str($key)
            ->replace(['_', '-'], ' ')
            ->ucfirst();
    }
}
, so as you can see, Im simply monitoring when the activeTab is changed, now I can also monitor other events like 'mountedTableAction', 'mountedTableBulkAction', 'tableSearchQuery', 'updatedTableFilters' and then there is sorting too. Turns into kind of a mess and of course and also means if i set this in a trait, its a pain for the class using it to then monitor those events for other purposes without doing something like 
    use FilamentTableTabs {
        // Allows monitoring of the activeTab from both the trait and this class
        updatedActiveTab as traitUpdatedActiveTab;
    }
    use FilamentTableTabs {
        // Allows monitoring of the activeTab from both the trait and this class
        updatedActiveTab as traitUpdatedActiveTab;
    }
. Suggestions for better implementing this?
Want results from more Discord servers?
Add your server