Add basic tags front end support

app/Http/Controllers/FoodController.php

@@ -19,7 +19,7 @@ class FoodController extends Controller
      */
     public function index(): View
     {
-        return view('foods.index');
+        return view('foods.index')->with('tags', Food::getTagTotals());
     }
 
     /**

app/Http/Controllers/RecipeController.php

@@ -27,7 +27,7 @@ class RecipeController extends Controller
      */
     public function index(): View
     {
-        return view('recipes.index');
+        return view('recipes.index')->with('tags', Recipe::getTagTotals());
     }
 
     /**

app/Models/Traits/Ingredient.php

@@ -43,11 +43,7 @@ trait Ingredient
     public static function getTagTotals(string $locale = null): Collection {
         $locale = $locale ?? app()->getLocale();
         return Tag::query()->join('taggables', 'taggables.tag_id', '=', 'id')
-            ->select([
+            ->select(['id', 'name', DB::raw('count(*) as total')])
-                'id',
-                "name->{$locale} as name",
-                DB::raw('count(*) as total')
-            ])
             ->where('taggables.taggable_type', '=', static::class)
             ->groupBy('id')
             ->orderBy("name->{$locale}")

resources/views/components/search-view.blade.php

@@ -1,22 +1,35 @@
 <div x-data="searchView()" x-init="loadMore()">
-    <x-inputs.input type="text"
+    <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0">
-                    name="search"
+        <div class="md:w-1/4">
-                    placeholder="Search..."
+            <x-inputs.input type="text"
-                    autocomplete="off"
+                            name="search"
-                    class="w-full mb-4"
+                            placeholder="Search..."
-                    @input.debounce.400ms="search($event)" />
+                            autocomplete="off"
-    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
+                            class="w-full mb-4"
-        {{ $results }}
+                            @input.debounce.400ms="search($event)" />
+            <details open>
+                <summary>Tags</summary>
+                @foreach($tags as $tag)
+                    <a class="m-1 bg-gray-200 hover:bg-gray-300 rounded-full px-2 font-bold text-sm leading-loose cursor-pointer"
+                       x-on:click="filterByTag($event);">{{ $tag->name }}</a>
+                @endforeach
+            </details>
+        </div>
+        <div class="md:w-3/4">
+            <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 items-start">
+                {{ $results }}
+            </div>
+            <x-inputs.button
+                class="text-xl mt-4"
+                color="blue"
+                type="button"
+                x-show="morePages"
+                x-cloak
+                @click.prevent="loadMore()">
+                Load more
+            </x-inputs.button>
+        </div>
     </div>
-    <x-inputs.button
-        class="text-xl mt-4"
-        color="blue"
-        type="button"
-        x-show="morePages"
-        x-cloak
-        @click.prevent="loadMore()">
-        Load more
-    </x-inputs.button>
 </div>
 
 @once
@@ -61,6 +74,9 @@
                         else {
                             this.loadMore();
                         }
+                    },
+                    filterByTag(e) {
+                        console.log(e.target.text);
                     }
                 }
             }

resources/views/foods/index.blade.php

@@ -15,7 +15,7 @@
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                 <div class="p-6 bg-white border-b border-gray-200">
-                    <x-search-view :route="route('api:v1:foods.index')">
+                    <x-search-view :route="route('api:v1:foods.index')" :tags="$tags">
                         <x-slot name="results">
                             <template x-for="food in results" :key="food">
                                 <div class="p-1 border-2 border-black font-sans">

resources/views/recipes/index.blade.php

@@ -15,7 +15,7 @@
         <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
             <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                 <div class="p-6 bg-white border-b border-gray-200">
-                    <x-search-view :route="route('api:v1:recipes.index')">
+                    <x-search-view :route="route('api:v1:recipes.index')" :tags="$tags">
                         <x-slot name="results">
                             <template x-for="recipe in results" :key="recipe">
                                 <div class="p-1 border-2 border-black font-sans">