Filament•7d ago

Using Blade Tabs to filter `getFooterWidgets()`

Situation - I have bunch of widgets that get generated. - added filter tabs across the top with the blade component - the tabs switching changes the data, but doesn't show the correct ones See attached video for what I mean

9 Replies

JakubOP•7d ago

blade file

<x-filament-panels::page>
    <x-filament::tabs>
        @foreach($this->projects as $project)
            <x-filament::tabs.item
            icon="heroicon-o-folder"
            activeIcon="heroicon-s-folder-open"
            :active="$activeTab == $project->prefix"
            wire:click="switchTab('{{ $project->prefix }}')">

                {{$project->prefix }}
            </x-filament::tabs.item>
        @endforeach
    </x-filament::tabs>

</x-filament-panels::page>

<x-filament-panels::page>
    <x-filament::tabs>
        @foreach($this->projects as $project)
            <x-filament::tabs.item
            icon="heroicon-o-folder"
            activeIcon="heroicon-s-folder-open"
            :active="$activeTab == $project->prefix"
            wire:click="switchTab('{{ $project->prefix }}')">

                {{$project->prefix }}
            </x-filament::tabs.item>
        @endforeach
    </x-filament::tabs>

</x-filament-panels::page>

class ListPinnedThreads extends Page
{
    protected static string $resource = ThreadResource::class;

... 

    public function switchTab($prefix)
    {
        $this->activeTab = $prefix;
        $this->dispatch('switch-tabs');

    }

    #[On('switch-tabs')]
    public function getFooterWidgets(): array
    {
        $threads = Thread::with(['project', 'project.owner'])
            ->where('is_pinned', true)
            ->where('is_active', true)
            ->whereHas('project', function ($query) {
                $query->where('is_active', true)->where('prefix', $this->activeTab);
            })
            ->orderBy('priority', 'asc')
            ->get();

        $widgets = [];
        foreach ($threads as $thread) {
            $widgets[] = PinnedThreadTableWidget::make(['thread' => $thread]);
        }

        return $widgets;
    }
...

class ListPinnedThreads extends Page
{
    protected static string $resource = ThreadResource::class;

... 

    public function switchTab($prefix)
    {
        $this->activeTab = $prefix;
        $this->dispatch('switch-tabs');

    }

    #[On('switch-tabs')]
    public function getFooterWidgets(): array
    {
        $threads = Thread::with(['project', 'project.owner'])
            ->where('is_pinned', true)
            ->where('is_active', true)
            ->whereHas('project', function ($query) {
                $query->where('is_active', true)->where('prefix', $this->activeTab);
            })
            ->orderBy('priority', 'asc')
            ->get();

        $widgets = [];
        foreach ($threads as $thread) {
            $widgets[] = PinnedThreadTableWidget::make(['thread' => $thread]);
        }

        return $widgets;
    }
...

I did try adding tabs with the getTabs method but couldn't get that to show up

    public function getTabs(): array
    {
        $projects = Project::where('is_active', true)->get();

        foreach ($projects as $project) {
            $tabs[$project->prefix] = Tab::make()
                ->label($project->prefix)
                ->modifyQueryUsing(
                    fn (Builder $query) => $query
                    ->where('project_id', $project->id)
                );
        }

        return $tabs;
    }

    public function getTabs(): array
    {
        $projects = Project::where('is_active', true)->get();

        foreach ($projects as $project) {
            $tabs[$project->prefix] = Tab::make()
                ->label($project->prefix)
                ->modifyQueryUsing(
                    fn (Builder $query) => $query
                    ->where('project_id', $project->id)
                );
        }

        return $tabs;
    }

Goal - I am looking for any guidance in the right direction on this - I want to have a page with tabs across the top - and have multiple tables (not use the tableGroup on one table) Could be I am approaching this whole thing wrong 🤔 Any insight much appreciated 🙌

Dennis Koch•6d ago

Any console errors? The prefix is those 3 chars?

JakubOP•6d ago

yea the prefix is just a string with 3 characters and there is no console errors when the page loads, or when the tabs are clicked one thing i did notice is that the correct # of tables gets shown based on the tab. But the data in those tables is just incorrect 🤔

        $threads = Thread::with(['project', 'project.owner'])
            ->where('is_pinned', true)
            ->where('is_active', true)
            ->whereHas('project', function ($query) {
                $query->where('is_active', true);
                if ($this->activeTab) {
                    $query->where('prefix', $this->activeTab);
                }
            })
            ->orderBy('priority', 'asc')
            ->get();

        if ($this->activeTab) {
            dd($threads);
        }

        $widgets = [];

        foreach ($threads as $thread) {
            $widgets[] = PinnedThreadTableWidget::make(['thread' => $thread]);
        }

        return $widgets;

        $threads = Thread::with(['project', 'project.owner'])
            ->where('is_pinned', true)
            ->where('is_active', true)
            ->whereHas('project', function ($query) {
                $query->where('is_active', true);
                if ($this->activeTab) {
                    $query->where('prefix', $this->activeTab);
                }
            })
            ->orderBy('priority', 'asc')
            ->get();

        if ($this->activeTab) {
            dd($threads);
        }

        $widgets = [];

        foreach ($threads as $thread) {
            $widgets[] = PinnedThreadTableWidget::make(['thread' => $thread]);
        }

        return $widgets;