Skip to content
This repository has been archived by the owner on Jun 21, 2022. It is now read-only.

#144 confirm if unsaved form changes #169

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

#144 confirm if unsaved form changes #169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1a34401
#144 confirm if unsaved form changes
tjfoerster May 18, 2022
9351991
(#144) bugfix and some changes
tjfoerster May 31, 2022
7eb56ce
(#144) add unsavedChanges.js to script.js
tjfoerster May 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion lib/Coocook/Controller/Recipe.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,6 @@ sub edit : GET HEAD Chained('base') PathPart('') Args(0) RequiresCapability('vie
$c->user
and $c->stash(
import_url => $c->uri_for_action( '/browse/recipe/import', [ $recipe->id, $recipe->url_name ] ) );

}

sub new_recipe : GET HEAD Chained('submenu') PathPart('recipes/new')
Expand Down
23 changes: 23 additions & 0 deletions root/static/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
"use strict";

$(function() {

// reduce options of <select> inputs for unit to units applicable to selected article
Expand Down Expand Up @@ -57,3 +59,24 @@ $(function() {
});

});

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

for( const elem of elements ) {
elem.addEventListener('input', () => { if( !hasUnsavedChanges ) hasUnsavedChanges = true });
}

form.addEventListener('submit', () => { if( hasUnsavedChanges ) hasUnsavedChanges = false });
}

// See documentation about 'beforeunload' event on https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
window.addEventListener('beforeunload', (e) => {
if( hasUnsavedChanges ) e.preventDefault(); //
});
42 changes: 21 additions & 21 deletions root/templates/dish/edit.tt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' %]
Expand Down
2 changes: 1 addition & 1 deletion root/templates/recipe/edit.tt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
</div>
[% END %]

<form method="post" action="[% update_url %]">
<form class="confirmIfUnsavedChanges" method="post" action="[% update_url %]">
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I checked out your branch and tested. The JS file was loaded but it had no effect. I made changes and could leave the page without warning.


<div class="row">
<div class="col-sm-12 py-3">
Expand Down