From ff829d9d8d401cfb12e9880836e830c6536c09a7 Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Sat, 23 Jan 2021 08:52:51 -0800
Subject: [PATCH] Use `x-spread` for ingredients picker JS

---
 .../components/ingredient-picker.blade.php    | 48 +++++++++++++++----
 resources/views/layouts/app.blade.php         |  2 +-
 2 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/resources/views/components/ingredient-picker.blade.php b/resources/views/components/ingredient-picker.blade.php
index 60ea37c..f02f72e 100644
--- a/resources/views/components/ingredient-picker.blade.php
+++ b/resources/views/components/ingredient-picker.blade.php
@@ -1,4 +1,4 @@
-<div x-data="{ searching: false, results: [] }">
+<div x-data="picker()">
     <div>
         <div>
             <x-inputs.input type="hidden"
@@ -10,16 +10,12 @@
                             value="{{ $defaultName ?? '' }}"
                             placeholder="Search..."
                             autocomplete="off"
-                            x-on:input.debounce.400ms="if ($event.target.value != '') {
-                                fetch('{{ route('ingredient-picker.search') }}?term=' + $event.target.value)
-                                  .then(response => response.json())
-                                  .then(data => { results = data; searching = true; }); }"
-                            x-on:focusout.debounce.200ms="searching = false;"
-                            x-ref="ingredients_name" />
+                            x-ref="ingredients_name"
+                            x-spread="search" />
         </div>
         <div x-show="searching" x-cloak>
             <div class="absolute border-2 border-gray-500 border-b-0 bg-white"
-                 x-on:click="selected = $event.target; if (selected.dataset.id) { $refs.ingredients_name.value = selected.dataset.value; $refs.ingredients.value = selected.dataset.id; searching = false; }">
+                 x-spread="ingredient">
                 <template x-for="result in results" :key="result.id">
                     <div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer"
                          x-bind:data-id="result.id"
@@ -44,3 +40,39 @@
         </div>
     </div>
 </div>
+
+
+@once
+    @push('scripts')
+        <script type="text/javascript">
+            let picker = () => {
+                return {
+                    searching: false,
+                    results: [],
+                    search: {
+                        ['@input.debounce.400ms']($event) {
+                            if ($event.target.value !== '') {
+                                fetch('{{ route('ingredient-picker.search') }}?term=' + $event.target.value)
+                                    .then(response => response.json())
+                                    .then(data => { this.results = data; this.searching = true; });
+                            }
+                        },
+                        ['@focusout.debounce.200ms']() {
+                            this.searching = false;
+                        }
+                    },
+                    ingredient: {
+                        ['@click']($event) {
+                            let selected = $event.target;
+                            if (selected.dataset.id) {
+                                this.$refs.ingredients_name.value = selected.dataset.value;
+                                this.$refs.ingredients.value = selected.dataset.id;
+                                this.searching = false;
+                            }
+                        }
+                    }
+                }
+            }
+        </script>
+    @endpush
+@endonce
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 39b3d53..7de3295 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -50,6 +50,6 @@
             </main>
         </div>
 
-        @isset($scripts) {{ $scripts }} @endisset
+        @stack('scripts')
     </body>
 </html>