Add search/load support to recipes

app/Http/Controllers/RecipeController.php

@@ -26,8 +26,7 @@ class RecipeController extends Controller
      */
     public function index(): View
     {
-        return view('recipes.index')
+        return view('recipes.index');
-            ->with('recipes', Recipe::all()->sortBy('name'));
     }
 
     /**

app/JsonApi/Adapters/RecipeAdapter.php

@@ -40,8 +40,15 @@ class RecipeAdapter extends AbstractAdapter
      */
     protected function filter($query, Collection $filters)
     {
+        if ($term = $filters->get('search')) {
+            $query->where('recipes.name', 'like', "%{$term}%")
+                ->orWhere('recipes.description', 'like', "%{$term}%")
+                ->orWhere('recipes.source', 'like', "%{$term}%");
+        }
+        else {
             $this->filterWithScopes($query, $filters);
         }
+    }
 
     /**
      * Ingredient amount relationships.

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

@@ -0,0 +1,68 @@
+<div x-data="searchView()" x-init="loadMore()">
+    <x-inputs.input type="text"
+                    name="search"
+                    placeholder="Search..."
+                    autocomplete="off"
+                    class="w-full mb-4"
+                    @input.debounce.400ms="search($event)" />
+    <div class="grid grid-cols-3 gap-4">
+        {{ $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>
+
+@once
+    @push('scripts')
+        <script type="text/javascript">
+            let searchView = () => {
+                return {
+                    results: [],
+                    number: 1,
+                    size: 12,
+                    morePages: false,
+                    searchTerm: '{{ $defaultSearch ?? null }}',
+                    reset() {
+                        this.results = [];
+                        this.number = 1;
+                        this.searchTerm = null;
+                        this.morePages = false;
+                    },
+                    loadMore() {
+                        let url = `{{ $route }}?page[number]=${this.number}&page[size]=${this.size}`;
+                        if (this.searchTerm) {
+                            url += `&filter[search]=${this.searchTerm}`;
+                        }
+                        fetch(url)
+                            .then(response => response.json())
+                            .then(data => {
+                                this.results = [...this.results, ...data.data.map(result => result.attributes)];
+                                if (this.number < data.meta.page['last-page']) {
+                                    this.morePages = true;
+                                } else {
+                                    this.number++;
+                                }
+                            });
+                    },
+                    search(e) {
+                        this.reset();
+                        if (e.target.value !== '') {
+                            this.searchTerm = e.target.value;
+                            this.loadMore();
+                        }
+                        else {
+                            this.loadMore();
+                        }
+                    }
+                }
+            }
+        </script>
+    @endpush
+@endonce

resources/views/foods/index.blade.php

@@ -9,15 +9,9 @@
         <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">
-                    <div x-data="foods()" x-init="loadMore()">
+                    <x-search-view :route="route('api:v1:foods.index')">
-                        <x-inputs.input type="text"
+                        <x-slot name="results">
-                                        name="search"
+                            <template x-for="food in results" :key="food">
-                                        placeholder="Search..."
-                                        autocomplete="off"
-                                        class="w-full mb-4"
-                                        @input.debounce.400ms="search($event)" />
-                        <div class="grid grid-cols-3 gap-4">
-                            <template x-for="food in foods" :key="food">
                                 <div class="p-2 font-light rounded-t border-2 border-gray-400">
                                     <a class="h-6 w-6 text-gray-500 hover:text-gray-700 hover:border-gray-300 float-right text-sm"
                                        x-bind:href="food.editUrl">
@@ -52,66 +46,10 @@
                                     </div>
                                 </div>
                             </template>
-                        </div>
+                        </x-slot>
-                        <x-inputs.button
+                    </x-search-view>
-                            class="text-xl mt-4"
-                            color="blue"
-                            type="button"
-                            x-show="morePages"
-                            @click.prevent="loadMore()">
-                            Load more
-                        </x-inputs.button>
                 </div>
             </div>
         </div>
     </div>
-    </div>
-
-    @once
-        @push('scripts')
-            <script type="text/javascript">
-                let foods = () => {
-                    return {
-                        foods: [],
-                        number: 1,
-                        size: 12,
-                        morePages: true,
-                        searchTerm: '{{ $defaultSearch ?? null }}',
-                        reset() {
-                            this.foods = [];
-                            this.number = 1;
-                            this.searchTerm = null;
-                            this.morePages = true;
-                        },
-                        loadMore() {
-                            let url = `{{ route('api:v1:foods.index') }}?page[number]=${this.number}&page[size]=${this.size}`;
-                            if (this.searchTerm) {
-                                url += `&filter[search]=${this.searchTerm}`;
-                            }
-                            fetch(url)
-                                .then(response => response.json())
-                                .then(data => {
-                                    this.foods = [...this.foods, ...data.data.map(food => food.attributes)];
-                                    if (this.number >= data.meta.page['last-page']) {
-                                        this.morePages = false;
-                                    } else {
-                                        this.number++;
-                                    }
-                                });
-                        },
-                        search(e) {
-                            this.reset();
-                            if (e.target.value !== '') {
-                                this.searchTerm = e.target.value;
-                                this.loadMore();
-                            }
-                            else {
-                                this.loadMore();
-                            }
-                        }
-                    }
-                }
-            </script>
-        @endpush
-    @endonce
 </x-app-layout>

resources/views/recipes/index.blade.php

@@ -9,11 +9,12 @@
         <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">
-                    <div class="grid grid-cols-3 gap-4">
+                    <x-search-view :route="route('api:v1:recipes.index')">
-                        @foreach ($recipes as $recipe)
+                        <x-slot name="results">
+                            <template x-for="recipe in results" :key="recipe">
                                 <div class="p-2 font-light rounded-lg border-2 border-gray-200">
                                     <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300 float-right text-sm"
-                                   href="{{ route('recipes.edit', $recipe) }}">
+                                       x-bind:href="recipe.editUrl">
                                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                             <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" />
                                             <path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" />
@@ -21,28 +22,29 @@
                                     </a>
                                     <div class="pb-2 flex justify-between items-baseline">
                                         <div class="text-2xl">
-                                        <a href="{{ route('recipes.show', $recipe) }}"
+                                            <a x-bind:href="recipe.showUrl"
-                                           class="text-gray-600 hover:text-gray-800">{{ $recipe->name }}</a>
+                                               class="text-gray-600 hover:text-gray-800" x-text="recipe.name"></a>
                                         </div>
                                     </div>
                                     <div class="grid grid-cols-2 text-sm border-t-8 border-black pt-2">
                                         <div class="col-span-2 text-xs text-right">Amount per serving</div>
                                         <div class="font-extrabold text-lg border-b-4 border-black">Calories</div>
-                                    <div class="font-extrabold text-right text-lg border-b-4 border-black">{{ $recipe->caloriesPerServing() }}</div>
+                                        <div class="font-extrabold text-right text-lg border-b-4 border-black" x-text="`${recipe.caloriesPerServing}g`"></div>
                                         <div class="font-bold border-b border-gray-300">Fat</div>
-                                    <div class="text-right border-b border-gray-300">{{ $recipe->fatPerServing() < 1 ? $recipe->fatPerServing() * 1000 . "m" : $recipe->fatPerServing() }}g</div>
+                                        <div class="text-right border-b border-gray-300" x-text="`${recipe.fatPerServing}g`"></div>
                                         <div class="font-bold border-b border-gray-300">Cholesterol</div>
-                                    <div class="text-right border-b border-gray-300">{{ $recipe->cholesterolPerServing() < 1 ? $recipe->cholesterolPerServing() * 1000 . "m" : $recipe->cholesterolPerServing() }}g</div>
+                                        <div class="text-right border-b border-gray-300" x-text="`${Math.round(recipe.cholesterolPerServing)}mg`"></div>
                                         <div class="font-bold border-b border-gray-300">Sodium</div>
-                                    <div class="text-right border-b border-gray-300">{{ $recipe->sodiumPerServing() < 1 ? $recipe->sodiumPerServing() * 1000 . "m" : $recipe->sodiumPerServing() }}g</div>
+                                        <div class="text-right border-b border-gray-300" x-text="`${Math.round(recipe.sodiumPerServing)}mg`"></div>
                                         <div class="font-bold border-b border-gray-300">Carbohydrates</div>
-                                    <div class="text-right border-b border-gray-300">{{ $recipe->carbohydratesPerServing() < 1 ? $recipe->carbohydratesPerServing() * 1000 . "m" : $recipe->carbohydratesPerServing() }}g</div>
+                                        <div class="text-right border-b border-gray-300" x-text="`${recipe.carbohydratesPerServing}g`"></div>
                                         <div class="font-bold">Protein</div>
-                                    <div class="text-right">{{ $recipe->proteinPerServing() < 1 ? $recipe->proteinPerServing() * 1000 . "m" : $recipe->proteinPerServing() }}g</div>
+                                        <div class="text-right" x-text="`${recipe.proteinPerServing}g`"></div>
                                     </div>
                                 </div>
-                        @endforeach
+                            </template>
-                    </div>
+                        </x-slot>
+                    </x-search-view>
                 </div>
             </div>
         </div>