From 856bfb39b90fd8f62da299cd45cfb3fddba0544c Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Wed, 20 Jan 2021 06:07:34 -0800
Subject: [PATCH] Refactor ingredients for ingredient add (WIP)

Currently non-functional as the livewire component does not work inside an
Alpine template.
---
 resources/views/recipes/edit.blade.php | 74 ++++++++++++++------------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/resources/views/recipes/edit.blade.php b/resources/views/recipes/edit.blade.php
index 9651fc5..d0b8a3f 100644
--- a/resources/views/recipes/edit.blade.php
+++ b/resources/views/recipes/edit.blade.php
@@ -63,39 +63,47 @@
 
                         <!-- Ingredients -->
                         <h3 class="pt-2 mb-2 font-extrabold">Ingredients</h3>
-                        @for($i = 0; $i < 20; $i++)
-                            @php
-                                if (isset($recipe->foodAmounts[$i])) {
-                                  $foodAmount = $recipe->foodAmounts[$i];
-                                  $amount = \App\Support\Number::fractionStringFromFloat($foodAmount->amount);
-                                  $unit = $foodAmount->unit;
-                                  $food_id = $foodAmount->food->id;
-                                  $food_name = $foodAmount->food->name;
-                                  $detail = $foodAmount->detail;
-                                } else {
-                                  $foodAmount = new \App\Models\FoodAmount();
-                                  $amount = $food_id = $food_name = $unit = $detail = null;
-                                }
-                            @endphp
-                            <div class="flex flex-row space-x-4 mb-4">
-                                <x-inputs.input type="text"
-                                                name="foods_amount[]"
-                                                size="5"
-                                                :value="old('foods_amount.' . $i, $amount)" />
-                                <x-inputs.select name="foods_unit[]"
-                                                 :options="$food_units"
-                                                 :selectedValue="old('foods_unit.' . $i, $unit)">
-                                    <option value=""></option>
-                                </x-inputs.select>
-                                <livewire:food-picker :index="$i"
-                                                      :default-id="old('foods.' . $i, $food_id)"
-                                                      :default-name="old('foods_name.' . $i, $food_name)" />
-                                <x-inputs.input type="text"
-                                                class="block"
-                                                name="foods_detail[]"
-                                                :value="old('foods_detail.' . $i, $detail)" />
-                            </div>
-                        @endfor
+                        <div x-data="{ingredients: 0}">
+                            @foreach($recipe->foodAmounts as $foodAmount)
+                                <div class="flex flex-row space-x-4 mb-4">
+                                    <x-inputs.input type="text"
+                                                    name="foods_amount[]"
+                                                    size="5"
+                                                    :value="old('foods_amount.' . $loop->index, \App\Support\Number::fractionStringFromFloat($foodAmount->amount))" />
+                                    <x-inputs.select name="foods_unit[]"
+                                                     :options="$food_units"
+                                                     :selectedValue="old('foods_unit.' . $loop->index, $foodAmount->unit)">
+                                        <option value=""></option>
+                                    </x-inputs.select>
+                                    <livewire:food-picker :index="$loop->index"
+                                                          :default-id="old('foods.' . $loop->index, $foodAmount->food->id)"
+                                                          :default-name="old('foods_name.' . $loop->index, $foodAmount->food->name)" />
+                                    <x-inputs.input type="text"
+                                                    class="block"
+                                                    name="foods_detail[]"
+                                                    :value="old('foods_detail.' . $loop->index, $foodAmount->detail)" />
+                                </div>
+                            @endforeach
+                            <template x-for="i in ingredients + 1">
+                                <div class="flex flex-row space-x-4 mb-4">
+                                    <x-inputs.input type="text"
+                                                    name="foods_amount[]"
+                                                    size="5" />
+                                    <x-inputs.select name="foods_unit[]"
+                                                     :options="$food_units" >
+                                        <option value=""></option>
+                                    </x-inputs.select>
+                                    <!-- TODO: Get this working in the template. See wire:init or use wire:click? -->
+                                    <livewire:food-picker index="1" />
+                                    <x-inputs.input type="text"
+                                                    class="block"
+                                                    name="foods_detail[]" />
+                                </div>
+                            </template>
+                            <x-inputs.button type="button" class="ml-3" x-on:click="ingredients++;">
+                                Add Ingredient
+                            </x-inputs.button>
+                        </div>
 
                         <!-- Steps -->
                         <h3 class="pt-2 mb-2 font-extrabold">Steps</h3>