#266 popover for item descriptor on ticket section plus some minor refactors on inte tags relations

client/item/routes.json

@@ -9,24 +9,20 @@
             "state": "item",
             "abstract": true,
             "component": "ui-view"
-        },
+        }, {
-        {
             "url": "/list?q",
             "state": "item.index",
             "component": "vn-item-list"
-        },
+        }, {
-        {
             "url": "/create",
             "state": "item.create",
             "component": "vn-item-create"
-        },
+        }, {
-        {
             "url": "/:id",
             "state": "item.card",
             "abstract": true,
             "component": "vn-item-card"
-        },
+        }, {
-        {
             "url" : "/data",
             "state": "item.card.data",
             "component": "vn-item-data",
@@ -38,8 +34,7 @@
                 "icon": "settings"
             },
             "acl": ["buyer"]
-        },
+        }, {
-        {
             "url" : "/tags",
             "state": "item.card.tags",
             "component": "vn-item-tags",
@@ -51,8 +46,7 @@
                 "icon": "icon-tags"
             },
             "acl": ["buyer"]
-        },
+        }, {
-        {
             "url" : "/tax",
             "state": "item.card.tax",
             "component": "vn-item-tax",
@@ -61,8 +55,7 @@
                 "icon": "icon-tax"
             },
             "acl": ["administrative","salesAssistant"]
-        },
+        }, {
-        {
             "url" : "/history",
             "state": "item.card.history",
             "component": "vn-item-history",
@@ -73,8 +66,7 @@
                 "description": "History",
                 "icon": "history"
             }
-        },
+        }, {
-        {
             "url" : "/niche",
             "state": "item.card.niche",
             "component": "vn-item-niche",
@@ -86,8 +78,7 @@
                 "icon": "place"
             },
             "acl": ["buyer","replenisher"]
-        },
+        }, {
-        {
             "url" : "/botanical",
             "state": "item.card.botanical",
             "component": "vn-item-botanical",
@@ -99,7 +90,7 @@
                 "icon": "local_florist"
             },
             "acl": ["buyer"]
-        },{
+        }, {
             "url" : "/barcode",
             "state": "item.card.itemBarcode",
             "component": "vn-item-barcode",
@@ -111,7 +102,7 @@
                 "icon": "icon-barcode"
             },
             "acl": ["buyer","replenisher"]
-        },{
+        }, {
             "url" : "/summary",
             "state": "item.card.summary",
             "component": "vn-item-summary",

client/item/src/card/card.html

@@ -1,7 +1,12 @@
 <vn-main-block>
     <vn-horizontal>
         <vn-auto class="left-block">
-            <vn-item-descriptor item="$ctrl.item" item-tags="$ctrl.itemTags" tags="$ctrl.tags"></vn-item-descriptor>
+            <vn-item-descriptor
+                margin-medium-v
+                item="$ctrl.item"
+                item-tags="$ctrl.itemTags"
+                tags="$ctrl.tags">
+            </vn-item-descriptor>
             <vn-left-menu></vn-left-menu>
         </vn-auto>
         <vn-one>

client/item/src/descriptor-popover/descriptor-popover.html

@@ -0,0 +1,7 @@
+<vn-popover vn-id="popover">
+    <vn-item-descriptor 
+        item="$ctrl.item" 
+        item-tags="$ctrl.itemTags"
+        tags="$ctrl.tags">
+    </vn-item-descriptor>
+</vn-popover>

client/item/src/descriptor-popover/descriptor-popover.js

@@ -0,0 +1,96 @@
+import ngModule from '../module';
+import Component from 'core/src/lib/component';
+import './style.scss';
+
+class Controller extends Component {
+    constructor($element, $scope, $http, $timeout) {
+        super($element, $scope);
+        this.$http = $http;
+        this.$timeout = $timeout;
+
+        this.isTooltip = true;
+        this.clear();
+    }
+
+    clear() {
+        this.item = null;
+        this.tags = {};
+        this.itemTags = null;
+    }
+
+    show() {
+        this.$.popover.parent = this.parent;
+        this.$.popover.show();
+    }
+
+    _getTags() {
+        this.$http.get(`/item/api/Tags`).then(response => {
+            response.data.forEach(tag => {
+                this.tags[tag.id] = Object.assign({}, tag);
+            });
+
+            this.$.popover.relocate();
+        });
+    }
+
+    _getItem() {
+        let filter = {
+            fields: ['id', 'name', 'image'],
+            include: [
+                {
+                    relation: 'itemType',
+                    scope: {
+                        fields: ['workerFk'],
+                        include: {
+                            relation: 'worker',
+                            scope: {
+                                fields: ['firstName', 'name']
+                            }
+                        }
+                    }
+                }, {
+                    relation: 'tags',
+                    scope: {
+                        fields: ['value', 'tagFk'],
+                        order: 'priority ASC',
+                        include: {
+                            relation: 'tag',
+                            scope: {
+                                fields: ['name']
+                            }
+                        }
+                    }
+                }
+            ]
+        };
+
+        let json = encodeURIComponent(JSON.stringify(filter));
+        this.$http.get(`/item/api/Items/${this._itemFk}?filter=${json}`)
+            .then(res => {
+                if (!res.data) return;
+                this.item = res.data;
+                this.itemTags = this.item.tags;
+                this.$.popover.relocate();
+            }
+        );
+    }
+
+    set itemFk(id) {
+        this._itemFk = id;
+
+        if (id) {
+            this._getItem();
+            this._getTags();
+        } else
+            this.clear();
+    }
+}
+Controller.$inject = ['$element', '$scope', '$http', '$timeout'];
+
+ngModule.component('vnItemDescriptorPopover', {
+    template: require('./descriptor-popover.html'),
+    bindings: {
+        itemFk: '<'
+    },
+    controller: Controller
+});

client/item/src/descriptor-popover/style.scss

@@ -0,0 +1,11 @@
+vn-item-descriptor-popover {
+    vn-item-descriptor {
+        display: block;
+        width: 16em;
+        min-height: 28em;
+
+        .header > a:first-child {
+            display: none
+        }
+    }
+}

client/item/src/descriptor/descriptor.html

@@ -1,20 +1,20 @@
-<vn-card margin-medium-v class="vn-descriptor">
+<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">
+        <a translate-attr="{title: 'Preview'}" ui-sref="item.card.summary({id: $ctrl.item.id})">
             <vn-icon icon="desktop_windows"></vn-icon>
         </a>
     </vn-horizontal>
     <vn-vertical>
         <vn-auto style="position: relative" text-center>
             <img 
-                ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{::$ctrl.item.image}}" 
+                ng-src="http://verdnatura.es/vn-image-data/catalog/200x200/{{$ctrl.item.image}}" 
-                zoom-image="http://verdnatura.es/vn-image-data/catalog/900x900/{{::$ctrl.item.image}}"
+                zoom-image="http://verdnatura.es/vn-image-data/catalog/900x900/{{$ctrl.item.image}}"
                 on-error-src/>
-            <a href="https://www.verdnatura.es/#!form=admin/items&filter={{::$ctrl.item.id}}" target="_blank">
+            <a href="https://www.verdnatura.es/#!form=admin/items&filter={{$ctrl.item.id}}" target="_blank">
                 <vn-float-button
                     icon="edit" 
                     style="position: absolute; margin: 1em; bottom: 0; right: 0;" 
@@ -30,7 +30,9 @@
             <vn-label-value label="Buyer" 
                 value="{{$ctrl.item.itemType.worker.firstName}} {{$ctrl.item.itemType.worker.name}}">
             </vn-label-value>
-            <vn-label-value ng-repeat="itemTag in $ctrl.itemTags | limitTo:4" label="{{$ctrl.tags[itemTag.tagFk].name}}" 
+            <vn-label-value
+                ng-repeat="itemTag in $ctrl.itemTags | limitTo:4"
+                label="{{$ctrl.tags[itemTag.tagFk].name}}" 
                 value="{{itemTag.value}}">
             </vn-label-value>
         </vn-auto>

client/item/src/descriptor/style.scss

@@ -1,4 +1,9 @@
-img[ng-src] {
+
-    height: 100%;
+vn-item-descriptor {
-    width: 100%;
+    display: block;
- }
+
+    img[ng-src] {
+        height: 100%;
+        width: 100%;
+    }
+}

client/item/src/item.js

@@ -14,4 +14,5 @@ import './niche/niche';
 import './botanical/botanical';
 import './barcode/barcode';
 import './summary/summary';
+import './descriptor-popover/descriptor-popover';
 

client/modules.yml

@@ -6,4 +6,4 @@ locator: []
 production: []
 salix: []
 route: []
-ticket: []
+ticket: [item]

client/ticket/src/fetched-tags/fetched-tags.html

@@ -1,8 +1,8 @@
 <vn-vertical style="text-align:center">
     <vn-one>{{::$ctrl.sale.concept}}</vn-one>
     <vn-one>   
-        <vn-one ng-repeat="fetchedTag in $ctrl.sale.item.itemTag track by $index">
+        <vn-one ng-repeat="fetchedTag in $ctrl.sale.item.tags track by $index">
-            <vn-label>{{::fetchedTag.tag.name}} </vn-label>{{::fetchedTag.value}}
+            <vn-label>{{::fetchedTag.tag.name}}</vn-label> {{::fetchedTag.value}}
         </vn-one>
     </vn-one>
 </vn-vertical>

client/ticket/src/fetched-tags/fetched-tags.js

@@ -1,7 +1,6 @@
 import ngModule from '../module';
 
 class Controller {}
-Controller.$inject = [];
 
 ngModule.component('vnFetchedTags', {
     template: require('./fetched-tags.html'),

client/ticket/src/sale/sale.html

@@ -1,4 +1,4 @@
-<mg-ajax path="/ticket/api/sales/filter" options="vnIndexNonAuto"></mg-ajax>
+<mg-ajax path="/ticket/api/sales/filter" options="vnIndex"></mg-ajax>
 <vn-vertical>
     <vn-card pad-large>
         <vn-vertical>
@@ -16,7 +16,12 @@
                 </thead>
                 <tbody>
                     <tr ng-repeat="sale in index.model.instances track by sale.id">
-                        <td number>{{::sale.itemFk}}</td>
+                        <td
+                            pointer
+                            number
+                            ng-click="$ctrl.showDescriptor($event, sale.itemFk)">
+                            {{::sale.itemFk}}
+                        </td>
                         <td><vn-fetched-tags sale="sale"/></td>
                         <td number>{{::sale.quantity}}</td>
                         <td number>{{::sale.price | currency:'€':2}}</td>
@@ -27,4 +32,7 @@
             </table>
         </vn-vertical>
     </vn-card>
+        <vn-item-descriptor-popover vn-id="descriptor">
+        </vn-item-descriptor-popover>
+    </vn-popover>
 </vn-vertical>

client/ticket/src/sale/sale.js

@@ -1,15 +1,22 @@
 import ngModule from '../module';
-import FilterTicketList from '../filter-ticket-list';
 
-class Controller extends FilterTicketList {
+class Controller {
-    constructor($scope, $timeout, $state) {
+    constructor($scope, $timeout) {
-        super($scope, $timeout, $state);
+        this.$ = $scope;
+        this.$timeout = $timeout;
+    }
 
-        this.onOrder('quantity', 'ASC');
+    showDescriptor(event, itemFk) {
+        this.$.descriptor.itemFk = itemFk;
+        this.$.descriptor.parent = event.target;
+        this.$.descriptor.show();
+    }
+    onDescriptorLoad() {
+        this.$.popover.relocate();
     }
 }
 
-Controller.$inject = ['$scope', '$timeout', '$state'];
+Controller.$inject = ['$scope', '$timeout'];
 
 ngModule.component('vnTicketSale', {
     template: require('./sale.html'),

services/loopback/common/methods/item/clone.js

@@ -27,7 +27,7 @@ module.exports = Self => {
                 id: itemId
             },
             include: [
-                {relation: 'itemTag', scope: {order: 'priority ASC', include: {relation: 'tag'}}}
+                {relation: 'tags', scope: {order: 'priority ASC', include: {relation: 'tag'}}}
             ]
         };
 

services/loopback/common/methods/sale/filter.js

@@ -13,7 +13,7 @@ module.exports = Self => {
                 relation: 'item',
                 scope: {
                     include: {
-                        relation: 'itemTag',
+                        relation: 'tags',
                         scope: {
                             fields: ['tagFk', 'value'],
                             include: {

services/loopback/common/methods/sale/price-gap.js

@@ -29,7 +29,7 @@ module.exports = Self => {
                 relation: 'item',
                 scope: {
                     include: {
-                        relation: 'itemTag',
+                        relation: 'tags',
                         scope: {
                             fields: ['tagFk', 'value'],
                             include: {

services/loopback/common/methods/sale/saleComponentFilter.js

@@ -13,7 +13,7 @@ module.exports = Self => {
                 relation: 'item',
                 scope: {
                     include: {
-                        relation: 'itemTag',
+                        relation: 'tags',
                         scope: {
                             fields: ['tagFk', 'value'],
                             include: {

services/loopback/common/methods/ticket/summary.js

@@ -83,7 +83,7 @@ module.exports = Self => {
                 relation: 'item',
                 scope: {
                     include: {
-                        relation: 'itemTag',
+                        relation: 'tags',
                         scope: {
                             fields: ['tagFk', 'value'],
                             include: {
@@ -107,7 +107,7 @@ module.exports = Self => {
         let subTotal = 0.00;
 
         sales.forEach(sale => {
-            subTotal+= sale.quantity * sale.price;
+            subTotal += sale.quantity * sale.price;
         });
 
         return subTotal;

services/loopback/common/models/item.json

@@ -75,7 +75,7 @@
         "model": "Expence",
         "foreignKey": "expenceFk"
       },
-      "itemTag": {
+      "tags": {
         "type": "hasMany",
         "model": "ItemTag",
         "foreignKey": "itemFk"