Merge pull request '2729 - Prices popover refactor' (#603) from 2729-prices_popover into dev

Reviewed-on: #603
Reviewed-by: Carlos Jimenez Ruiz <carlosjr@verdnatura.es>

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/index.spec.js

@@ -0,0 +1,171 @@
+import './index.js';
+
+describe('Order', () => {
+    describe('Component vnOrderPricesPopover', () => {
+        let controller;
+        let $httpBackend;
+        let orderId = 16;
+
+        beforeEach(ngModule('order'));
+
+        beforeEach(inject(($componentController, $rootScope, _$httpBackend_) => {
+            $httpBackend = _$httpBackend_;
+            const $scope = $rootScope.$new();
+            const $element = angular.element('<vn-order-prices-popover></vn-order-prices-popover>');
+            const $transclude = {
+                $$boundTransclude: {
+                    $$slots: []
+                }
+            };
+            controller = $componentController('vnOrderPricesPopover', {$element, $scope, $transclude});
+            controller._prices = [
+                {warehouseFk: 1, grouping: 10, quantity: 0},
+                {warehouseFk: 1, grouping: 100, quantity: 100}
+            ];
+            controller.item = {available: 1000};
+            controller.order = {id: orderId};
+        }));
+
+        describe('prices() setter', () => {
+            it('should call to the getTotalQuantity() method', () => {
+                controller.getTotalQuantity = jest.fn();
+
+                controller.prices = [
+                    {grouping: 10, quantity: 0},
+                    {grouping: 100, quantity: 0},
+                    {grouping: 1000, quantity: 0},
+                ];
+
+                expect(controller.getTotalQuantity).toHaveBeenCalledWith();
+            });
+        });
+
+        describe('getTotalQuantity()', () => {
+            it('should set the totalQuantity and maxQuantity properties', () => {
+                controller.getTotalQuantity();
+
+                expect(controller.totalQuantity).toEqual(100);
+                expect(controller.maxQuantity).toEqual(900);
+            });
+        });
+
+        describe('addQuantity()', () => {
+            it('should call to the getTotalQuantity() method and NOT set the quantity property', () => {
+                jest.spyOn(controller, 'getTotalQuantity');
+
+                controller.prices = [
+                    {grouping: 10, quantity: 0},
+                    {grouping: 100, quantity: 0},
+                    {grouping: 1000, quantity: 1000},
+                ];
+
+                const oneThousandGrouping = controller.prices[2];
+
+                expect(oneThousandGrouping.quantity).toEqual(1000);
+
+                controller.addQuantity(oneThousandGrouping);
+
+                expect(controller.getTotalQuantity).toHaveBeenCalledWith();
+                expect(oneThousandGrouping.quantity).toEqual(1000);
+            });
+
+            it('should call to the getTotalQuantity() method and then set the quantity property', () => {
+                jest.spyOn(controller, 'getTotalQuantity');
+
+                const oneHandredGrouping = controller.prices[1];
+                controller.addQuantity(oneHandredGrouping);
+
+                expect(controller.getTotalQuantity).toHaveBeenCalledWith();
+                expect(oneHandredGrouping.quantity).toEqual(200);
+            });
+        });
+
+        describe('getGroupings()', () => {
+            it('should return a row with the total filled quantity', () => {
+                jest.spyOn(controller, 'getTotalQuantity');
+
+                controller.prices = [
+                    {warehouseFk: 1, grouping: 10, quantity: 10},
+                    {warehouseFk: 1, grouping: 100, quantity: 100},
+                    {warehouseFk: 1, grouping: 1000, quantity: 1000},
+                ];
+
+                const rows = controller.getGroupings();
+                const firstRow = rows[0];
+
+                expect(rows.length).toEqual(1);
+                expect(firstRow.quantity).toEqual(1110);
+            });
+
+            it('should return two filled rows with a quantity', () => {
+                jest.spyOn(controller, 'getTotalQuantity');
+
+                controller.prices = [
+                    {warehouseFk: 1, grouping: 10, quantity: 10},
+                    {warehouseFk: 2, grouping: 10, quantity: 10},
+                    {warehouseFk: 1, grouping: 100, quantity: 0},
+                    {warehouseFk: 1, grouping: 1000, quantity: 1000},
+                ];
+
+                const rows = controller.getGroupings();
+                const firstRow = rows[0];
+                const secondRow = rows[1];
+
+                expect(rows.length).toEqual(2);
+                expect(firstRow.quantity).toEqual(1010);
+                expect(secondRow.quantity).toEqual(10);
+            });
+        });
+
+        describe('submit()', () => {
+            it('should throw an error if none of the rows contains a quantity', () => {
+                jest.spyOn(controller, 'getTotalQuantity');
+                jest.spyOn(controller.vnApp, 'showError');
+
+                controller.prices = [
+                    {warehouseFk: 1, grouping: 10, quantity: 0},
+                    {warehouseFk: 1, grouping: 100, quantity: 0}
+                ];
+
+                controller.submit();
+
+                expect(controller.vnApp.showError).toHaveBeenCalledWith(`First you must add some quantity`);
+            });
+
+            it(`should throw an error if the quantity doesn't match the grouping value`, () => {
+                jest.spyOn(controller, 'getTotalQuantity');
+                jest.spyOn(controller.vnApp, 'showError');
+
+                controller.prices = [
+                    {warehouseFk: 1, grouping: 10, quantity: 0},
+                    {warehouseFk: 1, grouping: 100, quantity: 101}
+                ];
+
+                controller.submit();
+
+                expect(controller.vnApp.showError).toHaveBeenCalledWith(`The amounts doesn't match with the grouping`);
+            });
+
+            it('should should make an http query and then show a success message', () => {
+                jest.spyOn(controller, 'getTotalQuantity');
+                jest.spyOn(controller.vnApp, 'showSuccess');
+
+                controller.prices = [
+                    {warehouseFk: 1, grouping: 10, quantity: 0},
+                    {warehouseFk: 1, grouping: 100, quantity: 100}
+                ];
+
+                const params = {
+                    orderFk: orderId,
+                    items: [{warehouseFk: 1, grouping: 100, quantity: 100}]
+                };
+
+                $httpBackend.expectPOST('OrderRows/addToOrder', params).respond(200);
+                controller.submit();
+                $httpBackend.flush();
+
+                expect(controller.vnApp.showSuccess).toHaveBeenCalledWith(`Data saved!`);
+            });
+        });
+    });
+});

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,47 +1,18 @@
 @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
             }
             .vn-input-number {
-                width: 56px;
+                width: 80px;
             }
         }
         .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>