Fixed tristate inputs (used for permissions input)

assets/js/app.js

@@ -45,6 +45,7 @@ import "./datatables";
 import "./error_handler";
 //import "./tab_remember";
 import "./register_events";
+import "./tristate_checkboxes";
 
 //Define jquery globally
 window.$ = window.jQuery = require("jquery")

assets/js/register_events.js

@@ -5,7 +5,6 @@ import "bootstrap-fileinput/css/fileinput.css"
 
 //JS
 
-import "./lib/jquery.tristate"
 import "bootstrap-fileinput";
 
 
@@ -14,8 +13,6 @@ const RegisterEventHelper = class {
     constructor() {
         this.registerTooltips();
         this.registerJumpToTopBtn();
-
-        this.registerTriStateCheckboxes();
         this.registerFileInput();
 
         this.registerSpecialCharInput();
@@ -67,27 +64,6 @@ const RegisterEventHelper = class {
         });
     }
 
-    registerTriStateCheckboxes() {
-        this.registerLoadHandler(() => {
-            $(".tristate").tristate( {
-                checked:            "true",
-                unchecked:          "false",
-                indeterminate:      "indeterminate",
-            });
-
-            $('.permission_multicheckbox:checkbox').change(function() {
-                //Find the other checkboxes in this row, and change their value
-                var $row = $(this).parents('tr');
-
-                //@ts-ignore
-                var new_state = $(this).tristate('state');
-
-                //@ts-ignore
-                $('.tristate:checkbox', $row).tristate('state', new_state);
-            });
-        })
-    }
-
     registerSpecialCharInput() {
         this.registerLoadHandler(() => {
             //@ts-ignore

assets/js/tristate_checkboxes.js

@@ -0,0 +1,51 @@
+'use strict';
+
+import "./lib/jquery.tristate"
+
+const TristateHelper = class {
+    constructor() {
+        this.registerTriStateCheckboxes();
+        this.registerSubmitHandler();
+    }
+
+    registerSubmitHandler() {
+        document.addEventListener("turbo:submit-start", (e) => {
+            var form = e.detail.formSubmission.formElement;
+            var formData = e.detail.formSubmission.formData;
+
+            var $tristate_checkboxes = $('.tristate:checkbox', form);
+
+            //Iterate over each tristate checkbox in the form and set formData to the correct value
+            $tristate_checkboxes.each(function() {
+                var $checkbox = $(this);
+                var state = $checkbox.tristate('state');
+
+                formData.set($checkbox.attr('name'), state);
+            });
+        });
+    }
+
+    registerTriStateCheckboxes() {
+        //Initialize tristate checkboxes and if needed the multicheckbox functionality
+        document.addEventListener("turbo:load", () => {
+            $(".tristate").tristate( {
+                checked:            "true",
+                unchecked:          "false",
+                indeterminate:      "indeterminate",
+            });
+
+            $('.permission_multicheckbox:checkbox').change(function() {
+                //Find the other checkboxes in this row, and change their value
+                var $row = $(this).parents('tr');
+
+                //@ts-ignore
+                var new_state = $(this).tristate('state');
+
+                //@ts-ignore
+                $('.tristate:checkbox', $row).tristate('state', new_state);
+            });
+        })
+    }
+}
+
+export default new TristateHelper();

src/Form/Permissions/PermissionType.php

@@ -97,6 +97,9 @@ class PermissionType extends AbstractType
                 'mapped' => false,
                 'label' => $operation['label'] ?? null,
                 'disabled' => $options['disabled'],
+                'label_attr' => [
+                    'class' => 'checkbox-inline opacity-100',
+                ],
             ]);
         }
 

src/Form/Type/TriStateCheckboxType.php

@@ -174,6 +174,7 @@ final class TriStateCheckboxType extends AbstractType implements DataTransformer
             case '':
                 return false;
             case 'indeterminate':
+            case 'null':
                 return null;
             default:
                 throw new InvalidArgumentException('Invalid value encountered!: '.$value);

templates/Form/extendedBootstrap4_layout.html.twig

@@ -104,7 +104,7 @@
     {%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%}
     {%- if 'checkbox-custom' in parent_label_class -%}
         {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%}
-        <div class="custom-control custom-checkbox{{ 'checkbox-inline' in parent_label_class ? ' custom-control-inline' }}">
+        <div class="custom-control custom-checkbox{{ 'checkbox-inline' in parent_label_class ? ' form-check-inline' }}">
             {{- form_label(form, null, { widget: block('tr_parent') }) -}}
         </div>
     {%- else -%}

templates/Form/permissionLayout.html.twig

@@ -29,7 +29,7 @@
 
 {% block permission_group_row %}
     {{ form_errors(form) }}
-    <table class="table table-bordered table-sm">
+    <table class="table table-bordered table-sm table-striped table-hover">
         <thead>
         <tr>
             <th>{% trans %}permission.edit.permission{% endtrans %}</th>
@@ -52,17 +52,17 @@
         <div class="mb-2">
             <label><b>{% trans %}permission.legend.title{% endtrans %}:</b></label>
             <div>
-                <div class="custom-control custom-control-inline custom-checkbox">
+                <div class="form-check form-check-inline">
-                    <input type="checkbox" hidden class="form-check-input">
+                    <input type="checkbox" class="form-check-input" disabled>
-                    <label class="form-check-label">{% trans %}permission.legend.disallow{% endtrans %}</label>
+                    <label class="form-check-label opacity-100">{% trans %}permission.legend.disallow{% endtrans %}</label>
                 </div>
-                <div class="custom-control custom-control-inline custom-checkbox">
+                <div class="form-check form-check-inline">
-                    <input class="form-check-input" type="checkbox" hidden checked>
+                    <input class="form-check-input" type="checkbox" disabled>
-                    <label class="form-check-label">{% trans %}permission.legend.allow{% endtrans %}</label>
+                    <label class="form-check-label  opacity-100">{% trans %}permission.legend.allow{% endtrans %}</label>
                 </div>
-                <div class="custom-control custom-control-inline custom-checkbox">
+                <div class="form-check form-check-inline">
-                    <input type="checkbox" class="tristate form-check-input" hidden indeterminate="indeterminate">
+                    <input type="checkbox" class="tristate form-check-input" indeterminate="indeterminate" disabled>
-                    <label class="form-check-label">{% trans %}permission.legend.inherit{% endtrans %}</label>
+                    <label class="form-check-label opacity-100">{% trans %}permission.legend.inherit{% endtrans %}</label>
                 </div>
             </div>
         </div>