Skip to main content

Category ToggleGroup and Table Filter

Premium
4:33

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...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (30 h 09 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

RA
Richard A. Hoyle ✓ Link copied!

Of these three Laravel 12 classes you have created this is the First one I have been able to complete and every thing works Good Job on this one.

P.S. I added the breadcrumbs to this.

RA
Richard A. Hoyle ✓ Link copied!

Every thing is not well for some reason after redoing this class in its entirety I trying to edit the categories however after saving the change nothing happened no change was made in the database. It turns out that in the task->update function there is no mention of the categories I reviewed your work and I do not see it in here either. If the following is supposed to do the trick it is not.

$this->task->update([
'name' => $this->name,
'is_completed' => $this->is_completed,
'due_date' => $this->due_date ?? null,
]);
$this->task->taskCategories()->sync($this->selectedCategories, []);
session()->flash('success', 'Task successfully updated.');
$this->redirectRoute('tasks.index', navigate: true);
RA
Richard A. Hoyle ✓ Link copied!

I had to go to the database under the task_task_category and remove the one’s I did not want. simply unchecking the item will not work! I can Add to the list But Not Take Away.

M
Modestas ✓ Link copied!

Hi, I'm not sure what exactly is the issue here and what the problem was. In our edit, I can see that we have the taskCategories()->sync() being called. This should update the categories as needed

RA
Richard A. Hoyle ✓ Link copied!

When I mouse over the sync I get a message asking Generate Symfony Service -> Create Service method

When I mouse over the taskCategories() I get

  1. Edit intention settings
  2. Disable ‘Symfony 2 Method Create Service’
  3. Assign Shortcut…

Am I missing something hear?

RA
Richard A. Hoyle ✓ Link copied!

I ran npm update and composer update but nothing has changed the unchecking of an item doesn’t remove it from the database.

RA
Richard A. Hoyle ✓ Link copied!

Can I send this to you I can zip it up Where do I need to send it so you can see what I see.

I am using Herd Pro. the latest release Laravel 12.18.0 with livewire and all that come with it.

with Php 8.4

All most everything seems to have been updated since your release of this tutorial

RA
Richard A. Hoyle ✓ Link copied!

I found an article about the livewire checkbox arrays having a problem could this be the problem I am Having See article sync([]) does not detach all existing relations · Issue #40017 · laravel/framework

if so what do you recommend?

M
Modestas ✓ Link copied!

That's a lot of comments :)

So first:

When I mouse over the sync I get a message asking Generate Symfony Service -> Create Service method

This is because your IDE most likely does not have php knowledge (that happens in things like VSCode, Cursor, Sublime). To fix this, you often install extensions, but they don't fix it 100%.

Sending over the ZIP

Sorry, I can't debug this personally. I will however launch this project and check manually if there is a bug within the code. (the code can look correct, but still malfunction).

Laravel issue

Not sure about that one, I have never had it fail.

M
Modestas ✓ Link copied!

Checked and indeed, there is a little bug. Your code should look like this:

$this->task->taskCategories()->sync($this->selectedCategories ?? []);

That way it will sync it correctly!

RA
Richard A. Hoyle ✓ Link copied!

Thinks that did the trick it is working grate now.

Please update the code with this.

D
dbtodev ✓ Link copied!

Perfect. Excellent exercise for discovering LiveWire Flux. Everything went well. I maintain that the front-end email validation is almost perfectly handled, except that it accepts emails without extensions (.X -> | .com | .fr | .US | .EN |...... ). I have a FluxPro license! I worked around the problem while it was being updated. Thanks to "Modestas" for his help and to Mr. Povilas for his dedication and invaluable assistance.

RA
Richard A. Hoyle ✓ Link copied!

I ran dd($this->selectedCategories); It gives me my changes however it is not saving them to the database

D
dbtodev ✓ Link copied!

This work well with me.


$this->task_completed = $this->task_completed === true ? true : false;

$this->validate();
 
$this->task->update([
'name' => $this->name,
'taskCat' => $this->taskCat,
'taskSousCat' => $this->taskSousCat,
'taskInfo' => $this->taskInfo,
'task_completed' => $this->task_completed,
'taskDueDate' => $this->taskDueDate
]);
 
if ($this->media) {
$this->task->getFirstMedia()?->delete();
$this->task->addMedia($this->media)->toMediaCollection();
}
 
$this->task->taskCategories()->sync($this->selectedCategories, []);
 
session()->flash('success', 'La tâche a été mise à jour !');
 
$this->redirectRoute('tasks.index', navigate: true);

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.