Livewire를 사용한 일괄 작업

이 자습서에서는 사용자가 Livewire를 사용하여 여러 레코드를 선택하고 업데이트할 수 있도록 일괄 작업을 구현하는 방법을 살펴봅니다. 라이브와이어 테이블 관련 시리즈 3부입니다. 시리즈에서 Livewire를 사용하여 테이블의 열을 숨기거나 표시하는 방법을 보았습니다.
Product 라는 모델이 있고 status 열이 있다고 가정해 보겠습니다. 사용자에게 여러 제품을 선택한 다음 선택한 모든 제품에 대해 status 열의 값을 변경할 수 있는 기능을 제공하고자 합니다.

테이블 형식으로 레코드를 표시하는 작동하는 Livewire 구성 요소가 이미 있다고 가정합니다. 우선 Livewire 구성 요소에 새 속성$selectedProducts을 추가합니다. 이것은 사용자가 선택한 모든 제품을 보유합니다.

public $selectedProducts = [];

이제 보기에서 각 항목 옆에 확인란을 표시하려고 합니다. 새 열을 만들고 모든 결과를 표시하는 루프 안에 다음 코드를 붙여넣습니다.

<input type="checkbox" value="{{$product->id}}" />

그러면 확인란이 표시되고 고유하게 식별하기 위해 제품 테이블의 기본 키인 값을 지정했습니다.

이제 $selectedProducts 를 사용하여 이 확인란을 wire:model 에 연결합니다.

<input type="checkbox" value="{{$product->id}}"
     wire:model="selectedProducts" />

이제 사용자가 제품을 선택할 때마다 $selectedProducts가 업데이트됩니다. 따라서 언제든지$selectedProducts 사용자가 대량 작업에 대해 선택한 모든 제품을 갖게 됩니다.

사실, 우리는 wire:model.defer 를 사용할 것입니다. defer 지시문은 사용자가 확인란을 선택할 때 구성 요소가 다시 렌더링되지 않도록 합니다. 이는 상당한 성능 향상을 가져올 것입니다. Livewire를 사용하여 성능을 개선하기 위한 지연 및 기타 기술에 대해 자세히 알아보려면 이 항목을 확인할 수 있습니다.

<input type="checkbox" value="{{$product->id}}"
     wire:model.defer="selectedProducts" />

이제 활성화 및 비활성화라는 2개의 버튼을 만들어야 합니다. 이 두 버튼은 클릭 시 메서드changeStatus를 호출합니다. 상태 열에 대해 설정하려는 값을 매개변수로 전달합니다. 따라서 활성화에 대해 1을 전달하고 비활성화에 대해 0을 전달합니다.

<button wire:click="changeStatus(1)">Activate</button>
<button wire:click="changeStatus(0)">Deactivate</button>

다음으로 컴포넌트 내에서 이 메소드를 정의해야 합니다. 우리는 다음과 같이 정의할 수 있습니다. 여기$status는 상태 열에 대해 설정하려는 값을 보유합니다. 따라서 활성화의 경우 1이 되고 비활성화의 경우 0이 됩니다.

public function changeStatus($status)
{
}

이 방법 내에서 사용자가 $selectedProducts 를 사용하여 선택한 레코드가 있는지 먼저 확인합니다. 그런 다음 해당 모든 제품의 상태 열을 업데이트합니다. 그런 다음 마지막으로 $selectedProducts 변수를 지웁니다.

if (!empty($this->selectedProducts)) {
    Product::whereIn('id', $this->selectedProducts)->update(['status' => $status]);
    $this->selectedProducts = [];
}

이것이 사용자에게 대량의 레코드를 업데이트할 수 있는 기능을 제공하기 위해 필요한 전부입니다.

이 튜토리얼이 마음에 들면 일괄 작업과 관련된 모든 코드를 자동으로 생성하는 Livewire 패키지tall-crud-generator를 확인하십시오.