Filament

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

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

Гибкая работа с таблицами (грид)

Filament предоставляет удобный и гибкий грид для работы с данными, который позволяет легко управлять каталогом товаров, заказами и другими сущностями интернет-магазина.

Основные возможности грида:

  • Фильтрация данных — можно быстро настроить и сохранить фильтры для удобного поиска товаров, заказов или пользователей. Это особенно полезно для больших интернет-магазинов.
  • Поиск по таблице — встроенный поиск по ключевым полям позволяет мгновенно находить нужную информацию без лишних действий.
  • Гибкость в отображении колонок — можно легко скрывать или добавлять столбцы, оставляя на экране только нужные данные.
  • Сортировка и группировка — возможность сортировки данных по различным параметрам (цене, статусу, дате создания и т. д.), что делает управление каталогом более удобным.
  • Интерактивные элементы — переключатели, цветовые метки, кнопки действий упрощают редактирование записей прямо в таблице без необходимости заходить в карточку товара.

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

Вам не нужно разрабатывать свою систему фильтрации и таблиц — всё уже готово и настраивается в пару кликов.

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

  • Удаление продуктов
  • Публикация
  • Обновление цен
  • Активация/деактивация
  • Экспорт продуктов (с возможностью выбора нужных столбцов)

Например, чтобы обновить цены, достаточно выделить нужные продукты и нажать «Обновить цены». После этого запускается Job, который добавляет выбранные продукты в очередь на перерасчёт цен.

Формы

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

Основные группы компонентов:

  • Текстовые поля: TextInput, Textarea, RichEditor – используются для ввода простого или форматированного текста.
  • Выбор значений: Select, CheckboxList, Radio, Toggle, MultiSelect – позволяют пользователю выбирать один или несколько вариантов.
  • Файлы и медиа: FileUpload, SpatieMediaLibraryFileUpload – загрузка изображений, документов и других файлов.
  • Группировка полей: Section, Fieldset, Grid – позволяют структурировать форму, создавая логические блоки.
  • Динамические формы: Repeater, Wizard, Tabs – используются для сложных сценариев, таких как многошаговые формы и повторяющиеся элементы.
  • Числовые и финансовые данные: TextInput (с масками и форматированием), RangeSlider, KeyValue – удобны для работы с числами, процентами и валютой.
  • Дата и время: DatePicker, TimePicker, DateTimePicker – для выбора и отображения дат и времени.
  • Отображение данных: Placeholder, Html – позволяют показывать текст, HTML-код или статические элементы.

Благодаря таким компонентам можно легко создавать сложные формы с минимальным количеством кода. Например, для выбора категорий в форме можно использовать выпадающий список (Select).

Этот элемент позволяет:

  • Задавать название поля
  • Устанавливать связь с моделью категорий
  • Настраивать отображение значений в списке
  • Загружать все категории сразу для оптимизации работы
  • Искать нужные категории прямо в поле ввода
  • Указывать, является ли поле обязательным
  • Добавлять дополнительные атрибуты
  • Поддерживать множественный выбор категорий

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

Роли и разрешения

В административных панелях важно контролировать доступ пользователей к различным разделам и действиям. Не все пользователи должны иметь одинаковые права – например, администратор может управлять всем контентом, а менеджер только редактировать заказы. Роль поставщика может изменять атрибуты, но подтверждает действие администратор.

Роли и разрешения позволяют:

  • Гибко настраивать доступ к страницам, ресурсам и действиям.
  • Обеспечить безопасность, ограничивая возможности пользователей.
  • Создать удобную систему управления, где каждому назначаются только нужные права.

В Filament встроена мощная система управления ролями и разрешениями, которая легко интегрируется с Laravel Spatie Permissions. В системе предусмотрены отдельные меню для управления ролями, разрешениями и пользователями. Как правило, каждое разрешение привязано к конкретному действию над определенным ресурсом. Роли объединяют в себе набор разрешений, а пользователь может иметь несколько ролей одновременно.

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

На проекте Nascent, мы реализовали удобную функциональность для изменения атрибутов продукта поставщиками. Теперь поставщики могут редактировать значения атрибутов товаров, но окончательное подтверждение и публикация остаются за администратором.

Чтобы визуально выделять изменённые атрибуты, в гриде и форме продуктов такие поля подсвечиваются жёлтым цветом.

В коде это работает следующим образом. Когда формируются объекты колонок, происходит проверка:

  • Требуется ли верификация атрибута?
  • Был ли изменён атрибут?

Если оба условия выполняются, к колонке добавляется CSS-класс changed-data, который отвечает за визуальную подсветку.

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

Встроенные возможности

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

Filament изначально поддерживает локализацию, но для удобного переключения языков в админке мы используем пакет bezhansalleh/filament-language-switch. Он позволяет администраторам в один клик менять язык интерфейса, что особенно полезно для проектов, работающих на нескольких языках.

Расширяемость с помощью пакетов

Главным фактором нашего выбора в пользу Filament стала его расширяемость – именно она играет ключевую роль. Выделим ключевые аспекты расширяемости:

  • Использование Livewire. Построение на основе Livewire. Вы можете создавать собственные Livewire-компоненты и интегрировать их, расширяя функциональность.
  • Ресурсы (Resources). Ресурсы позволяют управлять моделями Eloquent. Вы можете создавать собственные ресурсы, добавлять новые поля, фильтры, действия и страницы.
  • Компоненты. Filament предоставляет множество готовых компонентов (например, таблицы, формы, карточки). Вы можете создавать свои компоненты или расширять существующие, переопределяя их методы и шаблоны.
  • Шаблоны (Views). Используются Blade-шаблоны, которые можно переопределять или расширять. Это позволяет изменять внешний вид и поведение интерфейса без изменения ядра пакета.
  • Плагины. Поддерживается создание плагинов, которые могут добавлять новые функции, ресурсы, страницы и виджеты. Это позволяет разрабатывать и распространять расширения для Filament.
  • Конфигурация. Имеет гибкую систему конфигурации. Вы можете изменять настройки через конфигурационные файлы, чтобы адаптировать поведение пакета под свои нужды.
  • Кастомизация через CSS и JavaScript. Позволяет добавлять собственные стили и скрипты, что дает возможность изменять внешний вид и поведение интерфейса.
  • Поддержка тем (Theming). Поддерживает создание собственных тем, что позволяет изменять внешний вид админ-панели в соответствии с брендингом проекта.

Сообщество активно развивается и насчитывает уже более 300 авторов. Множество плагинов для админ-панели можно найти на официальном сайте: https://filamentphp.com/plugins

Заключение

Выбор Filament для административных панелей наших eCommerce-проектов оказался оправданным решением. Он сочетает в себе удобство, гибкость и богатый функционал, что позволяет нам быстро и эффективно разрабатывать сложные системы управления интернет-магазинами. Благодаря встроенным инструментам, таким как уведомления, мультиязычность, настраиваемый интерфейс, мощные таблицы и формы, а также продвинутая система ролей и разрешений, Filament значительно ускоряет разработку и упрощает работу администраторов.

Хотя основное направление нашей работы — это eCommerce, мы также создаем другие бизнес-приложения, где Filament проявил себя как надежный и универсальный инструмент. Его гибкость и удобство позволяют нам реализовывать административные панели с высокой скоростью и минимальными затратами на кастомизацию.

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