e2e item tags #121, plus item tags and item descriptor refactor #117

client/item/routes.json

@@ -44,7 +44,7 @@
             "state": "item.card.tags",
             "component": "vn-item-tags",
             "params": {
-                "item": "$ctrl.item"
+                "item-tags": "$ctrl.itemTags"
             },
             "menu": {
                 "description": "Tags",

client/item/src/card/item-card.html

@@ -1,7 +1,7 @@
 <vn-main-block>
     <vn-horizontal>
         <vn-auto class="left-block">
-            <vn-item-descriptor item="$ctrl.item"></vn-item-descriptor>
+            <vn-item-descriptor 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/card/item-card.js

@@ -7,9 +7,29 @@ class ItemCard {
         this.$timeout = $timeout;
 
         this.item = null;
+        this.tags = {};
+        this.itemTags = null;
+    }
+    _getItemTags() {
+        let filter = {
+            where: {itemFk: this.$state.params.id},
+            order: "priority ASC",
+            include: {relation: "tag"}
+        };
+        this.$http.get(`/item/api/ItemTags?filter=${JSON.stringify(filter)}`).then(response => {
+            this.itemTags = response.data;
+        });
     }
 
-    $onInit() {
+    _getTags() {
+        this.$http.get(`/item/api/Tags`).then(response => {
+            response.data.forEach(tag => {
+                this.tags[tag.id] = Object.assign({}, tag);
+            });
+        });
+    }
+
+    _getItem() {
         let filter = {
             include: [
                 {relation: "itemType"},
@@ -17,13 +37,11 @@ class ItemCard {
                 {relation: "ink"},
                 {relation: "producer"},
                 {relation: "intrastat"},
-                {relation: "expence"},
-                {relation: "itemTag", scope: {order: "priority ASC", include: {relation: "tag"}}}
+                {relation: "expence"}
             ]
         };
         this.$http.get(`/item/api/Items/${this.$state.params.id}?filter=${JSON.stringify(filter)}`)
-            .then(
-                res => {
+            .then(res => {
                 if (res.data && res.data.id) {
                     this.$timeout(() => {
                         this.item = res.data;
@@ -32,6 +50,12 @@ class ItemCard {
             }
         );
     }
+
+    $onInit() {
+        this._getItem();
+        this._getTags();
+        this._getItemTags();
+    }
 }
 ItemCard.$inject = ['$http', '$state', '$timeout'];
 

client/item/src/card/item-card.spec.js

@@ -22,11 +22,20 @@ describe('Item', () => {
             controller = $componentController('vnItemCard', {$state: $state});
         }));
 
-        describe('$onInit()', () => {
-            it('should request to patch the propagation of tax status', () => {
-                $httpBackend.whenGET('/item/api/Items/123?filter={"include":[{"relation":"itemType"},{"relation":"origin"},{"relation":"ink"},{"relation":"producer"},{"relation":"intrastat"},{"relation":"expence"},{"relation":"itemTag","scope":{"order":"priority ASC","include":{"relation":"tag"}}}]}').respond({data: 'item'});
-                $httpBackend.expectGET('/item/api/Items/123?filter={"include":[{"relation":"itemType"},{"relation":"origin"},{"relation":"ink"},{"relation":"producer"},{"relation":"intrastat"},{"relation":"expence"},{"relation":"itemTag","scope":{"order":"priority ASC","include":{"relation":"tag"}}}]}');
-                controller.$onInit();
+        describe('_getItem()', () => {
+            it('should request to get the item', () => {
+                $httpBackend.whenGET('/item/api/Items/123?filter={"include":[{"relation":"itemType"},{"relation":"origin"},{"relation":"ink"},{"relation":"producer"},{"relation":"intrastat"},{"relation":"expence"}]}').respond({data: 'item'});
+                $httpBackend.expectGET('/item/api/Items/123?filter={"include":[{"relation":"itemType"},{"relation":"origin"},{"relation":"ink"},{"relation":"producer"},{"relation":"intrastat"},{"relation":"expence"}]}');
+                controller._getItem();
+                $httpBackend.flush();
+            });
+        });
+
+        describe('_getItemTags()', () => {
+            it('should request to get the ItemTags', () => {
+                $httpBackend.whenGET('/item/api/ItemTags?filter={"where":{"itemFk":123},"order":"priority ASC","include":{"relation":"tag"}}').respond({data: 'item'});
+                $httpBackend.expectGET('/item/api/ItemTags?filter={"where":{"itemFk":123},"order":"priority ASC","include":{"relation":"tag"}}');
+                controller._getItemTags();
                 $httpBackend.flush();
             });
         });

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

@@ -21,8 +21,8 @@
         <vn-auto pad-medium>
             <h6>{{$ctrl.item.name}}</h6>
             <div><vn-label translate>Id</vn-label> {{$ctrl.item.id}}</div>
-            <div ng-repeat="itemTag in $ctrl.item.itemTag | limitTo:4">
-                <div><vn-label translate>{{itemTag.tag.name}}</vn-label> {{itemTag.value}}</div>
+            <div ng-repeat="itemTag in $ctrl.itemTags | limitTo:4">
+                <div><span translate>{{$ctrl.tags[itemTag.tagFk].name}}</span>: <b>{{itemTag.value}}</b></div>
             </div>
         </vn-auto>
     </vn-vertical>

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

@@ -3,6 +3,8 @@ import ngModule from '../module';
 ngModule.component('vnItemDescriptor', {
     template: require('./item-descriptor.html'),
     bindings: {
-        item: '<'
+        item: '<',
+        itemTags: '<',
+        tags: '<'
     }
 });

client/item/src/tags/item-tags.html

@@ -6,9 +6,9 @@
 <form name="form" ng-submit="$ctrl.submit()">
     <vn-card pad-large>
         <vn-title>Item tags</vn-title>
-        <vn-horizontal ng-repeat="itemTag in $ctrl.itemTags track by $index">
+        <vn-horizontal ng-repeat="itemTag in $ctrl.instancedItemTags track by $index">
             <vn-autocomplete
-                vn-three
+                vn-one
                 initial-data="itemTag.tag"
                 field="itemTag.tagFk"
                 data="tags.model"
@@ -24,7 +24,15 @@
                 rule="itemTag.value"
                 vn-acl="buyer">
             </vn-textfield>
-            <vn-one pad-medium-top>
+            <vn-textfield
+                vn-one
+                type="number"
+                label="Relevancy"
+                model="itemTag.priority"
+                rule="itemTag.priority"
+                vn-acl="buyer">
+            </vn-textfield>
+            <vn-one pad-medium-top></vn-one>
                 <vn-icon
                     pointer 
                     medium-grey
@@ -37,7 +45,7 @@
                     margin-medium-left
                     orange
                     icon="add_circle"
-                    ng-if="itemTag.showAddIcon && tags.model.length > $ctrl.itemTags.length" 
+                    ng-if="itemTag.showAddIcon && tags.model.length > $ctrl.instancedItemTags.length" 
                     ng-click="$ctrl.addItemTag()"
                     vn-acl="buyer">
                 </vn-icon>  

client/item/src/tags/item-tags.js

@@ -9,18 +9,17 @@ class ItemTags {
         this.vnApp = vnApp;
 
         this.itemTagTypes = [];
-        this.itemTags = [];
         this.removedItemTags = [];
         this.oldItemTags = {};
     }
 
     _setIconAdd() {
-        if (this.itemTags.length) {
-            this.itemTags.map(element => {
+        if (this.instancedItemTags && this.instancedItemTags.length) {
+            this.instancedItemTags.map(element => {
                 element.showAddIcon = false;
                 return true;
             });
-            this.itemTags[this.itemTags.length - 1].showAddIcon = true;
+            this.instancedItemTags[this.instancedItemTags.length - 1].showAddIcon = true;
         } else {
             this.addItemTag();
         }
@@ -37,14 +36,16 @@ class ItemTags {
     }
 
     addItemTag() {
-        this.itemTags.push({value: null, itemFk: this.params.id, showAddIcon: true});
+        if (this.instancedItemTags) {
+            this.instancedItemTags.push({value: null, itemFk: this.params.id, tagFk: null, priority: null, showAddIcon: true});
             this._setIconAdd();
         }
+    }
 
     removeItemTag(index) {
-        let item = this.itemTags[index];
+        let item = this.instancedItemTags[index];
         if (item) {
-            this.itemTags.splice(index, 1);
+            this.instancedItemTags.splice(index, 1);
             this._setIconAdd();
             if (item.id) {
                 this.removedItemTags.push(item.id);
@@ -54,12 +55,12 @@ class ItemTags {
     }
 
     _equalItemTags(oldTag, newTag) {
-        return oldTag.id === newTag.id && oldTag.value === newTag.value && oldTag.tagFk === newTag.tagFk;
+        return oldTag.tagFk === newTag.tagFk && oldTag.value === newTag.value && oldTag.priority === newTag.priority;
     }
 
-    _setOlTags(response) {
+    _setOlTags(instancedItemTags) {
         this._setIconAdd();
-        response.data.forEach(tag => {
+        instancedItemTags.forEach(tag => {
             this.oldItemTags[tag.id] = Object.assign({}, tag);
         });
     }
@@ -71,8 +72,9 @@ class ItemTags {
             include: {relation: "tag"}
         };
         this.$http.get(`/item/api/ItemTags?filter=${JSON.stringify(filter)}`).then(response => {
-            this.itemTags = response.data;
-            this._setOlTags(response);
+            this.instancedItemTags = response.data;
+            this.itemTags = JSON.parse(JSON.stringify(this.instancedItemTags));
+            this._setOlTags(response.data);
         });
     }
 
@@ -85,7 +87,7 @@ class ItemTags {
             create: [],
             update: []
         };
-        this.itemTags.forEach(tag => {
+        this.instancedItemTags.forEach(tag => {
             let isNewTag = !tag.id;
 
             if (itemTagsDefined.indexOf(tag.tagFk) !== -1) {
@@ -118,6 +120,7 @@ class ItemTags {
 
         if (canSubmit) {
             return this.$http.post(`/item/api/ItemTags/crudItemTags`, tagsObj).then(() => {
+                // this.itemTags = JSON.parse(JSON.stringify(this.instancedItemTags));
                 this._getItemTags();
                 this._unsetDirtyForm();
             });
@@ -133,5 +136,8 @@ ItemTags.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnApp'];
 
 ngModule.component('vnItemTags', {
     template: require('./item-tags.html'),
-    controller: ItemTags
+    controller: ItemTags,
+    bindings: {
+        itemTags: '='
+    }
 });

e2e/helpers/selectors.js

@@ -186,21 +186,26 @@ export default {
         tagsButton: `${components.vnMenuItem}[ui-sref="item.card.tags"]`,
         firstTagSelect: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
         firstTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
-        firstValueInput: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnTextfield}`,
+        firstValueInput: `vn-item-tags vn-horizontal:nth-child(2) > vn-textfield[label="Value"] > div > input`,
+        firstRelevancyInput: `vn-horizontal:nth-child(2) > vn-textfield[label="Relevancy"] > div > input`,
         secondTagSelect: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
         secondTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
-        secondValueInput: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnTextfield}`,
+        secondValueInput: `vn-item-tags vn-horizontal:nth-child(3) > vn-textfield[label="Value"] > div > input`,
+        secondRelevancyInput: `vn-horizontal:nth-child(3) > vn-textfield[label="Relevancy"] > div > input`,
         thirdTagSelect: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
         thirdTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
-        thirdValueInput: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnTextfield}`,
+        thirdValueInput: `vn-item-tags vn-horizontal:nth-child(4) > vn-textfield[label="Value"] > div > input`,
+        thirdRelevancyInput: `vn-horizontal:nth-child(4) > vn-textfield[label="Relevancy"] > div > input`,
         fourthTagSelect: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
         fourthTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
-        fourthValueInput: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnTextfield}`,
-        fifthRemoveTagButton: `vn-item-tags vn-horizontal:nth-child(6) > vn-one > ${components.vnIcon}[icon="remove_circle_outline"]`,
-        addItemTagButton: `${components.vnIcon}[icon="add_circle"]`,
+        fourthValueInput: `vn-item-tags vn-horizontal:nth-child(5) > vn-textfield[label="Value"] > div > input`,
+        fourthRelevancyInput: `vn-horizontal:nth-child(5) > vn-textfield[label="Relevancy"] > div > input`,
+        fifthRemoveTagButton: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnIcon}[icon="remove_circle_outline"]`,
         fifthTagSelect: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
         fifthTagSelectOptionFive: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(5)`,
-        fifthValueInput: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnTextfield}`,
+        fifthValueInput: `vn-item-tags vn-horizontal:nth-child(6) > vn-textfield[label="Value"] > div > input`,
+        fifthRelevancyInput: `vn-horizontal:nth-child(6) > vn-textfield[label="Relevancy"] > div > input`,
+        addItemTagButton: `${components.vnIcon}[icon="add_circle"]`,
         submitItemTagsButton: `${components.vnSubmit}`
     },
     itemTax: {

e2e/paths/item-module/04_create_item_tags.spec.js

@@ -44,11 +44,16 @@ describe('create item tags path', () => {
         .waitToClick(selectors.itemTags.firstTagSelectOptionOne)
         .clearInput(selectors.itemTags.firstValueInput)
         .type(selectors.itemTags.firstValueInput, 'Dark Blue')
+        .clearInput(selectors.itemTags.firstRelevancyInput)
+        .type(selectors.itemTags.firstRelevancyInput, '2')
         .waitToClick(selectors.itemTags.fifthRemoveTagButton)
         .waitToClick(selectors.itemTags.addItemTagButton)
         .waitToClick(selectors.itemTags.fifthTagSelect)
         .waitToClick(selectors.itemTags.fifthTagSelectOptionFive)
         .type(selectors.itemTags.fifthValueInput, 'Thanos')
+        .type(selectors.itemTags.fifthRelevancyInput, '1')
+        .clearInput(selectors.itemTags.secondRelevancyInput)
+        .type(selectors.itemTags.secondRelevancyInput, '5')
         .click(selectors.itemTags.submitItemTagsButton)
         .waitForSnackbar()
         .then(result => {
@@ -56,7 +61,7 @@ describe('create item tags path', () => {
         });
     });
 
-    it(`should confirm the remaining tags are the expected ones`, () => {
+    it(`should confirm the first select is the expected one`, () => {
         return nightmare
         .click(selectors.itemBasicData.basicDataButton)
         .wait(selectors.itemBasicData.nameInput)
@@ -65,51 +70,118 @@ describe('create item tags path', () => {
         .getInputValue(selectors.itemTags.firstTagSelect)
         .then(result => {
             expect(result).toEqual('Owner');
+        });
+    });
+
+    it(`should confirm the first value is the expected one`, () => {
         return nightmare
-            .getInputValue(selectors.itemTags.firstValueInput);
-        })
+        .getInputValue(selectors.itemTags.firstValueInput)
         .then(result => {
             expect(result).toEqual('Thanos');
+        });
+    });
+
+    it(`should confirm the first relevancy is the expected one`, () => {
         return nightmare
-            .getInputValue(selectors.itemTags.secondTagSelect);
-        })
+        .getInputValue(selectors.itemTags.firstRelevancyInput)
+        .then(result => {
+            expect(result).toEqual('1');
+        });
+    });
+
+    it(`should confirm the second select is the expected one`, () => {
+        return nightmare
+        .getInputValue(selectors.itemTags.secondTagSelect)
         .then(result => {
             expect(result).toEqual('Color');
+        });
+    });
+
+    it(`should confirm the second value is the expected one`, () => {
         return nightmare
-            .getInputValue(selectors.itemTags.secondValueInput);
-        })
+        .getInputValue(selectors.itemTags.secondValueInput)
         .then(result => {
             expect(result).toEqual('Dark Blue');
+        });
+    });
+
+    it(`should confirm the second relevancy is the expected one`, () => {
         return nightmare
-            .getInputValue(selectors.itemTags.thirdTagSelect);
-        })
+        .getInputValue(selectors.itemTags.secondRelevancyInput)
         .then(result => {
-            expect(result).toEqual('Location');
+            expect(result).toEqual('2');
+        });
+    });
+
+    it(`should confirm the third select is the expected one`, () => {
         return nightmare
-            .getInputValue(selectors.itemTags.thirdValueInput);
-        })
-        .then(result => {
-            expect(result).toEqual('Gamoras hideout');
-            return nightmare
-            .getInputValue(selectors.itemTags.fourthTagSelect);
-        })
+        .getInputValue(selectors.itemTags.thirdTagSelect)
         .then(result => {
             expect(result).toEqual('Shape');
+        });
+    });
+
+    it(`should confirm the third value is the expected one`, () => {
         return nightmare
-            .getInputValue(selectors.itemTags.fourthValueInput);
-        })
+        .getInputValue(selectors.itemTags.thirdValueInput)
         .then(result => {
             expect(result).toEqual('round');
+        });
+    });
+
+    it(`should confirm the third relevancy is the expected one`, () => {
         return nightmare
-            .getInputValue(selectors.itemTags.fifthTagSelect);
-        })
+        .getInputValue(selectors.itemTags.thirdRelevancyInput)
+        .then(result => {
+            expect(result).toEqual('3');
+        });
+    });
+
+    it(`should confirm the fourth select is the expected one`, () => {
+        return nightmare
+        .getInputValue(selectors.itemTags.fourthTagSelect)
         .then(result => {
             expect(result).toEqual('Power');
+        });
+    });
+
+    it(`should confirm the fourth value is the expected one`, () => {
         return nightmare
-            .getInputValue(selectors.itemTags.fifthValueInput);
-        })
+        .getInputValue(selectors.itemTags.fourthValueInput)
         .then(result => {
             expect(result).toEqual('Manipulates time');
         });
     });
+
+    it(`should confirm the fourth relevancy is the expected one`, () => {
+        return nightmare
+        .getInputValue(selectors.itemTags.fourthRelevancyInput)
+        .then(result => {
+            expect(result).toEqual('4');
+        });
+    });
+
+    it(`should confirm the fifth select is the expected one`, () => {
+        return nightmare
+        .getInputValue(selectors.itemTags.fifthTagSelect)
+        .then(result => {
+            expect(result).toEqual('Location');
+        });
+    });
+
+    it(`should confirm the fifth value is the expected one`, () => {
+        return nightmare
+        .getInputValue(selectors.itemTags.fifthValueInput)
+        .then(result => {
+            expect(result).toEqual('Gamoras hideout');
+        });
+    });
+
+    it(`should confirm the fifth relevancy is the expected one`, () => {
+        return nightmare
+        .getInputValue(selectors.itemTags.fifthRelevancyInput)
+        .then(result => {
+            expect(result).toEqual('5');
+        });
+    });
 });

services/item/common/models/item-tag.json

@@ -18,7 +18,8 @@
         "required": true
       },
       "priority": {
-        "type": "Number"
+        "type": "Number",
+        "required": true
       }
     },
     "relations": {