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',
'transition',
'ease-in-out',
'duration-150'
'duration-150',
'cursor-pointer',
];
@endphp
<a {{ $attributes->merge(['class' => implode(' ', $classes)]) }}>

View File

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