Allow to add new dummy order item

Setono · Jun 5, 2024 · 9353eae · 9353eae
1 parent fea56c0
commit 9353eae
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 5 deletions.
diff --git a/src/Form/Type/OrderItemType.php b/src/Form/Type/OrderItemType.php
@@ -8,8 +8,8 @@
 use Sylius\Component\Core\Model\OrderItemInterface;
 use Sylius\Component\Order\Modifier\OrderItemQuantityModifierInterface;
 use Symfony\Component\Form\Extension\Core\Type\IntegerType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
 use Symfony\Component\Form\FormBuilderInterface;
-use Symfony\Component\Form\FormInterface;
 
 final class OrderItemType extends AbstractResourceType
 {
@@ -28,9 +28,9 @@ public function buildForm(FormBuilderInterface $builder, array $options): void
     {
         $builder->add('quantity', IntegerType::class, [
             'label' => false,
-            'setter' => function (OrderItemInterface &$orderItem, int $quantity, FormInterface $form): void {
+            'setter' => function (OrderItemInterface &$orderItem, int $quantity): void {
                 $this->orderItemQuantityModifier->modify($orderItem, $quantity);
             },
-        ]);
+        ])->add('variant', TextType::class);
     }
 }
diff --git a/src/Resources/public/js/order-edit.js b/src/Resources/public/js/order-edit.js
@@ -4,4 +4,21 @@ window.addEventListener('DOMContentLoaded', (event) => {
             const orderLineId = event.currentTarget.closest('tr').remove();
         });
     });
+
+    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
+            )
+        ;
+
+        orderItemTable.querySelector('tbody').insertAdjacentHTML('beforeend', html)
+
+        orderItemTable.dataset.index++;
+    });
 });
diff --git a/src/Resources/views/admin/order/update/_order_items.html.twig b/src/Resources/views/admin/order/update/_order_items.html.twig
@@ -3,9 +3,15 @@
 {# @var order \Sylius\Component\Core\Model\OrderInterface #}
 {% set order = form.vars.data %}
 
+{% form_theme form '@SetonoSyliusOrderEditPlugin/admin/order/update/theme.html.twig' %}
+
 <div class="ui segment">
     <h4 class="ui dividing header">{{ 'setono_sylius_order_edit.ui.order_items'|trans }}</h4>
-    <table class="ui table" data-prototype="{{ form_widget(form.items.vars.prototype)|e('html_attr') }}">
+    <table
+        class="ui table"
+        data-prototype="{{ form_widget(form.items.vars.prototype)|e('html_attr') }}"
+        data-index="{{ form.items|length > 0 ? form.items|last.vars.name + 1 : 0 }}"
+    >
         <thead>
             <tr>
                 <th>{{ 'sylius.ui.quantity'|trans }}</th>
@@ -36,7 +42,7 @@
         <tfoot>
             <tr>
                 <td>
-                    <button class="ui teal labeled icon button add-order-line" type="button">
+                    <button class="ui teal labeled icon button add-order-item" type="button">
                         <i class="icon plus"></i> {{ 'sylius.ui.add'|trans }}
                     </button>
                 </td>

diff --git a/src/Resources/views/admin/order/update/theme.html.twig b/src/Resources/views/admin/order/update/theme.html.twig
@@ -0,0 +1,7 @@
+{% block _sylius_order_items_entry_widget %}
+    <tr>
+        <td>{{ form_widget(form.quantity) }}</td>
+        <td>{{ form_widget(form.variant) }}</td>
+        <td colspan="3">&nbsp;</td>
+    </tr>
+{% endblock %}