templates/js/library/entity_collection/entity_collection.js.twig line 1

Open in your IDE?
  1. /**
  2.  * Класс для управления коллекцией сущностей (добавление/удаление элементов).
  3.  * Требуется jQuery.
  4.  */
  5. class EntityCollection {
  6.     /**
  7.      * @param {HTMLElement|jQuery} element Корневой элемент коллекции
  8.      */
  9.     constructor(element) {
  10.         this.collectionName = $(element).data('collection-name') || null;
  11.         /** @private */
  12.         this.$element = $(element);
  13.         /** @private */
  14.         this.$itemsContainer = this.$element.find('.js-entity-collection-items[data-collection-name="' + this.collectionName + '"]');
  15.         /** @private */
  16.         this.prototypeName = this.$element.data('prototype-name') || '__name__';
  17.         /** @private {string|null} */
  18.         this.prototypeHtml = this.$element.data('prototype') || null;
  19.         /** @private {string} */
  20.         this.itemClass = this.$element.data('item-class') || 'entity-collection__item';
  21.         /** @private {number} */
  22.         this.index = this.$itemsContainer.find('.' + this.itemClass).length || this.$itemsContainer.children().length || 0;
  24.         this.init();
  25.     }
  27.     /**
  28.      * Инициализация обработчиков событий.
  29.      * @private
  30.      */
  31.     init() {
  32.         // Добавление элемента
  33.         this.$element.on('click', '.js-entity-collection-add', (event) => {
  34.             const $button = $(event.currentTarget);
  35.             const btnName = $button.data('collection-name');
  36.             const containerName = this.$element.data('collection-name');
  38.             // Если кнопка явно привязана к другой коллекции — игнорируем клик
  39.             if (btnName != null && String(btnName) !== String(containerName)) {
  40.                 return;
  41.             }
  43.             this.addItem();
  44.         });
  46.         // Удаление элемента — поддерживаем старые и новые селекторы кнопки удаления
  47.         this.$element.on('click', '.js-entity-collection-remove', (event) => {
  48.             this.removeItem(event);
  49.         });
  50.         this.updateItemsHeaders();
  51.     }
  53.     /**
  54.      * Удаляет элемент коллекции, родственный элементу-селектору удаления.
  55.      * @param {Event} event
  56.      */
  57.     removeItem(event) {
  58.         const $button = $(event.currentTarget);
  59.         const $item = $button.closest('.' + this.itemClass);
  61.         if ($item.length) {
  62.             $item.remove();
  63.             this.updateItemsHeaders();
  64.         }
  65.     }
  67.     /**
  68.      * Добавляет новый элемент в коллекцию, используя prototypeHtml.
  69.      */
  70.     addItem() {
  71.         if (!this.prototypeHtml) {
  72.             // Используем console.warn — это не должно ломать выполнение
  73.             console.warn('EntityCollection: prototypeHtml is missing');
  74.             return;
  75.         }
  77.         const newForm = this.prototypeHtml.replace(new RegExp(this.prototypeName, 'g'), this.index);
  78.         const $wrapper = $('<div></div>').addClass(this.itemClass + ' mb-3 p-3 border rounded');
  80.         $wrapper.html(newForm);
  82.         this.$itemsContainer.append($wrapper);
  83.         this.index += 1;
  85.         this.updateItemsHeaders();
  86.     }
  88.     updateItemsHeaders() {
  89.         this.$itemsContainer.find('.entity-collection-item-header[data-collection-name="'
  90.             + this.collectionName + '"]').each((index, header) => {
  91.             let text = $(header).data('header-text');
  92.             if (text) {
  93.                 text = text.replaceAll('{itemIndex}', (index + 1));
  94.                 $(header).html(text);
  95.             }
  96.         });
  97.     }
  98. }