[POC] Add a modal action whose content is loaded via an HTTP call.

assets/controllers/batch.js

@@ -90,9 +90,14 @@ export default class extends Controller {
 
     #updateIdentifierHolderHref(identifierHolder, identifierMap) {
         let href;
+        let hrefHolder =  'href';
+
+        if (identifierHolder.dataset.hrefHolder !== undefined) {
+            hrefHolder = identifierHolder.dataset.hrefHolder;
+        }
 
         try {
-            href = new URL(identifierHolder.href);
+            href = new URL(identifierHolder.dataset[hrefHolder], window.location.origin);
         } catch (exception) {
             return;
         }
@@ -111,7 +116,7 @@ export default class extends Controller {
             }
         }
 
-        identifierHolder.href = href.toString();
+        identifierHolder.dataset[hrefHolder] = href.toString();
     }
 
     #updateIdentifierHolderDataParam(identifierHolder, identifierMap) {

assets/controllers/bootstrap/modal.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+import { Modal } from 'bootstrap'; // Import Bootstrap
+
+export default class extends Controller {
+    static targets = ['modal'];
+
+    static values = {
+        url: String,
+    }
+
+    open(event) {
+        event.preventDefault();
+        const modalContent = this.modalTarget;
+
+        fetch(this.urlValue)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Error loading content.');
+                }
+                return response.text();
+            })
+            .then(html => {
+                modalContent.innerHTML = html;
+            })
+        ;
+    }
+}

assets/package.json

@@ -19,6 +19,11 @@
                 "main": "controllers/state.js",
                 "fetch": "eager",
                 "enabled": true
+            },
+            "bootstrap-modal": {
+                "main": "controllers/bootstrap/modal.js",
+                "fetch": "eager",
+                "enabled": false
             }
         },
         "importmap": {
@@ -34,4 +39,4 @@
         "@hotwired/stimulus": "^3.0.0",
         "sortablejs": "^1.15.0"
     }
-}
+}

src/Action/Type/ModalActionType.php

@@ -0,0 +1,70 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Kreyu\Bundle\DataTableBundle\Action\Type;
+
+use Kreyu\Bundle\DataTableBundle\Action\ActionInterface;
+use Kreyu\Bundle\DataTableBundle\Action\ActionView;
+use Kreyu\Bundle\DataTableBundle\Column\ColumnValueView;
+use Kreyu\Bundle\DataTableBundle\Exception\LogicException;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+
+final class ModalActionType extends AbstractActionType
+{
+    public function __construct(
+        private readonly UrlGeneratorInterface $urlGenerator,
+    ) {
+    }
+
+    public function buildView(ActionView $view, ActionInterface $action, array $options): void
+    {
+        if (null === $options['href'] && null === $options['route']) {
+            throw new LogicException('No "route" or "href" provided.');
+        }
+
+        if ($view->parent instanceof ColumnValueView) {
+            $value = $view->parent->value;
+
+            foreach (['href', 'route', 'route_params'] as $optionName) {
+                if (isset($options[$optionName]) && is_callable($options[$optionName])) {
+                    $options[$optionName] = $options[$optionName]($value);
+                }
+            }
+        } else {
+            foreach (['href', 'route', 'route_params'] as $optionName) {
+                if (isset($options[$optionName]) && is_callable($options[$optionName])) {
+                    throw new LogicException(sprintf('Callable used for option "%s", but it\'s only available for RowActions.', $optionName));
+                }
+            }
+        }
+
+        $href = $options['href'] ?? $this->urlGenerator->generate($options['route'], $options['route_params']);
+
+        $view->vars = array_replace($view->vars, [
+            'href' => $href,
+        ]);
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver
+            ->define('route')
+            ->default(null)
+            ->allowedTypes('null', 'string', 'callable')
+        ;
+
+        $resolver
+            ->define('route_params')
+            ->allowedTypes('array', 'callable')
+            ->default([])
+        ;
+
+        $resolver
+            ->define('href')
+            ->default(null)
+            ->allowedTypes('null', 'string', 'callable')
+        ;
+    }
+}

src/Resources/config/actions.php

@@ -12,9 +12,11 @@
 use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\LinkDropdownItemActionType;
 use Kreyu\Bundle\DataTableBundle\Action\Type\FormActionType;
 use Kreyu\Bundle\DataTableBundle\Action\Type\LinkActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\ModalActionType;
 use Kreyu\Bundle\DataTableBundle\Action\Type\ResolvedActionTypeFactory;
 use Kreyu\Bundle\DataTableBundle\Action\Type\ResolvedActionTypeFactoryInterface;
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
 
 use function Symfony\Component\DependencyInjection\Loader\Configurator\service;
 use function Symfony\Component\DependencyInjection\Loader\Configurator\tagged_iterator;
@@ -63,6 +65,12 @@
         ->tag('kreyu_data_table.action.type')
     ;
 
+    $services
+        ->set('kreyu_data_table.action.type.modal', ModalActionType::class)
+        ->tag('kreyu_data_table.action.type')
+        ->args([service(UrlGeneratorInterface::class)])
+    ;
+
     $services
         ->set('kreyu_data_table.action.type.dropdown', DropdownActionType::class)
         ->tag('kreyu_data_table.action.type')

src/Resources/translations/KreyuDataTable.en.yaml

@@ -50,4 +50,5 @@ Clear all filters: Clear all filters
 Action confirmation: Action execution confirmation
 Are you sure you want to execute this action?: Are you sure you want to execute this action?
 Confirm: Confirm
-Cancel: Cancel
+Cancel: Cancel
+Loading: Loading

src/Resources/translations/KreyuDataTable.fr.yaml

@@ -50,3 +50,4 @@ Action confirmation: Confirmation de l'action
 Are you sure you want to execute this action?: Êtes-vous sûr de vouloir exécuter cette action ?
 Confirm: Confirmer
 Cancel: Annuler
+Loading: Chargement

src/Resources/views/themes/base.html.twig

@@ -636,6 +636,19 @@
     </form>
 {% endblock %}
 
+
+{% block action_modal_control %}
+    {% set attr = { href }|filter(v => v != null)|merge(attr|default({})) %}
+
+    {% if batch %}
+        {% set attr = { 'data-kreyu--data-table-bundle--batch-target': 'identifierHolder' }|merge(attr) %}
+    {% endif %}
+
+    <button {% with { attr } %}{{- block('attributes') -}}{% endwith %}>
+        {% with { attr: {} } %}{{- block('action_control', theme, _context) -}}{% endwith %}
+    </button>
+{% endblock %}
+
 {% block action_dropdown_control %}
     {# Themes that extend base theme should provide their own implementation of dropdown #}
     <button>{{- block('action_control', theme, _context) -}}</button>

src/Resources/views/themes/bootstrap_5.html.twig

@@ -723,6 +723,37 @@
     {% endif %}
 {% endblock %}
 
+
+{% block action_modal_control %}
+    <div
+        data-controller="kreyu--data-table-bundle--bootstrap-modal"
+        data-kreyu--data-table-bundle--bootstrap-modal-url-value="{{ href }}"
+
+        {% if batch %}
+           data-kreyu--data-table-bundle--batch-target="identifierHolder"
+           data-href-holder="kreyu-DataTableBundle-BootstrapModalUrlValue"
+        {% endif %}
+    >
+       {% set modalId = 'modalId-' ~ random() %}
+        <button
+            data-action="kreyu--data-table-bundle--bootstrap-modal#open"
+            type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#{{ modalId }}">
+            {% with { attr: {} } %}{{- block('action_control', theme, _context) -}}{% endwith %}
+        </button>
+
+        <div class="modal fade" id="{{ modalId }}" tabindex="-1" aria-labelledby="{{ modalId }}Label" aria-hidden="true"
+            data-kreyu--data-table-bundle--bootstrap-modal-target="modal">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-body">
+                       {{ 'Loading'|trans }}
+                    </div>
+                </div>
+           </div>
+       </div>
+    </div>
+{% endblock %}
+
 {% block action_dropdown_control %}
     <div class="dropdown d-inline-block">
         {% set attr = {