Директива wire:sort:group

Директива wire:sort:group используется совместно с директивой wire:sort для создания группированной сортировки элементов. Она определяет идентификатор группы, к которой принадлежат сортируемые элементы. При перетаскивании элемента внутри одной группы порядок меняется только в пределах этой группы, что позволяет организовать независимую сортировку в разных секциях интерфейса.

Синтаксис

<div wire:sort:group="groupId">
	@foreach ($items as $item)
		<div wire:sort:item="sortKey">
			{{ $item }}
		</div>
	@endforeach
</div>

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

Пример

Давайте создадим две независимые группы задач: запланированные и выполненные. Перемещение элементов внутри каждой группы будет изменять только порядок внутри этой группы:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class TaskBoard extends Component
	{
		public $planned = ['task_1', 'task_2', 'task_3'];
		public $completed = ['task_4', 'task_5'];

		protected function updateSortOrder($group, $newOrder)
		{
			if ($group === 'planned') {
				$this->planned = $newOrder;
			} elseif ($group === 'completed') {
				$this->completed = $newOrder;
			}
		}

		public function render()
		{
			return view('livewire.task-board');
		}
	}
?>

<div>
	<div class="board">
		<div class="column">
			<h3>Planned</h3>
			<div wire:sort:group="planned">
				@foreach ($planned as $task)
					<div wire:sort:item="{{ $task }}">
						{{ $task }}
					</div>
				@endforeach
			</div>
		</div>
		<div class="column">
			<h3>Completed</h3>
			<div wire:sort:group="completed">
				@foreach ($completed as $task)
					<div wire:sort:item="{{ $task }}">
						{{ $task }}
					</div>
				@endforeach
			</div>
		</div>
	</div>
</div>

Результат выполнения кода:

<div class="board">
	<div class="column">
		<h3>Planned</h3>
		<div>
			<div>task_1</div>
			<div>task_2</div>
			<div>task_3</div>
		</div>
	</div>
	<div class="column">
		<h3>Completed</h3>
		<div>
			<div>task_4</div>
			<div>task_5</div>
		</div>
	</div>
</div>

После перетаскивания элементов внутри каждой колонки их порядок обновится независимо в пределах своей группы. Например, если переместить task_3 в начало списка planned, а task_5 в начало completed, результат будет таким:

<div class="board">
	<div class="column">
		<h3>Planned</h3>
		<div>
			<div>task_3</div>
			<div>task_1</div>
			<div>task_2</div>
		</div>
	</div>
	<div class="column">
		<h3>Completed</h3>
		<div>
			<div>task_5</div>
			<div>task_4</div>
		</div>
	</div>
</div>

Пример

Динамически зададим идентификатор группы через свойство компонента. Это полезно, когда группа определяется на основе данных:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class CategorySort extends Component
	{
		public $categoryId = 1;
		public $items = ['item_a', 'item_b', 'item_c'];

		public function setCategory($id)
		{
			$this->categoryId = $id;
		}

		public function render()
		{
			return view('livewire.category-sort');
		}
	}
?>

<div>
	<button wire:click="setCategory(1)">Category 1</button>
	<button wire:click="setCategory(2)">Category 2</button>
	<div wire:sort:group="{{ $categoryId }}">
		@foreach ($items as $item)
			<div wire:sort:item="{{ $item }}">
				{{ $item }}
			</div>
		@endforeach
	</div>
</div>

Результат выполнения кода:

<div>
	<button>Category 1</button>
	<button>Category 2</button>
	<div>
		<div>item_a</div>
		<div>item_b</div>
		<div>item_c</div>
	</div>
</div>

Смотрите также

директиву wire:sort,
которая включает сортировку элементов
директиву wire:sort:item,
которая определяет сортируемый элемент
директиву wire:sort:handle,
которая задает область захвата для перетаскивания
директиву wire:click,
которая вызывает метод компонента по клику