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,7 +99,14 @@
{{ $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 }">
<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) @empty($currentGoal)
<div class="italic">No goal.</div> <div class="italic">No goal.</div>
@else @else
@ -108,6 +115,8 @@
{{ $currentGoal->name }} {{ $currentGoal->name }}
</a> </a>
@endempty @endempty
</div>
<div x-show="showGoalChangeForm">
<form method="POST" action="{{ route('journal-dates.update.goal', $journalDate) }}"> <form method="POST" action="{{ route('journal-dates.update.goal', $journalDate) }}">
@csrf @csrf
<x-inputs.select name="goal" <x-inputs.select name="goal"
@ -116,10 +125,15 @@
:selectedValue="$currentGoal?->id ?? null"> :selectedValue="$currentGoal?->id ?? null">
</x-inputs.select> </x-inputs.select>
<div class="flex items-center justify-start mt-4"> <div class="flex items-center justify-start mt-4">
<x-inputs.button>Change Goal</x-inputs.button> <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> </div>
</form> </form>
</div> </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"> <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)
<div> <div>