From 25d9a6442c3ca9aa5feb55689188ca5fb62c251a Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Sun, 21 Mar 2021 14:03:01 -0700
Subject: [PATCH] Set default amount and unit on journal entry

---
 .../components/ingredient-picker.blade.php    | 17 ++++----
 .../partials/entry-item-input.blade.php       | 42 +++++++++++++++----
 2 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/resources/views/components/ingredient-picker.blade.php b/resources/views/components/ingredient-picker.blade.php
index 90b0f4c..7e00401 100644
--- a/resources/views/components/ingredient-picker.blade.php
+++ b/resources/views/components/ingredient-picker.blade.php
@@ -22,11 +22,7 @@
             <div class="absolute border-2 border-gray-500 border-b-0 bg-white"
                  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"
-                         x-bind:data-type="result.type"
-                         x-bind:data-name="result.name"
-                         x-bind:data-detail="result.detail">
+                    <div class="p-1 border-b-2 border-gray-500 hover:bg-yellow-300 cursor-pointer" x-bind:data-id="result.id">
                         <div class="pointer-events-none">
                             <div>
                                 <span class="font-bold" x-text="result.name"></span><span class="text-gray-600" x-text="', ' + result.detail" x-show="result.detail"></span>
@@ -87,9 +83,14 @@
                         ['@click']($event) {
                             let selected = $event.target;
                             if (selected.dataset.id) {
-                                this.$refs.ingredients.value = selected.dataset.id;
-                                this.$refs.ingredients_type.value = selected.dataset.type;
-                                this.$refs.ingredients_name.value = selected.dataset.name + (selected.dataset.detail ? `, ${selected.dataset.detail}` : '');
+                                const ingredient = this.results.find(result => result.id === Number(selected.dataset.id));
+                                this.$el.dispatchEvent(new CustomEvent('ingredient-picked', {
+                                    detail: { ingredient: ingredient },
+                                    bubbles: true
+                                }));
+                                this.$refs.ingredients.value = ingredient.id;
+                                this.$refs.ingredients_type.value = ingredient.type;
+                                this.$refs.ingredients_name.value = ingredient.name + (ingredient.detail ? `, ${ingredient.detail}` : '');
                                 this.searching = false;
                                 this.results = [];
                             }
diff --git a/resources/views/journal-entries/partials/entry-item-input.blade.php b/resources/views/journal-entries/partials/entry-item-input.blade.php
index 8b947b6..cc87e43 100644
--- a/resources/views/journal-entries/partials/entry-item-input.blade.php
+++ b/resources/views/journal-entries/partials/entry-item-input.blade.php
@@ -1,13 +1,11 @@
-<div x-data class="flex items-center space-x-2">
+<div x-data class="entry-item flex items-center space-x-2">
     <div class="flex flex-col space-y-4 w-full">
+        <!-- Ingredient -->
         <div class="w-full">
-            <!-- Ingredient -->
-            <div class="w-full">
-                <x-inputs.label for="ingredients[id][]" value="Food or Recipe" class="md:hidden"/>
-                <x-ingredient-picker :default-id="$id ?? null"
-                                     :default-type="$type ?? null"
-                                     :default-name="$name ?? null" />
-            </div>
+            <x-inputs.label for="ingredients[id][]" value="Food or Recipe" class="md:hidden"/>
+            <x-ingredient-picker :default-id="$id ?? null"
+                                 :default-type="$type ?? null"
+                                 :default-name="$name ?? null" />
         </div>
         <div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
             <!-- Date -->
@@ -68,3 +66,31 @@
         </x-inputs.icon-button>
     </div>
 </div>
+
+@once
+    @push('scripts')
+        <script type="text/javascript">
+            /**
+             * Sets default serving amount and unit on ingredient select.
+             */
+            window.addEventListener('ingredient-picked', (e) => {
+                const entryItem = e.target.closest('.entry-item');
+                const ingredient = e.detail.ingredient;
+                let servingSize, servingUnit;
+                if (ingredient.type === 'App\\Models\\Recipe') {
+                    servingSize = 1;
+                    servingUnit = 'serving';
+                } else if (ingredient.type === 'App\\Models\\Food') {
+                    servingUnit = ingredient.serving_unit ?? 'serving'
+                    if (servingUnit === 'serving') {
+                        servingSize = 1;
+                    } else {
+                        servingSize = ingredient.serving_size_formatted
+                    }
+                }
+                entryItem.querySelector(':scope input[name="ingredients[amount][]"]').value = servingSize;
+                entryItem.querySelector(':scope select[name="ingredients[unit][]"]').value = servingUnit;
+            });
+        </script>
+    @endpush
+@endonce