#88 Add the DropdownAction

assets/controllers/dropdown.js

@@ -0,0 +1,15 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class extends Controller {
+    static values = {
+        toggledClass:  { type: String, default: 'show' },
+    }
+
+    static targets = [
+        'content',
+    ];
+
+    toggle() {
+        this.contentTarget.classList.toggle(this.toggledClassValue)
+    }
+}

assets/package.json

@@ -19,6 +19,11 @@
                 "main": "controllers/state.js",
                 "fetch": "eager",
                 "enabled": true
+            },
+            "dropdown": {
+              "main": "controllers/dropdown.js",
+              "fetch": "eager",
+              "enabled": true
             }
         },
         "importmap": {

src/Action/Type/Dropdown/DropdownActionType.php

@@ -0,0 +1,36 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown;
+
+use Kreyu\Bundle\DataTableBundle\Action\ActionBuilderInterface;
+use Kreyu\Bundle\DataTableBundle\Action\ActionInterface;
+use Kreyu\Bundle\DataTableBundle\Action\ActionView;
+use Kreyu\Bundle\DataTableBundle\Action\Type\AbstractActionType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class DropdownActionType extends AbstractActionType
+{
+    public function buildView(ActionView $view, ActionInterface $action, array $options): void
+    {
+        $itemActions = [];
+        /** @var ActionBuilderInterface $itemActionBuilder */
+        foreach ($options['actions'] as $itemActionBuilder) {
+            $itemAction = $itemActionBuilder->getAction();
+            $itemAction->setDataTable($action->getDataTable());
+
+            $itemActions[] = $itemAction->createView($view->parent);
+        }
+
+        $view->vars['actions'] = $itemActions;
+    }
+
+    public function configureOptions(OptionsResolver $resolver): void
+    {
+        $resolver->define('actions')
+            ->allowedTypes(ActionBuilderInterface::class.'[]')
+            ->required()
+        ;
+    }
+}

src/Action/Type/Dropdown/LinkDropdownItemActionType.php

@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown;
+
+use Kreyu\Bundle\DataTableBundle\Action\Type\AbstractActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\LinkActionType;
+
+class LinkDropdownItemActionType extends AbstractActionType
+{
+    public function getParent(): ?string
+    {
+        return LinkActionType::class;
+    }
+}

src/Resources/config/actions.php

@@ -8,6 +8,8 @@
 use Kreyu\Bundle\DataTableBundle\Action\ActionRegistryInterface;
 use Kreyu\Bundle\DataTableBundle\Action\Type\ActionType;
 use Kreyu\Bundle\DataTableBundle\Action\Type\ButtonActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\DropdownActionType;
+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\ResolvedActionTypeFactory;
@@ -60,4 +62,14 @@
         ->set('kreyu_data_table.action.type.form', FormActionType::class)
         ->tag('kreyu_data_table.action.type')
     ;
+
+    $services
+        ->set('kreyu_data_table.action.type.dropdown', DropdownActionType::class)
+        ->tag('kreyu_data_table.action.type')
+    ;
+
+    $services
+        ->set('kreyu_data_table.action.type.link_dropdown_item', LinkDropdownItemActionType::class)
+        ->tag('kreyu_data_table.action.type')
+    ;
 };

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

@@ -632,6 +632,25 @@
     </form>
 {% endblock %}
 
+{% block action_dropdown_control %}
+    <div data-controller="kreyu--data-table-bundle--dropdown">
+        <button id="toggleButton" data-action="kreyu--data-table-bundle--dropdown#toggle">{{- block('action_control', theme, _context) -}}</button>
+        <ul data-kreyu--data-table-bundle--dropdown-target="content">
+            {% for action in actions %}
+                <li>{{ data_table_action(action) }}</li>
+            {% endfor %}
+        </ul>
+    </div>
+{% endblock %}
+
+{% block action_link_dropdown_item_control %}
+    {% set attr = { href, target }|filter(v => v != null)|merge(attr|default({})) %}
+
+    <a {% with { attr } %}{{- block('attributes') -}}{% endwith %}>
+        {% with { attr: {} } %}{{- block('action_control', theme, _context) -}}{% endwith %}
+    </a>
+{% endblock %}
+
 {% block sort_arrow_none %}{% endblock %}
 
 {% block sort_arrow_asc %}↑{% endblock %}

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

@@ -723,6 +723,51 @@
     {% endif %}
 {% endblock %}
 
+{% block action_dropdown_control %}
+    <div class="dropdown" data-controller="kreyu--data-table-bundle--dropdown">
+        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" aria-expanded="false"
+            data-action="kreyu--data-table-bundle--dropdown#toggle"
+        >
+            {{- block('action_control', theme, _context) -}}
+        </button>
+        {# We must define the confirmation modals outside the ul/li, because the ul is in "position: relative" and that does not work properly with modals. #}
+        {% for action in actions %}
+            {% if action.vars.confirmation %}
+                {% set href = action.vars.href %}
+                {% set confirm_button_attr = { href }|merge(confirm_button_attr|default({})) %}
+                {% set confirmation = action.vars.confirmation %}
+
+                {% if batch %}
+                    {% set confirm_button_attr = {
+                        'data-kreyu--data-table-bundle--batch-target': 'identifierHolder',
+                    }|merge(action.vars.confirm_button_attr) %}
+                {% endif %}
+
+                {% with { confirm_button_attr, confirmation } only %}{{ block('action_confirmation_modal') }}{% endwith %}
+            {% endif %}
+        {% endfor %}
+        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"
+            data-kreyu--data-table-bundle--dropdown-target="content">
+            {% for action in actions %}
+                <li>{{ data_table_action(action) }}</li>
+            {% endfor %}
+        </ul>
+    </div>
+{% endblock %}
+
+{% block action_link_dropdown_item_control %}
+    {% set attr = { 'class': 'dropdown-item'}|merge(attr) %}
+
+    {% if confirmation %}
+        {% set attr = {
+            'data-bs-toggle': 'modal',
+            'data-bs-target': '#' ~ confirmation.identifier,
+        }|merge(attr) %}
+    {% endif %}
+
+    {{ parent() }}
+{% endblock %}
+
 {% block sort_arrow_none %}
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-expand" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M3.646 9.146a.5.5 0 0 1 .708 0L8 12.793l3.646-3.647a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 0-.708zm0-2.292a.5.5 0 0 0 .708 0L8 3.207l3.646 3.647a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 0 0 0 .708z"/>