Bring back select all checkboxes on order cycle checkout options form.

app/views/admin/order_cycles/checkout_options.html.haml

@@ -22,16 +22,22 @@
             %th{ colspan: 2 }= t('.shipping_methods')
           - @order_cycle.distributors.each do |distributor|
             - distributor_shipping_methods = @order_cycle.attachable_distributor_shipping_methods.where("distributor_id = ?", distributor.id).includes(:shipping_method)
-            %tr
-              %td
+            %tr{ "data-controller": "select-all" }
+              %td.text-center
+                - if distributor_shipping_methods.many?
+                  %label
+                    = check_box_tag nil, nil, nil, { "data-action": "change->select-all#toggleAll", "data-select-all-target": "all" }
+                    = t(".select_all")
               %td
                 %em= distributor.name
                 - distributor_shipping_methods.each do |distributor_shipping_method|
                   %p
-                    %label{ class: ("disabled" unless distributor_shipping_method.shipping_method.frontend?) }
+                    %label{ class: ("disabled" if distributor_shipping_methods.one? || !distributor_shipping_method.shipping_method.frontend?) }
                       = check_box_tag "order_cycle[selected_distributor_shipping_method_ids][]",
-                          distributor_shipping_method.id, @order_cycle.distributor_shipping_methods.include?(distributor_shipping_method),
-                          id: "order_cycle_selected_distributor_shipping_method_ids_#{distributor_shipping_method.id}"
+                          distributor_shipping_method.id,
+                          @order_cycle.distributor_shipping_methods.include?(distributor_shipping_method),
+                          id: "order_cycle_selected_distributor_shipping_method_ids_#{distributor_shipping_method.id}",
+                          data: ({ "action" => "change->select-all#toggleCheckbox", "select-all-target" => "checkbox" } if distributor_shipping_method.shipping_method.frontend?)
                       = distributor_shipping_method.shipping_method.name
                 - distributor.shipping_methods.backend.each do |shipping_method|
                   %label.disabled

app/webpacker/controllers/select_all_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["all", "checkbox"];
+
+  connect() {
+    this.toggleCheckbox()
+  }
+
+  toggleAll() {
+    this.checkboxTargets.forEach(checkbox => {
+      checkbox.checked = this.allTarget.checked;
+    });
+  }
+
+  toggleCheckbox() {
+    this.allTarget.checked = this.checkboxTargets.every(checkbox => checkbox.checked);
+  }
+}

spec/javascripts/stimulus/select_all_controller_test.js

@@ -0,0 +1,113 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { Application } from "stimulus";
+import select_all_controller from "../../../app/webpacker/controllers/select_all_controller";
+
+describe("SelectAllController", () => {
+  beforeAll(() => {
+    const application = Application.start();
+    application.register("select-all", select_all_controller);
+  });
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div data-controller="select-all">
+        <input
+          id="selectAllCheckbox"
+          type="checkbox"
+          data-action="change->select-all#toggleAll"
+          data-select-all-target="all">
+        <input
+          id="checkboxA"
+          type="checkbox"
+          data-action="change->select-all#toggleCheckbox"
+          data-select-all-target="checkbox">
+        <input
+          id="checkboxB"
+          type="checkbox"
+          data-action="change->select-all#toggleCheckbox"
+          data-select-all-target="checkbox">
+      </div>
+    `;
+  });
+
+  describe("#toggleAll", () => {
+    it("checks all checkboxes when it's checked and unchecks them all when unchecked", () => {
+      const selectAllCheckbox = document.getElementById("selectAllCheckbox");
+      const checkboxA = document.getElementById("checkboxA");
+      const checkboxB = document.getElementById("checkboxB");
+      expect(selectAllCheckbox.checked).toBe(false);
+      expect(checkboxA.checked).toBe(false);
+      expect(checkboxB.checked).toBe(false);
+
+      selectAllCheckbox.click()
+
+      expect(selectAllCheckbox.checked).toBe(true);
+      expect(checkboxA.checked).toBe(true);
+      expect(checkboxB.checked).toBe(true);
+
+      selectAllCheckbox.click()
+
+      expect(selectAllCheckbox.checked).toBe(false);
+      expect(checkboxA.checked).toBe(false);
+      expect(checkboxB.checked).toBe(false);
+    });
+  });
+
+  describe("#toggleCheckbox", () => {
+    it("checks the individual checkbox and checks the select all checkbox if all checkboxes are checked and vice versa", () => {
+      const selectAllCheckbox = document.getElementById("selectAllCheckbox");
+      const checkboxA = document.getElementById("checkboxA");
+      const checkboxB = document.getElementById("checkboxB");
+      checkboxA.click()
+      expect(selectAllCheckbox.checked).toBe(false);
+      expect(checkboxA.checked).toBe(true);
+      expect(checkboxB.checked).toBe(false);
+
+      checkboxB.click()
+
+      expect(selectAllCheckbox.checked).toBe(true);
+      expect(checkboxA.checked).toBe(true);
+      expect(checkboxB.checked).toBe(true);
+
+      checkboxB.click()
+
+      expect(selectAllCheckbox.checked).toBe(false);
+      expect(checkboxA.checked).toBe(true);
+      expect(checkboxB.checked).toBe(false);
+    });
+  });
+
+  describe("#connect", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div data-controller="select-all">
+          <input
+            id="selectAllCheckbox"
+            type="checkbox"
+            data-action="change->select-all#toggleAll"
+            data-select-all-target="all">
+          <input
+            id="checkboxA"
+            type="checkbox"
+            data-action="change->select-all#toggleCheckbox"
+            data-select-all-target="checkbox"
+            checked="checked">
+          <input
+            id="checkboxB"
+            type="checkbox"
+            data-action="change->select-all#toggleCheckbox"
+            data-select-all-target="checkbox"
+            checked="checked">
+        </div>
+      `;
+    });
+
+    it("checks the select all checkbox on page load if all checkboxes are checked", () => {
+      const selectAllCheckbox = document.getElementById("selectAllCheckbox");
+      expect(selectAllCheckbox.checked).toBe(true);
+    });
+  });
+});