vendor/easycorp/easyadmin-bundle/src/Resources/views/default/new.html.twig line 1

Open in your IDE?
  1. {% form_theme form with easyadmin_config('design.form_theme') only %}
  3. {% set _entity_config = easyadmin_entity(app.request.query.get('entity')) %}
  4. {% trans_default_domain _entity_config.translation_domain %}
  5. {% set _trans_parameters = { '%entity_name%': _entity_config.name|trans, '%entity_label%': _entity_config.label|trans } %}
  7. {% extends _entity_config.templates.layout %}
  9. {% block body_id 'easyadmin-new-' ~ _entity_config.name %}
  10. {% block body_class 'new new-' ~ _entity_config.name|lower %}
  12. {% block content_title %}
  13.     {% apply spaceless %}
  14.         {% set _default_title = 'new.page_title'|trans(_trans_parameters, 'EasyAdminBundle') %}
  15.         {{ _entity_config.new.title is defined ? _entity_config.new.title|trans(_trans_parameters) : _default_title }}
  16.     {% endapply %}
  17. {% endblock %}
  19. {% block content_footer_wrapper '' %}
  21. {% block main %}
  22.     {% block entity_form %}
  23.         {{ form(form) }}
  24.     {% endblock entity_form %}
  25. {% endblock %}
  27. {% block body_javascript %}
  28.     {{ parent() }}
  30.     <script type="text/javascript">
  31.         $(function() {
  32.             $('.new-form').areYouSure({ 'message': '{{ 'form.are_you_sure'|trans({}, 'EasyAdminBundle')|e('js') }}' });
  34.             const entityForm = document.querySelector('form.new-form');
  35.             const formSubmitButton = entityForm.querySelector('button[type="submit"]');
  36.             const inputFieldsSelector = 'input,select,textarea';
  38.             // Adding visual feedback for invalid fields: any ".form-group" with invalid fields
  39.             // receives "has-error" class. The class is removed on click on the ".form-group"
  40.             // itself to support custom/complex fields.
  41.             formSubmitButton.addEventListener('click', function() {
  42.                 entityForm.querySelectorAll(inputFieldsSelector).forEach(function (input) {
  43.                     if (!input.validity.valid) {
  44.                         const formGroup = input.closest('div.form-group');
  46.                         formGroup.classList.add('has-error');
  48.                         formGroup.addEventListener('click', function onFormGroupClick() {
  49.                             formGroup.classList.remove('has-error');
  50.                             formGroup.removeEventListener('click', onFormGroupClick);
  51.                         });
  52.                     }
  53.                 });
  54.             });
  56.             // forms with tabs require some special treatment for errors. The problem
  57.             // is when the field with errors is included in a tab not currently visible.
  58.             // Browser shows this error "An invalid form control with name='...' is not focusable."
  59.             // So, the user clicks on Submit button, the form is not submitted and the error
  60.             // is not displayed. This JavaScript code ensures that each tab shows a badge with
  61.             // the number of errors in it.
  62.             formSubmitButton.addEventListener('click', function() {
  63.                 const formTabPanes = entityForm.querySelectorAll('.tab-pane');
  64.                 if (0 === formTabPanes.length) {
  65.                     return;
  66.                 }
  68.                 let firstNavTabItemWithError = null;
  70.                 formTabPanes.forEach(function (tabPane) {
  71.                     let tabPaneNumErrors = 0;
  72.                     tabPane.querySelectorAll(inputFieldsSelector).forEach(function (input) {
  73.                         if (!input.validity.valid) {
  74.                             tabPaneNumErrors++;
  75.                         }
  76.                     });
  78.                     let navTabItem = entityForm.querySelector('.nav-item a[href="#' + tabPane.id + '"]');
  79.                     let existingErrorBadge = navTabItem.querySelector('span.badge.badge-danger');
  80.                     if (null !== existingErrorBadge) {
  81.                         navTabItem.removeChild(existingErrorBadge);
  82.                     }
  84.                     if (tabPaneNumErrors > 0) {
  85.                         let newErrorBadge = document.createElement('span');
  86.                         newErrorBadge.classList.add('badge', 'badge-danger');
  87.                         newErrorBadge.title = 'form.tab.error_badge_title';
  88.                         newErrorBadge.textContent = tabPaneNumErrors;
  90.                         navTabItem.appendChild(newErrorBadge);
  92.                         if (null === firstNavTabItemWithError) {
  93.                             firstNavTabItemWithError = navTabItem;
  94.                         }
  95.                     }
  96.                 });
  98.                 if (firstNavTabItemWithError) {
  99.                     firstNavTabItemWithError.click();
  100.                 }
  101.             });
  103.             // prevent multiple form submissions to avoid creating duplicated entities
  104.             entityForm.addEventListener('submit', function() {
  105.                 // this timeout is needed to include the disabled button into the submitted form
  106.                 setTimeout(function() {
  107.                     const submitButtons = entityForm.querySelectorAll('[type="submit"]');
  108.                     submitButtons.forEach(function(button) {
  109.                         button.setAttribute('disabled', 'disabled');
  110.                     });
  111.                 }, 1);
  112.             }, false);
  113.         });
  114.     </script>
  116.     {{ include('@EasyAdmin/default/includes/_select2_widget.html.twig') }}
  117. {% endblock %}