Allow to ask confirmation in custom actions

assets/js/app.js

@@ -30,6 +30,7 @@ class App {
         this.#createAutoCompleteFields();
         this.#createBatchActions();
         this.#createModalWindowsForDeleteActions();
+        this.#createModalWindowsForConfirmationActions();
         this.#createPopovers();
         this.#createTooltips();
 
@@ -396,6 +397,15 @@ class App {
         });
     }
 
+    #createModalWindowsForConfirmationActions() {
+        const modalTitles = document.querySelectorAll('.action-confirmation-title');
+        modalTitles.forEach((modalTitle) => {
+            const titleContentWithPlaceholders = modalTitle.textContent;
+            const actionName = modalTitle.getAttribute('data-action-title');
+            modalTitle.textContent = titleContentWithPlaceholders.replace('%action_name%', actionName);
+        });
+    }
+
     #createPopovers() {
         document.querySelectorAll('[data-bs-toggle="popover"]').forEach((popoverElement) => {
             new bootstrap.Popover(popoverElement);

src/Config/Action.php

@@ -123,6 +123,13 @@ public function setIcon(?string $icon): self
         return $this;
     }
 
+    public function setConfirmationModal(string $modalText): self
+    {
+        $this->dto->setConfirmationModal($modalText);
+
+        return $this;
+    }
+
     /**
      * Use this to override the default CSS classes applied to actions and use instead your own CSS classes.
      * See also addCssClass() to add your own custom classes without removing the default ones.

src/Dto/ActionDto.php

@@ -39,6 +39,7 @@ final class ActionDto
     private ButtonType $butonType = ButtonType::Submit;
     private ButtonVariant $variant = ButtonVariant::Default;
     private ButtonStyle $style = ButtonStyle::Solid;
+    private ?string $modalText = null;
 
     public function getType(): string
     {
@@ -357,6 +358,21 @@ public function usesTextStyle(): bool
         return ButtonStyle::Text === $this->style;
     }
 
+    public function hasConfirmationModal(): bool
+    {
+        return isset($this->modalText);
+    }
+
+    public function setConfirmationModal(string $modalText): void
+    {
+        $this->modalText = $modalText;
+    }
+
+    public function getModalText(): ?string
+    {
+        return $this->modalText;
+    }
+
     /**
      * @internal
      */

src/Factory/ActionFactory.php

@@ -195,6 +195,13 @@ private function processAction(string $pageName, ActionDto $actionDto, ?EntityDt
             }
         }
 
+        if ($actionDto->hasConfirmationModal()) {
+            $actionDto->addHtmlAttributes([
+                'data-bs-toggle' => 'modal',
+                'data-bs-target' => '#modal-confirmation-'.$actionDto->getName(),
+            ]);
+        }
+
         if (Action::DELETE === $actionDto->getName()) {
             $actionDto->addHtmlAttributes([
                 'formaction' => $this->adminUrlGenerator->setController($adminContext->getCrud()->getControllerFqcn())->setAction(Action::DELETE)->setEntityId($entityDto->getPrimaryKeyValue())->generateUrl(),

templates/crud/action.html.twig

@@ -10,8 +10,8 @@
     htmlElement="{{ action.htmlElement }}"
     type="{{ action.buttonType.value }}"
     icon="{{ action.icon }}"
-    href="{{ action.htmlElement.isLink ? action.linkUrl : null }}"
-    action="{{ action.htmlElement.isForm ? action.linkUrl : null }}"
+    href="{{ action.hasConfirmationModal == false and action.htmlElement.isLink ? action.linkUrl : null }}"
+    action="{{ action.hasConfirmationModal == false and action.htmlElement.isForm ? action.linkUrl : null }}"
     method="{{ action.htmlElement.isForm ? 'POST' : null }}"
 >
     {%- if outerScope.action.label is not empty -%}<span class="action-label">{{ outerScope.action.label|trans|raw }}</span>{%- endif -%}

templates/crud/action_group.html.twig

@@ -55,7 +55,7 @@
                     label="{{ item.label }}" icon="{{ item.icon }}" class="{{ item.cssClass }} dropdown-item-variant-{{ item.variant.value }}"
                     htmlAttributes="{{ item.htmlAttributes }}"
                     renderAsForm="{{ item.isRenderedAsForm }}"
-                    url="{{ item.linkUrl }}" renderLabelRaw="true"
+                    url="{{ item.hasConfirmationModal == false ? item.linkUrl : null }}" renderLabelRaw="true"
                     showBlankIcons="{{ group.hasAnyActionWithIcon }}"
                 />
             {% endif %}

templates/crud/detail.html.twig

@@ -65,6 +65,18 @@
     {% block delete_form %}
         {{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', {entity_id: entity.primaryKeyValue}, with_context: false) }}
     {% endblock delete_form %}
+
+    {% for action in entity.actions %}
+        {% if action.isActionGroup %}
+            {% for item in action.items %}
+                {% if item.hasConfirmationModal %}
+                    {{ include('@EasyAdmin/crud/includes/_confirm_action_modal.html.twig', {action: item}, with_context: false) }}
+                {% endif %}
+            {% endfor %}
+        {% elseif action.hasConfirmationModal %}
+            {{ include('@EasyAdmin/crud/includes/_confirm_action_modal.html.twig', {action: action}, with_context: false) }}
+        {% endif %}
+    {% endfor %}
 {% endblock %}
 
 {% macro render_field_contents(entity, field) %}

templates/crud/edit.html.twig

@@ -67,4 +67,16 @@
     {% block delete_form %}
         {{ include('@EasyAdmin/crud/includes/_delete_form.html.twig', {entity_id: entity.primaryKeyValue}, with_context: false) }}
     {% endblock delete_form %}
+
+    {% for action in entity.actions %}
+        {% if action.isActionGroup %}
+            {% for item in action.items %}
+                {% if item.hasConfirmationModal %}
+                    {{ include('@EasyAdmin/crud/includes/_confirm_action_modal.html.twig', {action: item}, with_context: false) }}
+                {% endif %}
+            {% endfor %}
+        {% elseif action.hasConfirmationModal %}
+            {{ include('@EasyAdmin/crud/includes/_confirm_action_modal.html.twig', {action: action}, with_context: false) }}
+        {% endif %}
+    {% endfor %}
 {% endblock %}

templates/crud/includes/_confirm_action_modal.html.twig

@@ -0,0 +1,24 @@
+<div id="modal-confirmation-{{ action.name }}" class="modal fade" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-body">
+                <h4 class="action-confirmation-title" data-action-title="{{ action.label ?? action.name }}">{{ 'confirmation_modal.title'|trans(domain: 'EasyAdminBundle') }}</h4>
+                <p>{{ action.modalText }}</p>
+            </div>
+            <div class="modal-footer">
+                <twig:ea:Button type="button" data-bs-dismiss="modal">
+                    {{ 'action.cancel'|trans([], 'EasyAdminBundle') }}
+                </twig:ea:Button>
+                <twig:ea:Button
+                    variant="danger"
+                    htmlElement="{{ action.htmlElement }}"
+                    type="{{ action.buttonType.value }}"
+                    icon="{{ action.icon }}"
+                    href="{{ action.linkUrl }}"
+                >
+                    {{ 'confirmation_modal.action'|trans(domain: 'EasyAdminBundle') }}
+                </twig:ea:Button>
+            </div>
+        </div>
+    </div>
+</div>

templates/crud/index.html.twig

@@ -196,8 +196,16 @@
                                         {% for action in entity.actions %}
                                             {% if action.isActionGroup %}
                                                 {{ include(action.templatePath, {group: action, entity: entity}, with_context: false) }}
+                                                {% for item in action.items %}
+                                                    {% if item.hasConfirmationModal %}
+                                                        {{ include('@EasyAdmin/crud/includes/_confirm_action_modal.html.twig', {action: item}, with_context: false) }}
+                                                    {% endif %}
+                                                {% endfor %}
                                             {% else %}
                                                 {{ include(action.templatePath, {action: action, entity: entity, isIncludedInDropdown: ea.crud.showEntityActionsAsDropdown}, with_context: false) }}
+                                                {% if action.hasConfirmationModal %}
+                                                    {{ include('@EasyAdmin/crud/includes/_confirm_action_modal.html.twig', {action: action}, with_context: false) }}
+                                                {% endif %}
                                             {% endif %}
                                         {% endfor %}
                                     {% endif %}

translations/EasyAdminBundle.ar.php

@@ -67,6 +67,11 @@
         'action' => 'استمرار',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'سوف تقوم بتطبيق الأجراء "%action_name%"',
+        'action' => 'استمرار',
+    ],
+
     'delete_modal' => [
         'title' => 'هل تريد حذف هذا العنصر؟',
         'content' => 'هذا الإجراء غير قابل للإلغاء.',

translations/EasyAdminBundle.bg.php

@@ -67,6 +67,11 @@
         'action' => 'Извърши',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'Ще приложите действието "%action_name%".',
+        'action' => 'Извърши',
+    ],
+
     'delete_modal' => [
         'title' => 'Наистина ли желаете да изтриете записа?',
         'content' => 'Това действие е необратимо.',

translations/EasyAdminBundle.ca.php

@@ -67,6 +67,11 @@
         'action' => 'Continuar',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'Du vil anvende "%action_name%" handlingen.',
+        'action' => 'Continuar',
+    ],
+
     'delete_modal' => [
         'title' => 'Realment vols esborrar aquest element?',
         'content' => 'Aquesta acció no es pot desfer.',

translations/EasyAdminBundle.cs.php

@@ -67,6 +67,11 @@
         'action' => 'Pokračovat',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'Chcete použít akci "%action_name%".',
+        'action' => 'Pokračovat',
+    ],
+
     'delete_modal' => [
         'title' => 'Opravdu chcete smazat tuto položku?',
         'content' => 'Tuto akci není možné vrátit zpět.',

translations/EasyAdminBundle.da.php

@@ -67,6 +67,11 @@
         'action' => 'Udfør handling',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'Du vil anvende "%action_name%" handlingen.',
+        'action' => 'Udfør handling',
+    ],
+
     'delete_modal' => [
         'title' => 'Er du sikker på du vil slette dette element?',
         'content' => 'Denne operation kan ikke fortrydes.',

translations/EasyAdminBundle.de.php

@@ -67,6 +67,11 @@
         'action' => 'Fortfahren',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'Sie möchten die Aktion „%action_name%“ verwenden.',
+        'action' => 'Fortfahren',
+    ],
+
     'delete_modal' => [
         'title' => 'Soll das Element wirklich gelöscht werden?',
         'content' => 'Diese Aktion kann nicht rückgängig gemacht werden.',

translations/EasyAdminBundle.el.php

@@ -67,6 +67,11 @@
         'action' => 'Συνεχίστε.',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'Θα εφαρμόσετε την ενέργεια "%action_name%".',
+        'action' => 'Συνεχίστε.',
+    ],
+
     'delete_modal' => [
         'title' => 'Θέλετε σίγουρα να διαγράψετε αυτό το αντικείμενο;',
         'content' => 'Αυτή η ενέργεια δεν αναιρείται.',

translations/EasyAdminBundle.en.php

@@ -67,6 +67,11 @@
         'action' => 'Proceed',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'You are going to apply the "%action_name%" action.',
+        'action' => 'Proceed',
+    ],
+
     'delete_modal' => [
         'title' => 'Do you really want to delete this item?',
         'content' => 'There is no undo for this operation.',

translations/EasyAdminBundle.es.php

@@ -67,6 +67,11 @@
         'action' => 'Continuar',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'Desea utilizar la acción "%action_name%".',
+        'action' => 'Continuar',
+    ],
+
     'delete_modal' => [
         'title' => '¿Realmente quieres borrar este elemento?',
         'content' => 'Esta acción no se puede deshacer.',

translations/EasyAdminBundle.eu.php

@@ -67,6 +67,11 @@
         'action' => 'Aurrera',
     ],
 
+    'confirmation_modal' => [
+        'title' => '"%action_name%" ekintza erabili nahi duzu.',
+        'action' => 'Aurrera',
+    ],
+
     'delete_modal' => [
         'title' => 'Ziur zaude elementu hau ezabatu nahi duzula?',
         'content' => 'Ekintza hau ezin da desegin.',

translations/EasyAdminBundle.fa.php

@@ -67,6 +67,11 @@
         'action' => 'ادامه دهید',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'شما قصد دارید اکشن "%action_name%" را اعمال کنید.',
+        'action' => 'ادامه دهید',
+    ],
+
     'delete_modal' => [
         'title' => 'واقعا می‌خواهید این آیتم را حذف کنید؟',
         'content' => 'این عملیات غیرقابل بازگشت است.',

translations/EasyAdminBundle.fi.php

@@ -67,6 +67,11 @@
         // 'action' => '',
     ],
 
+    'confirmation_modal' => [
+        // 'title' => '',
+        // 'action' => '',
+    ],
+
     'delete_modal' => [
         'title' => 'Oletko varma että haluat poistaa tämän?',
         'content' => 'Toimintoa ei voi peruuttaa.',

translations/EasyAdminBundle.fr.php

@@ -67,6 +67,11 @@
         'action' => 'Procéder',
     ],
 
+    'confirmation_modal' => [
+        'title' => 'Vous allez appliquer l\'action "%action_name%".',
+        'action' => 'Procéder',
+    ],
+
     'delete_modal' => [
         'title' => 'Voulez-vous supprimer cet élément ?',
         'content' => 'Cette action est irréversible.',

translations/EasyAdminBundle.gl.php

@@ -67,6 +67,11 @@
         // 'action' => '',
     ],
 
+    'confirmation_modal' => [
+        // 'title' => '',
+        // 'action' => '',
+    ],
+
     'delete_modal' => [
         'title' => '¿Queres realmente borrar este elemento?',
         'content' => 'Esta acción non se pode desfacer.',

translations/EasyAdminBundle.he.php

@@ -67,6 +67,11 @@
         'action' => 'המשך',
     ],
 
+    'confirmation_modal' => [
+        // 'title' => '',
+        // 'action' => '',
+    ],
+
     'delete_modal' => [
         'title' => 'האם הנך בטוח שברצונך למחוק פריט זה?',
         'content' => 'לא ניתן לבטל פעולה זו לאחר ביצועה.',

translations/EasyAdminBundle.hr.php

@@ -67,6 +67,11 @@
         // 'action' => '',
     ],
 
+    'confirmation_modal' => [
+        // 'title' => '',
+        // 'action' => '',
+    ],
+
     'delete_modal' => [
         'title' => 'Jeste li sigurni da želite izbrisati ovu stavku?',
         'content' => 'Izbrisana stavka se ne može povratiti',

translations/EasyAdminBundle.hu.php

@@ -67,6 +67,11 @@
         'action' => 'Folytatás',
     ],
 
+    'confirmation_modal' => [
+        // 'title' => '',
+        'action' => 'Folytatás',
+    ],
+
     'delete_modal' => [
         'title' => 'Biztos benne, hogy törli ezt az elemet?',
         'content' => 'Ez a művelet visszavonhatatlan.',

translations/EasyAdminBundle.hy.php

@@ -67,6 +67,11 @@
         'action' => 'Շարունակել',
     ],
 
+    'confirmation_modal' => [
+        // 'title' => '',
+        'action' => 'Շարունակել',
+    ],
+
     'delete_modal' => [
         'title' => 'Խնդրում ենք հաստատել, Դուք իրոք ցանկանում եք հեռացնել',
         'content' => 'Այս գործողությունը չի կարող չեղարկվել։',