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 Controller to use Categories. I will add the code for both Create and Edit forms right away.
app/Http/Controllers/TaskController.php
use App\Models\TaskCategory; // ... public function create(){ return Inertia::render('Tasks/Create'); return Inertia::render('Tasks/Create', [ 'categories' => TaskCategory::all(), ]);} // ... public function edit(Task $task){ $task->load(['media']); $task->load(['media', 'taskCategories']); $task->append('mediaFile'); return Inertia::render('Tasks/Edit', [ 'task' => $task, 'categories' => TaskCategory::all(), ]);}// ...Next, we need to add task_categories to the...
Hello, you saved lots of working hours with the paginatin component :) Thx!
But it is not working with the category filter. To make it work, I did the following:
In the index method of TaskController I added "->withQueryString()" after "->paginate(10)"
In Pagination.vue I changed v-on:click="() => router.visit(props.resource.path + '?page=' + item.value)" to: v-on:click="() => router.visit(props.resource.links[index+1].url)
Interesting, I might have missed this case when doing the testing!
But at least the solution isn't too complicated, so I'll update the article if it's needed.
Thank you for letting us know!
The problem was, that the pagination pages' links missing the categorieId values from the query string. So if you filter for a category and jump to page 2, the filter disappears
You are right - this was indeed the bug!
I am updating the article and checking the react version for the same problem.
Thank you very much!
Hi, there is still a bug here :)
v-on:click="() => router.visit(props.resource.links[index+1].urlThe above code is not working if there are lots of pages, because the "..." placeholders in the links array:
{ "url":null, "label":"...", "active":false },Working code is:
v-on:click="() => router.visit(props.resource.links.find((link) => link.label == item.value).url)"Thanks for letting me know, I'll update the example and repo with the new Tailwind 4 release :)