#144 confirm if unsaved form changes

dboehmer · May 18, 2022 · 1a34401 · 1a34401
1 parent fc1abb2
commit 1a34401
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 22 deletions.
diff --git a/lib/Coocook/Controller/Dish.pm b/lib/Coocook/Controller/Dish.pm
@@ -81,6 +81,8 @@ sub edit : GET HEAD Chained('base') PathPart('') Args(0) RequiresCapability('vie
     for my $ingredient ( @{ $c->stash->{ingredients} } ) {
         $ingredient->{reposition_url} = $c->project_uri( '/dish/reposition', $ingredient->{id} );
     }
+
+    push @{ $c->stash->{js} }, '/js/unsavedChanges.js';
 }
 
 sub delete : POST Chained('base') PathPart('delete') Args(0) RequiresCapability('edit_project') {

diff --git a/lib/Coocook/Controller/Recipe.pm b/lib/Coocook/Controller/Recipe.pm
@@ -107,6 +107,7 @@ sub edit : GET HEAD Chained('base') PathPart('') Args(0) RequiresCapability('vie
       and $c->stash(
         import_url => $c->uri_for_action( '/browse/recipe/import', [ $recipe->id, $recipe->url_name ] ) );
 
+    push @{ $c->stash->{js} }, '/js/unsavedChanges.js';
 }
 
 sub new_recipe : GET HEAD Chained('submenu') PathPart('recipes/new')

diff --git a/root/static/js/unsavedChanges.js b/root/static/js/unsavedChanges.js
@@ -0,0 +1,21 @@
+const forms = document.getElementsByClassName('confirmIfUnsavedChanges');
+let hasUnsavedChanges = false;
+
+for(const form of forms) {
+    const inputs = Array.prototype.slice.apply(form.getElementsByTagName('input'));
+    const textareas = Array.prototype.slice.apply(form.getElementsByTagName('textarea'));
+    const selects = Array.prototype.slice.apply(form.getElementsByTagName('select'));
+    const elements = inputs.concat(textareas).concat(selects);
+    console.log(elements)
+    for(const elem of elements) {
+        elem.addEventListener('input', () => {if(!hasUnsavedChanges) hasUnsavedChanges = true});
+    }
+    form.addEventListener('submit', () => {if(hasUnsavedChanges) hasUnsavedChanges = false});
+}
+
+window.addEventListener('beforeunload', (e) => {
+    if (hasUnsavedChanges) {
+        (e || window.event).returnValue = '';
+        return '';
+    }
+})
diff --git a/root/templates/dish/edit.tt b/root/templates/dish/edit.tt
@@ -10,33 +10,33 @@
     <input type="submit" value="Delete dish">
 </form>
 
-<form action="[% dish.update_url %]" method="post">
-<p>Name: <input type="text" name="name" value="[% dish.name | html %]"></p>
-<p>Comment: <input type="text" name="comment" value="[% dish.comment %]"></p>
-<p>Servings: <input type="number" name="servings" value="[% dish.servings %]"> <em>Changing here doesn’t recalculate values!</em></p>
-<p>Tags: <input type="text" name="tags" value="[% dish.tags_joined %]"></p>
-<p><label for="prepare_at_meal">Prepare at meal:</label>
-    <select id="prepare_at_meal" name="prepare_at_meal">
-        <option value="" [% 'selected' IF NOT dish.prepare_at_meal.defined %]>(none)</option>
-[% FOR meal IN prepare_meals %]
-        <option value="[% meal.id %]" [% 'selected' IF dish.prepare_at_meal.id == meal.id %]>[% display_date(meal.date) %]: [% meal.name | html %]</option>
-[% END %]
-    </select>
-</p>
+<form class="confirmIfUnsavedChanges" action="[% dish.update_url %]" method="post">
+    <p>Name: <input type="text" name="name" value="[% dish.name | html %]"></p>
+    <p>Comment: <input type="text" name="comment" value="[% dish.comment %]"></p>
+    <p>Servings: <input type="number" name="servings" value="[% dish.servings %]"> <em>Changing here doesn’t recalculate values!</em></p>
+    <p>Tags: <input type="text" name="tags" value="[% dish.tags_joined %]"></p>
+    <p><label for="prepare_at_meal">Prepare at meal:</label>
+        <select id="prepare_at_meal" name="prepare_at_meal">
+            <option value="" [% 'selected' IF NOT dish.prepare_at_meal.defined %]>(none)</option>
+    [% FOR meal IN prepare_meals %]
+            <option value="[% meal.id %]" [% 'selected' IF dish.prepare_at_meal.id == meal.id %]>[% display_date(meal.date) %]: [% meal.name | html %]</option>
+    [% END %]
+        </select>
+    </p>
 
-<h3>Preparation</h3>
-<textarea class="with-markdown-preview" name="preparation" cols="80" rows="10">[% dish.preparation | html %]</textarea>
+    <h3>Preparation</h3>
+    <textarea class="with-markdown-preview" name="preparation" cols="80" rows="10">[% dish.preparation | html %]</textarea>
 
-<h3>Description</h3>
-<textarea class="with-markdown-preview" name="description" cols="80" rows="10">[% dish.description | html %]</textarea>
+    <h3>Description</h3>
+    <textarea class="with-markdown-preview" name="description" cols="80" rows="10">[% dish.description | html %]</textarea>
 
-<p><input type="submit" value="Update Dish"></p>
+    <p><input type="submit" value="Update Dish"></p>
 
-<h2><a name="ingredients">Ingredients</a></h2>
+    <h2><a name="ingredients">Ingredients</a></h2>
 
-[% INCLUDE 'includes/forms/ingredients_editor.tt' %]
+    [% INCLUDE 'includes/forms/ingredients_editor.tt' %]
 
-<input type="submit" value="Update Dish">
+    <input type="submit" value="Update Dish">
 </form>
 
 [% INCLUDE 'includes/forms/ingredients_add.tt' %]

diff --git a/root/templates/recipe/edit.tt b/root/templates/recipe/edit.tt
@@ -13,7 +13,7 @@
 </div>
 [% END %]
 
-<form method="post" action="[% update_url %]">
+<form class="confirmIfUnsavedChanges" method="post" action="[% update_url %]">
 
     <div class="row">
         <div class="col-sm-12 py-3">