Add toggle switch partial and stimulus controller

Author: rsmithlal

app/javascript/controllers/better_together/toggle_switch_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["checkbox"]
+  static values = {
+    onlyOne: Boolean,
+    group: String
+  }
+
+  connect() {
+    if (this.onlyOneValue) {
+      this.enforceSingleSelection()
+    }
+  }
+
+  toggle(event) {
+    if (this.onlyOneValue && event.target.checked) {
+      this.uncheckOtherCheckboxesInGroup(event.target)
+    }
+  }
+
+  enforceSingleSelection() {
+    const checkboxesInGroup = this.getCheckboxesInGroup()
+    const anyChecked = checkboxesInGroup.some(checkbox => checkbox.checked)
+
+    if (!anyChecked && checkboxesInGroup.length > 0) {
+      // Ensure at least one checkbox is checked if none are checked
+      checkboxesInGroup[0].checked = true
+    }
+  }
+
+  uncheckOtherCheckboxesInGroup(currentCheckbox) {
+    const checkboxesInGroup = this.getCheckboxesInGroup()
+
+    checkboxesInGroup.forEach(checkbox => {
+      if (checkbox !== currentCheckbox) {
+        checkbox.checked = false
+      }
+    })
+  }
+
+  getCheckboxesInGroup() {
+    const container = this.element.closest('[data-better_together--dynamic-fields-target="container"]')
+    const allCheckboxes = container.querySelectorAll('input[type="checkbox"].toggle-switch')
+
+    if (this.hasGroupValue) {
+      // Filter checkboxes by group
+      return Array.from(allCheckboxes).filter(checkbox => checkbox.dataset.group === this.groupValue)
+    }
+
+    // If no group is specified, return all checkboxes
+    return Array.from(allCheckboxes)
+  }
+}

app/views/better_together/shared/fields/_toggle_switch.html.erb

@@ -0,0 +1,14 @@
+<%# locals: (form:, attr:, checked: form.object.public_send(attr), only_one: false, group: nil) %>
+<div class="form-check form-switch"
+  data-controller="better_together--toggle-switch"
+  data-better_together--toggle-switch-only-one-value="<%= only_one %>"
+  data-better_together--toggle-switch-group-value="<%= group %>">
+  <%= form.check_box attr,
+          class: 'form-check-input toggle-switch',
+          data: { action: 'click->better_together--toggle-switch#toggle', group: group },
+          'data-better_together--toggle-switch-target' => 'checkbox' %>
+  <%= form.label attr,
+         form.object.class.human_attribute_name(attr),
+         checked:,
+         class: 'form-check-label' %>
+</div>