SovBundle/Resources/assets/app/adminlte/field/collection/app.collection.js

import "jquery-ui-sortable"
import "./form.scss"


$(document).ready(function () {
    initCollectionWidget();
});

function initCollectionWidget() {

    $('.field-collection[data-prototype]').each(function (i, collectionWidget) {
        setCollectionWidgetSortable($(collectionWidget));
        reindexKeyCollectionWidget($(collectionWidget));

        setCollectionWidgetAdd($(collectionWidget));
        setCollectionWidgetDelete($(collectionWidget));
    });
}

function setCollectionWidgetAdd($collectionWidget) {

    if ($collectionWidget.data('allow-add')) {
        $collectionWidget.find('.field-collection-add').on('click', function (e) {
            // grab the prototype template
            var newWidget = $collectionWidget.attr('data-prototype');
            // replace the "__name__" used in the id and name of the prototype
            // with a number that's unique to your emails
            // end name attribute looks like name="contact[emails][2]"
            newWidget = newWidget.replace(/__name__/g, getNumItems($collectionWidget));

            // create a new list element and add it to the list
            $collectionWidget.find('.form-widget-compound .field-collection-group').append(newWidget);
            $collectionWidget.find('.field-collection-item:last').find('.field-position').val(getNumItems($collectionWidget));

            reindexKeyCollectionWidget($collectionWidget);
            setCollectionWidgetDelete($collectionWidget);
            $collectionWidget.trigger('collection-add-item');

            $collectionWidget.data('num-items', $collectionWidget.data('num-items') + 1);
            $collectionWidget.find('.collection-empty').hide();
        });
    }
}

function setCollectionWidgetDelete($collectionWidget) {
    if ($collectionWidget.data('allow-delete')) {
        $collectionWidget.find('.field-collection-delete').off('click');
        $collectionWidget.find('.field-collection-delete').on('click', function () {
            $(this).parents('.form-group:first').remove();
            reindexKeyCollectionWidget($collectionWidget);
            if(getNumItems($collectionWidget)==0)$collectionWidget.find('.collection-empty').show();
        });
    }
}

function getNumItems($collectionWidget) {
    if ($collectionWidget.data('reindex-key')) {
        return $collectionWidget.find('.field-collection-item').length;
    } else {
        return $collectionWidget.data('num-items');
    }
}

function reindexKeyCollectionWidget($collectionWidget) {
    if ($collectionWidget.data('reindex-key')) {
        $collectionWidget.find('.field-collection-item').each(function (i, item) {
            $(item).find('input,textarea').each(function (y, field) {
                let $field = $(field);
                //Chanegment ID
                let posIdPrefix = parseInt(SovTools.indexOfFirstDigit($field.prop('id')));
                let posIdSuffix = parseInt(SovTools.indexOfLastDigit($field.prop('id')));

                let idPrefix = $field.prop('id').substr(0, posIdPrefix);
                let idSuffix = $field.prop('id').substr(posIdSuffix + 1);

                $field.prop('id', idPrefix + i + idSuffix);

                //Chanegment Name
                let posNamePrefix = SovTools.indexOfFirstDigit($field.prop('name'));
                let posNameSuffix = SovTools.indexOfLastDigit($field.prop('name'));
                let namePrefix = $field.prop('name').substr(0, posNamePrefix);
                let nameSuffix = $field.prop('name').substr(posNameSuffix + 1);
                $field.prop('name', namePrefix + i + nameSuffix);
            });
        });
    }
}

function setCollectionWidgetSortable($collectionWidget) {
    if ($collectionWidget.data('sortable')) {
        $collectionWidget.find('.field-collection-group').sortable({
            "handle" : '.lc-btn-sortable',
            cancel: ''
        });
        $collectionWidget.find('.field-collection-group').on("sortupdate", function (event, ui) {
            $collectionWidget.find('.field-collection-group>div').each(function (index, item) {
                $(item).find('.field-position').val(index);
            });
        });
    }
}