Add goal change form handling

This commit is contained in:
Christopher C. Wells 2021-05-22 14:03:33 -07:00
parent 1f5b61304f
commit 39bf21baf8
2 changed files with 35 additions and 20 deletions

View File

@ -15,7 +15,8 @@
'disabled:opacity-25', 'disabled:opacity-25',
'transition', 'transition',
'ease-in-out', 'ease-in-out',
'duration-150' 'duration-150',
'cursor-pointer',
]; ];
@endphp @endphp
<a {{ $attributes->merge(['class' => implode(' ', $classes)]) }}> <a {{ $attributes->merge(['class' => implode(' ', $classes)]) }}>

View File

@ -99,26 +99,40 @@
{{ $goalProgress['protein'] ?? 'N/A' }} {{ $goalProgress['protein'] ?? 'N/A' }}
</div> </div>
</div> </div>
<h4 class="font-semibold text-lg pt-2">Goal</h4> <section class="pt-2" x-data="{ showGoalChangeForm: false }">
@empty($currentGoal) <h4 class="font-semibold text-lg">
<div class="italic">No goal.</div> Goal
@else <span class="text-sm text-gray-500 hover:text-gray-700 hover:border-gray-300 font-normal cursor-pointer"
<a class="text-gray-500 hover:text-gray-700 hover:border-gray-300" x-show="!showGoalChangeForm"
href="{{ route('goals.show', $currentGoal) }}"> x-on:click="showGoalChangeForm = !showGoalChangeForm">[change]</span>
{{ $currentGoal->name }} </h4>
</a> <div x-show="!showGoalChangeForm">
@endempty @empty($currentGoal)
<form method="POST" action="{{ route('journal-dates.update.goal', $journalDate) }}"> <div class="italic">No goal.</div>
@csrf @else
<x-inputs.select name="goal" <a class="text-gray-500 hover:text-gray-700 hover:border-gray-300"
class="block w-full" href="{{ route('goals.show', $currentGoal) }}">
:options="$goalOptions ?? []" {{ $currentGoal->name }}
:selectedValue="$currentGoal?->id ?? null"> </a>
</x-inputs.select> @endempty
<div class="flex items-center justify-start mt-4">
<x-inputs.button>Change Goal</x-inputs.button>
</div> </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>
<div class="w-full sm:w-3/5 md:w-2/3 lg:w-3/4 flex flex-col space-y-4"> <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) @foreach(['breakfast', 'lunch', 'dinner', 'snacks'] as $meal)