Tarea #601 dialogo de añadir cantidad

client/order/src/prices-popover/index.html

@@ -34,21 +34,28 @@
                     ng-click="$ctrl.saveQuantity($ctrl.prices)"></vn-icon-button>
                 </vn-vertical>
                 <vn-vertical class="prices">
+                    <form name="form">
                     <vn-horizontal
                         ng-repeat="price in $ctrl.prices">
                         <vn-one class="ellipsize text" title="{{::price.warehouse}}">{{::price.warehouse}}</vn-one>
                         <vn-one class="number text">
-                            <span orange ng-click="$ctrl.addQuantity(price)" class="link">{{::price.grouping}} x </span><span>{{::price.price | currency: ' €': 2}}</span>
+                            <span orange ng-click="$ctrl.addQuantity(price)" class="link unselectable">{{::price.grouping}}</span><span> x {{::price.price | currency: ' €': 2}}</span>
                         </vn-one>
                         <vn-one>
-                            <vn-textfield
+                            <vn-input-number
+                                name="quantity"
                                 label="Qty."
-                                type="number"
                                 model="price.quantity"
-                                vn-acl="buyer">
+                                min="0"
-                            </vn-textfield>
+                                step="price.grouping"
+                                on-change="$ctrl.validate()">
+                            </vn-input-number>
                         </vn-one>
                     </vn-horizontal>
+                </form>
+                <vn-one class="error">
+                    <span translate>Wrong quantity</span>
+                </vn-one>
                 </vn-vertical>
             </vn-horizontal>
             <vn-horizontal class="buttons-bar">
@@ -59,9 +66,10 @@
                     </vn-button>
                 </vn-one>
                 <vn-one>
-                    <vn-button
+                    <vn-submit
                         label="Save"
-                        ng-click="$ctrl.saveQuantity($ctrl.prices)"></vn-button>
+                        ng-click="$ctrl.submit()">
+                    </vn-submit>
                 </vn-one>
             </vn-horizontal>
         </div>

client/order/src/prices-popover/index.js

@@ -2,12 +2,20 @@ import ngModule from '../module';
 import './style.scss';
 
 class Controller {
-    constructor($scope, $http) {
+    constructor($scope, $http, $element) {
         this.$ = $scope;
         this.$http = $http;
+        this.$element = $element;
         this.totalBasquet = 0;
     }
-
+    set prices(value) {
+        this._prices = value;
+        if (value && value[0].grouping)
+            this.calculateTotal();
+    }
+    get prices() {
+        return this._prices;
+    }
     getTags() {
         let filter = {
             where: {itemFk: this.item.id,
@@ -19,7 +27,6 @@ class Controller {
             this.tags = response.data;
         });
     }
-
     show(event, item) {
         this.item = JSON.parse(JSON.stringify(item));
         this.prices = this.item.prices;
@@ -28,35 +35,98 @@ class Controller {
         this.$.popover.relocate();
         this.$.popover.show();
     }
-
     clear() {
         this.item = {};
         this.tags = {};
-        this.prices = {};
+        this._prices = {};
-        this.totalBasquet = 0;
+        this.total = 0;
     }
-    addQuantity(price) {
+    calculateMax() {
-        if (this.totalBasquet + price.grouping <= this.item.disponible) {
+        this.max = this.item.available - this.total;
-            price.quantity += price.grouping;
-            this.totalBasquet = this.totalBasquet + price.grouping;
-        }
     }
-    save() {
+    calculateTotal() {
-        let params = {
+        this.total = 0;
-            warehouseFk: warehouseFk,
-            itemFk: itemFk,
-            quantity: quantity
-        };
 
-        this.$http.post(`/order/api/OrderRows/new`, params).then(response => {
+        this.prices.forEach(price => {
-            this.tags = response.data;
+            if (!price.quantity) price.quantity = 0;
+            this.total += price.quantity;
+        });
+        this.calculateMax();
+    }
+
+    addQuantity(price) {
+        if (this.total + price.grouping <= this.max) {
+            price.quantity += price.grouping;
+        }
+        this.validate();
+    }
+
+    validate() {
+        setTimeout(() => {
+            this.calculateTotal();
+            let inputs = this.$element[0].querySelectorAll('vn-input-number[name="quantity"] div.infix:not(.validated)');
+
+            inputs.forEach(input => {
+                if (this.total > this.item.available)
+                    input.classList.add('invalid');
+                else
+                    input.classList.remove('invalid');
+            });
+            let wrongInputs = this.$element[0].querySelectorAll('vn-input-number[name="quantity"] div.infix.invalid');
+
+            if (wrongInputs.length > 0) {
+                this.$element[0].querySelector('vn-vertical.prices').classList.add('invalid');
+            } else {
+                this.$element[0].querySelector('vn-vertical.prices').classList.remove('invalid');
+            }
+        });
+    }
+
+    focusFirstInput() {
+        let inputs = document.querySelectorAll('input[name="quantity"]');
+        inputs[inputs.length - 1].querySelector("input").focus();
+        this.calculateTotals();
+    }
+
+    getFilledLines() {
+        let filledLines = [];
+        this.prices.forEach(price => {
+            if (price.quantity && price.quantity > 0)
+                filledLines.push(price);
+        });
+        return filledLines;
+    }
+
+    submit() {
+        this.calculateTotal();
+        let filledLines = getFilledLines();
+
+        if (filledLines.length <= 0) return;
+
+        setTimeout(() => {
+            let params = {
+                orderFk: this.order.id,
+                lines: filledLines,
+                itemFk: this.item.id,
+                landed: this.order.landed,
+                addressFk: this.order.address_id,
+                agencyFk: this.order.agency_id
+            };
+
+            this.$http.post(`/order/api/OrderRows/new`, params).then(res => {
+                console.log(res.data);
+                this.tags = res.data;
+            });
         });
     }
 }
 
-Controller.$inject = ['$scope', '$http'];
+Controller.$inject = ['$scope', '$http', '$element'];
 
 ngModule.component('vnOrderPricesPopover', {
     template: require('./index.html'),
-    controller: Controller
+    controller: Controller,
+    bindings: {
+        order: '<'
+    }
 });

client/order/src/prices-popover/locale/es.yml

@@ -1,2 +1,3 @@
 Last entries: Últimas entradas
-Qty.: Cant.
+Qty.: Cant.
+Wrong quantity: Cantidad errónea

client/order/src/prices-popover/style.scss

@@ -19,10 +19,22 @@ vn-order-prices-popover {
 
     vn-vertical.prices{
         padding-left: 16px;
+        &.invalid {
+            vn-one.error {
+                display: block;
+                padding-top: 10px;
+                color: #d50000;
+                text-align: center!important;
+            }
+        }
     }
 
-    vn-textfield{
+    vn-input-number{
         margin: 0!important;
+
+        label {
+            display: none;
+        }
     }
 
     vn-one.number {
@@ -37,4 +49,7 @@ vn-order-prices-popover {
         padding-top: 16px;
         text-align: center;
     }
+    vn-one.error{
+        display: none;
+    }
 }