tec: Provide a Stimulus "checkboxes" controller

assets/javascripts/application.js

@@ -5,6 +5,7 @@
 import * as Turbo from '@hotwired/turbo'; // eslint-disable-line no-unused-vars
 import { Application } from '@hotwired/stimulus';
 
+import CheckboxesController from '@/controllers/checkboxes_controller.js';
 import ColorSchemeController from '@/controllers/color_scheme_controller.js';
 import FormPriorityController from '@/controllers/form_priority_controller.js';
 import ModalController from '@/controllers/modal_controller.js';
@@ -18,6 +19,7 @@ import TicketEditorController from '@/controllers/ticket_editor_controller.js';
 import TinymceController from '@/controllers/tinymce_controller.js';
 
 const application = Application.start();
+application.register('checkboxes', CheckboxesController);
 application.register('color-scheme', ColorSchemeController);
 application.register('form-priority', FormPriorityController);
 application.register('modal', ModalController);

assets/javascripts/controllers/checkboxes_controller.js

@@ -0,0 +1,74 @@
+// This file is part of Bileto.
+// Copyright 2022-2023 Probesys
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static get targets () {
+        return ['control'];
+    }
+
+    connect () {
+        this.refreshControls();
+    }
+
+    checkAll (event) {
+        const checkboxes = this.element.querySelectorAll('input[type="checkbox"]');
+
+        checkboxes.forEach((checkbox) => {
+            checkbox.checked = true;
+        });
+
+        this.refreshControls();
+    }
+
+    uncheckAll (event) {
+        const checkboxes = this.element.querySelectorAll('input[type="checkbox"]');
+
+        checkboxes.forEach((checkbox) => {
+            checkbox.checked = false;
+        });
+
+        this.refreshControls();
+    }
+
+    refreshControls () {
+        this.controlTargets.forEach((node) => {
+            this.switchDisabledForControl(node);
+        });
+    }
+
+    switchDisabled (event) {
+        this.switchDisabledForControl(event.target);
+    }
+
+    switchDisabledForControl (control) {
+        const selector = control.dataset.checkboxesControl;
+        const controlledNodes = this.element.querySelectorAll(selector);
+
+        controlledNodes.forEach((node) => {
+            node.disabled = control.checked;
+
+            if (node.disabled) {
+                // Deselect the node value(s)
+                if (
+                    node.nodeName === 'INPUT' &&
+                    (node.type === 'checkbox' || node.type === 'radio')
+                ) {
+                    node.checked = false;
+                } else if (node.nodeName === 'INPUT' || node.nodeName === 'TEXTAREA') {
+                    node.value = '';
+                } else if (node.nodeName === 'SELECT') {
+                    node.selectedIndex = -1;
+                }
+            }
+
+            // Send a "change" event to the node element.
+            // It is especially useful to refresh the "assignee" multiselect_actors
+            // select so it can refresh the list.
+            const event = new Event('change');
+            node.dispatchEvent(event);
+        });
+    }
+}