Stimulus Collection Handler

This is a small JS to handle additions and deletions from collections

Add Items

To add items to a symfony collection form, you have to add the add-collection-item-controller wrapped around your form. Additionally a prototype is required.

<div data-controller='add-collection-item'
     data-add-collection-item-prototype-value="
                 {{ form_widget(collectionForm.groups.vars.prototype) | e('html_attr') }}"
     data-add-collection-item-prototype-name-value="__collection_group__"
>
    {{ form_start(collectionForm) }}
    ...
</div>

to enable adding new collection items you have to configure your collection form type using allow_add, allow_delete, by_reference, prototype, prototype_name. Also the class attribute with collection-item and Button with the action is required. :

$groupForm->add('groups', CollectionType::class, [
            'entry_type' => FooBar::class,
            'entry_options' => [
                'attr' => [
                    'class' => 'collection-item'
                ],
                ...
            ],
            'allow_add' => true,
            'allow_delete' => true,
            'by_reference' => false,
            'prototype' => true,
            'prototype_name' => '__collection_group__',
        ])
            ->add('newGroup', ButtonType::class, [
                'attr' => [
                    'data-action' => 'click->add-collection-item#add',
                ]
            ])

Delete Items

Even easier is deleting items. Just give the element you want to delete the controller and add a button with the delete-action:

<div class="col-4 mt-3" data-controller="delete-collection-item">
    <div class="card">
        <div class="card-body">
            {{ content | raw }}
        </div>
        <div class="card-footer">
            <div class="btn btn-small btn-outline-danger btn-sm" data-action="click->delete-collection-item#delete">
                <i class="fa-solid fa-trash"></i>
                löschen
            </div>
        </div>
    </div>
</div>

On Click the entire element will be removed from the dom. On submitting the form, check for missing elements if required.

Flag Items for Deletion

For Flagging items for deletion a checkbox is required

$builder->add('flaggedForDeletion', CheckboxType::class, [
                'label' => '<div class="btn btn-small btn-outline-danger btn-sm"><i class="fa-solid fa-trash"></i></div>',
                'label_html' => true,
                'required' => false,
                'attr' => [
                    'data-action' => 'change->delete-collection-item#flagForDeletion',
                ],
                'label_attr' => [
                    'data-delete-collection-item-target' => 'deletionFlagLabel'
                ],
            ])

on change the flagForDeletion method of the delete-collection-item-controller will be called, changing some styles to show that the item will be deleted when submitting the form.
The targets and values could look like this:

<div
        class="row collection-item"
        data-controller="delete-collection-item"
        data-delete-collection-item-removal-toggle-value="{{ '<div class="btn btn-small btn-outline-primary btn-sm"><i class="fa-solid fa-arrow-rotate-left"></i></div>' | e('html_attr') }}"
>
... 
</div>

the removal-toggle-value will be used to replace the label of the checkbox once it is active

...
<span class="d-none badge bg-secondary" data-delete-collection-item-target="deletionFlagActive">
    {{ 'account.invitation.group.ready_for_delete' | trans }}
</span>
<span class="d-inline-block" data-bs-toggle="collapse" data-bs-target>
    {{ form_widget(group.flaggedForDeletion, {label_attr: {class: 'd-block non-collapsing'}}) }}
</span>
...

the deletionFlagActive target will additionally be displayed when the checkbox is active.