2729 - Prices popover refactor

modules/order/front/catalog-view/index.html

@@ -13,7 +13,8 @@
                     on-error-src/>
             </div>
             <div class="description">
-                <h3>
+                <h3 class="link" 
+                ng-click="itemDescriptor.show($event, item.id)">
                     {{::item.name}}
                 </h3>
                 <h4 class="ellipsize">
@@ -65,3 +66,6 @@
     vn-id="pricesPopover"
     order="$ctrl.order">
 </vn-order-prices-popover>
+<vn-item-descriptor-popover
+    vn-id="itemDescriptor">
+</vn-item-descriptor-popover>

modules/order/front/prices-popover/index.html

@@ -1,75 +1,52 @@
 <default>
-    <vn-descriptor-content
+    <form name="form" class="prices">
-        module="item"
+        <vn-table>
-        description="$ctrl.item.name"
+            <vn-tbody>
-        descriptor="$ctrl"
+            <vn-tr ng-repeat="price in $ctrl.prices">
-        class="vn-order-prices-popover">
+                <vn-td class="warehouse" expand>
-        <slot-body>
+                    <span
-            <div class="attributes">
+                        class="text"
-                <vn-label-value
+                        title="{{::price.warehouse}}">
-                    label="Buyer" 
+                        {{::price.warehouse}}
-                    value="{{$ctrl.item.firstName}} {{$ctrl.item.lastName}}">
+                    </span>
-                </vn-label-value>
+                </vn-td>
-                <vn-label-value
+                <vn-td number expand>
-                    ng-repeat="tag in $ctrl.tags"
+                    <div>
-                    label="{{::tag.tag.name}}" 
+                        <span
-                    value="{{::tag.value}}">
+                            ng-click="$ctrl.addQuantity(price)"
-                </vn-label-value>
+                            class="link unselectable">{{::price.grouping}}</span>
-            </div>
+                        <span> x {{::price.price | currency: 'EUR': 2}}</span>
-            <div class="quicklinks">
-                <vn-quick-link
-                    tooltip="Diary"
-                    state="['item.card.diary', {id: $ctrl.id}]"
-                    icon="icon-transaction">
-                </vn-quick-link>
-            </div>
-        </slot-body>
-        <slot-after>
-            <form name="form" class="prices">
-                <vn-table>
-                    <vn-tbody>
-                    <vn-tr ng-repeat="price in $ctrl.prices">
-                        <vn-td shrink class="warehouse">
-                            <span
-                                class="ellipsize text"
-                                title="{{::price.warehouse}}">
-                                {{::price.warehouse}}
-                            </span>
-                        </vn-td>
-                        <vn-td number expand>
-                            <div>
-                                <span
-                                    ng-click="$ctrl.addQuantity(price)"
-                                    class="link unselectable">{{::price.grouping}}</span>
-                                <span> x {{::price.price | currency: 'EUR': 2}}</span>
-                            </div>
-                            <div class="price-kg" ng-show="::price.priceKg">
-                                {{price.priceKg | currency: 'EUR'}}/Kg
-                            </div>
-                        </vn-td>
-                        <vn-td shrink>
-                            <vn-input-number
-                                min="0"
-                                name="quantity"
-                                ng-model="price.quantity"
-                                step="price.grouping"
-                                on-change="$ctrl.validate()"
-                                class="dense">
-                            </vn-input-number>
-                        </vn-td>
-                    </vn-tr>
-                    </vn-tbody>
-                </vn-table>
-                <div class="footer vn-pa-md">
-                    <div class="error">
-                        <span translate>Wrong quantity</span>
                     </div>
-                    <vn-submit
+                    <div class="price-kg" ng-show="::price.priceKg">
-                        label="Save"
+                        {{::price.priceKg | currency: 'EUR'}}/Kg
-                        ng-click="$ctrl.submit()">
+                    </div>
-                    </vn-submit>
+                </vn-td>
-                </div>
+                <vn-td shrink>
-            </form>
+                    <!-- Focus first element -->
-        </slot-after>
+                    <vn-input-number ng-if="$index === 0"
-    </vn-descriptor-content>
+                        min="0"
+                        name="quantity"
+                        ng-model="price.quantity"
+                        step="price.grouping"
+                        class="dense"
+                        vn-focus>
+                    </vn-input-number>
+                    <vn-input-number ng-if="$index > 0"
+                        min="0"
+                        name="quantity"
+                        ng-model="price.quantity"
+                        step="price.grouping"
+                        class="dense">
+                    </vn-input-number>
+                </vn-td>
+            </vn-tr>
+            </vn-tbody>
+        </vn-table>
+        <div class="footer vn-pa-md">
+            <vn-submit
+                label="Add"
+                ng-click="$ctrl.submit()">
+            </vn-submit>
+        </div>
+    </form>
 </default>

modules/order/front/prices-popover/index.js

@@ -11,34 +11,18 @@ class Controller extends Popover {
     set prices(value) {
         this._prices = value;
         if (value && value[0].grouping)
-            this.calculateTotal();
+            this.getTotalQuantity();
     }
 
     get prices() {
         return this._prices;
     }
 
-    getTags() {
-        const filter = {
-            where: {
-                itemFk: this.id,
-                priority: {gte: 4}
-            },
-            order: 'priority ASC',
-            include: {relation: 'tag'}
-        };
-        this.$http.get(`ItemTags`, {filter})
-            .then(res => {
-                this.tags = res.data;
-                this.$.$applyAsync(() => this.relocate());
-            });
-    }
-
     show(parent, item) {
         this.item = JSON.parse(JSON.stringify(item));
         this.id = item.id;
         this.prices = this.item.prices;
-        this.getTags();
+
         super.show(parent);
     }
 
@@ -47,67 +31,74 @@ class Controller extends Popover {
         this.item = {};
         this.tags = {};
         this._prices = {};
-        this.total = 0;
+        this.totalQuantity = 0;
         super.onClose();
     }
 
-    calculateMax() {
+    getTotalQuantity() {
-        this.max = this.item.available - this.total;
+        let total = 0;
-    }
+        for (let price of this.prices) {
-
-    calculateTotal() {
-        this.total = 0;
-
-        this.prices.forEach(price => {
             if (!price.quantity) price.quantity = 0;
-            this.total += price.quantity;
+            total += price.quantity;
-        });
+        }
-        this.calculateMax();
+
+        this.totalQuantity = total;
+        this.maxQuantity = this.item.available - total;
     }
 
     addQuantity(price) {
-        if (this.total + price.grouping <= this.max)
+        this.getTotalQuantity();
+        const quantity = this.totalQuantity + price.grouping;
+        if (quantity <= this.maxQuantity)
             price.quantity += price.grouping;
     }
 
-    getFilledLines() {
+    getGroupings() {
-        const filledLines = [];
+        const filledRows = [];
-        let match;
+        for (let price of this.prices) {
-        this.prices.forEach(price => {
             if (price.quantity && price.quantity > 0) {
-                match = filledLines.find(element => {
+                const priceMatch = filledRows.find(row => {
-                    return element.warehouseFk == price.warehouseFk;
+                    return row.warehouseFk == price.warehouseFk;
                 });
 
-                if (!match) {
+                if (!priceMatch)
-                    filledLines.push(Object.assign({}, price));
+                    filledRows.push(Object.assign({}, price));
-                    return;
+                else priceMatch.quantity += price.quantity;
-                }
-                match.quantity += price.quantity;
             }
-        });
+        }
-        return filledLines;
+
+        return filledRows;
     }
 
     submit() {
-        this.calculateTotal();
+        const filledRows = this.getGroupings();
-        const filledLines = this.getFilledLines();
 
-        if (filledLines.length <= 0) {
+        try {
-            this.vnApp.showError(this.$t('First you must add some quantity'));
+            const hasValidGropings = filledRows.some(row =>
-            return;
+                row.quantity % row.grouping == 0
+            );
+
+            if (filledRows.length <= 0)
+                throw new Error('First you must add some quantity');
+
+            if (!hasValidGropings)
+                throw new Error(`The amounts doesn't match with the grouping`);
+
+            const params = {
+                orderFk: this.order.id,
+                items: filledRows
+            };
+            this.$http.post(`OrderRows/addToOrder`, params)
+                .then(() => {
+                    this.vnApp.showSuccess(this.$t('Data saved!'));
+                    this.hide();
+                    if (this.card) this.card.reload();
+                });
+        } catch (e) {
+            this.vnApp.showError(this.$t(e.message));
+            return false;
         }
-
+        return true;
-        const params = {
-            orderFk: this.order.id,
-            items: filledLines
-        };
-        this.$http.post(`OrderRows/addToOrder`, params)
-            .then(() => {
-                this.vnApp.showSuccess(this.$t('Data saved!'));
-                this.hide();
-                if (this.card) this.card.reload();
-            });
     }
 }
 

modules/order/front/prices-popover/locale/es.yml

@@ -1,4 +1,3 @@
-Last entries: Últimas entradas
 Qty.: Cant.
-Wrong quantity: Cantidad errónea
+First you must add some quantity: Primero debes agregar alguna cantidad
-First you must add some quantity: Primero debes agregar alguna cantidad
+The amounts doesn't match with the grouping: Las cantidades no coinciden con el grouping

modules/order/front/prices-popover/style.scss

@@ -1,25 +1,8 @@
 @import "variables";
 
 .vn-order-prices-popover .content {
-    max-width: 350px;
-
-    .header > a:first-child {
-        visibility: hidden;
-    }
-    img[ng-src] {
-        height: 100%;
-        width: 100%;
-    }
-    vn-vertical.data {
-        padding-right: 16px;
-        border-right: 1px solid $color-main;
-    }
     .prices {
         vn-table {
-            .warehouse {
-                width: 48px;
-                max-width: 48px;
-            }
             .price-kg {
                 color: $color-font-secondary;
                 font-size: .75rem
@@ -30,18 +13,6 @@
         }
         .footer {
             text-align: center;
-
-            .error {
-                display: none;
-            }
-            &.invalid {
-                .error {
-                    display: block;
-                    padding-top: 10px;
-                    color: $color-alert;
-                    text-align: center;
-                }
-            }
         }
     }
 }

modules/ticket/front/descriptor-menu/index.html

@@ -7,7 +7,6 @@
         <vn-item
             ng-click="addTurn.show()"
             vn-acl="buyer"
-            ng-show="$ctrl.isEditable"
             vn-acl-action="remove"
             name="addTurn"
             translate>