From 57f03b21fc641d63c02ef07d3b753e2e39d75243 Mon Sep 17 00:00:00 2001
From: Eric Riggs <ericriggs42@gmail.com>
Date: Wed, 7 Mar 2018 02:13:38 -0400
Subject: [PATCH] - Update the markup of the multiple object action form into a
 valid markup. The checkboxes are now outside the form's tags. - Add
 beforeSerialization callback support to ajaxForm. - Add a callback to add the
 external checkboxes to the multiple object action form being submitted.

Signed-off-by: Eric Riggs <ericriggs42@gmail.com>
---
 .../appearance/static/appearance/js/base.js   |  12 +-
 .../static/appearance/js/mayan_app.js         |  26 ++-
 .../appearance/js/partial_navigation.js       |  19 ++-
 .../generic_list_items_subtemplate.html       | 129 +++++++-------
 .../appearance/generic_list_subtemplate.html  | 160 +++++++++---------
 5 files changed, 193 insertions(+), 153 deletions(-)

diff --git a/mayan/apps/appearance/static/appearance/js/base.js b/mayan/apps/appearance/static/appearance/js/base.js
index a49ba26e43..5be92bdef7 100644
--- a/mayan/apps/appearance/static/appearance/js/base.js
+++ b/mayan/apps/appearance/static/appearance/js/base.js
@@ -1,19 +1,19 @@
 'use strict';
 
 var app = new App();
+var partialNavigation = new PartialNavigation({
+    initialURL: initialURL,
+    excludeAnchorClasses: ['fancybox', 'new_window'],
+    formBeforeSerializeCallbacks: [App.MultiObjectFormProcess],
+});
 
 jQuery(document).ready(function() {
     app.setupFullHeightResizing();
-
-    var partialNavigation = new PartialNavigation({
-        initialURL: initialURL,
-        excludeAnchorClasses: ['fancybox', 'new_window'],
-    });
+    partialNavigation.initialize();
 });
 
 var afterBaseLoad = function () {
     MayanImage.intialize();
-
     app.doToastrMessages();
     app.setupAutoSubmit();
     app.setupItemsSelector();
diff --git a/mayan/apps/appearance/static/appearance/js/mayan_app.js b/mayan/apps/appearance/static/appearance/js/mayan_app.js
index fc745b23e9..16c058bd39 100644
--- a/mayan/apps/appearance/static/appearance/js/mayan_app.js
+++ b/mayan/apps/appearance/static/appearance/js/mayan_app.js
@@ -10,6 +10,30 @@ var App = function (parameters) {
 
 // Class methods and variables
 
+App.MultiObjectFormProcess = function ($form, options) {
+    /*
+     * ajaxForm callback to add the external item checkboxes to the
+     * submitted form
+     */
+
+    if ($form.hasClass('form-multi-object-action')) {
+        // Turn form data into an object
+        var formArray = $form.serializeArray().reduce(function (obj, item) {
+            obj[item.name] = item.value;
+            return obj;
+        }, {});
+
+        // Add all checked checkboxes to the form data
+        $('.form-multi-object-action-checkbox:checked').each(function() {
+            var $this = $(this);
+            formArray[$this.attr('name')] = $this.attr('value');
+        });
+
+        // Set the form data as the data to send
+        options.data = formArray;
+    }
+}
+
 App.tagSelectionTemplate = function (tag, container) {
   var $tag = $(
     '<span class="label label-tag" style="background: ' + tag.element.style.color + ';"> ' + tag.text + '</span>'
@@ -97,7 +121,7 @@ App.prototype.doToastrMessages = function () {
 App.prototype.setupAutoSubmit = function () {
     $('.select-auto-submit').change(function () {
         if ($(this).val()) {
-            this.form.submit();
+            $(this.form).trigger('submit');
         }
     });
 }
diff --git a/mayan/apps/appearance/static/appearance/js/partial_navigation.js b/mayan/apps/appearance/static/appearance/js/partial_navigation.js
index 4a0e02270e..a0803bc609 100644
--- a/mayan/apps/appearance/static/appearance/js/partial_navigation.js
+++ b/mayan/apps/appearance/static/appearance/js/partial_navigation.js
@@ -12,14 +12,24 @@ $.fn.hasAnyClass = function() {
 var PartialNavigation = function (parameters) {
     parameters = parameters || {};
 
-    this.initialURL = parameters.initialURL || null;
-    this.excludeAnchorClasses = parameters.excludeAnchorClasses || [];
+    // lastLocation - used as the AJAX referer
     this.lastLocation = null;
 
+    // initialURL - the URL to send users when trying to access the / URL
+    this.initialURL = parameters.initialURL || null;
+
+    // excludeAnchorClasses - Anchors with any of these classes will not be processes as AJAX anchors
+    this.excludeAnchorClasses = parameters.excludeAnchorClasses || [];
+
+    // formBeforeSerializeCallbacks - Callbacks to execute before submitting an ajaxForm
+    this.formBeforeSerializeCallbacks = parameters.formBeforeSerializeCallbacks || [];
+
     if (!this.initialURL) {
         alert('Need to setup initialURL');
     }
+}
 
+PartialNavigation.prototype.initialize = function () {
     this.setupAjaxAnchors();
     this.setupAjaxNavigation();
     this.setupAjaxForm();
@@ -137,6 +147,11 @@ PartialNavigation.prototype.setupAjaxForm = function () {
 
     $('form').ajaxForm({
         async: false,
+        beforeSerialize: function($form, options) {
+            $.each(app.formBeforeSerializeCallbacks, function (index, value) {
+               value($form, options);
+            });
+        },
         beforeSubmit: function(arr, $form, options) {
             console.log('>> ajaxForm.beforeSubmit.$form.target: ' + $form.attr('action'));
             var uri = new URI(location);
diff --git a/mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html b/mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html
index 192db9bf78..e648140264 100644
--- a/mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html
+++ b/mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html
@@ -33,7 +33,7 @@
         <div class="well center-block">
             <div class="clearfix">
                 <div class="pull-right">
-                    <form action="{% url 'common:multi_object_action_view' %}" class="pure-form" method="get">
+                    <form action="{% url 'common:multi_object_action_view' %}" class="form-multi-object-action" method="get">
                         {% if object_list %}
                             {% if not hide_multi_item_actions %}
                                 {% get_multi_item_links_form object_list %}
@@ -45,87 +45,88 @@
                                 </fieldset>
                             {% endif %}
                         {% endif %}
+                    </form>
                 </div>
             </div>
-                {% if object_list %}
-                    <hr style="border-bottom: 1px solid lightgrey;">
-                {% endif %}
-                {% if scrollable_content %}
-                    <div style="border: 1px solid; height: {{ scrollable_content_height }}; overflow: auto;">
-                {% endif %}
 
-                <div class="row">
-                    {% for object in object_list %}
-                        <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
-                            <div class="panel panel-primary panel-item">
-                                <div class="panel-heading">
+            {% if object_list %}
+                <hr style="border-bottom: 1px solid lightgrey;">
+            {% endif %}
+            {% if scrollable_content %}
+                <div style="border: 1px solid; height: {{ scrollable_content_height }}; overflow: auto;">
+            {% endif %}
 
-                                    <div class="form-group">
-                                        <div class="checkbox">
-                                            <label for="id_indexes_0">
-                                                {% if multi_item_actions %}
-                                                    {% if multi_select_item_properties %}
-                                                        <input class="checkbox" type="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" value="" />
+            <div class="row">
+                {% for object in object_list %}
+                    <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2">
+                        <div class="panel panel-primary panel-item">
+                            <div class="panel-heading">
+
+                                <div class="form-group">
+                                    <div class="checkbox">
+                                        <label for="id_indexes_0">
+                                            {% if multi_item_actions %}
+                                                {% if multi_select_item_properties %}
+                                                    <input class="form-multi-object-action-checkbox checkbox" type="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" />
+                                                {% else %}
+                                                    <input class="form-multi-object-action-checkbox checkbox" type="checkbox" name="pk_{{ object.pk }}" />
+                                                {% endif %}
+                                            {% endif %}
+
+                                            <span style="color: white; word-break: break-all; overflow-wrap: break-word;">
+                                                {% if not hide_object %}
+                                                    {% if main_object %}
+                                                        {% with object|object_property:main_object as object %}
+                                                            {% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
+                                                        {% endwith %}
                                                     {% else %}
-                                                        <input class="checkbox" type="checkbox" name="pk_{{ object.pk }}" value="" />
+                                                        {% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
                                                     {% endif %}
                                                 {% endif %}
 
-                                                <span style="color: white; word-break: break-all; overflow-wrap: break-word;">
-                                                    {% if not hide_object %}
-                                                        {% if main_object %}
-                                                            {% with object|object_property:main_object as object %}
-                                                                {% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
-                                                            {% endwith %}
-                                                        {% else %}
-                                                            {% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}
-                                                        {% endif %}
-                                                    {% endif %}
-
-                                                </span>
-                                            </label>
-                                        </div>
+                                            </span>
+                                        </label>
                                     </div>
-
                                 </div>
-                                <div class="panel-body">
 
-                                    {% if not hide_columns %}
-                                        {% for column in object|get_source_columns %}
-                                            <div class="text-center" style="">{% source_column_resolve column=column %}{{ column_result }}</div>
-                                        {% endfor %}
-                                    {% endif %}
+                            </div>
+                            <div class="panel-body">
 
-                                    {% for column in extra_columns %}
-                                        <div class="text-center"><span class="list-extra-column-label">{{ column.name }}</span>: {{ object|object_property:column.attribute }}</div>
+                                {% if not hide_columns %}
+                                    {% for column in object|get_source_columns %}
+                                        <div class="text-center" style="">{% source_column_resolve column=column %}{{ column_result }}</div>
                                     {% endfor %}
+                                {% endif %}
 
-                                    {% if not hide_links %}
-                                        <p class="text-center">
-                                            {% get_menu_links 'object menu' source=object as resolved_links %}
-                                            {% for object_navigation_links in resolved_links %}
-                                                {% with 'true' as as_dropdown %}
-                                                    {% include 'navigation/generic_navigation.html' %}
-                                                {% endwith %}
-                                            {% endfor %}
-                                        </p>
-                                    {% endif %}
+                                {% for column in extra_columns %}
+                                    <div class="text-center"><span class="list-extra-column-label">{{ column.name }}</span>: {{ object|object_property:column.attribute }}</div>
+                                {% endfor %}
+
+                                {% if not hide_links %}
+                                    <p class="text-center">
+                                        {% get_menu_links 'object menu' source=object as resolved_links %}
+                                        {% for object_navigation_links in resolved_links %}
+                                            {% with 'true' as as_dropdown %}
+                                                {% include 'navigation/generic_navigation.html' %}
+                                            {% endwith %}
+                                        {% endfor %}
+                                    </p>
+                                {% endif %}
 
-                                </div>
                             </div>
                         </div>
-                    {% empty %}
-                        <div class="col-xs-12">
-                            <p class="text-center">{% trans 'No results' %}</p>
-                        </div>
-
-                    {% endfor %}
-                </div>
-
-                {% if scrollable_content %}
                     </div>
-                {% endif %}
-            </form>
+                {% empty %}
+                    <div class="col-xs-12">
+                        <p class="text-center">{% trans 'No results' %}</p>
+                    </div>
+
+                {% endfor %}
+            </div>
+
+            {% if scrollable_content %}
+                </div>
+            {% endif %}
             {% include 'pagination/pagination.html' %}
         </div>
     </div>
diff --git a/mayan/apps/appearance/templates/appearance/generic_list_subtemplate.html b/mayan/apps/appearance/templates/appearance/generic_list_subtemplate.html
index a73daab57a..2c7c8bf922 100644
--- a/mayan/apps/appearance/templates/appearance/generic_list_subtemplate.html
+++ b/mayan/apps/appearance/templates/appearance/generic_list_subtemplate.html
@@ -22,7 +22,7 @@
         <div class="well center-block">
             <div class="clearfix">
                 <div class="pull-right">
-                    <form action="{% url 'common:multi_object_action_view' %}" class="pure-form" method="get">
+                    <form action="{% url 'common:multi_object_action_view' %}" class="form-multi-object-action" method="get">
                         {% if object_list %}
                             {% if not hide_multi_item_actions %}
                                 {% get_multi_item_links_form object_list %}
@@ -33,92 +33,92 @@
                                 </fieldset>
                             {% endif %}
                         {% endif %}
-
+                    </form>
                 </div>
             </div>
-                {% if scrollable_content %}
-                    <div style="border: 1px solid; height: {{ scrollable_content_height }}; overflow: auto;">
-                {% endif %}
+            {% if scrollable_content %}
+                <div style="border: 1px solid; height: {{ scrollable_content_height }}; overflow: auto;">
+            {% endif %}
 
-                    <div class="table-responsive">
-                        <table class="table table-condensed table-striped">
-                            <tbody>
-                                {% if not hide_header %}
-                                    <tr>
-                                        {% if multi_item_actions %}
-                                            <th class="first"><input type="checkbox" class="checkbox toggle" /></th>
-                                        {% endif %}
-
-                                        {% if not hide_object %}
-                                            <th>{% trans 'Identifier' %}</th>
-                                        {% endif %}
-
-                                        {% if not hide_columns %}
-                                            {% for column in object_list|get_source_columns %}
-                                                <th>{{ column.label }}</th>
-                                            {% endfor %}
-                                        {% endif %}
-
-                                        {% for column in extra_columns %}
-                                            <th>{{ column.name }}</th>
-                                        {% endfor %}
-
-                                        {% if not hide_links %}
-                                            <th class="">&nbsp;</th>
-                                        {% endif %}
-                                    </tr>
+            <div class="table-responsive">
+                <table class="table table-condensed table-striped">
+                    <tbody>
+                        {% if not hide_header %}
+                            <tr>
+                                {% if multi_item_actions %}
+                                    <th class="first"><input class="form-multi-object-action-checkbox checkbox" type="checkbox" /></th>
                                 {% endif %}
-                                {% for object in object_list %}
-                                    <tr>
 
-                                    {% if multi_item_actions %}
-                                        <td>
-                                        {% if multi_select_item_properties %}
-                                            <input type="checkbox" class="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" value="" />
-                                        {% else %}
-                                            <input type="checkbox" class="checkbox" name="pk_{{ object.pk }}" value="" />
-                                        {% endif %}
-                                        </td>
-                                    {% endif %}
-                                    {% if not hide_object %}
-                                        {% if main_object %}
-                                            {% with object|object_property:main_object as object %}
-                                                <td>{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}</td>
-                                            {% endwith %}
-                                        {% else %}
-                                            <td>{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}</td>
-                                        {% endif %}
-                                    {% endif %}
-                                     {% if not hide_columns %}
-                                        {% for column in object|get_source_columns %}
-                                            <td>{% source_column_resolve column=column %}{{ column_result }}</td>
-                                        {% endfor %}
-                                    {% endif %}
-                                    {% for column in extra_columns %}
-                                        <td>{{ object|object_property:column.attribute }}</td>
+                                {% if not hide_object %}
+                                    <th>{% trans 'Identifier' %}</th>
+                                {% endif %}
+
+                                {% if not hide_columns %}
+                                    {% for column in object_list|get_source_columns %}
+                                        <th>{{ column.label }}</th>
                                     {% endfor %}
-                                    {% if not hide_links %}
-                                        <td class="last">
-                                            {% get_menu_links 'object menu' source=object as resolved_links %}
-                                            {% for object_navigation_links in resolved_links %}
-                                                {% with 'true' as horizontal %}
-                                                    {% include 'navigation/generic_navigation.html' %}
-                                                {% endwith %}
-                                            {% endfor %}
-                                        </td>
-                                    {% endif %}
-                                    </tr>
-                                {% empty %}
-                                    <tr><td class="text-center" colspan=99>{% trans 'No results' %}</td></tr>
-                                {% endfor %}
-                            </tbody>
-                        </table>
-                    </div>
+                                {% endif %}
+
+                                {% for column in extra_columns %}
+                                    <th>{{ column.name }}</th>
+                                {% endfor %}
+
+                                {% if not hide_links %}
+                                    <th class="">&nbsp;</th>
+                                {% endif %}
+                            </tr>
+                        {% endif %}
+                        {% for object in object_list %}
+                            <tr>
+
+                            {% if multi_item_actions %}
+                                <td>
+                                {% if multi_select_item_properties %}
+                                    <input type="checkbox" class="checkbox" name="properties_{{ object|get_encoded_parameter:multi_select_item_properties }}" value="" />
+                                {% else %}
+                                    <input type="checkbox" class="checkbox" name="pk_{{ object.pk }}" value="" />
+                                {% endif %}
+                                </td>
+                            {% endif %}
+                            {% if not hide_object %}
+                                {% if main_object %}
+                                    {% with object|object_property:main_object as object %}
+                                        <td>{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}</td>
+                                    {% endwith %}
+                                {% else %}
+                                    <td>{% if not hide_link %}<a href="{{ object.get_absolute_url }}">{{ object }}</a>{% else %}{{ object }}{% endif %}</td>
+                                {% endif %}
+                            {% endif %}
+                             {% if not hide_columns %}
+                                {% for column in object|get_source_columns %}
+                                    <td>{% source_column_resolve column=column %}{{ column_result }}</td>
+                                {% endfor %}
+                            {% endif %}
+                            {% for column in extra_columns %}
+                                <td>{{ object|object_property:column.attribute }}</td>
+                            {% endfor %}
+                            {% if not hide_links %}
+                                <td class="last">
+                                    {% get_menu_links 'object menu' source=object as resolved_links %}
+                                    {% for object_navigation_links in resolved_links %}
+                                        {% with 'true' as horizontal %}
+                                            {% include 'navigation/generic_navigation.html' %}
+                                        {% endwith %}
+                                    {% endfor %}
+                                </td>
+                            {% endif %}
+                            </tr>
+                        {% empty %}
+                            <tr><td class="text-center" colspan=99>{% trans 'No results' %}</td></tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+
+            {% if scrollable_content %}
+                </div>
+            {% endif %}
 
-                {% if scrollable_content %}
-                    </div>
-                {% endif %}
-            </form>
             {% include 'pagination/pagination.html' %}
         </div>
     </div>