Category ToggleGroup and Table Filter

Video Version of the Lesson

[Only for premium members]

Link to the repository

[Only for premium members]

This lesson will tackle two things: choosing categories for the tasks in the form/table and filtering the tasks by category.

Create Task Form: Choose Category

First, we need to modify the Livewire component to use Categories. I will add the code for both Create and Edit forms right away.

app/Livewire/Tasks/Create.php

use App\Models\TaskCategory;
 
use App\Models\Task;
use Livewire\Component;
use Illuminate\View\View;
use Livewire\WithFileUploads;
use Livewire\Attributes\Validate;
 
class Create extends Component
{
    // ...
 
    public function render(): View
    {
        return view('livewire.tasks.create'); 
        return view('livewire.tasks.create', [ 
            'categories' => TaskCategory::all(),
        ]);
    }
}

app/Livewire/Tasks/Edit.php:

use App\Models\TaskCategory;
 
class Edit extends Component
{
    // ...
 
    public function render(): View
    {
        return view('livewire.tasks.edit'); 
        return view('livewire.tasks.edit', [ 
            'categories' => TaskCategory::all(),
        ]);
    }
}

Next, we can show categories in both create and edit pages. The styling is from...