ninsuo / symfony-collection

[NOT MAINTAINED] A jQuery plugin that manages adding, deleting and moving elements from a Symfony form collection
https://symfony-collection.fuz.org/
MIT License
444 stars 88 forks source link

Table drag n drop item doesn't work #165

Open bastien70 opened 4 years ago

bastien70 commented 4 years ago

Hello, there is a bug with the drag n drop in a table :

{% block ValidateurType_widget %}

    {# widget_attributes will generate class="item" from the DiscountCollectionType.entry_options configuration #}
    <tr {{ block('widget_attributes') }}>
        <td id="validator_name">
            {{form_widget(form.ordre)}}
            {{form_errors(form.ordre)}}
            {{form_widget(form.validateur)}}
            {{form_errors(form.validateur)}}
        </td>
        <td>
            <a href="#" class="collection-up btn btn-default" title="Remonter"><span><i class="fas fa-arrow-up fa-lg"></i></span></a>
            <a href="#" class="collection-down btn btn-default" title="Redescendre"><span><i class="fas fa-arrow-down fa-lg"></i></span></a>
            <a href="#" class="collection-remove btn btn-default" title="Supprimer"><span><i class="fas fa-trash-alt fa-lg"></i></span></a>
        </td>
    </tr>

{% endblock %}

The JS :

$('.validators-service').collection({
            add: '<a href="#" class="btn btn-default ml-2" title="Ajouter"><span><i class="fas fa-plus-circle fa-lg"></i></span></a>',
            position_field_selector: '.my-position',
            add_at_the_end: true,
            init_with_n_elements: 1,
            elements_selector: 'tr.item',
            elements_parent_selector: '%id% tbody',
            after_add: function (collection, element) {
                $('.js-example-basic-single').select2({allowClear: true, language: 'fr', theme: 'bootstrap4', placeholder: "Validateur"});
                return true;
            }
        });

My main formtype :

->add('validateurs', CollectionType::class, [
                'entry_type' => ValidateurType::class,
                'entry_options' => [
                    'label' => false,
                    'entreprise' => $entreprise,
                    'attr' =>[
                        'class' => 'item'
                    ],
                ],
                'allow_add' => true,
                'allow_delete' => true,
                'delete_empty' => true,
                'by_reference' => true,
                'prototype' => true,
                'label' => false,
                'attr' => array(
                    'class' => 'table flex-table jquery-buttons-collection validators-service',
                    'label' => false,
                ),
                'by_reference' => false,
            ]);

My collection form type :

$builder
            ->add('validateur', EntityType::class, [
                'class' => User::class,
                'label' => false,
                'placeholder' => "Sélectionnez un utilisateur",
                'choice_label' => 'fullname',
                'attr' => [
                    'class' => 'js-example-basic-single my-selector',
                ],
            ])
            ->add('ordre', HiddenType::class, [
                'attr' => [
                    'class' => 'my-position'
                ]
            ]);

And when I'm trying to drag n drop :

Démo : https://gifyu.com/image/d9Sj

I don't understand what's wrong because using the plugin without table, it works