#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/DropdownActionType.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Kreyu\Bundle\DataTableBundle\Action\Type;
+
+use Kreyu\Bundle\DataTableBundle\Action\ActionBuilderInterface;
+use Kreyu\Bundle\DataTableBundle\Action\ActionInterface;
+use Kreyu\Bundle\DataTableBundle\Action\ActionView;
+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('array')
+            ->required()
+        ;
+    }
+}

src/Action/Type/DropdownItemActionType/LinkDropdownItemActionType.php

@@ -0,0 +1,16 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Kreyu\Bundle\DataTableBundle\Action\Type\DropdownItemActionType;
+
+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/Builder/RowActionBuilderInterface.php

@@ -0,0 +1,31 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Kreyu\Bundle\DataTableBundle\Builder;
+
+use Kreyu\Bundle\DataTableBundle\Action\ActionBuilderInterface;
+use Kreyu\Bundle\DataTableBundle\Action\Type\ActionTypeInterface;
+use Kreyu\Bundle\DataTableBundle\Exception\InvalidArgumentException;
+
+interface RowActionBuilderInterface
+{
+    /**
+     * @throws InvalidArgumentException if row action of given name does not exist
+     */
+    public function getRowAction(string $name): ActionBuilderInterface;
+
+    public function hasRowAction(string $name): bool;
+
+    /**
+     * @param class-string<ActionTypeInterface>|null $type
+     */
+    public function createRowAction(string $name, ?string $type = null, array $options = []): ActionBuilderInterface;
+
+    /**
+     * @param class-string<ActionTypeInterface>|null $type
+     */
+    public function addRowAction(ActionBuilderInterface|string $action, ?string $type = null, array $options = []): static;
+
+    public function removeRowAction(string $name): static;
+}

src/DataTableBuilderInterface.php

@@ -6,6 +6,7 @@
 
 use Kreyu\Bundle\DataTableBundle\Action\ActionBuilderInterface;
 use Kreyu\Bundle\DataTableBundle\Action\Type\ActionTypeInterface;
+use Kreyu\Bundle\DataTableBundle\Builder\RowActionBuilderInterface;
 use Kreyu\Bundle\DataTableBundle\Column\ColumnBuilderInterface;
 use Kreyu\Bundle\DataTableBundle\Column\Type\ActionsColumnType;
 use Kreyu\Bundle\DataTableBundle\Column\Type\ColumnTypeInterface;
@@ -16,7 +17,7 @@
 use Kreyu\Bundle\DataTableBundle\Filter\Type\FilterTypeInterface;
 use Kreyu\Bundle\DataTableBundle\Query\ProxyQueryInterface;
 
-interface DataTableBuilderInterface extends DataTableConfigBuilderInterface
+interface DataTableBuilderInterface extends DataTableConfigBuilderInterface, RowActionBuilderInterface
 {
     public const BATCH_CHECKBOX_COLUMN_NAME = '__batch';
 
@@ -144,25 +145,6 @@ public function setAutoAddingBatchCheckboxColumn(bool $autoAddingBatchCheckboxCo
      */
     public function getRowActions(): array;
 
-    /**
-     * @throws InvalidArgumentException if row action of given name does not exist
-     */
-    public function getRowAction(string $name): ActionBuilderInterface;
-
-    public function hasRowAction(string $name): bool;
-
-    /**
-     * @param class-string<ActionTypeInterface>|null $type
-     */
-    public function createRowAction(string $name, ?string $type = null, array $options = []): ActionBuilderInterface;
-
-    /**
-     * @param class-string<ActionTypeInterface>|null $type
-     */
-    public function addRowAction(ActionBuilderInterface|string $action, ?string $type = null, array $options = []): static;
-
-    public function removeRowAction(string $name): static;
-
     public function isAutoAddingActionsColumn(): bool;
 
     public function setAutoAddingActionsColumn(bool $autoAddingActionsColumn): static;

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\DropdownActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\DropdownItemActionType\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,34 @@
     </form>
 {% endblock %}
 
+{% block action_dropdown_control %}
+<style>
+        #linkList {
+            display: none;
+        }
+        #linkList.show {
+            display: block;
+        }
+    </style>
+
+    <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,28 @@
     {% 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>
+        <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) %}
+
+    {{ 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"/>