From 0c0febed6c69056f6a80549adc58871e8cdebea2 Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Thu, 21 Jan 2021 07:06:43 -0800
Subject: [PATCH] Add support frontend support for removing steps (WIP)

Step numbers not working. No backend support yet.
---
 resources/views/recipes/edit.blade.php        | 20 +++++--------------
 .../recipes/partials/step-input.blade.php     |  9 +++++++++
 2 files changed, 14 insertions(+), 15 deletions(-)
 create mode 100644 resources/views/recipes/partials/step-input.blade.php

diff --git a/resources/views/recipes/edit.blade.php b/resources/views/recipes/edit.blade.php
index 552eead..f400770 100644
--- a/resources/views/recipes/edit.blade.php
+++ b/resources/views/recipes/edit.blade.php
@@ -100,29 +100,19 @@
 
                         <!-- Steps -->
                         <h3 class="pt-2 mb-2 font-extrabold">Steps</h3>
-                        @php($step_number = 0)
-                        <div x-data="{ steps: 0 }">
+                        <div x-data="{ steps: 0, step_number: 0 }">
                             @if(old('steps'))
-                                @foreach(old('steps') as $i => $step)
+                                @foreach(old('steps') as $i => $step_default)
                                     @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>
+                                    @include('recipes.partials.step-input')
                                 @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>
+                                    @include('recipes.partials.step-input', ['step_default' => $step->step])
                                 @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[]" />
-                                </div>
+                                @include('recipes.partials.step-input')
                             </template>
                             <x-inputs.icon-button type="button" color="green" x-on:click="steps++;">
                                 <svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
diff --git a/resources/views/recipes/partials/step-input.blade.php b/resources/views/recipes/partials/step-input.blade.php
new file mode 100644
index 0000000..16a9e29
--- /dev/null
+++ b/resources/views/recipes/partials/step-input.blade.php
@@ -0,0 +1,9 @@
+<div class="flex flex-row space-x-4 mb-4">
+    <div class="text-3xl text-gray-400 text-center">#</div>
+    <x-inputs.textarea class="block mt-1 w-full" name="steps[]" :value="$step_default ?? 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>