Список записів · Filament

Вкладки для фільтрації записів

Над таблицею можна додати вкладки, які фільтрують записи за наперед визначеними умовами. Кожна вкладка по-своєму обмежує Eloquent-запит таблиці. Щоб зареєструвати вкладки, додайте метод getTabs() до класу сторінки List і поверніть масив обʼєктів Tab:

use Filament\Schemas\Components\Tabs\Tab;
use Illuminate\Database\Eloquent\Builder;

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

Налаштування підписів вкладок фільтрації

Ключі масиву використовуються як ідентифікатори вкладок, тому їх можна зберігати в query string URL. Підпис кожної вкладки теж генерується з ключа, але це можна перевизначити, передавши підпис у метод make() вкладки:

use Filament\Schemas\Components\Tabs\Tab;
use Illuminate\Database\Eloquent\Builder;

public function getTabs(): array
{
    return [
        'all' => Tab::make('All customers'),
        'active' => Tab::make('Active customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', true)),
        'inactive' => Tab::make('Inactive customers')
            ->modifyQueryUsing(fn (Builder $query) => $query->where('active', false)),
    ];
}

Іконки на вкладках фільтрації

Додати іконки до вкладок можна, передавши іконку в метод icon() вкладки:

use Filament\Schemas\Components\Tabs\Tab;

Tab::make()
    ->icon('heroicon-m-user-group')

Позицію іконки теж можна змінити, щоб вона стояла після підпису, а не перед ним, за допомогою методу iconPosition():

use Filament\Support\Enums\IconPosition;

Tab::make()
    ->icon('heroicon-m-user-group')
    ->iconPosition(IconPosition::After)

Бейджі на вкладках фільтрації

Бейджі додаються передаванням рядка в метод badge() вкладки:

use Filament\Schemas\Components\Tabs\Tab;

Tab::make()
    ->badge(Customer::query()->where('active', true)->count())

Зміна кольору бейджів вкладок

Колір бейджа змінюється методом badgeColor():

use Filament\Schemas\Components\Tabs\Tab;

Tab::make()
    ->badge(Customer::query()->where('active', true)->count())
    ->badgeColor('success')

Окрім статичного значення, метод badgeColor() приймає також функцію для динамічного обчислення. У функцію можна впроваджувати різні утиліти як параметри.

Відкладене завантаження бейджів вкладок

Якщо бейджі вкладок спираються на дорогі запити (наприклад, підрахунок великих наборів даних), початкове завантаження сторінки може бути повільним. Завантаження бейджів можна відкласти методом deferBadge(): значення бейджів підвантажаться асинхронно після рендерингу сторінки:

use Filament\Schemas\Components\Tabs\Tab;

Tab::make()
    ->badge(static fn (): int => Customer::query()->where('active', true)->count())
    ->deferBadge()

Під час використання deferBadge() значення badge() має повертатися з функції. Якщо передати «сире» значення на кшталт badge(Customer::query()->count()), запит виконається одразу під час побудови вкладки, і сенс відкладення зникає.

Поки бейджі завантажуються, замість кожного відкладеного бейджа показується невеликий індикатор завантаження. Коли дані отримані, індикатори замінюються реальними значеннями бейджів.

Додаткові атрибути для вкладок фільтрації

Вкладкам фільтрації можна передати й додаткові HTML-атрибути через extraAttributes():

use Filament\Schemas\Components\Tabs\Tab;

Tab::make()
    ->extraAttributes(['data-cy' => 'statement-confirmed-tab'])

Налаштування вкладки за замовчуванням

Щоб задати вкладку, яка буде вибрана під час завантаження сторінки, поверніть ключ масиву цієї вкладки з методу getDefaultActiveTab():

use Filament\Schemas\Components\Tabs\Tab;

public function getTabs(): array
{
    return [
        'all' => Tab::make(),
        'active' => Tab::make(),
        'inactive' => Tab::make(),
    ];
}

public function getDefaultActiveTab(): string | int | null
{
    return 'active';
}

Виключення запиту вкладки під час резолвінгу записів

Коли користувач взаємодіє із записом таблиці (наприклад, натискає кнопку дії), Filament отримує цей запис із бази даних. За замовчуванням застосовується запит активної вкладки, тож користувач не може дістатися до записів поза межами поточної вкладки.

Проте, коли стан запису змінюється вже після того, як користувач побачив його в таблиці, взаємодію з ним іноді все одно треба зберегти. Наприклад, якщо у вас є вкладка «Active», а дія переводить запис у неактивний стан, наступні дії в тому самому модальному вікні не зможуть отримати цей запис.

Вкладку можна позначити такою, що виключається під час резолвінгу записів, методом excludeQueryWhenResolvingRecord():

use Filament\Schemas\Components\Tabs\Tab;
use Illuminate\Database\Eloquent\Builder;

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

Не використовуйте excludeQueryWhenResolvingRecord() на вкладках, які забезпечують правила авторизації. Наприклад, якщо вкладка обмежує записи за тенантом чи власником-користувачем, така вкладка має залишатися дієвою, щоб запобігти неавторизованому доступу.

Авторизація

Для авторизації Filament враховує будь-які політики моделей, зареєстровані у вашому застосунку.

Користувачі мають доступ до сторінки List, якщо метод viewAny() політики моделі повертає true.

Метод reorder() керує зміною порядку записів.

Налаштування Eloquent-запиту таблиці

Хоча ви можете налаштувати Eloquent-запит для всього ресурсу, окремі зміни можна внести і для таблиці сторінки List. Для цього скористайтеся методом modifyQueryUsing() у методі table() ресурсу:

use Filament\Tables\Table;
use Illuminate\Database\Eloquent\Builder;

public static function table(Table $table): Table
{
    return $table
        ->modifyQueryUsing(fn (Builder $query) => $query->withoutGlobalScopes());
}

Власний вміст сторінки

Кожна сторінка у Filament має власну схему, яка визначає загальну структуру й вміст. Схему сторінки можна перевизначити, оголосивши на ній метод content(). Метод content() для сторінки List за замовчуванням містить такі компоненти:

use Filament\Schemas\Components\EmbeddedTable;
use Filament\Schemas\Components\RenderHook;
use Filament\Schemas\Schema;

public function content(Schema $schema): Schema
{
    return $schema
        ->components([
            $this->getTabsContentComponent(), // Цей метод повертає компонент, що показує вкладки над таблицею
            RenderHook::make(PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE),
            EmbeddedTable::make(), // Це компонент, який рендерить таблицю, визначену в цьому ресурсі
            RenderHook::make(PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER),
        ]);
}

У масив components() можна вставити будь-який компонент схеми. Порядок компонентів змінюється зміною порядку в масиві, а непотрібні компоненти можна прибрати.

Власне Blade-представлення

Для ще більших можливостей налаштування перевизначте статичну властивість $view класу сторінки, вказавши власне представлення (view) у застосунку:

protected string $view = 'filament.resources.users.pages.list-users';

Це передбачає, що ви створили представлення за шляхом resources/views/filament/resources/users/pages/list-users.blade.php:

<x-filament-panels::page>
    {{ $this->content }} {{-- Тут відрендериться вміст сторінки, визначений у методі `content()`; це можна прибрати, якщо хочете почати з чистого аркуша --}}
</x-filament-panels::page>