#324

Nexxus · Oct 5, 2021 · 5ef44cb · 5ef44cb
1 parent f4416fe
commit 5ef44cb
Show file tree

Hide file tree

Showing 12 changed files with 147 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -96,7 +96,7 @@ Now you can login and create other users in the Admin section.
 
 ### 7. Build JavaScript modules
 
-Almost there! Since August 2021, Nexxus is using Vue to improve user experience. Therefor you need to build some JavaScript modules of the application. Nexxus uses [Webpack Encore](https://symfony.com/doc/3.3/frontend.html) for this, a tool made by Symfony makers. Start with installing [Node.js](https://nodejs.org/en/download/) and the dependencies:
+Almost there! Since August 2021, Nexxus is using a minor bit of Vue to improve user experience. Therefor you need to build some JavaScript modules of the application. Nexxus uses [Webpack Encore](https://symfony.com/doc/3.3/frontend.html) for this, a tool made by Symfony makers. Start with installing [Node.js](https://nodejs.org/en/download/) and the dependencies:
 ```
 npm install
 ```

diff --git a/app/config/services.yml b/app/config/services.yml
@@ -9,6 +9,9 @@ services:
 #        arguments: ["@another_service_name", "plain_value", "%parameter_name%"]
     app.menubuilder:
         class: AppBundle\Menu\Builder
-
+    app.encoretwig:
+        class: AppBundle\Helper\EncoreTwigExtension
+        tags:
+            - { name: twig.extension }     
 
 
diff --git a/src/AppBundle/Entity/Product.php b/src/AppBundle/Entity/Product.php
@@ -497,11 +497,10 @@ public function getQuantityPurchased()
     public function getQuantityInStock()
     {
         $isStock = $this->getStatus() ? $this->getStatus()->getIsStock() : true;
-        if (!$isStock)
-        {
-            $q = 0;
-        }
-        elseif ($r = $this->getPurchaseOrderRelation())
+
+        if (!$isStock) return 0;
+
+        if ($r = $this->getPurchaseOrderRelation())
         {
             $q = $r->getQuantity();
         }
@@ -514,7 +513,7 @@ public function getQuantityInStock()
         else
         {
             //throw new \Exception("Product has no purchase order and is not a repair, which should be impossible.");
-            $q = 0;
+            return 0;
         }
 
         return $q - $this->getQuantitySold();

diff --git a/src/AppBundle/Helper/EncoreTwigExtension.php b/src/AppBundle/Helper/EncoreTwigExtension.php
@@ -0,0 +1,93 @@
+<?php
+
+/*
+ * Nexxus Stock Keeping (online voorraad beheer software)
+ * Copyright (C) 2018 Copiatek Scan & Computer Solution BV
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see licenses.
+ *
+ * Copiatek - [email protected] - Postbus 547 2501 CM Den Haag
+ */
+
+/*
+ * This file is taken from the Symfony WebpackEncoreBundle package.
+ * by Fabien Potencier <[email protected]>
+ */
+
+namespace AppBundle\Helper;
+
+use Twig\Extension\AbstractExtension;
+use Twig\TwigFunction;
+use Symfony\Component\HttpKernel\KernelInterface;
+
+class EncoreTwigExtension extends AbstractExtension
+{
+    private $relativeBuildPath = "/js/build/";
+
+    public function getName()
+    {
+        return "app.encoretwig";
+    }
+
+    public function getFunctions(): array
+    {
+        return [
+            new TwigFunction('encore_entry_js_files', [$this, 'getWebpackJsFiles']),
+            new TwigFunction('encore_entry_css_files', [$this, 'getWebpackCssFiles']),
+            new TwigFunction('encore_entry_script_tags', [$this, 'renderWebpackScriptTags'], ['is_safe' => ['html']]),
+            new TwigFunction('encore_entry_link_tags', [$this, 'renderWebpackLinkTags'], ['is_safe' => ['html']]),
+        ];
+    }
+
+    public function getWebpackJsFiles(string $entryName): array
+    {
+        return $this->getWebpackFiles($entryName, "js");
+    }
+
+    public function getWebpackCssFiles(string $entryName): array
+    {
+        return $this->getWebpackFiles($entryName, "css");
+    }
+
+    private function getWebpackFiles(string $entryName, string $fileType): array
+    {
+        $fullpath = dirname(__FILE__) . "/../../../web/" . $this->relativeBuildPath . "entrypoints.json";
+        $entrypoints = json_decode(file_get_contents($fullpath), true);
+        return $entrypoints['entrypoints'][$entryName][$fileType];
+    }
+
+    public function renderWebpackScriptTags(string $entryName): string
+    {
+        $tags = array();
+
+        foreach ($this->getWebpackJsFiles($entryName) as $file)
+        {
+            $tags[] = '<script src="'.$file.'"></script>';
+        }
+
+        return implode(PHP_EOL, $tags);
+    }
+
+    public function renderWebpackLinkTags(string $entryName): string
+    {
+        $tags = array();
+
+        foreach ($this->getWebpackCssFiles($entryName) as $file)
+        {
+            $tags[] = '<link rel="stylesheet" href="'.$file.'">';
+        }
+
+        return implode(PHP_EOL, $tags);
+    }
+}
diff --git a/src/AppBundle/Repository/ProductRepository.php b/src/AppBundle/Repository/ProductRepository.php
@@ -137,7 +137,7 @@ public function findStock(User $user)
 
         $products = array_filter($products,
             function(Product $product) {
-                return $product->getQuantityInStock() != 0;
+                return $product->getQuantityInStock() > 0;
             });
 
         return $products;

diff --git a/src/AppBundle/Resources/views/Dashboard/index.html.twig b/src/AppBundle/Resources/views/Dashboard/index.html.twig
@@ -198,12 +198,7 @@
         </div>
     </div>
 </div>
-<div id="product-index">x</div> Hiervoor?
 
-<script src="{{ asset('./js/build/runtime.js') }}"></script>
-<script src="{{ asset('./js/build/vendors-node_modules_vue-loader_lib_runtime_componentNormalizer_js-node_modules_vue_dist_vue_esm_js.js') }}"></script>
-<script src="{{ asset('./js/build/product-index.js') }}"></script>
-{{ encore_entry_script_tags('app') }}
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
 

diff --git a/src/AppBundle/Resources/views/Product/index.html.twig b/src/AppBundle/Resources/views/Product/index.html.twig
@@ -42,63 +42,12 @@
         </div>        
     </div>
 
-    <table class="table table-striped">
-        <thead>
-            <tr>
-                <th></th>
-                <th{% if products.isSorted('sku') %} class="sorted"{% endif %}>{{ knp_pagination_sortable(products, 'SKU', 'sku') }}</th>
-                <th{% if products.isSorted('name') %} class="sorted"{% endif %}>{{ knp_pagination_sortable(products, 'Name', 'name') }}</th>
-                <th{% if products.isSorted('type.name') %} class="sorted"{% endif %}>{{ knp_pagination_sortable(products, 'Type', 'type.name') }}</th>
-                <th{% if products.isSorted('location.name') %} class="sorted"{% endif %}>{{ knp_pagination_sortable(products, 'Location', 'location.name') }}</th>
-                <th width="10%">Price</th>
-                <th width="5%">Purch</th>
-                <th width="5%">Stock</th>
-                <th width="5%">Hold</th>
-                <th width="5%">Sale</th>
-                <th width="5%">Sold</th>
-                <th width="1%"></th>
-            </tr>
-        </thead>
-        <tbody>
-        {% for product in products %}
-            <tr>
-                <td><input type="checkbox" id="index_bulk_edit_form_index_{{ product.id }}" name="index_bulk_edit_form[index][]" value="{{ product.id }}"></td>
-                <td><a href="{{ path('product_edit', { 'id': product.id }) }}" data-target="#modalEditor" class="btn-modal" data-toggle="tooltip" title="{{ product.getAttributesList() }}">{{ product.sku }}</a></td>
-                <td><a href="{{ path('product_edit', { 'id': product.id }) }}" data-target="#modalEditor" class="btn-modal" data-toggle="tooltip" title="{{ product.getAttributesList() }}">{{ product.name }}</a></td>
-                <td>{{ product.type.name|default("") }}</td>
-                <td>{{ product.location.name|default("") }}</td>
-                <td>&euro; {{ product.price|number_format(2, ',', '.') }}</td>
-                <td>{{ product.getQuantityPurchased() }}</td>
-                <td>{{ product.getQuantityInStock() }}</td>
-                <td>{{ product.getQuantityOnHold() }}</td>
-                <td>{{ product.getQuantitySaleable() }}</td>
-                <td>{{ product.getQuantitySold() }}</td>
-                <td nowrap align="right">
-                    {% spaceless %}
-                    {% if product.purchaseOrderRelation and product.type and product.type.tasks|length > 0 %}
-                    <a class="btn btn-default btn-modal" href="{{ path('product_checklist', { 'relationId': product.purchaseOrderRelation.id }) }}" data-target="#modalEditor" title="Checklist of tasks">
-                        <span class="glyphicon glyphicon-check" aria-label="Checklist" style="margin-right: 3px"></span>
-                        {{ product.purchaseOrderRelation.servicesDone }} / {{ product.type.tasks|length }}
-                    </a>
-                    {% endif %}
-                    {% if product.getQuantityPurchased() > 1 %}
-                    <a class="btn btn-default btn-modal" href="{{ path('product_split', { 'id': product.id }) }}" data-target="#modalSplitter" title="Split bundle"><span class="glyphicon glyphicon-flash" aria-label="Split"></span></a>
-                    {% endif %}
-                    <a class="btn btn-success btn-modal" href="{{ path('product_edit', { 'id': product.id }) }}" data-target="#modalEditor" title="Edit"><span class="glyphicon glyphicon-pencil" aria-label="Edit"></span></a>
-                    <a class="btn btn-danger btn-delete btn-modal" href="{{ path('product_delete', { 'id': product.id }) }}" title="Delete" data-class="product" data-name="{{ product.name }}"><span class="glyphicon glyphicon-remove" aria-label="Delete"></span></a>
-                    {% endspaceless %}
-                </td>
-            </tr>
-        {% else %}
-            <tr>
-                <td colspan="99">
-                    <h4>{% trans %}No records found{% endtrans %}</h4>
-                </td>
-            </tr>
-        {% endfor %}
-
-        </tbody>
-    </table>
+
+
+    <div id="product-stock" data-products="{{ products.items|json_encode|escape('html_attr') }}"></div>
+
+
+
 
     <div class="navigation">
         {{ knp_pagination_render(products) }}
@@ -107,3 +56,7 @@
     {{ form_end(formBulkEdit, {'render_rest': false}) }}
 
 {% endblock %}
+
+{% block javascripts %}
+    {{ encore_entry_script_tags('product-stock') }}
+{% endblock %}
diff --git a/src/AppBundle/Resources/vue/ProductIndex/App.vue b/src/AppBundle/Resources/vue/ProductIndex/App.vue
diff --git a/src/AppBundle/Resources/vue/ProductIndex/main.js b/src/AppBundle/Resources/vue/ProductIndex/main.js
diff --git a/src/AppBundle/Resources/vue/ProductStock/App.vue b/src/AppBundle/Resources/vue/ProductStock/App.vue
@@ -0,0 +1,19 @@
+<template>
+
+</template>
+
+<script>
+
+export default {
+    name: 'App',
+    data() { 
+        var dataElement = document.querySelector('div#product-stock');
+        var products = dataElement.dataset.products;
+        return { 
+            products
+        }
+    }
+}
+</script>
+
+
diff --git a/src/AppBundle/Resources/vue/ProductStock/main.js b/src/AppBundle/Resources/vue/ProductStock/main.js
@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({ render: h => h(App) }).$mount('#product-stock') 
diff --git a/webpack.config.js b/webpack.config.js
@@ -21,7 +21,7 @@ Encore
      * Each entry will result in one JavaScript file (e.g. app.js)
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
-    .addEntry('product-index', './src/AppBundle/Resources/vue/ProductIndex/main.js')
+    .addEntry('product-stock', './src/AppBundle/Resources/vue/ProductStock/main.js')
     //.addEntry('order-products', './src/AppBundle/Resources/vue/OrderProducts/main.js')
 
     // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
@@ -71,4 +71,12 @@ Encore
     })
 ;
 
-module.exports = Encore.getWebpackConfig();
+const config = Encore.getWebpackConfig();
+
+// Change the kind of source map generated in development mode
+if (!Encore.isProduction()) {
+    // config.devtool = 'cheap-eval-source-map';
+    config.output.devtoolModuleFilenameTemplate = 'file:///[absolute-resource-path]';
+}
+
+module.exports = config;