From d8c8156cfd7f37db1dd1d5c89611cc08f3c5c0f0 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Mon, 16 Jul 2018 18:19:36 +0200
Subject: Form submit: display form error - reinit all JS after submission

---
 chimere/static/saclay/js/interface.js     | 105 ++++++++++++++++++++++
 chimere/templates/chimere/edit.html       | 143 ++++++++++--------------------
 chimere/templates/tinymce/tinymce_init.js |  17 +++-
 chimere/views.py                          |   4 +-
 chimere/widgets.py                        |  20 ++++-
 5 files changed, 185 insertions(+), 104 deletions(-)

diff --git a/chimere/static/saclay/js/interface.js b/chimere/static/saclay/js/interface.js
index cd30561..e593588 100644
--- a/chimere/static/saclay/js/interface.js
+++ b/chimere/static/saclay/js/interface.js
@@ -407,3 +407,108 @@ function toggleDrawOff() {
                         ).addClass('toggle-button-active');
     $("#main-map").chimere("deactivateCurrentControl");
 }
+
+var edition_type = 'marker';
+var edition_event = false;
+var edition_error = "There are missing/erroneous fields.";
+var filter_categories = function() {};
+var displayProgress = function() {
+    $('#upload_in_progress .modal-body').html(upload);
+    $('#upload_in_progress').modal("show");
+};
+var init_widget_list = [];
+
+var init_modal_window = function(){
+    filter_categories();
+    register_subactions();
+
+    /*
+    {% if route %}
+    var edition_type = 'route';
+    {% if itinerary_form %}
+    $("#chimere_itinerary_form").appendTo($("#itinerary_field"));
+    $('#main_map').chimere('updateRoutingInput');{% endif%}
+    {% else %}
+    var edition_type = 'marker';
+    $('#main_map').chimere('updateMarkerInput');
+    {% endif %}
+    */
+
+    $('#modal-edit button.btn-primary').unbind("click");
+    $('#modal-edit button.btn-primary').click(function(){
+        // JS tests because if a file is submited there is no way
+        // to refill the form with (browser security issue)
+        if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();
+
+        var geom_name = edition_type;
+        if (geom_name == 'marker'){
+            geom_name = 'point';
+        }
+
+        validation = [
+            geom_name,
+            'categories'
+        ];
+        if (edition_event) validation.push('start_date');
+
+        $("input[required]").each(function(){
+            validation.push($(this).attr('name'));
+        });
+
+        var validated = true;
+        for (var idx=0; idx<validation.length ;idx++){
+            var input_id = validation[idx];
+            var selec = '[name=' + input_id + ']';
+            var val = jQuery(selec).val();
+            if (!val || val == '0' || val == '' || val == 'None' ||
+                    (input_id == 'id_submiter_email' &&
+                    !isValidEmailAddress(val))){
+                jQuery(selec).parent().addClass('warning');
+                jQuery(selec).parent().addClass('error');
+                validated = false;
+            } else {
+                jQuery(selec).parent().removeClass('warning');
+                jQuery(selec).parent().removeClass('error');
+            }
+        }
+        $('#modal-edit').animate({ scrollTop: 0 }, 'fast');
+        if (!validated){
+             alert(edition_error);
+            return false;
+        }
+        $("#proposition_form").ajaxForm();
+        displayProgress();
+        $("#proposition_form").ajaxSubmit({
+            success:function(msg){
+                $('#upload_in_progress').modal("hide");
+
+                var html = $.parseHTML(msg);
+                if (msg.indexOf("class='edit'") !== -1){
+                    $("#modal-edit .modal-body").html(html);
+                    setTimeout(function(){
+                        init_modal_window();
+                        init_map_edit();
+                        for (idx in init_widget_list){
+                            init_widget_list[idx]();
+                        }
+                        if (typeof(textara_list) !== 'undefined'){
+                            for (idx in textara_list){
+                                textara_list[idx]();
+                            }
+                        }
+                        if (typeof(datepicker_list) !== 'undefined'){
+                            for (idx in datepicker_list) datepicker_list[idx]();
+                        }
+                    }, 300);
+                } else {
+                    $("#modal-edit").modal("hide");
+                    $("#modal-default-message .modal-body").html(
+                        html);
+                    $('#modal-default-message').modal("show");
+                }
+            }
+        });
+        return false;
+    });
+};
+
diff --git a/chimere/templates/chimere/edit.html b/chimere/templates/chimere/edit.html
index d31cb79..b6e0963 100644
--- a/chimere/templates/chimere/edit.html
+++ b/chimere/templates/chimere/edit.html
@@ -3,7 +3,7 @@
 {% if error_message %}<div class='edit errorlist'>
     <legend>{% trans "Error" %}</legend>
     <p>{{ error_message }}</p>
-{% endif %}</div>
+</div>{% endif %}
 {% if is_modification and is_superuser %}<div class='warning'><p>{% trans "You are logged as an administrator. Your modifications will be taking into account immediately." %}</p></div>{% endif %}
 <div class='edit'>
     {% block editactions %}
@@ -20,6 +20,11 @@
     <form enctype="multipart/form-data" method='post'
           action='{% block edit_url %}{% url "editmarker" %}{% endblock %}{% if item_id %}{{item_id}}/{% endif %}'
           id='proposition_form'>
+        {% if form.errors %}
+        <div class="alert alert-danger">
+            Il y a des erreurs sur le formulaire, veuillez les corriger.
+        </div>
+        {% endif %}
         {% csrf_token %}
         <p>* {% trans "indicates a mandatory field" %}</p>
 
@@ -90,33 +95,6 @@
 
             {% inline_formset "Multimedia files" formset_multi %}
             {% inline_formset "Picture files" formset_picture %}
-
-            {% if filtered_properties %}
-            <script type='text/javascript'>
-                var cat_filters = new Array();
-                var cat_to_hide = new Array();
-                {% for property in filtered_properties %}
-                cat_to_hide.push('#id_{{property.getNamedId}}');
-                {% for subcat in property.subcategories.all %}
-                if(!cat_filters['{{subcat.id}}']) cat_filters['{{subcat.id}}'] = new Array();
-                cat_filters['{{subcat.id}}'].push('#id_{{property.getNamedId}}');
-                {% endfor %}
-                {% endfor %}
-                $('.bsmSelect').change(function(){
-                    for (idx in cat_to_hide){
-                        $(cat_to_hide[idx]).parent().hide();
-                    }
-                    var vals = $('#id_categories').val();
-                    for (val_id in vals){
-                        var val = vals[val_id];
-                        for (ids in cat_filters[val]){
-                            $(cat_filters[val][ids]).parent().show();
-                        }
-                    }
-                });
-                $('.bsmSelect').change();
-            </script>
-            {% endif %}
         </div>
         <div class='personalform'>
             <h5>{% trans "Personal information"%}</h5>
@@ -147,77 +125,52 @@
         </div>
         {% bootstrap_modal "upload_in_progress" %}
         <script text='text/javascript'>
-            var upload = '<p>{% trans "Upload in progress. Please wait..." %}</p>\n';
-            upload += "<p><img alt='Ajax loader' src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>";
-
-            function displayProgress(){
-                $('#upload_in_progress .modal-body').html(upload);
-                $('#upload_in_progress').modal("show");
-            }
-            $(function(){
-                register_subactions();
-                {% comment %}
-                {% if route %}
-                var edition_type = 'route';
-                {% if itinerary_form %}
-                $("#chimere_itinerary_form").appendTo($("#itinerary_field"));
-                $('#main_map').chimere('updateRoutingInput');{% endif%}
-                {% else %}
-                var edition_type = 'marker';
-                $('#main_map').chimere('updateMarkerInput');
+            filter_categories = function() {
+                {% if filtered_properties %}
+                var cat_filters = new Array();
+                var cat_to_hide = new Array();
+                {% for property in filtered_properties %}
+                cat_to_hide.push('#id_{{property.getNamedId}}');
+                {% for subcat in property.subcategories.all %}
+                if(!cat_filters['{{subcat.id}}']) cat_filters['{{subcat.id}}'] = new Array();
+                cat_filters['{{subcat.id}}'].push('#id_{{property.getNamedId}}');
+                {% endfor %}
+                {% endfor %}
+                $('.bsmSelect').change(function(){
+                    for (idx in cat_to_hide){
+                        $(cat_to_hide[idx]).parent().hide();
+                    }
+                    var vals = $('#id_categories').val();
+                    for (val_id in vals){
+                        var val = vals[val_id];
+                        for (ids in cat_filters[val]){
+                            $(cat_filters[val][ids]).parent().show();
+                        }
+                    }
+                });
+                $('.bsmSelect').change();
                 {% endif %}
-                {% endcomment %}
+            };
 
-                $('#modal-edit button.btn-primary').unbind("click");
-                $('#modal-edit button.btn-primary').click(function(){
-                    // JS tests because if a file is submited there is no way
-                    // to refill the form with (browser security issue)
-                    if (typeof tinyMCE !== 'undefined') tinyMCE.triggerSave();
-                    validation = [
-                        '{% if geom_name == 'marker' %}point{% else %}{{geom_name}}{% endif %}',
-                        'categories',{% if event %}
-                        'start_date',{% endif %}
-                    ];
+            {% if route %}
+            edition_type = 'route';
+            {% else %}
+            edition_type = 'marker';
+            {% endif %}
+            edition_event = {% if event %} true {% else %} false {% endif %};
+            edition_error = "{% trans 'There are missing/erroneous fields.' %}";
 
-                    $("input[required]").each(function(){
-                        validation.push($(this).attr('name'));
-                    });
+            {% comment %}
+            {% if itinerary_form %}
+            $("#chimere_itinerary_form").appendTo($("#itinerary_field"));
+            $('#main_map').chimere('updateRoutingInput');{% endif%}
+            {% endcomment %}
 
-                    var validated = true;
-                    for (var idx=0; idx<validation.length ;idx++){
-                        var input_id = validation[idx];
-                        var selec = '[name=' + input_id + ']';
-                        var val = jQuery(selec).val();
-                        if (!val || val == '0' || val == '' || val == 'None' ||
-                                (input_id == 'id_submiter_email' &&
-                                !isValidEmailAddress(val))){
-                            jQuery(selec).parent().addClass('warning');
-                            jQuery(selec).parent().addClass('error');
-                            validated = false;
-                        } else {
-                            jQuery(selec).parent().removeClass('warning');
-                            jQuery(selec).parent().removeClass('error');
-                        }
-                    }
-                    if (!validated){
-                        alert("{%trans "There are missing/erroneous fields."%}");
-                         $('#modal-edit').animate(
-                            { scrollTop: 0 }, 'fast');
-                        return false;
-                    }
-                    $("#proposition_form").ajaxForm();
-                    $('#modal-edit').animate({ scrollTop: 0 });
-                    displayProgress();
-                    $("#proposition_form").ajaxSubmit({
-                        success:function(msg){
-                            $('#upload_in_progress').modal("hide");
-                            $("#modal-edit").modal("hide");
-                            $("#modal-default-message .modal-body").html(msg);
-                            $('#modal-default-message').modal("show");
-                        }
-                    });
-                    return false;
-                });
+            var upload = '<p>{% trans "Upload in progress. Please wait..." %}</p>\n';
+            upload += "<p><img alt='Ajax loader' src='{{STATIC_URL}}chimere/img/ajax-loader.gif'/></p>";
+
+            $(function(){
+                init_modal_window();
             });
         </script>
     </form>
diff --git a/chimere/templates/tinymce/tinymce_init.js b/chimere/templates/tinymce/tinymce_init.js
index 8ebceb3..23bf340 100644
--- a/chimere/templates/tinymce/tinymce_init.js
+++ b/chimere/templates/tinymce/tinymce_init.js
@@ -1,4 +1,6 @@
 (function($) {
+
+  if (typeof(textara_list) === 'undefined') textara_list = [];
   {% if is_admin_inline %}
   $(function() {
   {% endif %}
@@ -17,9 +19,18 @@
       if (typeof selector != 'undefined') {
         tinymce4_config['selector'] = selector;
       }
-      // only the next line is added in chimere to force reinit
-      tinymce.remove(tinymce4_config['selector']);
-      tinymce.init(tinymce4_config);
+
+      textara_list.push(
+        function(){
+          // next line is added in chimere to force reinit
+          tinymce.remove(tinymce4_config['selector']);
+
+          setTimeout(function(){
+            tinymce.init(tinymce4_config);
+          }, 300);
+        }
+      )
+      textara_list[textara_list.length - 1]();
     } // End tinymce4_init
 {% if not is_admin_inline %}
     tinymce4_init();
diff --git a/chimere/views.py b/chimere/views.py
index 9b67b70..9dac562 100644
--- a/chimere/views.py
+++ b/chimere/views.py
@@ -378,8 +378,8 @@ def get_edit_page(redirect_url, item_cls, item_form,
                 )
                 if settings.DEBUG:
                     print(context)
-                return redirect(reverse('form-result')), None, \
-                       subcategories
+                # return redirect(reverse('form-result')), None, \
+                #       subcategories
         else:
             form = item_form(instance=init_item, subcategories=listed_subcats,
                              area_name=area_name)
diff --git a/chimere/widgets.py b/chimere/widgets.py
index a12d364..18a9ef1 100644
--- a/chimere/widgets.py
+++ b/chimere/widgets.py
@@ -253,9 +253,17 @@ class DatePickerWidget(forms.TextInput):
     """
     def render(self, *args, **kwargs):
         rendered = super(DatePickerWidget, self).render(*args, **kwargs)
-        rendered += "\n<script type='text/javascript'>\n"\
-            "  $(function() {$('#%s').datepicker();});\n"\
-            "</script>\n" % kwargs['attrs']['id']
+        rendered += """<script type='text/javascript'>
+            if (typeof(datepicker_list) === 'undefined') datepicker_list = [];
+            datepicker_list.push(
+                function(){
+                    $('#%s').datepicker();
+                }
+            );
+            $(function() {
+                for (idx in datepicker_list) datepicker_list[idx]();
+            });
+        </script>""" % kwargs['attrs']['id']
         return mark_safe(rendered)
 
 
@@ -755,7 +763,11 @@ class MultiSelectWidget(forms.SelectMultiple):
     def render(self, name, value, attrs=None):
         rendered = super(MultiSelectWidget, self).render(name, value, attrs)
         rendered += """<hr class='spacer'/><script type='text/javascript'>
-            $("#id_%(name)s").chosen({placeholder_text_multiple: "%(title)s"});
+    var render_id_%(name)s = function(){
+        $("#id_%(name)s").chosen({placeholder_text_multiple: "%(title)s"});
+    }
+    init_widget_list.push(render_id_%(name)s);
+    render_id_%(name)s();
 </script>
 <style>
 .form-row, .related-widget-wrapper {
-- 
cgit v1.2.3