#324 Temporarily solution for new product modal

Nexxus · Jan 5, 2023 · a13919c · a13919c
1 parent c74bc33
commit a13919c
Show file tree

Hide file tree

Showing 11 changed files with 234 additions and 47 deletions.
diff --git a/app/Resources/views/base.html.twig b/app/Resources/views/base.html.twig
@@ -17,12 +17,7 @@
         {% endblock %}
     </head>
     <body>
-        <div class="modal fade" tabindex="-1" role="dialog" id="modalOrderEditor" data-backdrop="static" data-keyboard="false">
-            <div class="modal-dialog modal-lg" role="document">
-                <div class="modal-content"></div>
-            </div>
-        </div>
-
+
         <div class="modal fade" tabindex="-1" role="dialog" id="modalConfirm" data-backdrop="static" data-keyboard="false">
             <div class="modal-dialog" role="document">
                 <div class="modal-content">

diff --git a/src/AppBundle/Controller/ProductController.php b/src/AppBundle/Controller/ProductController.php
@@ -62,6 +62,30 @@ public function indexAction(Request $request)
             ));
     }
 
+    /**
+     * Temporarily solution as long as New Product section is Vue and Order sections are Twig.
+     * The route is rather complex:
+     * 
+     * 1. New product selection by user in PurchaseOrder/edit.html.twig (and same for SalesOrder)
+     * 2. This action ProductController::new (just forwarding props)
+     * 3. Bare Twig container file Product/new.html.twig (again forwarding props)
+     * 4. Entrypoint config in webpack.config.js
+     * 5. ProductNew/app.js
+     * 6. ProductNew/App.vue (and again forwarding props)
+     * 7. Reuse of ModalEdit.vue (originally made for product edit)
+     * 8. Retrieval of product object by AJAX in VueProductController::new 
+     * 
+     * @Route("/new/{purchaseOrderId}/{salesOrderId}/{productTypeId}", name="product_new")
+     */
+    public function newAction(Request $request, $purchaseOrderId = 0, $salesOrderId = 0, $productTypeId = 0)
+    {
+        return $this->render('AppBundle:Product:new.html.twig', array(
+            'purchaseOrderId' => $purchaseOrderId,
+            'salesOrderId' => $salesOrderId,
+            'productTypeId' => $productTypeId
+            ));
+    }    
+
     /**
      * @Route("/bulkedit/{success}", name="product_bulkedit")
      */
@@ -165,7 +189,6 @@ private function bulkPrint($object, $products) {
     }
 
     /**
-     * @Route("/new/{purchaseOrderId}/{salesOrderId}/{productTypeId}", name="product_new")
      * @Route("/edit/{id}/{success}", name="product_edit")
      * @Route("/editsub/{refId}/{id}", name="product_subedit")
      */
@@ -233,7 +256,7 @@ public function editAction(Request $request, $id = 0, $purchaseOrderId = 0, $sal
                     {
                         $file = new ProductAttributeFile($product, $v, $k);
                         $em->persist($file);
-                        $em->flush($file);
+                        $em->flush();
 
                         $val = $r->getValue() ? $r->getValue() . "," . $file->getId() : $file->getId();
                         $r->setValue($val);

diff --git a/src/AppBundle/Controller/VueProductController.php b/src/AppBundle/Controller/VueProductController.php
@@ -23,10 +23,12 @@
 namespace AppBundle\Controller;
 
 use AppBundle\Entity\Product;
+use AppBundle\Entity\ProductType;
+use AppBundle\Entity\PurchaseOrder;
+use AppBundle\Entity\SalesOrder;
 use Symfony\Component\HttpFoundation\Request;
 use FOS\RestBundle\Controller\Annotations as Rest;
 use FOS\RestBundle\Controller\FOSRestController;
-use AppBundle\Entity\ProductAttributeRelation;
 
 /**
  * This controller will replace the ProductController gradually
@@ -92,20 +94,50 @@ public function editAction(Request $request, $productId)
         /** @var \AppBundle\Repository\ProductRepository */
         $repo = $this->getDoctrine()->getRepository('AppBundle:Product');
 
-        if ($productId == 0)
+        /** @var Product */
+        $product = $repo->find($productId);
+
+        $repo->generateProductAttributeRelations($product);
+
+        return $product; 
+    }   
+
+    /**
+     * @Rest\Get("/new/{purchaseOrderId}/{salesOrderId}/{productTypeId}")
+     * @Rest\View(serializerGroups={"product:edit"})
+     */
+    public function newAction(Request $request, $purchaseOrderId, $salesOrderId, $productTypeId)
+    {
+        $em = $this->getDoctrine()->getManager();
+
+        /** @var \AppBundle\Repository\ProductRepository */
+        $repo = $em->getRepository('AppBundle:Product');
+
+        $product = new Product();
+
+        if ($productTypeId > 0)
         {
-            $product = new Product();
+            $product->setType($em->getReference(ProductType::class, $productTypeId));
         }
-        else
+
+        if ($salesOrderId > 0 && $purchaseOrderId > 0) // backorder
         {
-            /** @var Product */
-            $product = $repo->find($productId);
+            $repo->generateProductOrderRelation($product, $em->find(SalesOrder::class, $salesOrderId));
+            $repo->generateProductOrderRelation($product, $em->find(PurchaseOrder::class, $purchaseOrderId), 0);
         }
-
+        elseif ($salesOrderId > 0) // repair order
+        {
+            $repo->generateProductOrderRelation($product, $em->find(SalesOrder::class, $salesOrderId));
+        }
+        elseif ($purchaseOrderId > 0) // normal purchase
+        {
+            $repo->generateProductOrderRelation($product, $em->find(PurchaseOrder::class, $purchaseOrderId));
+        }        
+
         $repo->generateProductAttributeRelations($product);
 
         return $product; 
-    }   
+    }      
 
     /**
      * @Rest\Get("/checklist/{productId}")

diff --git a/src/AppBundle/Resources/views/Product/new.html.twig b/src/AppBundle/Resources/views/Product/new.html.twig
@@ -0,0 +1,9 @@
+
+<div id="product-new" 
+    data-purchaseorderid="{{ purchaseOrderId }}"
+    data-salesorderid="{{ salesOrderId }}"
+    data-producttypeid="{{ productTypeId }}"
+></div>
+
+{{ encore_entry_script_tags('product-new') }}
+
diff --git a/src/AppBundle/Resources/views/PurchaseOrder/edit.html.twig b/src/AppBundle/Resources/views/PurchaseOrder/edit.html.twig
@@ -229,6 +229,8 @@
     {{ form_widget(form._token) }}            
     {{ form_end(form, {'render_rest': false}) }}
 
+    <div id="newProductModalContainer"></div>
+
  {% endblock %}
 
  {% block javascripts %}
@@ -265,10 +267,10 @@
 
          $('select[name="purchase_order_form[newProduct]"]').change(function () {
              if ($(this).val()) {
-                 $("#modalOrderEditor .modal-content").load('{{ path('product_new', { 'purchaseOrderId': order.id }) }}/0/' + $(this).val(), function () {
+                 $("#newProductModalContainer").load('{{ path('product_new', { 'purchaseOrderId': order.id }) }}/0/' + $(this).val(), function () {
                      focusBarcodeInput();
                  });
-                 $("#modalOrderEditor").modal('show');
+                 
              }
          });
 

diff --git a/src/AppBundle/Resources/views/SalesOrder/edit.html.twig b/src/AppBundle/Resources/views/SalesOrder/edit.html.twig
@@ -246,6 +246,8 @@
     {{ form_widget(form._token) }}            
     {{ form_end(form, {'render_rest': false}) }}
 
+    <div id="newProductModalContainer"></div>
+
  {% endblock %}
 
  {% block javascripts %}
@@ -296,10 +298,9 @@
 
          $('select[name="sales_order_form[newProduct]"]').change(function () {
              if ($(this).val()) {
-                 $("#modalOrderEditor .modal-content").load('{{ path('product_new', { 'purchaseOrderId': order.backingPurchaseOrder.id, 'salesOrderId': order.id }) }}/' + $(this).val(), function () {
+                 $("#newProductModalContainer").load('{{ path('product_new', { 'purchaseOrderId': order.backingPurchaseOrder.id, 'salesOrderId': order.id }) }}/' + $(this).val(), function () {
                      focusBarcodeInput();
                  });
-                 $("#modalOrderEditor").modal('show');
              }
          });
 
@@ -309,10 +310,9 @@
 
          $('select[name="sales_order_form[newProduct]"]').change(function () {
              if ($(this).val()) {
-                 $("#modalOrderEditor .modal-content").load('{{ path('product_new', { 'purchaseOrderId': 0, 'salesOrderId': order.id }) }}/' + $(this).val(), function () {
+                 $("#newProductModalContainer").load('{{ path('product_new', { 'purchaseOrderId': 0, 'salesOrderId': order.id }) }}/' + $(this).val(), function () {
                      focusBarcodeInput();
                  });
-                 $("#modalOrderEditor").modal('show');
              }
          });
 

diff --git a/src/AppBundle/Resources/vue/ProductNew/App.vue b/src/AppBundle/Resources/vue/ProductNew/App.vue
@@ -0,0 +1,74 @@
+<template>
+<div>
+
+    <ModalEdit urlPrefix="../../"
+        :purchaseOrderId="purchaseOrderId" :salesOrderId="salesOrderId" :productTypeId="productTypeId" 
+        :productStatuses="productStatuses" :locations="locations" :productTypes="productTypes" 
+        />
+
+</div>
+</template>
+
+<script>
+
+import ModalEdit from '../ProductStock/components/modals/ModalEdit.vue'
+
+export default {
+    name: 'App',
+    components: { ModalEdit },
+    data() { 
+        var dataElement = document.querySelector('div#product-new');
+        var purchaseOrderId = parseInt(dataElement.dataset.purchaseorderid);
+        var salesOrderId = parseInt(dataElement.dataset.salesorderid);
+        var productTypeId = parseInt(dataElement.dataset.producttypeid);
+
+        return { 
+            purchaseOrderId,
+            salesOrderId,
+            productTypeId,
+            productId: null,
+            productStatuses: [],
+            productTypes: [],
+            locations: [],            
+        }
+    },
+    computed: {
+        offset() {
+            return (this.page-1) * this.pageLength
+        },
+        pageCount() {
+            return Math.ceil(parseFloat(this.productCount) / this.pageLength)
+        },                        
+    },
+    mounted() {
+        this.loadMeta()
+    
+                $('#modalEdit').modal('show')
+       
+    },
+    methods: {
+        loadMeta() {
+            this.axios.get("../../vue/product/meta")
+                .then(response => {
+                    this.productStatuses = response.data.productStatuses
+                    this.productTypes = response.data.productTypes
+                    this.locations = response.data.locations
+                })
+        },
+        closeModal() {
+            this.product=null
+            this.modal=null
+            $('.modal').modal('hide')            
+        },
+        formattedPrice(product, withEuroSign) {
+            if (!product || !product.price) return ''
+            var price = parseFloat(product.price) / 100
+            price = price.toLocaleString('nl', {minimumFractionDigits: 2, maximumFractionDigits: 2})
+            return withEuroSign ? '€ '+price : price
+        }
+    }
+}
+
+</script>
+
+
diff --git a/src/AppBundle/Resources/vue/ProductNew/app.js b/src/AppBundle/Resources/vue/ProductNew/app.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import axios from 'axios'
+import VueAxios from 'vue-axios'
+import App from './App.vue'
+
+Vue.use(VueAxios, axios)
+
+new Vue({ render: h => h(App) }).$mount('#product-new') 
diff --git a/...Bundle/Resources/vue/ProductStock/main.js → ...pBundle/Resources/vue/ProductStock/app.js b/...Bundle/Resources/vue/ProductStock/main.js → ...pBundle/Resources/vue/ProductStock/app.js