Refactor the 'select all checkboxes' javascript into a separate file so it can...

Refactor the 'select all checkboxes' javascript into a separate file so it can be used on other tables easily. Add a test for the select all checkboxes javascript. Remove the label from the 'delete' column (which is now a 'select all' column as we may have other actions) and move it to the first column as per balsamic mockups.

django/website/hid/assets.py

@@ -37,7 +37,8 @@ _assets = [
     'hid/widgets/chart.js',
     'hid/js/spinner.js',
     'hid/js/messages.js',
-    'hid/js/automatic_file_upload.js'
+    'hid/js/automatic_file_upload.js',
+    'hid/js/select_all_checkbox.js'
 ]
 
 

django/website/hid/static/hid/js/select_all_checkbox.js

+/**
+ * Add a checkbox to select all entries to tables with a column containing
+ * a checkbox.
+ *
+ * Usage:
+ * - The th/td elements containing the checkbox must have
+ *   a 'select_action' class. In Django tables this is done
+ *   by naming the column select_action, eg.:
+ *
+ *   select_action = NamedCheckBoxColumn(accessor='id', verbose_name='Select')
+ */
+(function($) {
+    $(document).ready(function() {
+        var selectors = {
+            td_input : 'form td.select_action > input',
+            th_select : 'form th.select_action'
+        };
+
+        function addCheckbox(selector, check_id_base) {
+            $(selector).each(function(i, column_header) {
+                var input_id = check_id_base + '-' + i;
+                var check = $('<input>', {
+                        type: 'checkbox',
+                        id: input_id
+                    });
+                $(column_header).html("")
+                           .append(check);
+            });
+        }
+
+        function toggleSelection(e) {
+            var checked = $(e.target).prop("checked");
+            $(selectors.td_input).prop("checked", checked);
+        }
+
+        function setSelectAll(e) {
+            var checked = $(selectors.td_input + ':checked').length,
+                all = $(selectors.td_input).length,
+                checked_all = all === checked;
+
+            $(selectors.th_select + ' input').prop("checked", checked_all);
+        }
+
+        function init() {
+            addCheckbox(selectors.th_select, 'select-all-items');
+
+            $(selectors.th_select + ' input').on('change', toggleSelection);
+            $(selectors.td_input).on('change', setSelectAll);
+        }
+
+        init();
+    });
+})(jQuery);

django/website/hid/tables.py

@@ -15,6 +15,7 @@ class ItemTable(tables.Table):
         template = 'hid/table.html'
         order_by = ('-created',)
 
+    select_action = NamedCheckBoxColumn(accessor='id', verbose_name='Select')
     created = tables.columns.DateTimeColumn(
         verbose_name='Imported',
         format=settings.SHORT_DATETIME_FORMAT,
@@ -28,7 +29,6 @@ class ItemTable(tables.Table):
         template_name='hid/categories_column.html',
         accessor='terms.0.name',
     )
-    delete = NamedCheckBoxColumn(accessor='id', verbose_name='Delete')
 
     def __init__(self, *args, **kwargs):
         self.categories = kwargs.pop('categories')

django/website/hid/templates/hid/tests/select_all_checkbox.html

+{% extends "djangojs/qunit-runner.html" %}
+{% block js_content %}
+    <script>
+        QUnit.test('Select all checbox is added to header', function(assert) {
+            var $header_checkbox = jQuery('th.select_action input[type="checkbox"]');
+            assert.equal($header_checkbox.length, 1, 'Expected a checkbox in the header');
+        });
+        QUnit.test('Clicking the select all checkbox selects all', function(assert) {
+            var $header_checkbox = jQuery('th.select_action input[type="checkbox"]');
+            var $selected_checkboxes = jQuery('td.select_action input:checked');
+
+            // Ensure none are checked
+            $selected_checkboxes.prop('checked', false);
+
+            // Simulte click
+            $header_checkbox.click();
+
+            // Ensure all are checked
+            $selected_checkboxes = jQuery('td.select_action input:checked');
+            assert.equal($selected_checkboxes.length, 2, 'Expected all checkboxes to be checked');
+        });
+    </script>
+{% endblock %}
+{% block body_content %}
+    <form>
+        <table>
+            <thead>
+                <tr>
+                    <th class="select_action">
+                    </th>
+                    <th>
+                        A field
+                    </th>
+                 </tr>
+             </thead>
+             <tbody>
+                 <tr>
+                     <td class="select_action">
+                         <input type="checkbox" />
+                     </td>
+                     <td>
+                         A value
+                     </td>
+                 </tr>
+                 <tr>
+                     <td class="select_action">
+                         <input type="checkbox" />
+                     </td>
+                     <td>
+                         Another value
+                     </td>
+                 </tr>
+             </tbody>
+         </table>
+     </form>
+{% endblock %}

django/website/hid/templates/hid/view.html

@@ -40,53 +40,3 @@
 
 {% endblock maincontent %}
 
-{% block lastjs %}
-<script type="text/javascript">
-(function ($) {
-    var selectors = {
-        td_input : '.view-items-form td.delete > input',
-        th_delete : '.view-items-form th.delete'
-    };
-
-    function addCheckbox(selector, check_id) {
-        var check = $('<input>', {
-                type: 'checkbox',
-                id: check_id
-            }),
-            label = $('<label>', {
-                for: check_id
-            });
-
-        label.html(
-            $(selector).html()
-        );
-
-        $(selector).html("")
-                   .append(check)
-                   .append(label);
-    }
-
-    function toggleSelection(e) {
-        var checked = $(e.target).prop("checked");
-        $(selectors.td_input).prop("checked", checked);
-    }
-
-    function setSelectAll(e) {
-        var checked = $(selectors.td_input + ':checked').length,
-            all = $(selectors.td_input).length,
-            checked_all = all === checked;
-
-        $(selectors.th_delete + ' input').prop("checked", checked_all);
-    }
-
-    function init() {
-        addCheckbox(selectors.th_delete, 'select-all-items');
-
-        $(selectors.th_delete + ' input').on('change', toggleSelection);
-        $(selectors.td_input).on('change', setSelectAll);
-    }
-
-    init();
-})(jQuery);
-</script>
-{% endblock lastjs %}

django/website/hid/tests/util_javascript_tests.py

+""" This file defines a number of Javascript tests
+    for a range of small javascript enhancements
+    and utilities.
+
+    Each feature should have it's own test class and
+    test template.
+"""
+from djangojs.runners import QUnitSuite, JsTemplateTestCase
+
+
+class SelectAllCheckboxTest(QUnitSuite, JsTemplateTestCase):
+    template_name = 'hid/tests/select_all_checkbox.html'
+    js_files = (
+        'js/jquery.min.js',
+        'hid/js/select_all_checkbox.js'
+    )

django/website/media/less/view-edit.less

@@ -29,7 +29,7 @@ td.created, td.timestamp {
   font-size:@font-size-small;
 }
 
-.delete > label {
+.select_action > label {
   margin-bottom:0;
 }
 
@@ -84,8 +84,8 @@ td.created, td.timestamp {
 
 // Checkboxes
 
-td.delete,
-th.delete {
+td.select_action,
+th.select_action {
   background-color:rgba(0,0,0,0.05);
   text-align:center;
 }