Solution:
You’re right! Adding a "watched" filter to the "All series" section would significantly enhance UX by allowing users to easily find what they’ve already seen (or what’s left to watch). Here’s how you can implement such a filter in a typical Laravel app with Vue.js or Blade:
Backend (Laravel Controller):
First, add a filter in your controller to handle the "watched" query parameter:
public function index(Request $request)
{
$query = Series::query();
// Check for 'watched' filter
if ($request->has('watched')) {
// Assuming you have a pivot table: series_user with user_id and watched columns
$watched = filter_var($request->watched, FILTER_VALIDATE_BOOLEAN);
$userId = auth()->id();
$query->whereHas('users', function($q) use ($userId, $watched) {
$q->where('user_id', $userId)
->where('watched', $watched);
});
}
$series = $query->paginate(15);
return view('series.index', compact('series'));
}
Frontend (Blade or Vue):
Add a filter dropdown or toggle in your "All series" view:
<form method="GET" action="{{ route('series.index') }}">
<select name="watched" onchange="this.form.submit()">
<option value="">-- Filter --</option>
<option value="1" {{ request('watched') == '1' ? 'selected' : '' }}>Watched</option>
<option value="0" {{ request('watched') == '0' ? 'selected' : '' }}>Unwatched</option>
</select>
</form>
Model Relationships:
Make sure your Series model has the proper relationship:
public function users()
{
return $this->belongsToMany(User::class)->withPivot('watched');
}
Summary:
- Add a
"watched"query parameter filter to your controller - Add filter UI to your view (dropdown, toggle, etc.)
- Make sure your relationships between
usersandseriesare set up
This will allow users to filter "All series" by what’s watched/unwatched, improving their browsing and learning experience!