F
Filament•2w ago
Jamie Cee

Guidance on custom tab blade views

So Im following the documentation for the Tab clade components, but still getting a few issues. So my blade for my custom page looks like this 
<div x-data="{ tab: 'tab1', tabLoaded: { tab1: false, tab2: false } }">
    <x-filament::tabs>
        <x-filament::tabs.item :active="$activeTab === 'tab1'" wire:click="$set('activeTab', 'tab1')">
            My Schedule
        </x-filament::tabs.item>
        <x-filament::tabs.item :active="$activeTab === 'tab2'" wire:click="$set('activeTab', 'tab2')">
            Team Schedule
        </x-filament::tabs.item>

        {{-- Other tabs --}}
    </x-filament::tabs>

    <div class="mt-2">
        <!-- Tab 1 -->
        <div x-ref="tab1" x-show="tab === 'tab1'">
            @livewire(\App\Filament\Widgets\WorkWeekScheduleWidget::class)
        </div>

        <!-- Tab 2 -->
        <div x-ref="tab2" x-show="tab === 'tab2'">
            @livewire(\App\Filament\Widgets\WorkWeekScheduleWidgetTeam::class)
        </div>
    </div>
</div>
<div x-data="{ tab: 'tab1', tabLoaded: { tab1: false, tab2: false } }">
    <x-filament::tabs>
        <x-filament::tabs.item :active="$activeTab === 'tab1'" wire:click="$set('activeTab', 'tab1')">
            My Schedule
        </x-filament::tabs.item>
        <x-filament::tabs.item :active="$activeTab === 'tab2'" wire:click="$set('activeTab', 'tab2')">
            Team Schedule
        </x-filament::tabs.item>

        {{-- Other tabs --}}
    </x-filament::tabs>

    <div class="mt-2">
        <!-- Tab 1 -->
        <div x-ref="tab1" x-show="tab === 'tab1'">
            @livewire(\App\Filament\Widgets\WorkWeekScheduleWidget::class)
        </div>

        <!-- Tab 2 -->
        <div x-ref="tab2" x-show="tab === 'tab2'">
            @livewire(\App\Filament\Widgets\WorkWeekScheduleWidgetTeam::class)
        </div>
    </div>
</div>
1 Reply
Jamie Cee
Jamie CeeOP•2w ago
And my page class: 
class WorkSchedulePage extends Page
{
    use HasTabs;

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.work-schedule-page';

    // public function resetPage()
    // {
    //     // Reset the page state when switching tabs
    //     $this->reset('activeTab');
    // }


    public function getTabs(): array
    {
        return [
            'tab1' => Tab::make('Work Week Schedule')
                ->label('Work Week Schedule')
                // ->view(\App\Filament\Widgets\WorkWeekScheduleWidget::class)
                ->icon('heroicon-o-calendar')
                ->badge(null)
                ->badgeColor('success'),

            'tab2' => Tab::make('Work Schedule Team Schedule')
                ->label('Work Schedule Team Schedule')
                // ->view(\App\Filament\Widgets\WorkWeekScheduleWidgetTeam::class)
                ->icon('heroicon-o-clipboard')
                ->badge(null)
                ->badgeColor(null),
        ];

    }
}
class WorkSchedulePage extends Page
{
    use HasTabs;

    protected static ?string $navigationIcon = 'heroicon-o-document-text';

    protected static string $view = 'filament.pages.work-schedule-page';

    // public function resetPage()
    // {
    //     // Reset the page state when switching tabs
    //     $this->reset('activeTab');
    // }


    public function getTabs(): array
    {
        return [
            'tab1' => Tab::make('Work Week Schedule')
                ->label('Work Week Schedule')
                // ->view(\App\Filament\Widgets\WorkWeekScheduleWidget::class)
                ->icon('heroicon-o-calendar')
                ->badge(null)
                ->badgeColor('success'),

            'tab2' => Tab::make('Work Schedule Team Schedule')
                ->label('Work Schedule Team Schedule')
                // ->view(\App\Filament\Widgets\WorkWeekScheduleWidgetTeam::class)
                ->icon('heroicon-o-clipboard')
                ->badge(null)
                ->badgeColor(null),
        ];

    }
}
Current issue, when I try to change tab, I get Method App\Filament\Pages\WorkSchedulePage::resetPage does not exist. Wondering if the issue is related to the fact Im trying to use a widget view rather than a table?

Did you find this page helpful?