Add master checkbox to Grid

js/src/helpers/grid-checkbox.helper.js

@@ -0,0 +1,63 @@
+/**
+ * Simple helper to help displaying Fomantic-UI checkbox within an atk grid.
+ * The master checkbox in the header of the column enable to toggle all
+ * content checkboxes to check or uncheck. A partially checked master checkbox
+ * is displayed if appopriate.
+ */
+function InitGridMasterCheckbox() {
+    $('.table .master.checkbox').checkbox({
+        // check all children
+        onChecked: function() {
+            var
+                $childCheckbox  = $(this).closest('.table').find('.child.checkbox')
+            ;
+            $childCheckbox.checkbox('check');
+        },
+        // uncheck all children
+        onUnchecked: function() {
+            var
+                $childCheckbox  = $(this).closest('.table').find('.child.checkbox')
+            ;
+            $childCheckbox.checkbox('uncheck');
+        }
+        })
+    ;
+}
+
+function InitGridChildCheckbox() {
+    $('.table .child.checkbox').checkbox({
+        // Fire on load to set parent value
+        fireOnInit : true,
+
+        // Change parent state on each child checkbox change
+        onChange   : function() {
+        var
+            $listGroup      = $(this).closest('.table'),
+            $parentCheckbox = $listGroup.find('.master.checkbox'),
+            $checkbox       = $listGroup.find('.child.checkbox'),
+            allChecked      = true,
+            allUnchecked    = true
+        ;
+        // check to see if all other siblings are checked or unchecked
+        $checkbox.each(function() {
+            if( $(this).checkbox('is checked') ) {
+                allUnchecked = false;
+            }
+            else {
+                allChecked = false;
+            }
+        });
+        // set parent checkbox state, but don't trigger its onChange callback
+        if(allChecked) {
+            $parentCheckbox.checkbox('set checked');
+        }
+        else if(allUnchecked) {
+            $parentCheckbox.checkbox('set unchecked');
+        }
+        else {
+            $parentCheckbox.checkbox('set indeterminate');
+        }
+        }
+        })
+    ;
+}

src/Table/Column/Checkbox.php

@@ -37,6 +37,7 @@ protected function init(): void
         if (!$this->class) {
             $this->class = 'cb_' . $this->shortName;
         }
+        $this->getApp()->requireJs($this->getApp()->cdn['atk'] . '/../js/src/helpers/grid-checkbox.helper.js');
     }
 
     public function getHeaderCellHtml(Field $field = null, $value = null): string
@@ -46,12 +47,15 @@ public function getHeaderCellHtml(Field $field = null, $value = null): string
                 ->addMoreInfo('field', $field);
         }
         $this->table->js(true)->find('.' . $this->class)->checkbox();
+        $this->table->js(true, new JsExpression('InitGridMasterCheckbox();'));
 
-        return parent::getHeaderCellHtml($field);
+        return $this->getTag('head', [['div', ['class' => 'ui master checkbox ' . $this->class], [['input/', ['type' => 'checkbox']]]]], []);
     }
 
     public function getDataCellTemplate(Field $field = null): string
     {
-        return $this->getApp()->getTag('div', ['class' => 'ui checkbox ' . $this->class], [['input/', ['type' => 'checkbox']]]);
+        $this->table->js(true, new JsExpression('InitGridChildCheckbox();'));
+
+        return $this->getApp()->getTag('div', ['class' => 'ui child checkbox ' . $this->class], [['input/', ['type' => 'checkbox']]]);
     }
 }

tests-behat/grid.feature

@@ -36,3 +36,31 @@ Feature: Grid
     When I click using selector "xpath(//div[@id='grid']//tr[2]//a)"
     Then No toast should be displayed
     Then PATCH MINK the url should match "~_unit-test/grid-rowclick.php#test~"
+
+  Scenario: master checkbox
+    Given I am on "_unit-test/grid-rowclick.php"
+    When I click using selector "xpath(//div[@id='grid']//tr[2]//div.ui.child.checkbox)"
+    Then No toast should be displayed
+    When I click using selector "xpath(//div[@id='grid']//tr[1]//div.ui.master.checkbox)"
+    Then No toast should be displayed
+    When I click using selector "xpath(//div[@id='grid']//tr[1]//div.ui.master.checkbox)"
+    Then No toast should be displayed
+
+  Scenario: dynamic scroll
+    Given I am on "interactive/scroll-lister.php"
+    Then I should see "Argentina"
+    Then I should not see "Denmark"
+    When I scroll to bottom
+    Then I should see "Denmark"
+    When I scroll to bottom
+    When I scroll to bottom
+    When I scroll to bottom
+    When I scroll to bottom
+    When I scroll to bottom
+    When I scroll to bottom
+    Then I should not see "South Sudan"
+    When I scroll to bottom
+    Then I should see "South Sudan"
+    When I scroll to bottom
+    Then I should see "South Sudan"
+    Then I should see "Denmark"