How to add custom action button on page filters?

In this article, we are going to explore how we can add the custom action button on filament pages filters as the image above of quick filters.

1. Create a Page

The first step is to create a custom filament page. For that, please refer to this article. In this article, you can find the way to add custom page with custom form as well as tables.

2. Create a custom blade component.

Secondly, we will create a custom blade component and import it on our page blade file. The reason to create a separate blade file is to reuse it.

  <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Quick Filters</h3>
        <div class="flex flex-wrap gap-2">
            <x-filament::button wire:click="setToday">
                Today
            </x-filament::button>
            <x-filament::button wire:click="setYesterday">
                Yesterday
            </x-filament::button>
            <x-filament::button wire:click="setThisWeek">
                This Week
            </x-filament::button>

            <x-filament::button wire:click="setThisMonth">
                This Month
            </x-filament::button>
            <x-filament::button wire:click="setLast3Months">
                Last 3 Months
            </x-filament::button>
            <x-filament::button wire:click="setLast6Months">
                Last 6 Months
            </x-filament::button>
            <x-filament::button wire:click="setThisYear">
                This Year
            </x-filament::button>
            <x-filament::button wire:click="setLastYear">
                Last Year
            </x-filament::button>
            <x-filament::button
                wire:click="clearDates"
                color="danger">
                Clear Dates
            </x-filament::button>
        </div>
    </div>

Here, you can see I have created a blade file using filament button and each button has wire:click method that handles the action when button is clicked.

3. Import custom blade file on page blade file.

Now, another step is to import the above blade file (if created separately ) on our main page blade file.

<x-filament-panels::page>
    @include('reusables.quick-date-filter')
    {{ $this->form}}
    {{$this->table}}
</x-filament-panels::page>

I have used @include method to include the quick-date-filter.blade.php.

4. Add actions

Now, the final method is to create an action for all of the methods above. Since, it will be reused in multiple places, i will create a trait and add action there.

<?php 

namespace App\Traits;

trait QuickFilter
{

      public function setToday(): void
    {
        $this->from_date = now()->toDateString();
        $this->to_date = now()->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setYesterday(): void
    {
        $yesterday = now()->subDay();
        $this->from_date = $yesterday->toDateString();
        $this->to_date = $yesterday->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setThisWeek(): void
    {
        $this->from_date = now()->startOfWeek()->toDateString();
        $this->to_date = now()->endOfWeek()->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setLastWeek(): void
    {
        $lastWeekStart = now()->subWeek()->startOfWeek();
        $lastWeekEnd = now()->subWeek()->endOfWeek();
        $this->from_date = $lastWeekStart->toDateString();
        $this->to_date = $lastWeekEnd->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setThisMonth(): void
    {
        $this->from_date = now()->startOfMonth()->toDateString();
        $this->to_date = now()->endOfMonth()->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setLastMonth(): void
    {
        $lastMonthStart = now()->subMonth()->startOfMonth();
        $lastMonthEnd = now()->subMonth()->endOfMonth();
        $this->from_date = $lastMonthStart->toDateString();
        $this->to_date = $lastMonthEnd->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setLast3Months(): void
    {
        $this->from_date = now()->subMonths(3)->startOfMonth()->toDateString();
        $this->to_date = now()->endOfMonth()->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setLast6Months(): void
    {
        $this->from_date = now()->subMonths(6)->startOfMonth()->toDateString();
        $this->to_date = now()->endOfMonth()->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setThisYear(): void
    {
        $this->from_date = now()->startOfYear()->toDateString();
        $this->to_date = now()->endOfYear()->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function setLastYear(): void
    {
        $lastYearStart = now()->subYear()->startOfYear();
        $lastYearEnd = now()->subYear()->endOfYear();
        $this->from_date = $lastYearStart->toDateString();
        $this->to_date = $lastYearEnd->toDateString();
        $this->form->fill([
            'from_date' => $this->from_date,
            'to_date' => $this->to_date,
        ]);
    }

    public function clearDates(): void
    {
        $this->from_date = null;
        $this->to_date = null;
        $this->form->fill([
            'from_date' => null,
            'to_date' => null,
        ]);
    }
}

If you see the above TRAIT class, you can find out, all the methods have been defined there. Now the final step is to use this trait on our page.

5. Use the above trait

class Report extends Page implements HasForms, HasTable
{
    use InteractsWithForms, InteractsWithTable;
    use QuickDateFilter;
.......
}