templates/commons/collectionType.html.twig line 1

Open in your IDE?
  1. {% set entity = key is defined ? entity~key : entity %}
  2. {% set lowerEntity = entity|lower %}
  3. <script type="text/javascript">
  4.     var ${{ lowerEntity }}CollectionHolder;
  5.     // setup an "add a {{ lowerEntity }}" link
  6.     {% if addIcon is defined %}
  7.         var $add{{ entity }}Link = $('<a href="#" class="add_{{ lowerEntity }}_link addChild  c-orange-h "><div class="d-flex align-items-center justify-content-center"><i class="fas fs-16 mar-11 fa-file-plus "></i> Ajouter une pièce jointe </div><div class="c-333333 fs-12 fw-500 infoUpload">Fichiers acceptés : jpg, png, pdf  |  Taille max : 4Mo</div> </a>');
  8.     {% else %}
  9.         var $add{{ entity }}Link = $('<a href="#" class="add_{{ lowerEntity }}_link">Add a {{ dataAdd }}</a>');
  10.     {% endif %}
  11.         var $new{{ entity }}LinkLi = $('<li class="linkCollection"></li>').append($add{{ entity }}Link);
  13.         jQuery(document).ready(function () {
  14.             // Get the ul that holds the collection of {{ lowerEntity }}s
  15.             ${{ lowerEntity }}CollectionHolder = $('ul.{{ lowerEntity }}s');
  16.             // add a delete link to all of the existing {{ lowerEntity }} form li elements
  17.             ${{ lowerEntity }}CollectionHolder.find('li').each(function () {
  18.                 add{{ entity }}FormDeleteLink($(this));
  19.             });
  21.             // add the "add a {{ lowerEntity }}" anchor and li to the {{ lowerEntity }}s ul
  22.             ${{ lowerEntity }}CollectionHolder.append($new{{ entity }}LinkLi);
  23.             // count the current form inputs we have (e.g. 2), use that as the new
  24.             // index when inserting a new item (e.g. 2)
  25.             ${{ lowerEntity }}CollectionHolder.data('index', ${{ lowerEntity }}CollectionHolder.find(':input').length);
  27.             $add{{ entity }}Link.on('click', function (e) {
  29.                 // prevent the link from creating a "#" on the URL
  30.                 e.preventDefault();
  32.                 // add a new {{ lowerEntity }} form (see next code block)
  33.                 add{{ entity }}Form(${{ lowerEntity }}CollectionHolder, $new{{ entity }}LinkLi);
  35.             });
  36.         });
  38.         function add{{ entity }}Form(${{ lowerEntity }}CollectionHolder, $new{{ entity }}LinkLi) {
  39.             // Get the data-prototype explained earlier
  40.             var prototype = ${{ lowerEntity }}CollectionHolder.data('prototype');
  41.             // get the new index
  43.             var index = ${{ lowerEntity }}CollectionHolder.data('index');
  45.             var newForm = prototype;
  46.             // You need this only if you didn't set 'label' => false in your {{ lowerEntity }}s field in TaskType
  47.             // Replace '__name__label__' in the prototype's HTML to
  48.             // instead be a number based on how many items we have
  49.             // newForm = newForm.replace(/__name__label__/g, index);
  51.             // Replace '__name__' in the prototype's HTML to
  52.             // instead be a number based on how many items we have
  53.             newForm = newForm.replace(/__name__/g, index);
  55.             // increase the index with one for the next item
  56.             ${{ lowerEntity }}CollectionHolder.data('index', index + 1);
  58.             // Display the form in the page in an li, before the "Add a {{ lowerEntity }}" link li
  59.     {% if entity starts with 'Photo' %}
  60.             var $newFormLi = $('<li class="linkCollection"><div class="miniature"><div class="row row-eq-height rowShowPicture"><div class="col-sm-2"><div class="showPicture"></div></div><div class="col-sm-8"><div class="textPicture"></div></div><div class="col-sm-2"><div class="deletePicture"><img src="{{ asset("assets/img/deletePicture.png") }}" alt="delete" width="12"/></div></div></div></div></li>').append(newForm);
  61.     {% else %}
  62.             var $newFormLi = $('<li class="linkCollection"><div class="miniature"></div></li>').append(newForm);
  63.     {% endif %}
  64.             $new{{ entity }}LinkLi.before($newFormLi);
  65.             add{{ entity }}FormDeleteLink($newFormLi);
  66.             var event = new CustomEvent('newCollectionForm', {'detail': {'Entity': "{{ entity }}", "index": index}});
  67.             document.dispatchEvent(event);
  68.         }
  70.         function add{{ entity }}FormDeleteLink(${{ lowerEntity }}FormLi) {
  71.     {% if deleteIcon is defined %}
  72.             var $removeFormA = $('<a href="#" class="deleteIcon deleteChild"><i class="fa fa-close" aria-hidden="true"></i>  {% if deleteData is defined %}{{ deleteData }} {% else %}Annuler la saisie{% endif %}</a>');
  73.     {% else %}
  74.             var $removeFormA = $('<a href="#">delete this {{ lowerEntity }}</a>');
  75.     {% endif %}
  77.             ${{ lowerEntity }}FormLi.append($removeFormA);
  79.             $removeFormA.on('click', function (e) {
  80.                 // prevent the link from creating a "#" on the URL
  81.                 e.preventDefault();
  82.                 // remove the li for the {{ lowerEntity }} form
  83.                 ${{ lowerEntity }}FormLi.remove();
  84.             });
  85.         }
  86. </script>