vendor/sonata-project/admin-bundle/src/Resources/views/CRUD/Association/edit_many_script.html.twig line 1

Open in your IDE?
  1. {#
  3. This file is part of the Sonata package.
  5. (c) Thomas Rabaix <thomas.rabaix@sonata-project.org>
  7. For the full copyright and license information, please view the LICENSE
  8. file that was distributed with this source code.
  10. #}
  13. {#
  15. This code manages the many-to-[one|many] association field popup
  17. #}
  19. {% autoescape false %}
  21. {% set associationadmin = sonata_admin.field_description.associationadmin %}
  23. <!-- edit many association -->
  25. <script type="text/javascript">
  27.     {#
  28.       handle link click in a list :
  29.         - if the parent has an objectId defined then the related input get updated
  30.         - if the parent has NO object then an ajax request is made to refresh the popup
  31.     #}
  33.     var field_dialog_form_list_link_{{ id }} = function(event) {
  34.         initialize_popup_{{ id }}();
  36.         var target = jQuery(this);
  38.         if (target.attr('href').length === 0 || target.attr('href') === '#') {
  39.             return;
  40.         }
  42.         event.preventDefault();
  43.         event.stopPropagation();
  45.         Admin.log('[{{ id }}|field_dialog_form_list_link] handle link click in a list');
  47.         var element = jQuery(this).parents('#field_dialog_{{ id }} .sonata-ba-list-field');
  49.         // the user does not click on a row column
  50.         if (element.length == 0) {
  51.             Admin.log('[{{ id }}|field_dialog_form_list_link] the user does not click on a row column, make ajax call to retrieve inner html');
  52.             // make a recursive call (ie: reset the filter)
  53.             jQuery.ajax({
  54.                 type: 'GET',
  55.                 url: jQuery(this).attr('href'),
  56.                 dataType: 'html',
  57.                 success: function(html) {
  58.                     Admin.log('[{{ id }}|field_dialog_form_list_link] callback success, attach valid js event');
  60.                     field_dialog_content_{{ id }}.html(html);
  61.                     field_dialog_form_list_handle_action_{{ id }}();
  63.                     Admin.shared_setup(field_dialog_{{ id }});
  64.                 }
  65.             });
  67.             return;
  68.         }
  70.         Admin.log('[{{ id }}|field_dialog_form_list_link] the user select one element, update input and hide the modal');
  72.         jQuery('#{{ id }}').val(element.attr('objectId'));
  73.         jQuery('#{{ id }}').trigger('change');
  75.         field_dialog_{{ id }}.modal('hide');
  76.     };
  78.     // this function handle action on the modal list when inside a selected list
  79.     var field_dialog_form_list_handle_action_{{ id }}  =  function() {
  80.         Admin.log('[{{ id }}|field_dialog_form_list_handle_action] attaching valid js event');
  82.         // capture the submit event to make an ajax call, ie : POST data to the
  83.         // related create admin
  84.         jQuery('a', field_dialog_{{ id }}).on('click', field_dialog_form_list_link_{{ id }});
  85.         jQuery('form', field_dialog_{{ id }}).on('submit', function(event) {
  86.             event.preventDefault();
  88.             var form = jQuery(this);
  90.             Admin.log('[{{ id }}|field_dialog_form_list_handle_action] catching submit event, sending ajax request');
  92.             jQuery(form).ajaxSubmit({
  93.                 type: form.attr('method'),
  94.                 url: form.attr('action'),
  95.                 dataType: 'html',
  96.                 data: {_xml_http_request: true},
  97.                 success: function(html) {
  99.                     Admin.log('[{{ id }}|field_dialog_form_list_handle_action] form submit success, restoring event');
  101.                     field_dialog_content_{{ id }}.html(html);
  102.                     field_dialog_form_list_handle_action_{{ id }}();
  104.                     Admin.shared_setup(field_dialog_{{ id }});
  105.                 }
  106.             });
  107.         });
  108.     };
  110.     // handle the list link
  111.     var field_dialog_form_list_{{ id }} = function(event) {
  113.         initialize_popup_{{ id }}();
  115.         event.preventDefault();
  116.         event.stopPropagation();
  118.         Admin.log('[{{ id }}|field_dialog_form_list] open the list modal');
  120.         var a = jQuery(this);
  122.         field_dialog_content_{{ id }}.html('');
  124.         // retrieve the form element from the related admin generator
  125.         jQuery.ajax({
  126.             url: a.attr('href'),
  127.             dataType: 'html',
  128.             success: function(html) {
  130.                 Admin.log('[{{ id }}|field_dialog_form_list] retrieving the list content');
  132.                 // populate the popup container
  133.                 field_dialog_content_{{ id }}.html(html);
  134.                 {% if associationadmin.label is not empty %}
  135.                     field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  136.                 {% endif %}
  138.                 Admin.shared_setup(field_dialog_{{ id }});
  140.                 field_dialog_form_list_handle_action_{{ id }}();
  142.                 // open the dialog in modal mode
  143.                 field_dialog_{{ id }}.modal();
  145.                 Admin.setup_list_modal(field_dialog_{{ id }});
  146.             }
  147.         });
  148.     };
  150.     // handle the add link
  151.     var field_dialog_form_add_{{ id }} = function(event) {
  152.         initialize_popup_{{ id }}();
  154.         event.preventDefault();
  155.         event.stopPropagation();
  157.         var a = jQuery(this);
  159.         field_dialog_content_{{ id }}.html('');
  161.         Admin.log('[{{ id }}|field_dialog_form_add] add link action');
  163.         // retrieve the form element from the related admin generator
  164.         jQuery.ajax({
  165.             url: a.attr('href'),
  166.             dataType: 'html',
  167.             success: function(html) {
  169.                 Admin.log('[{{ id }}|field_dialog_form_add] ajax success', field_dialog_{{ id }});
  171.                 // populate the popup container
  172.                 field_dialog_content_{{ id }}.html(html);
  173.                 {% if associationadmin.label is not empty %}
  174.                     field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  175.                 {% endif %}
  177.                 Admin.shared_setup(field_dialog_{{ id }});
  179.                 // capture the submit event to make an ajax call, ie : POST data to the
  180.                 // related create admin
  181.                 jQuery(document).on('click','#field_dialog_{{ id }} a', field_dialog_form_action_{{ id }});
  182.                 jQuery('form', field_dialog_{{ id }}).on('submit', field_dialog_form_action_{{ id }});
  184.                 // open the dialog in modal mode
  185.                 field_dialog_{{ id }}.modal();
  187.                 Admin.setup_list_modal(field_dialog_{{ id }});
  188.             }
  189.         });
  190.     };
  192.     // handle the edit link
  193.     var field_dialog_form_edit_{{ id }} = function(event) {
  194.         initialize_popup_{{ id }}();
  196.         event.preventDefault();
  197.         event.stopPropagation();
  199.         var a = jQuery(this);
  201.         field_dialog_content_{{ id }}.html('');
  203.         Admin.log('[{{ id }}|field_dialog_form_edit] edit link action');
  205.         // retrieve the form element from the related admin generator
  206.         jQuery.ajax({
  207.             url: a.attr('href'),
  208.             dataType: 'html',
  209.             success: function(html) {
  211.                 Admin.log('[{{ id }}|field_dialog_form_edit] ajax success', field_dialog_{{ id }});
  213.                 // populate the popup container
  214.                 field_dialog_content_{{ id }}.html(html);
  215.                 {% if associationadmin.label is not empty %}
  216.                     field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  217.                 {% endif %}
  219.                 Admin.shared_setup(field_dialog_{{ id }});
  221.                 // capture the submit event to make an ajax call, ie : POST data to the
  222.                 // related create admin
  223.                 jQuery(document).on('click','#field_dialog_{{ id }} a', field_dialog_form_action_{{ id }});
  224.                 jQuery('form', field_dialog_{{ id }}).on('submit', field_dialog_form_action_{{ id }});
  226.                 // open the dialog in modal mode
  227.                 field_dialog_{{ id }}.modal();
  229.                 Admin.setup_list_modal(field_dialog_{{ id }});
  230.             }
  231.         });
  232.     };
  234.     // handle the post data
  235.     var field_dialog_form_action_{{ id }} = function(event) {
  237.         var element = jQuery(this);
  239.         // return if the link is an anchor inside the same page
  240.         if (
  241.             this.nodeName === 'A'
  242.             && (
  243.                 element.attr('href').length === 0
  244.                 || element.attr('href')[0] === '#'
  245.                 || element.attr('href').substr(0, 11) === 'javascript:'
  246.             )
  247.         ) {
  248.             Admin.log('[{{ id }}|field_dialog_form_action] element is an anchor or a script, skipping action', this);
  249.             return;
  250.         }
  252.         event.preventDefault();
  253.         event.stopPropagation();
  255.         Admin.log('[{{ id }}|field_dialog_form_action] action catch', this);
  257.         initialize_popup_{{ id }}();
  259.         if (this.nodeName == 'FORM') {
  260.             var url  = element.attr('action');
  261.             var type = element.attr('method');
  262.         } else if (this.nodeName == 'A') {
  263.             var url  = element.attr('href');
  264.             var type = 'GET';
  265.         } else {
  266.             alert('unexpected element : @' + this.nodeName + '@');
  267.             return;
  268.         }
  270.         if (element.hasClass('sonata-ba-action')) {
  271.             Admin.log('[{{ id }}|field_dialog_form_action] reserved action stop catch all events');
  272.             return;
  273.         }
  275.         var data = {
  276.             _xml_http_request: true
  277.         }
  279.         var form = jQuery(this);
  281.         Admin.log('[{{ id }}|field_dialog_form_action] execute ajax call');
  283.         var oldErrorMessages = jQuery(field_dialog_content_{{ id }}).find('div.alert-danger');
  284.         // Remove old error messages.
  285.         if (oldErrorMessages.length > 0) {
  286.           oldErrorMessages.remove();
  287.         }
  289.         // the ajax post
  290.         jQuery(form).ajaxSubmit({
  291.             url: url,
  292.             type: type,
  293.             headers: {
  294.                 Accept: 'application/json'
  295.             },
  296.             data: data,
  297.             success: function(data) {
  298.                 Admin.log('[{{ id }}|field_dialog_form_action] ajax success');
  300.                 // if the crud action return ok, then the element has been added
  301.                 // so the widget container must be refresh with the last option available
  302.                 if (typeof data != 'string' && data.result == 'ok') {
  303.                     field_dialog_{{ id }}.modal('hide');
  305.                     {% if sonata_admin.edit == 'list' %}
  306.                         {#
  307.                            in this case we update the hidden input, and call the change event to
  308.                            retrieve the post information
  309.                         #}
  310.                         jQuery('#{{ id }}').val(data.objectId);
  311.                         jQuery('#{{ id }}').change();
  313.                     {% else %}
  315.                         // reload the form element
  316.                         jQuery('#field_widget_{{ id }}').closest('form').ajaxSubmit({
  317.                             url: '{{ path('sonata_admin_retrieve_form_element', {
  318.                                 '_sonata_admin': sonata_admin.admin.root.baseCodeRoute,
  319.                                 'elementId': id,
  320.                                 'subclass': sonata_admin.admin.hasActiveSubClass() ? sonata_admin.admin.getActiveSubclassCode() : null,
  321.                                 'objectId': sonata_admin.admin.root.id(sonata_admin.admin.root.subject),
  322.                                 'uniqid': sonata_admin.admin.root.uniqid,
  323.                             } + (
  324.                                 sonata_admin.admin.root.hasRequest()
  325.                                 ? sonata_admin.admin.root.request.attributes.get('_route_params', {})
  326.                                 : {}
  327.                             ) + app.request.query.all|default({})
  328.                             ) }}',
  329.                             data: {_xml_http_request: true },
  330.                             dataType: 'html',
  331.                             type: 'POST',
  332.                             success: function(html) {
  333.                                 jQuery('#field_container_{{ id }}').replaceWith(html);
  334.                                 var newElement = jQuery('#{{ id }} [value="' + data.objectId + '"]');
  335.                                 if (newElement.is("input")) {
  336.                                     newElement.attr('checked', 'checked');
  337.                                 } else {
  338.                                     newElement.attr('selected', 'selected');
  339.                                 }
  341.                                 jQuery('#field_container_{{ id }}').trigger('sonata-admin-append-form-element');
  342.                             }
  343.                         });
  345.                     {% endif %}
  347.                     return;
  348.                 }
  350.                 // otherwise, display form error
  351.                 field_dialog_content_{{ id }}.html(data);
  353.                 Admin.shared_setup(field_dialog_{{ id }});
  355.                 // reattach the event
  356.                 jQuery('form', field_dialog_{{ id }}).submit(field_dialog_form_action_{{ id }});
  357.             },
  358.             error: function(xhr) {
  359.                 var content = '';
  361.                 if ('application/json' === xhr.getResponseHeader('Content-Type')) {
  362.                     var jsonContent = JSON.parse(xhr.responseText);
  364.                     if (jsonContent.title) {
  365.                         content += '<div class="alert alert-danger alert-dismissable">'
  366.                             + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
  367.                             + jsonContent.title
  368.                             + '</div>';
  369.                     }
  371.                     if (!jsonContent.violations) {
  372.                         return;
  373.                     }
  375.                     event.currentTarget.querySelectorAll('.help-block.sonata-ba-field-error-messages').forEach((element) => {
  376.                         element.remove();
  377.                     });
  379.                     event.currentTarget.querySelectorAll('.has-error').forEach((element) => {
  380.                         element.classList.remove('has-error');
  381.                     });
  383.                     event.currentTarget.querySelectorAll('button').forEach((element) => {
  384.                         element.removeAttribute('disabled');
  385.                     });
  387.                     jsonContent.violations.forEach((violation) => {
  388.                         const field = event.currentTarget.querySelector(`[name="${violation.propertyPath}"]`);
  390.                         if (!field) {
  391.                             content += '<div class="alert alert-danger alert-dismissable">'
  392.                                 + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
  393.                                 + violation.title
  394.                                 + '</div>';
  396.                             return;
  397.                         }
  399.                         const formGroup = field.closest('.form-group');
  401.                         let errorList = formGroup.querySelector(
  402.                             '.help-block.sonata-ba-field-error-messages .list-unstyled'
  403.                         );
  405.                         if (!errorList) {
  406.                             const errorWrapper = document.createElement('div');
  407.                             errorWrapper.classList.add('help-block');
  408.                             errorWrapper.classList.add('sonata-ba-field-error-messages');
  410.                             errorList = document.createElement('ul');
  411.                             errorList.classList.add('list-unstyled');
  413.                             formGroup.classList.add('has-error');
  415.                             errorWrapper.appendChild(errorList);
  416.                             formGroup.appendChild(errorWrapper);
  417.                         }
  419.                         const errorItem = document.createElement('li');
  420.                         errorItem.innerHTML = `<i class="fas fa-exclamation-circle" aria-hidden="true"></i> ${violation.title}`;
  422.                         errorList.appendChild(errorItem);
  423.                     });
  424.                 } else {
  425.                     content += xhr.responseText;
  426.                 }
  428.                 // Display the error.
  429.                 field_dialog_content_{{ id }}.prepend(content);
  431.                 // Reset the submit buttons.
  432.                 $(form).find('button[type="submit"]').removeAttr('disabled');
  433.             }
  434.         });
  436.         return false;
  437.     };
  439.     var field_dialog_{{ id }}         = false;
  440.     var field_dialog_content_{{ id }} = false;
  441.     var field_dialog_title_{{ id }}   = false;
  443.     function initialize_popup_{{ id }}() {
  444.         // initialize component
  445.         if (!field_dialog_{{ id }}) {
  446.             field_dialog_{{ id }}         = jQuery("#field_dialog_{{ id }}");
  447.             field_dialog_content_{{ id }} = jQuery(".modal-body", "#field_dialog_{{ id }}");
  448.             field_dialog_title_{{ id }}   = jQuery(".modal-title", "#field_dialog_{{ id }}");
  450.             // move the dialog as a child of the root element, nested form breaks html ...
  451.             jQuery(document.body).append(field_dialog_{{ id }});
  453.             Admin.log('[{{ id }}|field_dialog] move dialog container as a document child');
  454.         }
  455.     }
  457.     {#
  458.         This code is used to define the "add" popup
  459.     #}
  460.     // this function initializes the popup
  461.     // this can be only done this way as popup can be cascaded
  462.     function start_field_dialog_form_add_{{ id }}(link) {
  464.         // remove the html event
  465.         link.onclick = null;
  467.         initialize_popup_{{ id }}();
  469.         // add the jQuery event to the a element
  470.         jQuery(link)
  471.             .click(field_dialog_form_add_{{ id }})
  472.             .trigger('click')
  473.         ;
  475.         return false;
  476.     }
  478.     {#
  479.         This code is used to define the "edit" popup
  480.     #}
  481.     // this function initializes the popup
  482.     // this can only be done this way as popup can be cascaded
  483.     function start_field_dialog_form_edit_{{ id }}(link) {
  485.         // remove the html event
  486.         link.onclick = null;
  488.         initialize_popup_{{ id }}();
  490.         // add the jQuery event to the a element
  491.         jQuery(link)
  492.             .click(field_dialog_form_edit_{{ id }})
  493.             .trigger('click')
  494.         ;
  496.         return false;
  497.     }
  499.     if (field_dialog_{{ id }}) {
  500.         Admin.shared_setup(field_dialog_{{ id }});
  501.     }
  503.     {% if sonata_admin.edit == 'list' %}
  504.         {#
  505.             This code is used to defined the "list" popup
  506.         #}
  507.         // this function initializes the popup
  508.         // this can be only done this way as popup can be cascaded
  509.         function start_field_dialog_form_list_{{ id }}(link) {
  511.             link.onclick = null;
  513.             initialize_popup_{{ id }}();
  515.             // add the jQuery event to the a element
  516.             jQuery(link)
  517.                 .click(field_dialog_form_list_{{ id }})
  518.                 .trigger('click')
  519.             ;
  521.             return false;
  522.         }
  524.         function remove_selected_element_{{ id }}(link) {
  526.             link.onclick = null;
  528.             jQuery(link)
  529.                 .click(field_remove_element_{{ id }})
  530.                 .trigger('click')
  531.             ;
  533.             return false;
  534.         }
  536.         function field_remove_element_{{ id }}(event) {
  537.             event.preventDefault();
  539.             if (jQuery('#{{ id }} option').get(0)) {
  540.                 jQuery('#{{ id }}').attr('selectedIndex', '-1').children("option:selected").attr("selected", false);
  541.             }
  543.             jQuery('#{{ id }}').val('');
  544.             jQuery('#{{ id }}').trigger('change');
  546.             return false;
  547.         }
  548.         {#
  549.           attach onchange event on the input
  550.         #}
  552.         // update the label
  553.         jQuery('#{{ id }}').on('change', function(event) {
  555.             Admin.log('[{{ id }}|on:change] update the label');
  557.             var objectId = jQuery(this).val();
  559.             // Skip short object information call if object is missing.
  560.             if (undefined === objectId || null === objectId || '' === objectId) {
  561.                 jQuery('#field_widget_{{ id }}').html('{{ 'short_object_description_placeholder'|trans({}, 'SonataAdminBundle') }}');
  563.                 {% if btn_edit %}
  564.                     jQuery('#field_actions_{{ id }} a.btn-warning').addClass('hidden');
  565.                 {% endif %}
  567.                 return;
  568.             }
  570.             jQuery('#field_widget_{{ id }}').html("<span><img src=\"{{ asset('bundles/sonataadmin/images/ajax-loader.gif') }}\" style=\"vertical-align: middle; margin-right: 10px\"/>{{ 'loading_information'|trans([], 'SonataAdminBundle') }}</span>");
  571.             jQuery.ajax({
  572.                 type: 'GET',
  573.                 url: '{{ path('sonata_admin_short_object_information',{
  574.                     '_sonata_admin': associationadmin.baseCodeRoute,
  575.                     'objectId': 'OBJECT_ID',
  576.                     'uniqid': associationadmin.uniqid,
  577.                     'linkParameters': sonata_admin.field_description.option('link_parameters', {})
  578.                 } + (
  579.                     associationadmin.hasRequest()
  580.                     ? associationadmin.request.attributes.get('_route_params', {})
  581.                     : {}
  582.                 ) + app.request.query.all|default({})
  583.                 )}}'.replace('OBJECT_ID', objectId),
  584.                 dataType: 'html',
  585.                 success: function(html) {
  586.                     jQuery('#field_widget_{{ id }}').html(html);
  587.                 }
  588.             });
  590.             {% if btn_edit %}
  591.                 var edit_button_url = '{{
  592.                     associationadmin.generateUrl('edit', {(associationadmin.idParameter) : 'OBJECT_ID'})
  593.                 }}'.replace('OBJECT_ID', objectId);
  595.                 jQuery('#field_actions_{{ id }} a.btn-warning').removeClass('hidden').attr('href', edit_button_url);
  596.             {% endif %}
  597.         });
  599.     {% endif %}
  602. </script>
  603. <!-- / edit many association -->
  605. {% endautoescape %}