Skip to content
This repository was 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 1 commit
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
2 changes: 2 additions & 0 deletions lib/Coocook/Controller/Dish.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
1 change: 1 addition & 0 deletions lib/Coocook/Controller/Recipe.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Copy link
Owner

Choose a reason for hiding this comment

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

I like your generic implementation with the <form> class. Do you think we should simply add this to our global script.js to utilize it on any page? 🤔

}

sub new_recipe : GET HEAD Chained('submenu') PathPart('recipes/new')
Expand Down
21 changes: 21 additions & 0 deletions root/static/js/unsavedChanges.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const forms = document.getElementsByClassName('confirmIfUnsavedChanges');
Copy link
Owner

Choose a reason for hiding this comment

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

How about "use strict";?

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'));
Copy link
Owner

Choose a reason for hiding this comment

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

Can you align those vertically?

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 = '';
Copy link
Owner

Choose a reason for hiding this comment

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

If you have a relevant web link from your research, please included it as a comment. I remember the pain of research and even with the correct answer couldn’t find the spec right now.

return '';
}
})
Copy link
Owner

Choose a reason for hiding this comment

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

Here’s a trailing newline missing

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