batch checkbox using stimulus (bt5 only)

assets/dist/checker_controller.js

@@ -0,0 +1,17 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static targets = ["master", "checkbox"]
+
+    masterTargetConnected(element) {
+        element.addEventListener("click", this.toggleAll.bind(this))
+    }
+
+    toggleAll() {
+        console.log(this.checkboxTargets)
+
+        for (let checkbox of this.checkboxTargets) {
+            checkbox.checked = this.masterTarget.checked
+        }
+    }
+}

assets/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "@kibatic/datagrid-bundle",
+    "description": "",
+    "license": "MIT",
+    "version": "0.0.1",
+    "main": "dist/checker_controller.js",
+    "symfony": {
+        "controllers": {
+            "checker": {
+                "main": "dist/checker_controller.js",
+                "name": "checker",
+                "webpackMode": "eager",
+                "fetch": "eager",
+                "enabled": true
+            }
+        },
+        "importmap": {
+            "@hotwired/stimulus": "^3.0.0"
+        }
+    },
+    "peerDependencies": {
+        "@hotwired/stimulus": "^3.0.0"
+    },
+    "devDependencies": {
+        "@hotwired/stimulus": "^3.0.0"
+    }
+}

src/DependencyInjection/KibaticDatagridExtension.php

@@ -1,14 +1,16 @@
 <?php
 namespace Kibatic\DatagridBundle\DependencyInjection;
 
+use Symfony\Component\AssetMapper\AssetMapperInterface;
 use Symfony\Component\Config\FileLocator;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
 use Symfony\Component\DependencyInjection\Extension\Extension;
+use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
 use Symfony\Component\DependencyInjection\Loader\XmlFileLoader;
 use Symfony\Component\DependencyInjection\Loader\YamlFileLoader;
 use Symfony\Component\DependencyInjection\Reference;
 
-class KibaticDatagridExtension extends Extension
+class KibaticDatagridExtension extends Extension implements PrependExtensionInterface
 {
     public function load(array $configs, ContainerBuilder $container): void
     {
@@ -18,4 +20,32 @@ public function load(array $configs, ContainerBuilder $container): void
         ))
             ->load('services.yaml');
     }
+
+    public function prepend(ContainerBuilder $container): void
+    {
+        if ($this->isAssetMapperAvailable($container)) {
+            $container->prependExtensionConfig('framework', [
+                'asset_mapper' => [
+                    'paths' => [
+                        __DIR__.'/../../assets/dist' => '@kibatic/datagrid-bundle',
+                    ],
+                ],
+            ]);
+        }
+    }
+
+    private function isAssetMapperAvailable(ContainerBuilder $container): bool
+    {
+        if (!interface_exists(AssetMapperInterface::class)) {
+            return false;
+        }
+
+        // check that FrameworkBundle 6.3 or higher is installed
+        $bundlesMetadata = $container->getParameter('kernel.bundles_metadata');
+        if (!isset($bundlesMetadata['FrameworkBundle'])) {
+            return false;
+        }
+
+        return is_file($bundlesMetadata['FrameworkBundle']['path'].'/Resources/config/asset_mapper.php');
+    }
 }

src/Resources/views/theme/bootstrap5/datagrid-table.html.twig

@@ -6,26 +6,12 @@
             <input type="hidden" name="_token" value="{{ csrf_token(grid.batchActionsTokenId) }}">
     {% endif %}
 
-    <table class="{% block grid_table_class %}table table-bordered table-striped table-hover{% endblock %}">
+    <table class="{% block grid_table_class %}table table-bordered table-striped table-hover{% endblock %}" {% if grid.hasBatchActions %}data-controller="checker"{% endif %}>
         <thead>
         <tr{% if header_tr_class is not empty %} class="{{ header_tr_class }}"{% endif %}>
             {% if grid.hasBatchActions %}
                 <th>
-                    <input type="checkbox" data-check-all title="{{ 'Select all'|trans({}, 'KibaticDatagridBundle') }}" />
-                    <script>
-                        {# TODO: convertir en controller stimulus pour que ça soit compatible avec Turbo Drive #}
-                        document.addEventListener("DOMContentLoaded", () => {
-                            const batchForm = document.querySelector('form[name="datagrid-batch-action"]')
-                            const checkboxes = batchForm.querySelectorAll('input[type="checkbox"]')
-                            const metaCheckboxes = batchForm.querySelectorAll('input[data-check-all]')
-
-                            metaCheckboxes.forEach(metaCheckbox =>
-                                metaCheckbox.addEventListener("change", event =>
-                                    checkboxes.forEach(checkbox => checkbox.checked = event.target.checked)
-                                )
-                            )
-                        })
-                    </script>
+                    <input type="checkbox" data-checker-target="master" title="{{ 'Select all'|trans({}, 'KibaticDatagridBundle') }}" />
                 </th>
             {% endif %}
             {% for column in grid.columns %}
@@ -57,7 +43,7 @@
             <tr{{ grid.rowAttributes(item)|raw }}>
                 {% if grid.hasBatchActions %}
                     <td>
-                        <input type="checkbox" name="ids[]" value="{{ item.id }}" />
+                        <input type="checkbox" name="ids[]" value="{{ item.id }}" data-checker-target="checkbox" />
                     </td>
                 {% endif %}
                 {% for column in grid.columns %}