Fixed issue with removing the bom entries caused by the multiple collapse rows

assets/controllers/elements/collection_type_controller.js

@@ -26,6 +26,7 @@ export default class extends Controller {
     static values = {
         deleteMessage: String,
         prototype: String,
+        rowsToDelete: Number, //How many rows (including the current one) shall be deleted after the current row
     }
 
     static targets = ["target"];
@@ -125,7 +126,17 @@ export default class extends Controller {
         const del = () => {
             const target = event.target;
             //Remove the row element from the table
-            target.closest("tr").remove();
+            const current_row = target.closest("tr");
+            for(let i = this.rowsToDeleteValue; i > 1; i--) {
+                let nextSibling = current_row.nextElementSibling;
+                //Ensure that nextSibling is really a tr
+                if (nextSibling && nextSibling.tagName === "TR") {
+                    nextSibling.remove();
+                }
+            }
+
+            //Finally delete the current row
+            current_row.remove();
         }
 
         if(this.deleteMessageValue) {

src/Form/AdminPages/ProjectAdminForm.php

@@ -21,6 +21,7 @@
 namespace App\Form\AdminPages;
 
 use App\Entity\Base\AbstractNamedDBElement;
+use App\Form\ProjectSystem\ProjectBOMEntryCollectionType;
 use App\Form\ProjectSystem\ProjectBOMEntryType;
 use App\Form\Type\RichTextEditorType;
 use Symfony\Component\Form\Extension\Core\Type\CollectionType;
@@ -41,16 +42,6 @@ class ProjectAdminForm extends BaseEntityAdminForm
             ],
         ]);
 
-        $builder->add('bom_entries', CollectionType::class, [
+        $builder->add('bom_entries', ProjectBOMEntryCollectionType::class);
-            'entry_type' => ProjectBOMEntryType::class,
-            'entry_options' => [
-                'label' => false,
-            ],
-            'allow_add' => true,
-            'allow_delete' => true,
-            'by_reference' => false,
-            'reindex_enable' => true,
-            'label' => false,
-        ]);
     }
 }

src/Form/ProjectSystem/ProjectBOMEntryCollectionType.php

@@ -0,0 +1,35 @@
+<?php
+
+namespace App\Form\ProjectSystem;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\Extension\Core\Type\CollectionType;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+
+class ProjectBOMEntryCollectionType extends AbstractType
+{
+    public function getParent()
+    {
+        return CollectionType::class;
+    }
+
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver->setDefaults([
+            'entry_type' => ProjectBOMEntryType::class,
+            'entry_options' => [
+                'label' => false,
+            ],
+            'allow_add' => true,
+            'allow_delete' => true,
+            'by_reference' => false,
+            'reindex_enable' => true,
+            'label' => false,
+        ]);
+    }
+
+    public function getBlockPrefix()
+    {
+        return 'project_bom_entry_collection';
+    }
+}

templates/AdminPages/DeviceAdmin.html.twig

@@ -23,31 +23,6 @@
 {% block additional_panes %}
     <div class="tab-pane" id="bom">
         {% form_theme form.bom_entries with ['Form/collection_types_layout.html.twig'] %}
-
+        {{ form_widget(form.bom_entries) }}
-        {% import 'components/collection_type.macro.html.twig' as collection %}
-        <div {{ collection.controller(form.bom_entries, 'project.bom.delete.confirm') }}>
-            <table class="table table-striped table-bordered table-sm" {{ collection.target() }}>
-                <thead>
-                    <tr>
-                        <th></th> {#  expand button #}
-                        <th>{% trans %}project.bom.quantity{% endtrans %}</th>
-                        <th>{% trans %}project.bom.part{% endtrans %}</th>
-                        <th>{% trans %}project.bom.name{% endtrans %}</th>
-                        <th></th> {# Remove button #}
-                    </tr>
-                </thead>
-
-                <tbody>
-                {% for entry in form.bom_entries %}
-                    {{ form_widget(entry) }}
-                {% endfor %}
-                </tbody>
-            </table>
-
-            <button type="button" class="btn btn-success mb-2" {{ collection.create_btn() }}>
-                <i class="fas fa-plus-square fa-fw"></i>
-                {% trans %}project.bom.add_entry{% endtrans %}
-            </button>
-        </div>
     </div>
 {% endblock %}

templates/Form/collection_types_layout.html.twig

@@ -1,3 +1,32 @@
+{% block project_bom_entry_collection_widget %}
+    {% import 'components/collection_type.macro.html.twig' as collection %}
+    <div {{ collection.controller(form, 'project.bom.delete.confirm', 3) }}>
+        <table class="table table-striped table-bordered table-sm" {{ collection.target() }}>
+            <thead>
+            <tr>
+                <th></th> {#  expand button #}
+                <th>{% trans %}project.bom.quantity{% endtrans %}</th>
+                <th>{% trans %}project.bom.part{% endtrans %}</th>
+                <th>{% trans %}project.bom.name{% endtrans %}</th>
+                <th></th> {# Remove button #}
+            </tr>
+            </thead>
+
+            <tbody>
+            {% for entry in form %}
+                {{ form_widget(entry) }}
+            {% endfor %}
+            </tbody>
+        </table>
+
+        <button type="button" class="btn btn-success mb-2" {{ collection.create_btn() }}>
+            <i class="fas fa-plus-square fa-fw"></i>
+            {% trans %}project.bom.add_entry{% endtrans %}
+        </button>
+    </div>
+
+{% endblock %}
+
 {% block project_bom_entry_widget %}
     {% set target_id = 'expand_row-' ~ random() %}
 

templates/components/collection_type.macro.html.twig

@@ -1,12 +1,14 @@
-{% macro controller(form, deleteMessage) %}
+{% macro controller(form, deleteMessage, rowsToDelete) %}
     {% if form.vars.prototype is defined %}
         {{ stimulus_controller('elements/collection_type', {
             'deleteMessage': deleteMessage|trans,
-            'prototype': form_widget(form.vars.prototype)|e('html_attr')
+            'prototype': form_widget(form.vars.prototype)|e('html_attr'),
+            'rowsToDelete': rowsToDelete,
         }) }}
     {% else %} {# If add_element is disabled/forbidden, prototype is not available #}
         {{ stimulus_controller('elements/collection_type', {
             'deleteMessage': deleteMessage|trans,
+            'rowsToDelete': rowsToDelete
         }) }}
     {% endif %}
 {% endmacro %}