Drag-and-Drop сортування для Eloquent Models за допомогою пакета Reorderable для Laravel

Laravel Reorderable від Richie McMullen додає функціонал drag-and-drop сортування до будь-якої Eloquent model. Пакет містить готові Blade та Livewire компоненти, автоматично зберігає нові позиції через власний route та підтримує сортування всередині певної групи (scoping).

Для роботи пакету необхідно додати HasSortOrder trait та ReorderableContract до вашої model:

use Atomcoder\LaravelReorderable\Contracts\ReorderableContract;
use Atomcoder\LaravelReorderable\Traits\HasSortOrder;
 
class Task extends Model implements ReorderableContract
{
    use HasSortOrder;
 
    protected $fillable = ['title', 'project_id', 'sort_order'];
    protected string $sortColumn = 'sort_order';
 
    public function getReorderLabel(): string
    {
        return $this->title;
    }
}

Цей trait автоматично призначає порядковий номер при створенні запису та додає query scope ordered() для завантаження даних у правильній послідовності.

# Blade та Livewire компоненти

Пакет підтримує обидва підходи до рендерингу. Ви можете використати @include у Blade view або скористатися Livewire компонентом — обидва варіанти мають ідентичні налаштування:

Blade:

@include('reorderable::components.list', [
    'items' => $tasks,
    'modelClass' => App\Models\Task::class,
    'groupColumn' => 'project_id',
    'groupValue' => $project->id,
    'title' => 'Reorder Tasks',
    'listId' => 'project-tasks-list',
])

Livewire:

<livewire:reorderable-list
    :items="$tasks"
    model-class="App\Models\Task"
    group-column="project_id"
    :group-value="$project->id"
    title="Reorder Tasks"
    list-id="project-tasks-list"
/>

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

# Групове сортування

Пакет дозволяє обмежити сортування межами батьківської групи. Наприклад, зміна порядку завдань в одному проєкті не вплине на завдання в іншому. Це також можна реалізувати програмно через методи moveToPosition() або reorderFromArray():

$task->moveToPosition(
    position: 2,
    groupColumn: 'project_id',
    groupValue: $task->project_id,
);
 
Task::reorderFromArray(
    orderedIds: [8, 3, 5, 1],
    groupColumn: 'project_id',
    groupValue: 12,
);

# Команда генерації

Замість ручного налаштування trait та конфігурацій можна скористатися командою reorderable:make:

php artisan reorderable:make Task --table=tasks --label=title --column=sort_order

Опція --label визначає атрибут, який відображатиметься в UI, а --column дозволяє вказати назву колонки для сортування, якщо вона відрізняється від стандартної sort_order.

# Авторизація та події

Ви можете обмежити доступ до route оновлення через closure у конфігурації, додавши перевірку policy або ролей:

'authorize' => function ($request, string $modelClass): bool {
    return $request->user()?->can('manage-content') ?? false;
},

Після успішної зміни порядку пакет запускає подію ItemsReordered. Вона містить назву класу моделі, список впорядкованих ID, а також назву та значення групи. Це корисно для очищення кешу або логування дій.

# Вимоги

Для роботи пакету потрібні PHP 8.3+, Laravel 13+ та Livewire 4+.

Дізнатися більше та переглянути вихідний код можна на GitHub.