From 39bf21baf8952baaee327eade4b6d4407a4bb850 Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Sat, 22 May 2021 14:03:33 -0700
Subject: [PATCH] Add goal change form handling

---
 .../components/button-link/base.blade.php     |  3 +-
 .../views/journal-entries/index.blade.php     | 52 ++++++++++++-------
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/resources/views/components/button-link/base.blade.php b/resources/views/components/button-link/base.blade.php
index 1f8336f..4899cd3 100644
--- a/resources/views/components/button-link/base.blade.php
+++ b/resources/views/components/button-link/base.blade.php
@@ -15,7 +15,8 @@
         'disabled:opacity-25',
         'transition',
         'ease-in-out',
-        'duration-150'
+        'duration-150',
+        'cursor-pointer',
     ];
 @endphp
 <a {{ $attributes->merge(['class' => implode(' ', $classes)]) }}>
diff --git a/resources/views/journal-entries/index.blade.php b/resources/views/journal-entries/index.blade.php
index 525bf69..08a0686 100644
--- a/resources/views/journal-entries/index.blade.php
+++ b/resources/views/journal-entries/index.blade.php
@@ -99,26 +99,40 @@
                     {{ $goalProgress['protein'] ?? 'N/A' }}
                 </div>
             </div>
-            <h4 class="font-semibold text-lg pt-2">Goal</h4>
-            @empty($currentGoal)
-                <div class="italic">No goal.</div>
-            @else
-                <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
-                   href="{{ route('goals.show', $currentGoal) }}">
-                    {{ $currentGoal->name }}
-                </a>
-            @endempty
-            <form method="POST" action="{{ route('journal-dates.update.goal', $journalDate) }}">
-                @csrf
-                <x-inputs.select name="goal"
-                                 class="block w-full"
-                                 :options="$goalOptions ?? []"
-                                 :selectedValue="$currentGoal?->id ?? null">
-                </x-inputs.select>
-                <div class="flex items-center justify-start mt-4">
-                    <x-inputs.button>Change Goal</x-inputs.button>
+            <section class="pt-2" x-data="{ showGoalChangeForm: false }">
+                <h4 class="font-semibold text-lg">
+                    Goal
+                    <span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer"
+                          x-show="!showGoalChangeForm"
+                          x-on:click="showGoalChangeForm = !showGoalChangeForm">[change]</span>
+                </h4>
+                <div x-show="!showGoalChangeForm">
+                    @empty($currentGoal)
+                        <div class="italic">No goal.</div>
+                    @else
+                        <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
+                           href="{{ route('goals.show', $currentGoal) }}">
+                            {{ $currentGoal->name }}
+                        </a>
+                    @endempty
                 </div>
-            </form>
+                <div x-show="showGoalChangeForm">
+                    <form method="POST" action="{{ route('journal-dates.update.goal', $journalDate) }}">
+                        @csrf
+                        <x-inputs.select name="goal"
+                                         class="block w-full"
+                                         :options="$goalOptions ?? []"
+                                         :selectedValue="$currentGoal?->id ?? null">
+                        </x-inputs.select>
+                        <div class="flex items-center justify-start mt-4">
+                            <x-inputs.button class="bg-green-800 hover:bg-green-700">Change Goal</x-inputs.button>
+                            <x-button-link.red class="ml-3" x-on:click="showGoalChangeForm = !showGoalChangeForm">
+                                Cancel
+                            </x-button-link.red>
+                        </div>
+                    </form>
+                </div>
+            </section>
         </div>
         <div class="w-full sm:w-3/5 md:w-2/3 lg:w-3/4 flex flex-col space-y-4">
             @foreach(['breakfast', 'lunch', 'dinner', 'snacks'] as $meal)