RomanNum3ral
/
kcal
mirror of https://github.com/kcal-app/kcal.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Prevent overwriting entry data on form error

This commit is contained in:
Christopher C. Wells 2021-01-30 14:11:29 -08:00
parent 87311b9ec4
commit 76f29739e7
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/views/journal-entries/create.blade.php
View File

@ -9,16 +9,16 @@
<div class="p-6 bg-white border-b border-gray-200">
<form method="POST" action="{{ route('journal-entries.store') }}">
@csrf
<div x-data="{ ingredients: 1 }">
<div x-data="{ ingredients: {{ $ingredients ? 0 : 1 }} }">
<div class="space-y-4">
@foreach($ingredients as $ingredient)
@include('journal-entries.partials.entry-item-input', $ingredient)
@endforeach
<template x-if="ingredients > 0" x-for="i in ingredients">
@include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
@include('journal-entries.partials.entry-item-input', ['template' => true, 'default_date' => $default_date])
</template>
</div>
<x-inputs.icon-button type="button" color="green" x-on:click="ingredients++;">
<x-inputs.icon-button type="button" color="green" x-on:click="ingredients++">
<svg class="h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>

22
resources/views/journal-entries/partials/entry-item-input.blade.php
View File

@ -1,4 +1,4 @@
<div x-data x-init="setDefaultsFromPrevious($el);" class="flex items-center space-x-2">
<div x-data @isset($template)x-init="setDefaultsFromPrevious($el);"@endisset class="flex items-center space-x-2">
<div class="flex flex-col space-y-4 w-full">
<div class="flex flex-col space-y-4 md:flex-row md:space-x-4 md:space-y-0 w-full">
<!-- Date -->
@ -19,7 +19,7 @@
:options="$meals"
:selectedValue="$meal ?? null"
required>
<option value="" disabled selected>Meal</option>
<option value="">-- Meal --</option>
</x-inputs.select>
</div>
@ -41,7 +41,7 @@
class="block w-full"
:options="$units"
:selectedValue="$unit ?? null">
<option value="">Unit</option>
<option value="">-- Unit --</option>
</x-inputs.select>
</div>
</div>
@ -61,7 +61,7 @@
<div class="flex-none">
<x-inputs.icon-button type="button"
color="red"
x-on:click="($parent.ingredients > 1 ? $parent.ingredients-- : null); $event.target.parentNode.parentNode.remove();">
x-on:click="$event.target.parentNode.parentNode.remove();">
<svg class="h-8 w-8 pointer-events-none m-auto" 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>
@ -73,9 +73,21 @@
@push('scripts')
<script type="text/javascript">
let setDefaultsFromPrevious = ($el) => {
let previousEl = $el.previousElementSibling;
// Skip the <template> node.
if (previousEl && previousEl.nodeName === 'TEMPLATE') {
previousEl = previousEl.previousElementSibling;
}
// Do not continue if there is no previous element.
if (!previousEl) {
return;
}
// Set date and meal from the previous element.
let currentDateEl = $el.querySelector('input[name="ingredients[date][]"]');
let currentMealEl = $el.querySelector('select[name="ingredients[meal][]"]');
let previousEl = $el.previousElementSibling;
let previousDateEl = previousEl.querySelector('input[name="ingredients[date][]"]');
let previousMealEl = previousEl.querySelector('select[name="ingredients[meal][]"]');
if (currentDateEl && currentMealEl && previousDateEl && previousMealEl) {