Панель управления Laravel с помощью Filament

Именно здесь и пригодится Filament. Filament - это библиотека с открытым исходным кодом на базе Laravel, которая предлагает элегантный набор компонентов пользовательского интерфейса для создания полнофункциональных панелей мониторинга администратора.

В этой статье мы рассмотрим основные функциональные возможности Filament. Мы сделаем это, создав образец панели администратора, в которой используются три мощных компонента Filament: конструктор форм, уведомления и действия. Затем мы изучим передовые методы и рекомендации по созданию интерактивной, надежной и масштабируемой панели администратора.

Являетесь ли вы опытным разработчиком Laravel, который хочет усовершенствовать свой инструментарий, или только начинаете работать с Filament, это руководство даст вам знания, необходимые для создания впечатляющих интерфейсов, сохраняя при этом чистоту кода и простоту в обслуживании.

Настройка среды Laravel с помощью Filament

Создание нового проекта Laravel

Если вы начинаете с нуля, создайте новый проект Laravel. Откройте свой терминал и выполните следующую команду, чтобы настроить новую установку Laravel:

composer create-project --prefer-dist laravel/laravel filament-admin

После завершения установки перейдите в каталог проекта:

cd filament-admin

Установка filament

Filament доступен в виде пакета Composer, что упрощает интеграцию в ваш проект Laravel. Чтобы установить Filament, выполните следующую команду:

composer require filament/filament

После установки вам нужно будет опубликовать ресурсы Filament и файлы конфигурации. На этом этапе ресурсы Filament будут скопированы в ваш проект, что позволит вам изменять и настраивать их по мере необходимости:

php artisan filament:install

Настройка базы данных

Откройте свой env-файл и настройте подключение к базе данных, чтобы завершить настройку. Как только база данных будет настроена, запустите Laravel migrations, чтобы создать таблицы по умолчанию, необходимые для функций Filament.:

php artisan migrate

Выполнение этого шага означает, что вы успешно установили Filament. Вы готовы приступить к созданию интерфейса вашего приложения.

Создание форм с помощью Filament's Form Builder

Конструктор форм от Filament предоставляет мощный и гибкий компонент для создания сложных форм. Эти компоненты необходимы для любой панели администратора, где требуется ввод данных и управление ими. Инструменты Filament's form tools делают именно это, предоставляя встроенную проверку, поддержку различных типов ввода и условную логику для обработки динамических полей.

Определение модели и миграция для пользователей

Чтобы построить наш пример, давайте начнем с создания пользовательской модели с соответствующим файлом переноса для хранения пользовательских данных. Выполните следующую команду для создания модели и переноса:

php artisan make:model User -m

В созданном файле миграции (database/migrations/*_create_users_table.php) добавьте поля для таблицы users:

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

Schema::create('users', function (Blueprint $table) {
    $table->id();
    $table->string('name');
    $table->string('email')->unique();
    $table->enum('role', ['admin', 'editor', 'viewer'])->default('viewer');
    $table->timestamps();
});

Запустите миграцию, чтобы применить соответствующие изменения к базе данных:

php artisan migrate

Это создает таблицу users с полями для хранения имени пользователя, электронной почты и роли, что позволяет нам управлять пользовательскими данными в панели управления администратора.

Создание пользовательской формы с помощью Filament

Далее вам нужно будет создать форму для сбора важных данных, таких как имя пользователя, адрес электронной почты и роль. Компонент Filament's Form упрощает этот процесс, предоставляя широкий спектр типов ввода и вариантов проверки.

Добавьте в свой файл все необходимые инструкции по использованию таких компонентов, как Forms\Components\TextInput и Forms\Components\Select.

Вот простой пример пользовательской формы:

use Filament\Forms;

Forms\Components\TextInput::make('name')
    ->label('Full Name')
    ->required()
    ->placeholder('Enter full name')
    ->maxLength(50)
    ->validationAttribute('full name'),

Forms\Components\TextInput::make('email')
    ->label('Email Address')
    ->email()
    ->required()
    ->unique('users', 'email')
    ->placeholder('Enter email address')
    ->validationAttribute('email address'),

Forms\Components\Select::make('role')
    ->label('User Role')
    ->options([
        'admin' => 'Admin',
        'editor' => 'Editor',
        'viewer' => 'Viewer',
    ])
    ->default('viewer')
    ->required(),

Приведенная выше настройка формы включает в себя проверку правильности заполнения обязательных полей и уникальности электронного письма, чтобы обеспечить точность введенных пользователем данных перед сохранением.

Проверка подлинности и обработка ошибок

Filament упрощает проверку формы, используя встроенные в Laravel правила проверки. Например, мы можем добавить ->обязательный() или ->уникальный() к каждому полю, чтобы убедиться, что необходимые данные введены и подтверждены. Затем Filament отобразит все ошибки проверки непосредственно в форме, немедленно предоставив пользователям обратную связь.

Вот пример с пользовательскими сообщениями об ошибках:

Forms\Components\TextInput::make('email')
    ->required()
    ->email()
    ->unique('users', 'email')
    ->validationAttribute('email address'),

Такой подход улучшает пользовательский опыт за счет немедленного уведомления пользователей об ошибках, что гарантирует отправку форм с достоверными данными.

Условная логика и динамические поля

Конструктор форм Filament поддерживает условную логику, что означает, что он позволяет отображать или изменять поля в зависимости от ввода данных пользователем. В качестве примера давайте рассмотрим случай, когда вы можете сделать поле видимым только в том случае, если другое поле удовлетворяет определенному условию:

Forms\Components\Select::make('role')
    ->options([
        'admin' => 'Admin',
        'editor' => 'Editor',
        'viewer' => 'Viewer',
    ])
    ->default('viewer')
    ->visible(fn ($get) => $get('role') === 'admin')
    ->label('User Role'),

Это делает поле роли видимым только в том случае, если пользователь является администратором, уменьшая количество загромождений в форме и повышая удобство использования.

Обработка отправки формы

Filament упрощает отправку форм. Вот как с этим начать.

Определите метод отправки в вашем компоненте формы или контроллере для обработки проверенных данных и сохранения их в базе данных:

public function submit()
{
    $validatedData = $this->validate();

    User::create($validatedData);

    Notification::make()
        ->title('User Created')
        ->success()
        ->body('The user has been successfully created.')
        ->send();
}

Функция, описанная выше, проверяет данные формы, сохраняет их в базе данных и отправляет уведомление об успешном завершении, упрощая работу пользователя за счет немедленной обратной связи. Подробнее о системе уведомлений мы поговорим в следующем разделе.

Повышение удобства работы пользователей с уведомлениями

Панели мониторинга администратора получают уведомления, которые информируют пользователей об успешных действиях, ошибках и других обновлениях. Система уведомлений Filament делает именно это, позволяя настраивать сообщения для различных сценариев.

Основные уведомления

Чтобы создать уведомление, используйте класс Notification. Это позволяет задать заголовок, сообщение и тип уведомления:

use Filament\Notifications\Notification;

Notification::make()
    ->title('Action Successful')
    ->success()
    ->body('The operation completed successfully.')
    ->send();

Уведомления в режиме реального времени с помощью Laravel Echo и Pusher

Для более динамичного взаимодействия интегрируйте Laravel Echo и Pusher для отображения уведомлений в режиме реального времени. Это особенно полезно в приложениях для совместной работы, где пользователям требуется мгновенная обратная связь.

Сначала установите Laravel Echo и Pusher:

composer require pusher/pusher-php-server
npm install --save laravel-echo pusher-js

Затем настройте свой env-файл с вашими учетными данными для Pusher и установите BROADCAST_DRIVER=pusher. Это позволит вам транслировать события в режиме реального времени.

Настраиваемые Actions для интерактивных панелей мониторинга

Компонент Actions в Filament позволяет добавлять пользовательские кнопки с определенным поведением, например, для удаления данных или запуска рабочих процессов. Это упрощает выполнение определенных действий непосредственно в интерфейсе.

Создание основных Actions

Вот пример action по удалению с этапом подтверждения:

use Filament\Tables\Actions\Action;

Action::make('delete')
    ->label('Delete User')
    ->action(fn () => $this->deleteUser())
    ->color('danger')
    ->requiresConfirmation()
    ->icon('heroicon-s-trash');

Метод requiresConfirmation() предлагает пользователям подтвердить перед выполнением действий, что сокращает количество случайных удалений.

Расширенные многоэтапные Actions

Для более сложных рабочих процессов вы можете настроить многоэтапные actions. Например, при архивировании пользователь может сначала подтвердить действие, обновить базу данных, а затем уведомить администратора:

Action::make('archive')
    ->label('Archive User')
    ->requiresConfirmation([
        'message' => 'Are you sure you want to archive this user?',
        'confirmButtonText' => 'Yes, archive',
        'cancelButtonText' => 'No, keep user',
    ])
    ->action(fn () => $this->archiveUser())
    ->after(fn () => Notification::make()->title('User Archived')->send());

Такой уровень контроля обеспечивает плавное управление пользователями с помощью индивидуальных действий для каждой ситуации.

Вывод

Filament - это мощный инструментарий для создания интерактивных полнофункциональных панелей управления в Laravel. В этом руководстве мы рассмотрели три его компонента: конструктор форм для динамических форм, уведомления для обратной связи в режиме реального времени и actions (действия) для выполнения конкретных задач.

Объединив надежную серверную часть Laravel с компонентами пользовательского интерфейса Filament, вы можете создавать интуитивно понятные, надежные и удобные в использовании панели администрирования, что позволит вам повысить производительность и удовлетворенность пользователей.

Filament предлагает многофункциональное и удобное для разработчиков решение для команд, стремящихся создать комплексные информационные панели администратора. Изучите документацию Filament, чтобы раскрыть больше возможностей и начать создавать привлекательные высокопроизводительные приложения Laravel уже сегодня.