From 24669f0314cfe7b6f9b3358a05d2054ee4de39e4 Mon Sep 17 00:00:00 2001
From: "Christopher C. Wells" <git@chris-wells.net>
Date: Sun, 21 Mar 2021 14:26:18 -0700
Subject: [PATCH] Only remove journal entry template when form is valid

---
 resources/views/journal-entries/create.blade.php | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/resources/views/journal-entries/create.blade.php b/resources/views/journal-entries/create.blade.php
index 01c3b7a..3c8327b 100644
--- a/resources/views/journal-entries/create.blade.php
+++ b/resources/views/journal-entries/create.blade.php
@@ -17,7 +17,7 @@
             <div class="journal-entry-template hidden">
                 @include('journal-entries.partials.entry-item-input', ['default_date' => $default_date])
             </div>
-            <x-inputs.icon-button type="button" color="green" x-on:click="addEntryNode($el);">
+            <x-inputs.icon-button type="button" color="green" class="add-entry-item" x-on:click="addEntryNode($el);">
                 <svg class="h-10 w-10 pointer-events-none" 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>
@@ -85,7 +85,14 @@
                  * @param {object} $el Journal entry lines parent element.
                  */
                 let removeTemplate = ($el) => {
-                    $el.querySelector(':scope .journal-entry-template').remove();
+                    const form = $el.closest('form');
+                    const template = $el.querySelector(':scope .journal-entry-template');
+                    template.remove();
+
+                    // Re-add the template if the form is not valid without it.
+                    if (!form.checkValidity()) {
+                        form.querySelector(':scope .add-entry-item').before(template);
+                    }
                 }
             </script>
         @endpush