Refactor ingredients for ingredient add (WIP)

Currently non-functional as the livewire component does not work inside an
Alpine template.
This commit is contained in:
Christopher C. Wells 2021-01-20 06:07:34 -08:00 committed by Christopher Charbonneau Wells
parent 372753887f
commit 856bfb39b9
1 changed files with 41 additions and 33 deletions

View File

@ -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>