Remove MultiItemForm

Remove the HTML based MultiItemForm and use a Bootstrap dropdown
menu for the bulk actions list.

Add a text message explaining that items must be selected in
other to activate the bulk action menu.

Signed-off-by: Roberto Rosario <Roberto.Rosario@mayan-edms.com>

mayan/apps/appearance/static/appearance/js/base.js

@@ -6,7 +6,8 @@ var MayanAppClass = MayanApp;
 
 var partialNavigation = new PartialNavigation({
     initialURL: initialURL,
-    disabledAnchorClasses: ['disabled', 'pagination-disabled'],
+    disabledAnchorClasses: [
+        'btn-multi-item-action', 'disabled', 'pagination-disabled'
+    ],
     excludeAnchorClasses: ['fancybox', 'new_window', 'non-ajax'],
-    formBeforeSerializeCallbacks: [MayanApp.MultiObjectFormProcess],
 });

mayan/apps/appearance/static/appearance/js/mayan_app.js

@@ -17,27 +17,15 @@ class MayanApp {
 
     // Class methods and variables
 
-    static MultiObjectFormProcess ($form, options) {
+    static countChecked() {
-        /*
+        var checkCount = $('.check-all-slave:checked').length;
-         * ajaxForm callback to add the external item checkboxes to the
-         * submitted form
-         */
 
-        if ($form.hasClass('form-multi-object-action')) {
+        if (checkCount) {
-            // Turn form data into an object
+            $('#multi-item-title').hide();
-            var formArray = $form.serializeArray().reduce(function (obj, item) {
+            $('#multi-item-actions').show();
-                obj[item.name] = item.value;
+        } else {
-                return obj;
+            $('#multi-item-title').show();
-            }, {});
+            $('#multi-item-actions').hide();
-
-            // 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;
         }
     }
 
@@ -64,6 +52,24 @@ class MayanApp {
         }
     }
 
+    static setupMultiItemActions () {
+        $('body').on('change', '.check-all-slave', function () {
+            MayanApp.countChecked();
+        });
+
+        $('body').on('click', '.btn-multi-item-action', function (event) {
+            var id_list = [];
+            $('.check-all-slave:checked').each(function (index, value) {
+                //Split the name (ie:"pk_200") and extract only the ID
+                id_list.push(value.name.split('_')[1]);
+            });
+            event.preventDefault();
+            partialNavigation.setLocation(
+                $(this).attr('href') + '?id_list=' + id_list.join(',')
+            );
+        });
+    }
+
     static setupNavbarState () {
         var uri = new URI(window.location.hash);
         var uriFragment = uri.fragment();
@@ -223,10 +229,10 @@ class MayanApp {
 
         this.setupAJAXPeriodicWorkers();
         this.setupAJAXSpinner();
-        this.setupAutoSubmit();
         this.setupFormHotkeys();
         this.setupFullHeightResizing();
         this.setupItemsSelector();
+        MayanApp.setupMultiItemActions();
         this.setupNavbarCollapse();
         this.setupNewWindowAnchor();
         $.each(this.ajaxMenusOptions, function(index, value) {
@@ -273,14 +279,6 @@ class MayanApp {
         });
     }
 
-    setupAutoSubmit () {
-        $('body').on('change', '.select-auto-submit', function () {
-            if ($(this).val()) {
-                $(this.form).trigger('submit');
-            }
-        });
-    }
-
     setupFormHotkeys () {
         $('body').on('keypress', '.form-hotkey-enter', function (e) {
             if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
@@ -319,7 +317,6 @@ class MayanApp {
                 checked = $this.data('checked');
                 checked = !checked;
                 $this.data('checked', checked);
-                console.log($this.data('icon-checked'));
 
                 if (checked) {
                     $this.find('[data-fa-i2svg]').addClass($this.data('icon-checked')).removeClass($this.data('icon-unchecked'));

mayan/apps/appearance/templates/appearance/generic_list_items_subtemplate.html

@@ -25,32 +25,17 @@
             <hr>
 
             <div class="well center-block">
-                <div class="clearfix">
+                {% if object_list %}
-
+                    {% if not hide_multi_item_actions %}
-                    {% if object_list %}
+                        {% get_menu_links name='multi item' sort_results=True source=object_list.0 as links_multi_item %}
-                        {% if not hide_multi_item_actions %}
-                            {% get_multi_item_links_form object_list %}
-                        {% endif %}
                     {% endif %}
+                {% endif %}
 
+                <div class="clearfix">
                     {% include 'appearance/list_toolbar.html' %}
-
-                    <div class="pull-right">
-                        <form action="{% url 'common:multi_object_action_view' %}" class="form-multi-object-action" method="get">
-                            {% if object_list %}
-                                {% if multi_item_actions %}
-                                    <fieldset style="margin-top: -10px;">
-                                        {{ multi_item_form }}
-                                    </fieldset>
-                                {% endif %}
-                            {% endif %}
-                        </form>
-                    </div>
                 </div>
 
-                {% if object_list %}
+                <hr style="border-bottom: 1px solid lightgrey;">
-                    <hr style="border-bottom: 1px solid lightgrey;">
-                {% endif %}
 
                 <div class="row row-items">
                     {% for object in object_list %}
@@ -60,7 +45,7 @@
                                     <div class="form-group">
                                         <div class="checkbox">
                                             <label for="id_indexes_0">
-                                                {% if multi_item_actions %}
+                                                {% if links_multi_item %}
                                                     <input class="form-multi-object-action-checkbox check-all-slave checkbox" name="pk_{{ object.pk }}" type="checkbox" />
                                                 {% endif %}
 

mayan/apps/appearance/templates/appearance/generic_list_subtemplate.html

@@ -25,39 +25,24 @@
             <hr>
 
             <div class="well center-block">
-                <div class="clearfix">
+                {% if object_list %}
-
+                    {% if not hide_multi_item_actions %}
-                    {% if object_list %}
+                        {% get_menu_links name='multi item' sort_results=True source=object_list.0 as links_multi_item %}
-                        {% if not hide_multi_item_actions %}
-                            {% get_multi_item_links_form object_list %}
-                        {% endif %}
                     {% endif %}
+                {% endif %}
 
+                <div class="clearfix">
                     {% include 'appearance/list_toolbar.html' %}
-
-                    <div class="pull-right">
-                        <form action="{% url 'common:multi_object_action_view' %}" class="form-multi-object-action" method="get">
-                            {% if object_list %}
-                                {% if multi_item_actions %}
-                                    <fieldset style="margin-top: -10px; margin-bottom: 10px;">
-                                        {{ multi_item_form }}
-                                    </fieldset>
-                                {% endif %}
-                            {% endif %}
-                        </form>
-                    </div>
                 </div>
 
-                {% if object_list %}
+                <hr style="border-bottom: 1px solid lightgrey;">
-                    <hr style="border-bottom: 1px solid lightgrey;">
-                {% endif %}
 
                 <div class="table-responsive">
                     <table class="table table-condensed table-striped">
                         <thead>
                             {% if not hide_header %}
                                 <tr>
-                                    {% if multi_item_actions %}
+                                    {% if links_multi_item %}
                                         <th class="first"></th>
                                     {% endif %}
 
@@ -95,7 +80,7 @@
                         <tbody>
                             {% for object in object_list %}
                                 <tr>
-                                {% if multi_item_actions %}
+                                {% if links_multi_item %}
                                     <td>
                                         <input class="form-multi-object-action-checkbox check-all-slave checkbox" name="pk_{{ object.pk }}" type="checkbox" value="" />
                                     </td>

mayan/apps/appearance/templates/appearance/list_toolbar.html

@@ -1,6 +1,7 @@
 {% load i18n %}
 
 {% load common_tags %}
+{% load navigation_tags %}
 
 <div class="pull-left">
     <div class="btn-toolbar" role="toolbar">
@@ -16,3 +17,32 @@
         </div>
     </div>
 </div>
+
+
+{% if links_multi_item %}
+    <p class="pull-right" id="multi-item-title" style="margin-top: 4px;">{% trans 'Select items to activate bulk actions. Use Shift + click to select many.' %}</p>
+
+    <div class="pull-right btn-group" id="multi-item-actions" style="display: none;">
+        <button aria-expanded="true" class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown" type="button">
+            {% trans 'Bulk actions' %}
+            <span class="caret"></span>
+            <span class="sr-only">{% trans 'Toggle Dropdown' %}</span>
+        </button>
+        <ul class="dropdown-menu" role="menu">
+            {% for object_navigation_links in links_multi_item %}
+                {% with 'true' as as_li %}
+                {% with 'true' as hide_active_anchor %}
+                {% with 'btn-sm btn-multi-item-action' as link_classes %}
+                    {% include 'navigation/generic_navigation.html' %}
+                {% endwith %}
+                {% endwith %}
+                {% endwith %}
+
+                {% if not forloop.last and object_navigation_links %}
+                    <li class="divider"></li>
+                {% endif %}
+            {% endfor %}
+        </ul>
+    </div>
+    <div class="clearfix"></div>
+{% endif %}

mayan/apps/appearance/templates/appearance/menu_topbar.html

@@ -16,7 +16,6 @@
             <a class="navbar-brand" href="{% url home_view %}">{% smart_setting 'COMMON_PROJECT_TITLE' %}</a>
         </div>
 
-
         <div id="navbar" class="navbar-collapse collapse">
             <ul class="nav navbar-nav navbar-right">
                 {% get_menu_links name='topbar' as menu_links %}

mayan/apps/navigation/forms.py

@@ -1,20 +0,0 @@
-from __future__ import unicode_literals
-
-from django import forms
-
-
-class MultiItemForm(forms.Form):
-    def __init__(self, *args, **kwargs):
-        actions = kwargs.pop('actions', [])
-        if actions:
-            actions.insert(0, ['', '---'])
-
-        super(MultiItemForm, self).__init__(*args, **kwargs)
-
-        self.fields['action'].choices = actions
-
-    action = forms.ChoiceField(
-        label='', required=False, widget=forms.widgets.Select(
-            attrs={'class': 'select-auto-submit'}
-        )
-    )

mayan/apps/navigation/templatetags/navigation_tags.py

@@ -3,7 +3,6 @@ from __future__ import unicode_literals
 from django.template import Library
 
 from ..classes import Link, Menu, SourceColumn
-from ..forms import MultiItemForm
 
 register = Library()
 
@@ -35,18 +34,6 @@ def get_menus_links(context, names, source=None, sort_results=None):
     return result
 
 
-@register.simple_tag(takes_context=True)
-def get_multi_item_links_form(context, object_list):
-    actions = []
-    for link_set in Menu.get(name='multi item').resolve(context=context, source=object_list[0], sort_results=True):
-        for link in link_set:
-            actions.append((link.url, link.text))
-
-    form = MultiItemForm(actions=actions)
-    context.update({'multi_item_form': form, 'multi_item_actions': actions})
-    return ''
-
-
 @register.simple_tag(takes_context=True)
 def get_sort_field_querystring(context, column):
     return column.get_sort_field_querystring(context=context)