Merge lp:~rvb/maas/all-js-select into lp:~maas-committers/maas/trunk

[Raphaël Badin]

Add a way to select/deselect all the nodes on the node listing page with just one click.

As discussed this morning, there is no test for this because putting this into a YUI widget does not make sense (it's too heavyweight) and we currently don't have a clean way to test this (it would require a level of unit-testing capability we currently don't have).

I'm currently researching into how we can test this: the poor man's solution is to check that the selectors in the JS code match the HTML code. I /think/ using Django 1.4 Selenium integration would be much better but I need to make sure it's possible.

[Gavin Panella (allenap)]

I think #2 needs consideration.

[1]

+      Y.one('#all_system_id_control').on('click', function(e) {

I think it would make sense to respond to 'change' here instead of
'click'.

[2]

+        <th><input type="checkbox" id="all_system_id_control" /></th>

What happens if this is checked, then someone deselects one of the row
checkboxes? This will stay checked. That's counter to the behaviour
I'm used to for these things.

review: Needs Information

[Raphaël Badin (rvb)]

> I think #2 needs consideration.
>
>
> [1]
>
> +      Y.one('#all_system_id_control').on('click', function(e) {
>
> I think it would make sense to respond to 'change' here instead of
> 'click'.

Good idea. Probably equivalent in this case, but 'change' is clearer.

> [2]
>
> +        <th><input type="checkbox" id="all_system_id_control" /></th>
>
> What happens if this is checked, then someone deselects one of the row
> checkboxes? This will stay checked. That's counter to the behaviour
> I'm used to for these things.

Hum, that's a good point but what kind of behavior do you suggest instead?

[Gavin Panella (allenap)]

>> [2]
>>
>> +        <th><input type="checkbox" id="all_system_id_control" /></th>
>>
>> What happens if this is checked, then someone deselects one of the row
>> checkboxes? This will stay checked. That's counter to the behaviour
>> I'm used to for these things.
>
> Hum, that's a good point but what kind of behavior do you suggest instead?

I suggest: the select-all checkbox should only be checked if all the
row checkboxes are selected too. Something like:

      var selectAll = Y.one('#all_system_id_control');
      var checkboxes = Y.all('#node_list>input[type=checkbox]');
      checkboxes.on('change', function(e) {
        var notChecked = checkboxes.filter('input:not(:checked)');
        selectAll.set('checked', notChecked.size() == 0);
      });

perhaps?

[Raphaël Badin (rvb)]

> >> [2]
> >>
> >> +        <th><input type="checkbox" id="all_system_id_control" /></th>
> >>
> >> What happens if this is checked, then someone deselects one of the row
> >> checkboxes? This will stay checked. That's counter to the behaviour
> >> I'm used to for these things.
> >
> > Hum, that's a good point but what kind of behavior do you suggest instead?
>
> I suggest: the select-all checkbox should only be checked if all the
> row checkboxes are selected too. Something like:
>
>      var selectAll = Y.one('#all_system_id_control');
>      var checkboxes = Y.all('#node_list>input[type=checkbox]');
>      checkboxes.on('change', function(e) {
>        var notChecked = checkboxes.filter('input:not(:checked)');
>        selectAll.set('checked', notChecked.size() == 0);
>      });
>
> perhaps?

Makes sense… it's sort of what gmail does (although the control in JS is much more fancy). Done.

[Gavin Panella (allenap)]

Niiiice :)

review: Approve

=== modified file 'src/maasserver/templates/maasserver/node_list.html'
--- src/maasserver/templates/maasserver/node_list.html	2013-06-04 07:46:27 +0000
+++ src/maasserver/templates/maasserver/node_list.html	2013-06-04 07:46:27 +0000
@@ -25,6 +25,25 @@
       });
     });
   });
+  // Connect the 'select all' checkbox to all the node checkboxes.
+  YUI().use('node', function (Y) {
+    Y.on('load', function() {
+      var master = Y.one('#all_system_id_control');
+      var checkboxes = Y.one('table#node_list').all('input[name="system_id"]');
+      // Uncheck the master checkbox if one of the row checkboxes gets
+      // unchecked
+      checkboxes.on('change', function(e) {
+        var notChecked = checkboxes.filter('input:not(:checked)');
+        master.set('checked', (notChecked.size() == 0));
+      });
+      // Check/uncheck all the row checkboxes if the master checkbox gets
+      // checked/unchecked.
+      master.on('change', function(e) {
+        var checked = e.target.get('checked');
+        checkboxes.set('checked', checked);
+      });
+    });
+  });
   // -->
   </script>
 {% endblock %}

=== modified file 'src/maasserver/templates/maasserver/nodes_listing.html'
--- src/maasserver/templates/maasserver/nodes_listing.html	2013-06-04 07:46:27 +0000
+++ src/maasserver/templates/maasserver/nodes_listing.html	2013-06-04 07:46:27 +0000
@@ -1,10 +1,10 @@
 {% if node_list|length %}
-  <table class="list">
+  <table class="list" id="node_list">
     <thead>
       <tr>
       {% if sorting == "true" %}
         {% if actions == "true" %}
-        <th></th>
+        <th><input type="checkbox" id="all_system_id_control" /></th>
         {% endif %}
       <th><a href="{{ sort_links.hostname }}"
              class="{{ sort_classes.hostname }}">