Replace remote_toggle with method inside generic controller

- put former remote toggle ctrller toggle method
   in new toggleAdvancedSettings in more generic toggle ctrller
 - modified acordingly the 2 associated views
 - put former test code in more generic ctrller test file
 - deleted now useless ctrller + test files

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

@@ -22,7 +22,7 @@
     .omega.eight.columns
       = f.check_box :automatic_notifications
 
-  .row{ "data-controller": "remote-toggle", "data-remote-toggle-selector-value": "#advanced_settings" }
+  .row{ "data-controller": "toggle-control", "data-toggle-control-selector-value": "#advanced_settings" }
     .sixteen.columns.alpha.omega.text-center
       %input{ type: 'submit', value: t('.save_reload') }
-      %a{ href: "#", "data-action": "click->remote-toggle#toggle" }= t(:close)
+      %a{ href: "#", "data-action": "click->toggle-control#toggleAdvancedSettings" }= t(:close)

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

@@ -1,8 +1,8 @@
 - content_for :page_actions do
-  %li{ "data-controller": "remote-toggle", "data-remote-toggle-selector-value": "#advanced_settings" }
-    %button#toggle_settings{ "data-action": "click->remote-toggle#toggle" }
+  %li{ "data-controller": "toggle-control", "data-toggle-control-selector-value": "#advanced_settings" }
+    %button#toggle_settings{ "data-action": "click->toggle-control#toggleAdvancedSettings" }
       = t('.advanced_settings')
-      %i.icon-chevron-down{ "data-remote-toggle-target": "chevron" }
+      %i.icon-chevron-down{ "data-toggle-control-target": "chevron" }
 
 #advanced_settings{ style: "display: none" }
   = render partial: "/admin/order_cycles/advanced_settings"

app/webpacker/controllers/remote_toggle_controller.js

@@ -1,16 +0,0 @@
-import { Controller } from "stimulus";
-
-export default class extends Controller {
-  static targets = ["chevron"];
-  static values = { selector: String };
-
-  toggle(event) {
-    if (this.hasChevronTarget) {
-      this.chevronTarget.classList.toggle("icon-chevron-down");
-      this.chevronTarget.classList.toggle("icon-chevron-up");
-    }
-
-    const element = document.querySelector(this.selectorValue);
-    element.style.display = element.style.display === "none" ? "block" : "none";
-  }
-}

app/webpacker/controllers/toggle_control_controller.js

@@ -1,7 +1,8 @@
 import { Controller } from "stimulus";
 
 export default class extends Controller {
-  static targets = ["control", "content"];
+  static targets = ["control", "content", "chevron"];
+  static values = { selector: String };
 
   disableIfPresent(event) {
     const input = event.currentTarget;
@@ -32,7 +33,16 @@ export default class extends Controller {
       t.style.display = input.dataset.toggleShow === "true" ? "block" : "none";
     });
   }
-  //todo: can toggleDisplay with optional chevron-target replace RemoteToggleController?
+
+  toggleAdvancedSettings(event) {
+    if (this.hasChevronTarget) {
+      this.chevronTarget.classList.toggle("icon-chevron-down");
+      this.chevronTarget.classList.toggle("icon-chevron-up");
+    }
+
+    const element = document.querySelector(this.selectorValue);
+    element.style.display = element.style.display === "none" ? "block" : "none";
+  }
 
   // private
 

spec/javascripts/stimulus/remote_toggle_controller_test.js

@@ -1,59 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import { Application } from "stimulus";
-import remote_toggle_controller from "../../../app/webpacker/controllers/remote_toggle_controller";
-
-describe("RemoteToggleController", () => {
-  beforeAll(() => {
-    const application = Application.start();
-    application.register("remote-toggle", remote_toggle_controller);
-  });
-
-  describe("#toggle", () => {
-    beforeEach(() => {
-      document.body.innerHTML = `
-        <div data-controller="remote-toggle" data-remote-toggle-selector-value="#content">
-          <button id="remote-toggle" data-action="click->remote-toggle#toggle"></button>
-          <button id="remote-toggle-with-chevron" data-action="click->remote-toggle#toggle">
-            <i class="icon-chevron-down" data-remote-toggle-target="chevron"></i>
-          </button>
-        </div>
-        <div id="content">...</div>
-      `;
-    });
-
-    it("clicking a toggle switches the visibility of the :data-remote-toggle-selector element", () => {
-      const button = document.getElementById("remote-toggle");
-      const content = document.getElementById("content");
-      expect(content.style.display).toBe("");
-
-      button.click();
-
-      expect(content.style.display).toBe("none");
-
-      button.click();
-
-      expect(content.style.display).toBe("block");
-    });
-
-    it("clicking a toggle with a chevron icon switches the visibility of content and the direction of the icon", () => {
-      const button = document.getElementById("remote-toggle-with-chevron");
-      const chevron = button.querySelector("i");
-      const content = document.getElementById("content");
-      expect(content.style.display).toBe("");
-      expect(chevron.className).toBe("icon-chevron-down");
-
-      button.click();
-
-      expect(content.style.display).toBe("none");
-      expect(chevron.className).toBe("icon-chevron-up");
-
-      button.click();
-
-      expect(content.style.display).toBe("block");
-      expect(chevron.className).toBe("icon-chevron-down");
-    });
-  });
-});

spec/javascripts/stimulus/toggle_control_controller_test.js

@@ -108,4 +108,49 @@ describe("ToggleControlController", () => {
       expect(content.style.display).toBe("block");
     });
   });
+  describe("#toggleAdvancedSettings", () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div data-controller="toggle-control" data-toggle-control-selector-value="#content">
+        <button id="remote-toggle" data-action="click->toggle-control#toggleAdvancedSettings"></button>
+        <button id="remote-toggle-with-chevron" data-action="click->toggle-control#toggleAdvancedSettings">
+        <i class="icon-chevron-down" data-toggle-control-target="chevron"></i>
+        </button>
+        </div>
+        <div id="content">...</div>
+        `;
+    });
+
+    it("clicking a toggle switches the visibility of the :data-remote-toggle-selector element", () => {
+      const button = document.getElementById("remote-toggle");
+      const content = document.getElementById("content");
+      expect(content.style.display).toBe("");
+
+      button.click();
+
+      expect(content.style.display).toBe("none");
+
+      button.click();
+
+      expect(content.style.display).toBe("block");
+    });
+
+    it("clicking a toggle with a chevron icon switches the visibility of content and the direction of the icon", () => {
+      const button = document.getElementById("remote-toggle-with-chevron");
+      const chevron = button.querySelector("i");
+      const content = document.getElementById("content");
+      expect(content.style.display).toBe("");
+      expect(chevron.className).toBe("icon-chevron-down");
+
+      button.click();
+
+      expect(content.style.display).toBe("none");
+      expect(chevron.className).toBe("icon-chevron-up");
+
+      button.click();
+
+      expect(content.style.display).toBe("block");
+      expect(chevron.className).toBe("icon-chevron-down");
+    });
+  });
 });