Add dropdown action #88

docs/.vitepress/config.mts

@@ -134,6 +134,12 @@ export default defineConfig({
                 { text: 'Link', link: '/reference/types/action/link' },
                 { text: 'Button', link: '/reference/types/action/button' },
                 { text: 'Form', link: '/reference/types/action/form' },
+                {
+                  text: 'Dropdown', link: '/reference/types/action/dropdown',
+                  items: [
+                    { text: 'LinkDropdownItem', link: '/reference/types/action/link-dropdown-item' },
+                  ],
+                },
                 { text: 'Action', link: '/reference/types/action/action' },
               ],
             },

docs/src/docs/components/actions.md

@@ -569,3 +569,32 @@ If `FormActionType` is used, the scripts will append hidden inputs with selected
 <input type="hidden" name="product_id[]" value="1">
 <input type="hidden" name="category_id[]" value="4">
 ```
+
+## Dropdown actions
+
+In some cases, it may be useful to group multiple actions under a single dropdown.
+
+To do so, define an action using the [`DropdownActionType`](../../reference/types/action/dropdown.md) type:
+Then, define child actions under its `actions` array. Each child action can be created using the builder's `createAction`, `createRowAction` or `createBatchAction` method, depending on the context:
+
+```php
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\DropdownActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\LinkDropdownItemActionType;
+
+$builder
+    ->addRowAction('advanced', DropdownActionType::class, [
+        'actions' => [
+            $builder->createRowAction('update', LinkDropdownItemActionType::class, [
+                'href' => fn (Post $post) => $this->urlGenerator->generate('post_delete', [
+                    'id' => $post->getId(),
+                ]),            
+            ]),
+        ],
+    ])
+;
+```
+
+> [!TIP]
+> Although any action type can be used, rendering forms and buttons inside a dropdown may look weird.
+> Therefore, it is recommended to use [`LinkDropdownItemActionType`](../../reference/types/action/link-dropdown-item.md) for dropdown items,
+> so it will be rendered properly as a simple link.

docs/src/reference/types/action/dropdown.md

@@ -0,0 +1,61 @@
+<script setup>
+    import ActionTypeOptions from "./options/action.md";
+</script>
+
+# DropdownActionType
+
+The [`DropdownActionType`](https://github.com/Kreyu/data-table-bundle/blob/main/src/Action/Type/DropdownActionType.php) represents an action rendered as a dropdown, where each item corresponds to separate action.
+
+## Options
+
+### `actions`
+
+- **type**: `array` or `callable` (if using as a row action)
+- **default**: `[]`
+
+An array of actions that will be rendered as dropdown items.
+Each action can be created using `createAction`, `createRowAction` or `createBatchAction` method, depending on the context:
+
+```php
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\DropdownActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\LinkDropdownItemActionType;
+
+$builder
+    ->addAction('advanced', DropdownActionType::class, [
+        'actions' => [
+            $builder->createAction('update', LinkDropdownItemActionType::class, [
+                'href' => '#'            
+            ]),
+        ],
+    ])
+;
+```
+
+When using the `DropdownActionType` as a [row action](../../../docs/components/actions.md), you can provide a callable
+that will receive the row data as an argument and should return an array of actions.
+
+```php
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\DropdownActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\LinkDropdownItemActionType;
+
+$builder
+    ->addRowAction('advanced', DropdownActionType::class, [
+        'actions' => fn (Post $post) => [
+            $builder->createRowAction('update', LinkDropdownItemActionType::class, [
+                'href' => $this->urlGenerator->generate('post_update', [
+                    'id' => $post->getId(),
+                ]),
+            ]),
+        ],
+    ])
+;
+```
+
+> [!TIP]
+> Although any action type can be used, rendering forms and buttons inside a dropdown may look weird.
+> Therefore, it is recommended to use [`LinkDropdownItemActionType`](link-dropdown-item.md) for dropdown items,
+> so it will be rendered properly as a simple link.
+
+## Inherited options
+
+<ActionTypeOptions/>

docs/src/reference/types/action/link-dropdown-item.md

@@ -0,0 +1,81 @@
+<script setup>
+    import ActionTypeOptions from "./options/action.md";
+</script>
+
+# LinkDropdownItemActionType
+
+The [`LinkDropdownItemActionType`](https://github.com/Kreyu/data-table-bundle/blob/main/src/Action/Type/Dropdown/LinkDropdownItemActionType.php) 
+represents an action rendered as dropdown item with a simple link.  It is meant to be used as a child of the [`DropdownActionType`](dropdown.md).
+
+## Options
+
+### `href`
+
+- **type**: `string` or `callable` (if using as a row action)
+- **default**: `'#'`
+
+A value used as an action link [href attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href).
+
+```php
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\DropdownActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\LinkDropdownItemActionType;
+
+$builder
+    ->addAction('advanced', DropdownActionType::class, [
+        'actions' => [
+            $builder->createAction('update', LinkDropdownItemActionType::class, [
+                'href' => fn (Post $post) => $this->urlGenerator->generate('post_update', [
+                    'id' => $post->getId(),
+                ]),           
+            ]),
+        ],
+    ])
+;
+```
+
+When using the `LinkDropdownItemActionType` as a [row action](../../../docs/components/actions.md), you can provide a callable
+that will receive the row data as an argument and should return an array of actions.
+
+```php
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\DropdownActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\LinkDropdownItemActionType;
+
+$builder
+    ->addRowAction('advanced', DropdownActionType::class, [
+        'actions' => [
+            $builder->createRowAction('update', LinkDropdownItemActionType::class, [
+                'href' => fn (Post $post) => $this->urlGenerator->generate('post_update', [
+                    'id' => $post->getId(),
+                ]),            
+            ]),
+        ],
+    ])
+;
+```
+
+### `target`
+
+- **type**: `string` or `callable`
+- **default**: `'_self'`
+
+Sets the value that will be used as an anchor [target attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target).
+
+```php
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\DropdownActionType;
+use Kreyu\Bundle\DataTableBundle\Action\Type\Dropdown\LinkDropdownItemActionType;
+
+$builder
+    ->addAction('preview', DropdownActionType::class, [
+        'actions' => [
+            $builder->createAction('render', LinkDropdownItemActionType::class, [
+                'href' => '#',
+                'target' => '_blank',
+            ]),
+        ],
+    ])
+;
+```
+
+## Inherited options
+
+<ActionTypeOptions/>

src/Action/Type/Dropdown/DropdownActionType.php

@@ -0,0 +1,48 @@
+<?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 Kreyu\Bundle\DataTableBundle\Column\ColumnValueView;
+use Kreyu\Bundle\DataTableBundle\Exception\UnexpectedTypeException;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class DropdownActionType extends AbstractActionType
+{
+    public function buildView(ActionView $view, ActionInterface $action, array $options): void
+    {
+        $itemActions = [];
+
+        if (is_callable($options['actions']) && $view->parent instanceof ColumnValueView) {
+            $options['actions'] = $options['actions']($view->parent->value);
+        }
+
+        foreach ($options['actions'] as $itemActionBuilder) {
+            if (!$itemActionBuilder instanceof ActionBuilderInterface) {
+                throw new UnexpectedTypeException($itemActionBuilder, ActionBuilderInterface::class);
+            }
+
+            $itemActionBuilder->setContext($action->getConfig()->getContext());
+
+            $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.'[]', 'callable')
+            ->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,24 @@
     </form>
 {% endblock %}
 
+{% block action_dropdown_control %}
+    {# Themes that extend base theme should provide their own implementation of dropdown #}
+    <button>{{- block('action_control', theme, _context) -}}</button>
+    <ul>
+        {% for action in actions %}
+            <li>{{ data_table_action(action) }}</li>
+        {% endfor %}
+    </ul>
+{% 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,58 @@
     {% endif %}
 {% endblock %}
 
+{% block action_dropdown_control %}
+    <div class="dropdown d-inline-block">
+        {% set attr = {
+            'class': 'btn btn-primary dropdown-toggle',
+            'type': 'button',
+            'id': data_table.vars.name ~ '--row-action--' ~ name ~ '--button',
+            'aria-expanded': 'false',
+            'data-bs-toggle': 'dropdown',
+        }|merge(attr) %}
+
+        <button {{ block('attributes') }}>
+            {% with { attr: {} } %}{{- block('action_control', theme) -}}{% endwith %}
+        </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(confirm_button_attr) %}
+                {% endif %}
+
+                {% with { confirm_button_attr, confirmation } only %}{{ block('action_confirmation_modal') }}{% endwith %}
+            {% endif %}
+        {% endfor %}
+
+        <ul class="dropdown-menu" aria-labelledby="{{ name }}-button">
+            {% 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"/>