Tarea #429 order.catalog click en boton + abrir añadir cantidad

client/order/src/catalogue/index.html

@@ -18,10 +18,7 @@
                         ng-repeat="item in items" 
                         item="::item">
                     </vn-order-product>
-
+                    <vn-one style="text-align: center" pad-small translate>No results</vn-one>
-                    <vn-one style="text-align: center" pad-small translate ng-if="model.data.length == 0">
-                        No results
-                    </vn-one>
                 </vn-horizontal>
             </vn-vertical>
         </vn-card>
@@ -31,3 +28,7 @@
         <vn-filter order="$ctrl.order"></vn-filter>
     </vn-auto>
 </vn-horizontal>
+
+<vn-order-prices-popover
+    vn-id="pricesPopover">
+</vn-order-prices-popover>

client/order/src/catalogue/index.js

@@ -27,6 +27,14 @@ class Controller {
     get order() {
         return this._order;
     }
+
+    openPricePopover(event, item) {
+        this.$scope.pricesPopover.show(event, item);
+    }
+
+    onDescriptorLoad() {
+        this.$scope.popover.relocate();
+    }
 }
 
 Controller.$inject = ['$scope', '$stateParams'];

client/order/src/catalogue/product.html

@@ -40,7 +40,7 @@
                     </vn-one>
                     <vn-auto>
                         <a href="" vn-tooltip="Add">
-                            <vn-icon icon="add_circle"></vn-icon>
+                            <vn-icon icon="add_circle" ng-click="$ctrl.preview($event)"></vn-icon>
                         </a>
                     </vn-auto>
                 </section>

client/order/src/catalogue/product.js

@@ -1,7 +1,20 @@
 import ngModule from '../module';
 
+class Controller {
+    onClick(event) {
+        if (event.defaultPrevented)
+            event.stopImmediatePropagation();
+    }
+
+    preview(event) {
+        event.preventDefault();
+        this.index.openPricePopover(event, this.item);
+    }
+}
+
 ngModule.component('vnOrderProduct', {
     template: require('./product.html'),
+    controller: Controller,
     bindings: {
         item: '<'
     },

client/order/src/index.js

@@ -8,7 +8,7 @@ import './summary';
 import './catalogue';
 import './catalogue/product';
 import './line';
-//import './prices-popover';
+import './prices-popover';
 import './volume';
 import './create';
 import './create/card';

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

@@ -0,0 +1,69 @@
+<vn-popover vn-id="popover" on-close="$ctrl.clear()">
+    <vn-card class="vn-descriptor">
+        <vn-horizontal class="header">
+            <a translate-attr="{title: 'Return to module index'}" ui-sref="item.index">
+                <vn-icon icon="chevron_left"></vn-icon>
+            </a>
+            <vn-icon icon="inbox"></vn-icon>
+            <a translate-attr="{title: 'Preview'}" ui-sref="item.card.summary({id: $ctrl.item.id})">
+                <vn-icon icon="desktop_windows"></vn-icon>
+            </a>
+        </vn-horizontal>
+        <div pad-medium>
+            <vn-horizontal>
+                <h5>{{$ctrl.item.id}}</h5>
+            </vn-horizontal>
+            <vn-horizontal>
+                <vn-vertical class="data">
+                    <vn-auto>
+                        <vn-label-value label="Name" 
+                            value="{{$ctrl.item.name}}">
+                        </vn-label-value>
+                        <vn-label-value label="Buyer" 
+                            value="{{$ctrl.item.workerFirstName}} {{$ctrl.item.workerName}}">
+                        </vn-label-value>
+                        <vn-label-value
+                            ng-repeat="tag in $ctrl.tags"
+                            label="{{::tag.tag.name}}" 
+                            value="{{::tag.value}}">
+                        </vn-label-value>
+                    </vn-auto>
+                    <vn-icon-button
+                    class="button"
+                    label="Save"
+                    ng-click="$ctrl.saveQuantity($ctrl.prices)"></vn-icon-button>
+                </vn-vertical>
+                <vn-vertical class="prices">
+                    <vn-horizontal
+                        ng-repeat="price in $ctrl.prices">
+                        <vn-one class="ellipsize text" title="{{::price.warehouseName}}">{{::price.warehouseName}}</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>
+                        </vn-one>
+                        <vn-one>
+                            <vn-textfield
+                                label="Qty."
+                                type="number"
+                                model="price.quantity"
+                                vn-acl="buyer">
+                            </vn-textfield>
+                        </vn-one>
+                    </vn-horizontal>
+                </vn-vertical>
+            </vn-horizontal>
+            <vn-horizontal class="buttons-bar">
+                <vn-one
+                    vn-tooltip="Last entries" 
+                    tooltip-position="down">
+                    <vn-button ui-sref="item.card.diary({id: $ctrl.item.id})" icon="icon-transaction">
+                    </vn-button>
+                </vn-one>
+                <vn-one>
+                    <vn-button
+                        label="Save"
+                        ng-click="$ctrl.saveQuantity($ctrl.prices)"></vn-button>
+                </vn-one>
+            </vn-horizontal>
+        </div>
+    </vn-card>
+</vn-popover>

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

@@ -0,0 +1,62 @@
+import ngModule from '../module';
+import './style.scss';
+
+class Controller {
+    constructor($scope, $http) {
+        this.$ = $scope;
+        this.$http = $http;
+        this.totalBasquet = 0;
+    }
+
+    getTags() {
+        let filter = {
+            where: {itemFk: this.item.id,
+                priority: {gte: 4}},
+            order: 'priority ASC',
+            include: {relation: 'tag'}
+        };
+        this.$http.get(`/item/api/ItemTags?filter=${JSON.stringify(filter)}`).then(response => {
+            this.tags = response.data;
+        });
+    }
+
+    show(event, item) {
+        this.item = JSON.parse(JSON.stringify(item));
+        this.prices = this.item.prices;
+        this.getTags();
+        this.$.popover.parent = event.target;
+        this.$.popover.relocate();
+        this.$.popover.show();
+    }
+
+    clear() {
+        this.item = {};
+        this.tags = {};
+        this.prices = {};
+        this.totalBasquet = 0;
+    }
+    addQuantity(price) {
+        if (this.totalBasquet + price.grouping <= this.item.disponible) {
+            price.quantity += price.grouping;
+            this.totalBasquet = this.totalBasquet + price.grouping;
+        }
+    }
+    save() {
+        let params = {
+            warehouseFk: warehouseFk,
+            itemFk: itemFk,
+            quantity: quantity
+        };
+
+        this.$http.post(`/order/api/OrderRows/new`, params).then(response => {
+            this.tags = response.data;
+        });
+    }
+}
+
+Controller.$inject = ['$scope', '$http'];
+
+ngModule.component('vnOrderPricesPopover', {
+    template: require('./index.html'),
+    controller: Controller
+});

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

@@ -0,0 +1,2 @@
+Last entries: Últimas entradas
+Qty.: Cant.

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

@@ -0,0 +1,40 @@
+@import 'colors';
+
+vn-order-prices-popover {
+    width: 150px;
+    display: block;
+    img[ng-src] {
+        height: 100%;
+        width: 100%;
+    }
+
+    .prices, .data{
+        width: 18em;
+    }
+
+    vn-vertical.data{
+        padding-right: 16px;
+        border-right: 1px solid $main-01;
+    }
+
+    vn-vertical.prices{
+        padding-left: 16px;
+    }
+
+    vn-textfield{
+        margin: 0!important;
+    }
+
+    vn-one.number {
+        text-align: right;
+        padding-right: 8px; 
+    }
+    vn-one.text{
+        padding-top:10px!important;
+    }
+
+    vn-horizontal.buttons-bar{
+        padding-top: 16px;
+        text-align: center;
+    }
+}