Add delete button to new order item

src/Form/Type/OrderItemCollectionType.php

@@ -17,7 +17,6 @@ public function configureOptions(OptionsResolver $resolver): void
             'allow_add' => true,
             'allow_delete' => true,
             'by_reference' => false,
-            'prototype' => true,
         ]);
     }
 

src/Resources/public/js/order-edit.js

@@ -1,24 +1,32 @@
-window.addEventListener('DOMContentLoaded', (event) => {
-    document.querySelectorAll('button.delete-order-item').forEach((button) => {
-        button.addEventListener('click', (event) => {
-            const orderLineId = event.currentTarget.closest('tr').remove();
-        });
+document.querySelectorAll('button.delete-order-item').forEach((button) => {
+    button.addEventListener('click', (event) => {
+        var row = event.currentTarget.parentElement.parentElement;
+        row.nextElementSibling.remove();
+        row.remove();
     });
+});
+
+document.querySelector('button.add-order-item').addEventListener('click', (event) => {
+    const orderItemTable = event.currentTarget.closest('table');
 
-    document.querySelector('button.add-order-item').addEventListener('click', (event) => {
-        const orderItemTable = event.currentTarget.closest('table');
+    const html = orderItemTable
+        .dataset
+        .prototype
+        .replace(
+            /__name__/g,
+            orderItemTable.dataset.index
+        )
+    ;
 
-        const html = orderItemTable
-            .dataset
-            .prototype
-            .replace(
-                /__name__/g,
-                orderItemTable.dataset.index
-            )
-        ;
+    orderItemTable.querySelector('tbody').insertAdjacentHTML('beforeend', html)
 
-        orderItemTable.querySelector('tbody').insertAdjacentHTML('beforeend', html)
+    orderItemTable.dataset.index++;
 
-        orderItemTable.dataset.index++;
+    var rows = orderItemTable.querySelectorAll('form[name="sylius_order"] tbody tr');
+    var lastItemRowDeleteButton = rows[rows.length - 2].querySelector('button.delete-order-item');
+    lastItemRowDeleteButton.addEventListener('click', (event) => {
+        var row = event.currentTarget.parentElement.parentElement;
+        row.nextElementSibling.remove();
+        row.remove();
     });
 });

src/Resources/views/admin/order/update/_order_items.html.twig

@@ -40,8 +40,7 @@
                     </td>
                 </tr>
                 <tr>
-                    <td colspan="5">{{ form_widget(itemForm.discounts) }}</td>
-                    <td></td>
+                    <td colspan="6">{{ form_widget(itemForm.discounts) }}</td>
                 </tr>
             {% endfor %}
         </tbody>

src/Resources/views/admin/order/update/theme.html.twig

@@ -1,9 +1,17 @@
 {% extends '@SyliusAdmin/Form/theme.html.twig' %}
 
 {% block _sylius_order_items_entry_widget %}
-    <tr>
+    <tr class="item">
         <td>{{ form_widget(form.quantity) }}</td>
         <td>{{ form_widget(form.variant) }}</td>
-        <td colspan="3">&nbsp;</td>
+        <td colspan="4" class="right aligned">
+            <button class="ui red labeled icon button delete-order-item" type="button">
+                <i class="icon trash"></i> {{ 'sylius.ui.delete'|trans }}
+            </button>
+        </td>
+    </tr>
+    <tr class="item-discounts">
+        {# TODO: enable disounts for new order item as well #}
+        {# <td colspan="6">{{ form_widget(form.discounts) }}</td>#}
     </tr>
 {% endblock %}