CODEWITHSUNDEEP
symfony4easyadmin
fields
fields

Reputation: 59

Symfony Easyadmin - How to open modal on custom action

I'm trying to create a custom action with the type 'route'. But I want to display a confirmation modal before doing the request. For example, in the list view, I want to have the actions: edit, view and publish. But when the user presses publish, I want a confirmation modal.

This behavior already occurs with the delete action, but I can't seem to understand how to replicate it to a custom action.

How can I do this?

Update

I already tried what was suggested in the answer and am still having issues.

I'm trying to add a custom action in EasyAdmin, but before going to the controller, i need a modal asking for confirmation. It goes to the modal, but after the click, it doesn't do nothing. It works with a "window.confirm", but i can't seem to be able to replicate this behavior with a bootstrap modal. Here's my yaml that sets the action:

- {
     name: 'import',
     label: 'import',
     type: 'route',
     css_class: 'btn btn-secondary',
   }

Here's the code for the modal and jquery:

{% extends '@!EasyAdmin/default/list.html.twig' %}

{% block main %}

   {{parent()}}

   {% block import_action %}

    <div id="modal-import" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h4>{{ 'import_modal.title'|trans(_trans_parameters, 'messages') }}</h4>
                    <p>{{ 'import_modal.content'|trans(_trans_parameters, 'messages') }}</p>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-secondary">
                        <span class="btn-label">{{ 'action.cancel'|trans(_trans_parameters, 'messages') }}</span>
                    </button>

                    <button type="button" data-dismiss="modal" id="modal-delete-button" class="btn btn-secondary">
                        <span class="btn-label">{{ 'action.continue'|trans(_trans_parameters, 'messages') }}</span>
                    </button>

                </div>
            </div>
        </div>
    </div>

{% endblock import_action %}

{% endblock %}

{% block body_javascript %}

{{ parent() }}

<script type="text/javascript">

    $('.action-import').on('click', function(e) {
            e.preventDefault();

            $('#modal-import').modal({ backdrop: true, keyboard: true })
                .on('click', '#modal-import-button', function () {
                    let importForm = $('.action-import');
                    importForm.attr('action');
                    $('.action-import').triggerHandler('click');

                });

        });

</script>

{% endblock body_javascript %}

The preventDefault() stops the event, and then even if i do a forced redirect to the route, it works, but the request doesn't have the necessary parameters.

Upvotes: 0

Views: 5026

Answers (1)

C.Ramp
C.Ramp

Reputation: 268

Do a modal in your twig and check in javascript what is the answer before going or not the the new route.

Upvotes: -1

Related Questions