templates/bundles/SonataAdminBundle/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.             {# Aquí se verifica los save-field-db y guardarlos en sus input correspondientes #}
  76.             // FIXME hay que pasar un data-class_inputs pasar saber que items cambiar y no cambiar todos los items similares de todo el admin.
  77.             element.parents('tr').find('.save-field-db').each(function (index, value) {
  78.                 reloadModelListType(value);
  79.             });
  81.             field_dialog_{{ id }}.modal('hide');
  82.         };
  84.         // this function handle action on the modal list when inside a selected list
  85.         var field_dialog_form_list_handle_action_{{ id }}  =  function() {
  86.             Admin.log('[{{ id }}|field_dialog_form_list_handle_action] attaching valid js event');
  88.             // capture the submit event to make an ajax call, ie : POST data to the
  89.             // related create admin
  90.             jQuery('a', field_dialog_{{ id }}).on('click', field_dialog_form_list_link_{{ id }});
  91.             jQuery('form', field_dialog_{{ id }}).on('submit', function(event) {
  92.                 event.preventDefault();
  94.                 var form = jQuery(this);
  96.                 Admin.log('[{{ id }}|field_dialog_form_list_handle_action] catching submit event, sending ajax request');
  98.                 jQuery(form).ajaxSubmit({
  99.                     type: form.attr('method'),
  100.                     url: form.attr('action'),
  101.                     dataType: 'html',
  102.                     data: {_xml_http_request: true},
  103.                     success: function(html) {
  105.                         Admin.log('[{{ id }}|field_dialog_form_list_handle_action] form submit success, restoring event');
  107.                         field_dialog_content_{{ id }}.html(html);
  108.                         field_dialog_form_list_handle_action_{{ id }}();
  110.                         Admin.shared_setup(field_dialog_{{ id }});
  112.                         loadNavPrometeo(field_dialog_content_{{ id }});
  113.                     }
  114.                 });
  115.             });
  116.         };
  118.         // handle the list link
  119.         var field_dialog_form_list_{{ id }} = function(event) {
  121.             initialize_popup_{{ id }}();
  123.             event.preventDefault();
  124.             event.stopPropagation();
  126.             Admin.log('[{{ id }}|field_dialog_form_list] open the list modal');
  128.             var a = jQuery(this);
  130.             field_dialog_content_{{ id }}.html('');
  132.             // retrieve the form element from the related admin generator
  133.             jQuery.ajax({
  134.                 url: a.attr('href'),
  135.                 dataType: 'html',
  136.                 success: function(html) {
  138.                     Admin.log('[{{ id }}|field_dialog_form_list] retrieving the list content');
  140.                     // populate the popup container
  141.                     field_dialog_content_{{ id }}.html(html);
  142.                     {% if associationadmin.label is not empty %}
  143.                     field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  144.                     {% endif %}
  146.                     Admin.shared_setup(field_dialog_{{ id }});
  148.                     field_dialog_form_list_handle_action_{{ id }}();
  150.                     // open the dialog in modal mode
  151.                     field_dialog_{{ id }}.modal();
  153.                     Admin.setup_list_modal(field_dialog_{{ id }});
  155.                     loadNavPrometeo(field_dialog_content_{{ id }});
  156.                 }
  157.             });
  158.         };
  160.         // handle the add link
  161.         var field_dialog_form_add_{{ id }} = function(event) {
  162.             initialize_popup_{{ id }}();
  164.             event.preventDefault();
  165.             event.stopPropagation();
  167.             var a = jQuery(this);
  169.             field_dialog_content_{{ id }}.html('');
  171.             Admin.log('[{{ id }}|field_dialog_form_add] add link action');
  173.             // retrieve the form element from the related admin generator
  174.             jQuery.ajax({
  175.                 url: a.attr('href'),
  176.                 dataType: 'html',
  177.                 success: function(html) {
  179.                     Admin.log('[{{ id }}|field_dialog_form_add] ajax success', field_dialog_{{ id }});
  181.                     // populate the popup container
  182.                     field_dialog_content_{{ id }}.html(html);
  183.                     {% if associationadmin.label is not empty %}
  184.                     field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  185.                     {% endif %}
  187.                     Admin.shared_setup(field_dialog_{{ id }});
  189.                     // capture the submit event to make an ajax call, ie : POST data to the
  190.                     // related create admin
  191.                     jQuery(document).on('click','#field_dialog_{{ id }} a', field_dialog_form_action_{{ id }});
  192.                     jQuery('form', field_dialog_{{ id }}).on('submit', field_dialog_form_action_{{ id }});
  194.                     // open the dialog in modal mode
  195.                     field_dialog_{{ id }}.modal();
  197.                     Admin.setup_list_modal(field_dialog_{{ id }});
  198.                 }
  199.             });
  200.         };
  202.         // handle the edit link
  203.         var field_dialog_form_edit_{{ id }} = function(event) {
  204.             initialize_popup_{{ id }}();
  206.             event.preventDefault();
  207.             event.stopPropagation();
  209.             var a = jQuery(this);
  211.             field_dialog_content_{{ id }}.html('');
  213.             Admin.log('[{{ id }}|field_dialog_form_edit] edit link action');
  215.             // retrieve the form element from the related admin generator
  216.             jQuery.ajax({
  217.                 url: a.attr('href'),
  218.                 dataType: 'html',
  219.                 success: function(html) {
  221.                     Admin.log('[{{ id }}|field_dialog_form_edit] ajax success', field_dialog_{{ id }});
  223.                     // populate the popup container
  224.                     field_dialog_content_{{ id }}.html(html);
  225.                     {% if associationadmin.label is not empty %}
  226.                     field_dialog_title_{{ id }}.html("{{ associationadmin.label|trans({}, associationadmin.translationdomain) }}");
  227.                     {% endif %}
  229.                     Admin.shared_setup(field_dialog_{{ id }});
  231.                     // capture the submit event to make an ajax call, ie : POST data to the
  232.                     // related create admin
  233.                     jQuery(document).on('click','#field_dialog_{{ id }} a', field_dialog_form_action_{{ id }});
  234.                     jQuery('form', field_dialog_{{ id }}).on('submit', field_dialog_form_action_{{ id }});
  236.                     // open the dialog in modal mode
  237.                     field_dialog_{{ id }}.modal();
  239.                     Admin.setup_list_modal(field_dialog_{{ id }});
  240.                 }
  241.             });
  242.         };
  244.         // handle the post data
  245.         var field_dialog_form_action_{{ id }} = function(event) {
  247.             var element = jQuery(this);
  249.             // return if the link is an anchor inside the same page
  250.             if (
  251.                 this.nodeName === 'A'
  252.                 && (
  253.                     element.attr('href').length === 0
  254.                     || element.attr('href')[0] === '#'
  255.                     || element.attr('href').substr(0, 11) === 'javascript:'
  256.                 )
  257.             ) {
  258.                 Admin.log('[{{ id }}|field_dialog_form_action] element is an anchor or a script, skipping action', this);
  259.                 return;
  260.             }
  262.             event.preventDefault();
  263.             event.stopPropagation();
  265.             Admin.log('[{{ id }}|field_dialog_form_action] action catch', this);
  267.             initialize_popup_{{ id }}();
  269.             if (this.nodeName == 'FORM') {
  270.                 var url  = element.attr('action');
  271.                 var type = element.attr('method');
  272.             } else if (this.nodeName == 'A') {
  273.                 var url  = element.attr('href');
  274.                 var type = 'GET';
  275.             } else {
  276.                 alert('unexpected element : @' + this.nodeName + '@');
  277.                 return;
  278.             }
  280.             if (element.hasClass('sonata-ba-action')) {
  281.                 Admin.log('[{{ id }}|field_dialog_form_action] reserved action stop catch all events');
  282.                 return;
  283.             }
  285.             var data = {
  286.                 _xml_http_request: true
  287.             }
  289.             var form = jQuery(this);
  291.             Admin.log('[{{ id }}|field_dialog_form_action] execute ajax call');
  293.             var oldErrorMessages = jQuery(field_dialog_content_{{ id }}).find('div.alert-danger');
  294.             // Remove old error messages.
  295.             if (oldErrorMessages.length > 0) {
  296.                 oldErrorMessages.remove();
  297.             }
  299.             $(this).find('.save-field-db').each(function (index, value) {
  300.                 if($(value).data("type") === "IMG")
  301.                 {
  302.                     $(value).data("value", $(value).find("+ a.view-imagen").attr("href"))
  303.                 }
  304.                 else {
  305.                     $(value).data("value", $(value).val());
  306.                 }
  307.                 reloadModelListType(value);
  308.             });
  312.             // the ajax post
  313.             jQuery(form).ajaxSubmit({
  314.                 url: url,
  315.                 type: type,
  316.                 headers: {
  317.                     Accept: 'application/json'
  318.                 },
  319.                 data: data,
  320.                 success: function(data) {
  321.                     Admin.log('[{{ id }}|field_dialog_form_action] ajax success');
  323.                     // if the crud action return ok, then the element has been added
  324.                     // so the widget container must be refresh with the last option available
  325.                     if (typeof data != 'string' && data.result == 'ok') {
  326.                         field_dialog_{{ id }}.modal('hide');
  328.                         {% if sonata_admin.edit == 'list' %}
  329.                         {#
  330.                         in this case we update the hidden input, and call the change event to
  331.                         retrieve the post information
  332.                         #}
  333.                         jQuery('#{{ id }}').val(data.objectId);
  334.                         jQuery('#{{ id }}').change();
  336.                         {% else %}
  338.                         // reload the form element
  339.                         jQuery('#field_widget_{{ id }}').closest('form').ajaxSubmit({
  340.                             url: '{{ path('sonata_admin_retrieve_form_element', {
  341.                                 '_sonata_admin': sonata_admin.admin.root.baseCodeRoute,
  342.                                 'elementId': id,
  343.                                 'subclass': sonata_admin.admin.hasActiveSubClass() ? sonata_admin.admin.getActiveSubclassCode() : null,
  344.                                 'objectId': sonata_admin.admin.root.id(sonata_admin.admin.root.subject),
  345.                                 'uniqid': sonata_admin.admin.root.uniqid,
  346.                             } + (
  347.                                 sonata_admin.admin.root.hasRequest()
  348.                                 ? sonata_admin.admin.root.request.attributes.get('_route_params', {})
  349.                                 : {}
  350.                             ) + app.request.query.all|default({})
  351.                             ) }}',
  352.                             data: {_xml_http_request: true },
  353.                             dataType: 'html',
  354.                             type: 'POST',
  355.                             success: function(html) {
  356.                                 jQuery('#field_container_{{ id }}').replaceWith(html);
  357.                                 var newElement = jQuery('#{{ id }} [value="' + data.objectId + '"]');
  358.                                 if (newElement.is("input")) {
  359.                                     newElement.attr('checked', 'checked');
  360.                                 } else {
  361.                                     newElement.attr('selected', 'selected');
  362.                                 }
  364.                                 jQuery('#field_container_{{ id }}').trigger('sonata-admin-append-form-element');
  365.                             }
  366.                         });
  368.                         {% endif %}
  370.                         return;
  371.                     }
  373.                     // otherwise, display form error
  374.                     field_dialog_content_{{ id }}.html(data);
  376.                     Admin.shared_setup(field_dialog_{{ id }});
  378.                     // reattach the event
  379.                     jQuery('form', field_dialog_{{ id }}).submit(field_dialog_form_action_{{ id }});
  380.                 },
  381.                 error: function(xhr) {
  382.                     var content = '';
  384.                     if ('application/json' === xhr.getResponseHeader('Content-Type')) {
  385.                         var jsonContent = JSON.parse(xhr.responseText);
  387.                         if (jsonContent.message) {
  388.                             content += '<div class="alert alert-danger alert-dismissable">'
  389.                                 + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
  390.                                 + jsonContent.message
  391.                                 + '</div>';
  392.                         }
  394.                         if (jsonContent.errors) {
  395.                             for (error of jsonContent.errors) {
  396.                                 content += '<div class="alert alert-danger alert-dismissable">'
  397.                                     + '<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
  398.                                     + error
  399.                                     + '</div>';
  400.                             }
  401.                         }
  402.                     } else {
  403.                         content += xhr.responseText;
  404.                     }
  406.                     // Display the error.
  407.                     field_dialog_content_{{ id }}.prepend(content);
  409.                     // Reset the submit buttons.
  410.                     $(form).find('button[type="submit"]').removeAttr('disabled');
  411.                 }
  412.             });
  414.             return false;
  415.         };
  417.         var field_dialog_{{ id }}         = false;
  418.         var field_dialog_content_{{ id }} = false;
  419.         var field_dialog_title_{{ id }}   = false;
  421.         function initialize_popup_{{ id }}() {
  422.             // initialize component
  423.             if (!field_dialog_{{ id }}) {
  424.                 field_dialog_{{ id }}         = jQuery("#field_dialog_{{ id }}");
  425.                 field_dialog_content_{{ id }} = jQuery(".modal-body", "#field_dialog_{{ id }}");
  426.                 field_dialog_title_{{ id }}   = jQuery(".modal-title", "#field_dialog_{{ id }}");
  428.                 // move the dialog as a child of the root element, nested form breaks html ...
  429.                 jQuery(document.body).append(field_dialog_{{ id }});
  431.                 Admin.log('[{{ id }}|field_dialog] move dialog container as a document child');
  432.             }
  433.         }
  435.         {#
  436.         This code is used to define the "add" popup
  437.         #}
  438.         // this function initializes the popup
  439.         // this can be only done this way as popup can be cascaded
  440.         function start_field_dialog_form_add_{{ id }}(link) {
  442.             // remove the html event
  443.             link.onclick = null;
  445.             initialize_popup_{{ id }}();
  447.             // add the jQuery event to the a element
  448.             jQuery(link)
  449.                 .click(field_dialog_form_add_{{ id }})
  450.                 .trigger('click')
  451.             ;
  453.             return false;
  454.         }
  456.         {#
  457.         This code is used to define the "edit" popup
  458.         #}
  459.         // this function initializes the popup
  460.         // this can only be done this way as popup can be cascaded
  461.         function start_field_dialog_form_edit_{{ id }}(link) {
  463.             // remove the html event
  464.             link.onclick = null;
  466.             initialize_popup_{{ id }}();
  468.             // add the jQuery event to the a element
  469.             jQuery(link)
  470.                 .click(field_dialog_form_edit_{{ id }})
  471.                 .trigger('click')
  472.             ;
  474.             return false;
  475.         }
  477.         if (field_dialog_{{ id }}) {
  478.             Admin.shared_setup(field_dialog_{{ id }});
  479.         }
  481.         {% if sonata_admin.edit == 'list' %}
  482.         {#
  483.         This code is used to defined the "list" popup
  484.         #}
  485.         // this function initializes the popup
  486.         // this can be only done this way as popup can be cascaded
  487.         function start_field_dialog_form_list_{{ id }}(link) {
  488.             link.onclick = null;
  490.             initialize_popup_{{ id }}();
  492.             // add the jQuery event to the a element
  493.             jQuery(link)
  494.                 .click(field_dialog_form_list_{{ id }})
  495.                 .trigger('click')
  496.             ;
  498.             return false;
  499.         }
  501.         function remove_selected_element_{{ id }}(link) {
  503.             link.onclick = null;
  505.             jQuery(link)
  506.                 .click(field_remove_element_{{ id }})
  507.                 .trigger('click')
  508.             ;
  510.             return false;
  511.         }
  513.         function field_remove_element_{{ id }}(event) {
  514.             event.preventDefault();
  516.             if (jQuery('#{{ id }} option').get(0)) {
  517.                 jQuery('#{{ id }}').attr('selectedIndex', '-1').children("option:selected").attr("selected", false);
  518.             }
  520.             jQuery('#{{ id }}').val('');
  521.             jQuery('#{{ id }}').trigger('change');
  523.             return false;
  524.         }
  525.         {#
  526.         attach onchange event on the input
  527.         #}
  529.         // update the label
  530.         jQuery('#{{ id }}').on('change', function(event) {
  532.             Admin.log('[{{ id }}|on:change] update the label');
  534.             var objectId = jQuery(this).val();
  536.             // Skip short object information call if object is missing.
  537.             if (undefined === objectId || null === objectId || '' === objectId) {
  538.                 jQuery('#field_widget_{{ id }}').html('{{ 'short_object_description_placeholder'|trans({}, 'SonataAdminBundle') }}');
  540.                 {% if btn_edit %}
  541.                 jQuery('#field_actions_{{ id }} a.btn-warning').addClass('hidden');
  542.                 {% endif %}
  544.                 return;
  545.             }
  547.             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>");
  548.             jQuery.ajax({
  549.                 type: 'GET',
  550.                 url: '{{ path('sonata_admin_short_object_information',{
  551.                     '_sonata_admin': associationadmin.baseCodeRoute,
  552.                     'objectId': 'OBJECT_ID',
  553.                     'uniqid': associationadmin.uniqid,
  554.                     'linkParameters': sonata_admin.field_description.option('link_parameters', {})
  555.                 } + (
  556.                     associationadmin.hasRequest()
  557.                     ? associationadmin.request.attributes.get('_route_params', {})
  558.                     : {}
  559.                 ) + app.request.query.all|default({})
  560.                 )}}'.replace('OBJECT_ID', objectId),
  561.                 dataType: 'html',
  562.                 success: function(html) {
  563.                     jQuery('#field_widget_{{ id }}').html(html);
  564.                     length = jQuery('#field_widget_{{ id }}').data("max_length")?jQuery('#field_widget_{{ id }}').data("max_length"):100;
  565.                     more = (length == 100 || length >= jQuery('#field_widget_{{ id }}').find(".inner-field-short-description > a").text().length) ? "" : "...";
  567.                     jQuery('#field_widget_{{ id }}').find(".inner-field-short-description > a").text((jQuery('#field_widget_{{ id }}').find(".inner-field-short-description > a").text().substr(0, length))+more);
  568.                 }
  569.             });
  571.             {% if btn_edit %}
  572.             var edit_button_url = '{{
  573.             associationadmin.generateUrl('edit', {(associationadmin.idParameter) : 'OBJECT_ID'})
  574.             }}'.replace('OBJECT_ID', objectId);
  576.             jQuery('#field_actions_{{ id }} a.btn-warning').removeClass('hidden').attr('href', edit_button_url);
  577.             {% endif %}
  578.         });
  580.         {% endif %}
  583.     </script>
  584.     <!-- / edit many association -->
  586. {% endautoescape %}