In this lesson, we will delete products one by one, or by selecting and deleting in bulk. In this, we will use the same sweetalert2 package to show confirmation, as we used in categories.
First, let's make deletion work by deleting a single product, which will be identical to what we did with categories. We will start by adding action to the Delete button.
resources/views/livewire/products-list.blade.php:
<button wire:click="deleteConfirm('delete', {{ $product->id }})" class="px-4 py-2 text-xs text-red-500 uppercase bg-red-200 rounded-md border border-transparent hover:text-red-700 hover:bg-red-300"> Delete</button>Now, we need to add a listener and deleteConfirm() with delete() methods to the Livewire component.
app/Livewire/ProductsList.php:
use Livewire\Attributes\On; class ProductsList extends Component{ // ... public function mount(): void { $this->categories = Category::pluck('name', 'id')->toArray(); $this->countries = Country::pluck('name', 'id')->toArray(); } public function deleteConfirm(string $method, $id = null): void { $this->dispatch('swal:confirm', [ 'type' => 'warning', 'title' => 'Are you sure?', 'text' => '', 'id' => $id, 'method' => $method, ]); } #[On('delete')] public function delete(int $id): void { $product = Product::findOrFail($id); $product->delete(); } // ...}Now you can delete a single product.
Next, we will add the ability to delete selected products. For this, we need public property and bind it to checkbox input.
app/Livewire/ProductsList.php:
class ProductsList extends Component{ use WithPagination; public array $categories = []; public array $countries = []; public array $selected = []; // ...}resources/views/livewire/products-list.blade.php:
<td class="px-4 py-2 text-sm leading-5 text-gray-900 whitespace-no-wrap"> <input type="checkbox" value="{{ $product->id }}" wire:model.live="selected"></td>Now we will add a button to delete selected, but it will be disabled until at least one record will be selected. To get the count of selected records we will use computed property.
app/Livewire/ProductsList.php:
class ProductsList extends Component{ // ... public function mount(): void { $this->categories = Category::pluck('name', 'id')->toArray(); $this->countries = Country::pluck('name', 'id')->toArray(); } public function getSelectedCountProperty(): int { return count($this->selected); } // ...}The button will go just below the create product button.
resources/views/livewire/products-list.blade.php:
<div class="mb-4"> <div class="mb-4"> <a class="inline-flex items-center px-4 py-2 text-xs font-semibold tracking-widest text-white uppercase bg-gray-800 rounded-md border border-transparent hover:bg-gray-700"> Create Product </a> </div> <button type="button" wire:click="deleteConfirm('deleteSelected')" wire:loading.attr="disabled" @disabled(! $this->selectedCount) class="px-4 py-2 mr-5 text-xs text-red-500 uppercase bg-red-200 rounded-md border border-transparent hover:text-red-700 hover:bg-red-300 disabled:opacity-50 disabled:cursor-not-allowed"> Delete Selected </button> </div>Now as you can see deleteConfirm() here receives a different method. For that, we need to add another listener with the same name to the component and method.
app/Livewire/ProductsList.php:
class ProductsList extends Component{ // ... public function mount(): void { $this->categories = Category::pluck('name', 'id')->toArray(); $this->countries = Country::pluck('name', 'id')->toArray(); } public function getSelectedCountProperty(): int { return count($this->selected); } public function deleteConfirm(string $method, $id = null): void { $this->dispatch('swal:confirm', [ 'type' => 'warning', 'title' => 'Are you sure?', 'text' => '', 'id' => $id, 'method' => $method, ]); } #[On('delete')] public function delete(int $id): void { $product = Product::findOrFail($id); $product->delete(); } #[On('deleteSelected')] public function deleteSelected(): void { $products = Product::whereIn('id', $this->selected)->get(); $products->each->delete(); $this->reset('selected'); } // ...}The deleteSelected() method all selected products and resets public property.