From f499e5ffb77a2e3bc3d93aefbfa23ca257baec62 Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Thu, 21 Jan 2021 05:54:35 -0800
Subject: [PATCH] Add support for old values in recipe form

---
 app/Models/Food.php                           |  2 +-
 app/Models/FoodAmount.php                     | 13 +++
 resources/views/recipes/edit.blade.php        | 97 ++++++++-----------
 .../partials/ingredient-input.blade.php       | 22 +++++
 4 files changed, 79 insertions(+), 55 deletions(-)
 create mode 100644 resources/views/recipes/partials/ingredient-input.blade.php

diff --git a/app/Models/Food.php b/app/Models/Food.php
index 9d89006..ed533d0 100644
--- a/app/Models/Food.php
+++ b/app/Models/Food.php
@@ -105,7 +105,7 @@ class Food extends Model
     protected $appends = ['serving_size_formatted'];
 
     /**
-     * Get the serving size as a fractional.
+     * Get the serving size as a formatted string (e.g. 0.5 = 1/2).
      */
     public function getServingSizeFormattedAttribute(): string {
         return Number::fractionStringFromFloat($this->serving_size);
diff --git a/app/Models/FoodAmount.php b/app/Models/FoodAmount.php
index aba62ba..232a568 100644
--- a/app/Models/FoodAmount.php
+++ b/app/Models/FoodAmount.php
@@ -2,6 +2,7 @@
 
 namespace App\Models;
 
+use App\Support\Number;
 use App\Support\Nutrients;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
@@ -74,6 +75,18 @@ class FoodAmount extends Model
         'sodium',
     ];
 
+    /**
+     * @inheritdoc
+     */
+    protected $appends = ['amount_formatted'];
+
+    /**
+     * Get the amount as a formatted string (e.g. 0.5 = 1/2).
+     */
+    public function getAmountFormattedAttribute(): string {
+        return Number::fractionStringFromFloat($this->amount);
+    }
+
     /**
      * Get the Food this amount belongs to.
      */
diff --git a/resources/views/recipes/edit.blade.php b/resources/views/recipes/edit.blade.php
index 1182ff4..552eead 100644
--- a/resources/views/recipes/edit.blade.php
+++ b/resources/views/recipes/edit.blade.php
@@ -64,50 +64,32 @@
                         <!-- Ingredients -->
                         <h3 class="pt-2 mb-2 font-extrabold">Ingredients</h3>
                         <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="ingredients_amount[]"
-                                                    size="5"
-                                                    :value="old('ingredients_amount.' . $loop->index, \App\Support\Number::fractionStringFromFloat($foodAmount->amount))" />
-                                    <x-inputs.select name="ingredients_unit[]"
-                                                     :options="$ingredients_units"
-                                                     :selectedValue="old('ingredients_unit.' . $loop->index, $foodAmount->unit)">
-                                        <option value=""></option>
-                                    </x-inputs.select>
-                                    <x-ingredient-picker :default-id="old('ingredients.' . $loop->index, $foodAmount->food->id)"
-                                                         :default-name="old('ingredients_name.' . $loop->index, $foodAmount->food->name)"/>
-                                    <x-inputs.input type="text"
-                                                    class="block"
-                                                    name="ingredients_detail[]"
-                                                    :value="old('ingredients_detail.' . $loop->index, $foodAmount->detail)" />
-                                    <x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
-                                        <svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
-                                        </svg>
-                                    </x-inputs.icon-button>
-                                </div>
-                            @endforeach
-                            <!-- TODO: Handle old values!! -->
+                            @if(old('ingredients'))
+                                @foreach(old('ingredients') as $i => $ingredient)
+                                    @if (empty($ingredient) && empty(old('ingredients_amount')[$i]) && empty(old('ingredients_unit')[$i]))
+                                        @continue
+                                    @endif
+                                    @include('recipes.partials.ingredient-input', [
+                                      'amount' => old('ingredients_amount')[$i],
+                                      'unit' => old('ingredients_unit')[$i],
+                                      'food_id' => old('ingredients')[$i],
+                                      'food_name' => old('ingredients_name')[$i],
+                                      'detail' => old('ingredients_detail')[$i],
+                                    ])
+                                @endforeach
+                            @else
+                                @foreach($recipe->foodAmounts as $foodAmount)
+                                    @include('recipes.partials.ingredient-input', [
+                                      'amount' => $foodAmount->amount_formatted,
+                                      'unit' => $foodAmount->unit,
+                                      'food_id' => $foodAmount->food->id,
+                                      'food_name' => $foodAmount->food->name,
+                                      'detail' => $foodAmount->detail,
+                                    ])
+                                @endforeach
+                            @endif
                             <template x-for="i in ingredients + 1">
-                                <div class="flex flex-row space-x-4 mb-4">
-                                    <x-inputs.input type="text"
-                                                    name="ingredients_amount[]"
-                                                    size="5" />
-                                    <x-inputs.select name="ingredients_unit[]"
-                                                     :options="$ingredients_units" >
-                                        <option value=""></option>
-                                    </x-inputs.select>
-                                    <x-ingredient-picker/>
-                                    <x-inputs.input type="text"
-                                                    class="block"
-                                                    name="ingredients_detail[]" />
-                                    <x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
-                                        <svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
-                                        </svg>
-                                    </x-inputs.icon-button>
-                                </div>
+                                @include('recipes.partials.ingredient-input')
                             </template>
                             <x-inputs.icon-button type="button" color="green" x-on:click="ingredients++;">
                                 <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -119,20 +101,27 @@
                         <!-- Steps -->
                         <h3 class="pt-2 mb-2 font-extrabold">Steps</h3>
                         @php($step_number = 0)
-                        <div x-data="{steps: 0}">
-                            @foreach($recipe->steps as $step)
-                                <div class="flex flex-row space-x-4 mb-4">
-                                    <div class="text-3xl text-gray-400 text-center">{{ $step_number++ }}</div>
-                                    <x-inputs.textarea class="block mt-1 w-full"
-                                                       name="steps[]"
-                                                       :value="old('steps.' . $loop->index, $step->step)" />
-                                </div>
-                            @endforeach
+                        <div x-data="{ steps: 0 }">
+                            @if(old('steps'))
+                                @foreach(old('steps') as $i => $step)
+                                    @if (empty($step)) @continue @endif
+                                    <div class="flex flex-row space-x-4 mb-4">
+                                        <div class="text-3xl text-gray-400 text-center">{{ $step_number++ }}</div>
+                                        <x-inputs.textarea class="block mt-1 w-full" name="steps[]" :value="$step" />
+                                    </div>
+                                @endforeach
+                            @else
+                                @foreach($recipe->steps as $step)
+                                    <div class="flex flex-row space-x-4 mb-4">
+                                        <div class="text-3xl text-gray-400 text-center">{{ $step_number++ }}</div>
+                                        <x-inputs.textarea class="block mt-1 w-full" name="steps[]" :value="$step->step" />
+                                    </div>
+                                @endforeach
+                            @endif
                             <template x-for="i in steps + 1">
                                 <div class="flex flex-row space-x-4 mb-4">
                                     <div class="text-3xl text-gray-400 text-center" x-text="{{ $step_number }} + i"></div>
-                                    <x-inputs.textarea class="block mt-1 w-full"
-                                                       name="steps[]" />
+                                    <x-inputs.textarea class="block mt-1 w-full" name="steps[]" />
                                 </div>
                             </template>
                             <x-inputs.icon-button type="button" color="green" x-on:click="steps++;">
diff --git a/resources/views/recipes/partials/ingredient-input.blade.php b/resources/views/recipes/partials/ingredient-input.blade.php
new file mode 100644
index 0000000..c473faf
--- /dev/null
+++ b/resources/views/recipes/partials/ingredient-input.blade.php
@@ -0,0 +1,22 @@
+<div class="flex flex-row space-x-4 mb-4">
+    <x-inputs.input type="text"
+                    name="ingredients_amount[]"
+                    size="5"
+                    :value="$amount ?? null" />
+    <x-inputs.select name="ingredients_unit[]"
+                     :options="$ingredients_units"
+                     :selectedValue="$unit ?? null">
+        <option value=""></option>
+    </x-inputs.select>
+    <x-ingredient-picker :default-id="$food_id ?? null"
+                         :default-name="$food_name ?? null" />
+    <x-inputs.input type="text"
+                    class="block"
+                    name="ingredients_detail[]"
+                    :value="$detail ?? null" />
+    <x-inputs.icon-button type="button" color="red" x-on:click="$event.target.parentNode.remove();">
+        <svg class="h-8 w-8 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+        </svg>
+    </x-inputs.icon-button>
+</div>