SovBundle/Resources/views/tabler/crud/new.html.twig

{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{# @var entity \EasyCorp\Bundle\EasyAdminBundle\Dto\EntityDto #}
{% extends ea.templatePath('layout') %}
{% form_theme new_form with ea.crud.formThemes only %}

{% trans_default_domain ea.i18n.translationDomain %}

{% block body_id 'ea-new-' ~ entity.name ~ '-' ~ entity.primaryKeyValue %}
{% block body_class 'ea-new ea-new-' ~ entity.name %}

{% block configured_head_contents %}
    {{ parent() }}
    {% for htmlContent in new_form.vars.ea_crud_form.assets.headContents %}
        {{ htmlContent|raw }}
    {% endfor %}
{% endblock %}

{% block configured_stylesheets %}
    {{ parent() }}
    {% for css_asset in new_form.vars.ea_crud_form.assets.cssFiles %}
        <link rel="stylesheet" href="{{ asset(css_asset) }}">
    {% endfor %}

    {% for webpack_encore_entry in new_form.vars.ea_crud_form.assets.webpackEncoreEntries %}
        {{ ea_call_function_if_exists('encore_entry_link_tags', webpack_encore_entry) }}
    {% endfor %}
{% endblock %}

{% block configured_javascripts %}
    {{ parent() }}
    {% for js_asset in new_form.vars.ea_crud_form.assets.jsFiles %}
        <script src="{{ asset(js_asset) }}"></script>
    {% endfor %}

    {% for webpack_encore_entry in new_form.vars.ea_crud_form.assets.webpackEncoreEntries %}
        {{ ea_call_function_if_exists('encore_entry_script_tags', webpack_encore_entry) }}
    {% endfor %}
{% endblock %}

{% block content_title %}
   {# {%- apply spaceless -%}
        {% set default_title = ea.crud.defaultPageTitle('new')|trans(ea.i18n.translationParameters, 'EasyAdminBundle') %}
        {{ ea.crud.customPageTitle is null ? default_title|raw : ea.crud.customPageTitle('new')|trans(ea.i18n.translationParameters)|raw }}
    {%- endapply -%}#}
{% endblock %}

{% block content_header_wrapper %}
   {# {% for action in entity.actions %}
        {{ include(action.templatePath, { action: action }, with_context = false) }}
    {% endfor %}#}
{% endblock %}

{% block main %}
    <div class="col-8">
    <div class="card">
        <div class="card-status-top bg-primary"></div>
        <div class="card-header ">
            {% set default_title = ea.crud.defaultPageTitle('new')|trans(ea.i18n.translationParameters, 'EasyAdminBundle') %}

            <h2 class="card-title">{{ ea.crud.customPageTitle is null ? default_title|raw : ea.crud.customPageTitle('new')|trans(ea.i18n.translationParameters)|raw }}</h2>
        </div>
        <div class="card-body">
            <button type="button" data-bs-toggle="modal" data-bs-target="#niche">Launch modal</button>

            <div class="modal-dialog" role="document" id="niche">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis reprehenderit sit tempora totam unde.
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn me-auto" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Save changes</button>
                    </div>
                </div>
            </div>


            {% block new_form %}
                {{ form(new_form) }}
            {% endblock new_form %}
        </div>
    </div>
    </div>
{% endblock %}

{% block body_javascript %}
    {{ parent() }}

   {# <script type="text/javascript">
        $(function () {
            $('.ea-new-form').areYouSure({'message': '{{ 'form.are_you_sure'|trans({}, 'EasyAdminBundle')|e('js') }}'});

            const entityForm = document.querySelector('form.ea-new-form');
            const inputFieldsSelector = 'input,select,textarea';

            // Adding visual feedback for invalid fields: any ".form-group" with invalid fields
            // receives "has-error" class. The class is removed on click on the ".form-group"
            // itself to support custom/complex fields.
            entityForm.addEventListener('submit', function (submitEvent) {
                entityForm.querySelectorAll(inputFieldsSelector).forEach(function (input) {
                    if (!input.validity.valid) {
                        const formGroup = input.closest('div.form-group');

                        formGroup.classList.add('has-error');

                        formGroup.addEventListener('click', function onFormGroupClick() {
                            formGroup.classList.remove('has-error');
                            formGroup.removeEventListener('click', onFormGroupClick);
                        });
                    }
                });

                const eaEvent = new CustomEvent('ea.form.submit', {
                    cancelable: true,
                    detail: {page: 'new', form: entityForm}
                });
                const eaEventResult = document.dispatchEvent(eaEvent);
                if (false === eaEventResult) {
                    submitEvent.preventDefault();
                    submitEvent.stopPropagation();
                }
            });

            // forms with tabs require some special treatment for errors. The problem
            // is when the field with errors is included in a tab not currently visible.
            // Browser shows this error "An invalid form control with name='...' is not focusable."
            // So, the user clicks on Submit button, the form is not submitted and the error
            // is not displayed. This JavaScript code ensures that each tab shows a badge with
            // the number of errors in it.
            entityForm.addEventListener('submit', function () {
                const formTabPanes = entityForm.querySelectorAll('.tab-pane');
                if (0 === formTabPanes.length) {
                    return;
                }

                let firstNavTabItemWithError = null;

                formTabPanes.forEach(function (tabPane) {
                    let tabPaneNumErrors = 0;
                    tabPane.querySelectorAll(inputFieldsSelector).forEach(function (input) {
                        if (!input.validity.valid) {
                            tabPaneNumErrors++;
                        }
                    });

                    let navTabItem = entityForm.querySelector('.nav-item a[href="#' + tabPane.id + '"]');
                    let existingErrorBadge = navTabItem.querySelector('span.badge.badge-danger');
                    if (null !== existingErrorBadge) {
                        navTabItem.removeChild(existingErrorBadge);
                    }

                    if (tabPaneNumErrors > 0) {
                        let newErrorBadge = document.createElement('span');
                        newErrorBadge.classList.add('badge', 'badge-danger');
                        newErrorBadge.title = 'form.tab.error_badge_title';
                        newErrorBadge.textContent = tabPaneNumErrors;

                        navTabItem.appendChild(newErrorBadge);

                        if (null === firstNavTabItemWithError) {
                            firstNavTabItemWithError = navTabItem;
                        }
                    }
                });

                if (firstNavTabItemWithError) {
                    firstNavTabItemWithError.click();
                }
            });

            // prevent multiple form submissions to avoid creating duplicated entities
            entityForm.addEventListener('submit', function () {
                // this timeout is needed to include the disabled button into the submitted form
                setTimeout(function () {
                    const submitButtons = entityForm.querySelectorAll('[type="submit"]');
                    submitButtons.forEach(function (button) {
                        button.setAttribute('disabled', 'disabled');
                    });
                }, 1);
            }, false);
        });
    </script>

    {{ include('@EasyAdmin/crud/includes/_select2_widget.html.twig') }}#}
{% endblock %}