From c16926987619f6c2360777d0151778956e5ed2e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julien=20Fastr=C3=A9?= <julien@fastre.info>
Date: Fri, 21 Nov 2014 10:58:20 +0100
Subject: [PATCH] Prevent leaving the new and edit report page without saving.
 close #319

Code inspired by http://stackoverflow.com/a/21061009/1572236

I think this functionality might be interesting for other forms. Maybe we could abstract them in a twig template to reuse the code (with an 'include' declaration) or add this to all form automatically, by customizing the form_start or form_end function ?
---
 Resources/views/Report/edit.html.twig | 19 +++++++++++++++++++
 Resources/views/Report/new.html.twig  | 18 ++++++++++++++++++
 2 files changed, 37 insertions(+)

diff --git a/Resources/views/Report/edit.html.twig b/Resources/views/Report/edit.html.twig
index d6cc88fe4..7b8380020 100644
--- a/Resources/views/Report/edit.html.twig
+++ b/Resources/views/Report/edit.html.twig
@@ -29,4 +29,23 @@
             <button class="sc-button red" type="reset"><i class="fa fa-eraser"></i> {{ 'Reset report'|trans }}</button>
         </div>
     {{ form_end(edit_form) }}
+    
+<script type="text/javascript">
+var form = $("form[name='{{ edit_form.vars.form.vars.name }}']").data('serialize',$("form[name='{{ edit_form.vars.form.vars.name }}']").serialize());
+// On load save form current state
+var submittedOk{{ edit_form.vars.form.vars.name }} = false;
+form.bind('submit', function(e) {
+    submittedOk{{ edit_form.vars.form.vars.name }} = true;
+});
+
+$(window).bind('beforeunload', function(e){
+    if($("form[name='{{ edit_form.vars.form.vars.name }}']").serialize()!=$("form[name='{{ edit_form.vars.form.vars.name }}']").data('serialize')){
+        if (submittedOk{{ edit_form.vars.form.vars.name }} == false) {
+            return "{{ 'You are going to leave a page with unsubmitted data. Are you sure you want to leave ?'|trans }}";
+            }
+        }
+    e=null;
+    // i.e; if form state change show box not.
+});
+</script>
 {% endblock %}
diff --git a/Resources/views/Report/new.html.twig b/Resources/views/Report/new.html.twig
index b0fb5cf2a..00c4a1113 100644
--- a/Resources/views/Report/new.html.twig
+++ b/Resources/views/Report/new.html.twig
@@ -29,4 +29,22 @@
             <button class="sc-button red" type="reset"><i class="fa fa-eraser"></i> {{ 'Reset report'|trans }}</button>
         </div>
     {{ form_end(form) }}
+ <script type="text/javascript">
+var form = $("form[name='{{ form.vars.form.vars.name }}']").data('serialize',$("form[name='{{ form.vars.form.vars.name }}']").serialize());
+// On load save form current state
+var submittedOk{{ form.vars.form.vars.name }} = false;
+form.bind('submit', function(e) {
+    submittedOk{{ form.vars.form.vars.name }} = true;
+});
+
+$(window).bind('beforeunload', function(e){
+    if($("form[name='{{ form.vars.form.vars.name }}']").serialize()!=$("form[name='{{ form.vars.form.vars.name }}']").data('serialize')){
+        if (submittedOk{{ form.vars.form.vars.name }} == false) {
+            return "{{ 'You are going to leave a page with unsubmitted data. Are you sure you want to leave ?'|trans }}";
+            }
+        }
+    e=null;
+    // i.e; if form state change show box not.
+});
+</script>
 {% endblock %}
\ No newline at end of file