Merge branch '845-order_catalog_datalist' of verdnatura/salix into dev

e2e/helpers/selectors.js

@@ -621,8 +621,8 @@ export default {
         plantRealmButton: 'vn-order-catalog > vn-side-menu vn-icon[icon="icon-plant"]',
         type: 'vn-autocomplete[data="$ctrl.itemTypes"]',
         itemId: 'vn-order-catalog > vn-side-menu vn-textfield[ng-model="$ctrl.itemId"]',
-        itemTagValue: 'vn-order-catalog > vn-side-menu vn-textfield[ng-model="$ctrl.value"]',
+        itemTagValue: 'vn-order-catalog > vn-side-menu vn-datalist[ng-model="$ctrl.value"]',
-        openTagSearch: 'vn-order-catalog > vn-side-menu > div > vn-vertical > vn-textfield[ng-model="$ctrl.value"] .append i',
+        openTagSearch: 'vn-order-catalog > vn-side-menu > div > vn-vertical > vn-datalist[ng-model="$ctrl.value"] .append i',
         tag: 'vn-order-catalog-search-panel vn-autocomplete[ng-model="filter.tagFk"]',
         tagValue: 'vn-order-catalog-search-panel vn-textfield[ng-model="filter.value"]',
         searchTagButton: 'vn-order-catalog-search-panel button[type=submit]',

front/core/components/datalist/index.js

@@ -3,6 +3,7 @@ import ArrayModel from '../array-model/array-model';
 import CrudModel from '../crud-model/crud-model';
 import {mergeWhere} from 'vn-loopback/util/filter';
 import Textfield from '../textfield/textfield';
+import './style.scss';
 
 export default class Datalist extends Textfield {
     constructor($element, $scope, $compile, $transclude) {
@@ -12,7 +13,6 @@ export default class Datalist extends Textfield {
         this._selection = null;
 
         this.buildInput('text');
-
         this.input.setAttribute('autocomplete', 'off');
     }
 
@@ -157,8 +157,6 @@ export default class Datalist extends Textfield {
                 this.destroyList();
             } else
                 this.buildList();
-
-            this.emit('select', {selection});
         });
     }
 

front/core/components/datalist/style.scss

@@ -0,0 +1,7 @@
+@import "effects";
+
+vn-datalist {
+    input::-webkit-calendar-picker-indicator {
+        display: none
+    }
+}

modules/order/back/methods/order/catalogFilter.js

@@ -162,6 +162,7 @@ module.exports = Self => {
             `SELECT
                     it.tagFk,
                     it.itemFk,
+                    it.value,
                     t.name
                 FROM tmp.ticketCalculateItem tci
                     JOIN vn.itemTag it ON it.itemFk = tci.itemFk

modules/order/front/catalog/index.html

@@ -85,12 +85,15 @@
                 <vn-icon icon="icon-item"></vn-icon>
             </prepend>
         </vn-textfield>
-        <vn-textfield
+
-            vn-one
+        <vn-datalist vn-one 
             vn-id="search"
+            data="$ctrl.tagValues"
+            ng-model="$ctrl.value"
             ng-keyUp="$ctrl.onSearchByTag($event)"
-            label="Search tag"
+            show-field="value"
-            ng-model="$ctrl.value">
+            value-field="value"
+            label="Search tag">
             <prepend>
                 <vn-icon icon="search"></vn-icon>
             </prepend>
@@ -101,7 +104,7 @@
                     style="cursor: pointer;">
                 </vn-icon>
             </append>
-        </vn-textfield>
+        </vn-datalist>
     </vn-vertical>
     <vn-popover
         vn-id="popover"

modules/order/front/catalog/index.js

@@ -19,7 +19,7 @@ class Controller {
         ];
         this.defaultOrderFields = [
             {field: 'relevancy DESC, name', name: 'Relevancy'},
-            {field: 'showOrder, price', name: 'Color'},
+            {field: 'showOrder, price', name: 'Color and price'},
             {field: 'name', name: 'Name'},
             {field: 'price', name: 'Price'}
         ];
@@ -69,37 +69,8 @@ class Controller {
 
         if (!value) return;
 
-        const newFilterList = [];
+        this.buildTagsFilter(value);
-        value.forEach(item => {
+        this.buildOrderFilter(value);
-            // Add new tag filters
-            item.tags.forEach(itemTag => {
-                const alreadyAdded = newFilterList.findIndex(filter => {
-                    return filter.field == itemTag.tagFk;
-                });
-
-                if (alreadyAdded == -1) {
-                    newFilterList.push({
-                        name: itemTag.name,
-                        field: itemTag.tagFk,
-                        isTag: true
-                    });
-                }
-            });
-        });
-
-        // Add default filters - Replaces tags with same name
-        this.defaultOrderFields.forEach(orderField => {
-            const index = newFilterList.findIndex(newfield => {
-                return newfield.name == orderField.name;
-            });
-
-            if (index > -1)
-                newFilterList[index] = orderField;
-            else
-                newFilterList.push(orderField);
-        });
-
-        this.orderFields = newFilterList;
     }
 
     get categoryId() {
@@ -273,6 +244,43 @@ class Controller {
 
         this.$state.go(this.$state.current.name, params);
     }
+
+    buildTagsFilter(items) {
+        const tagValues = [];
+        items.forEach(item => {
+            item.tags.forEach(itemTag => {
+                const alreadyAdded = tagValues.findIndex(tag => {
+                    return tag.value == itemTag.value;
+                });
+
+                if (alreadyAdded == -1)
+                    tagValues.push(itemTag);
+            });
+        });
+        this.tagValues = tagValues;
+    }
+
+    buildOrderFilter(items) {
+        const tags = [];
+        items.forEach(item => {
+            item.tags.forEach(itemTag => {
+                const alreadyAdded = tags.findIndex(tag => {
+                    return tag.field == itemTag.tagFk;
+                });
+
+                if (alreadyAdded == -1) {
+                    tags.push({
+                        name: itemTag.name,
+                        field: itemTag.tagFk,
+                        isTag: true
+                    });
+                }
+            });
+        });
+        let newFilterList = [].concat(this.defaultOrderFields);
+        newFilterList = newFilterList.concat(tags);
+        this.orderFields = newFilterList;
+    }
 }
 
 Controller.$inject = ['$http', '$scope', '$state', '$compile', '$transitions'];

modules/order/front/catalog/index.spec.js

@@ -37,16 +37,19 @@ describe('Order', () => {
 
         describe('items() setter', () => {
             it(`should return an object with order params`, () => {
-                let expectedResult = [{field: 'showOrder, price', name: 'Color'}];
+                spyOn(controller, 'buildTagsFilter');
-                let unexpectedResult = [{tagFk: 5, name: 'Color'}];
+                spyOn(controller, 'buildOrderFilter').and.callThrough();
-                controller.items = [{id: 1, name: 'My Item', tags: [
+                const expectedResult = [{field: 'showOrder, price', name: 'Color and price'}];
+                const items = [{id: 1, name: 'My Item', tags: [
                     {tagFk: 4, name: 'Length'},
                     {tagFk: 5, name: 'Color'}
                 ]}];
+                controller.items = items;
 
-                expect(controller.orderFields.length).toEqual(5);
+                expect(controller.orderFields.length).toEqual(6);
                 expect(controller.orderFields).toEqual(jasmine.arrayContaining(expectedResult));
-                expect(controller.orderFields).not.toEqual(jasmine.arrayContaining(unexpectedResult));
+                expect(controller.buildTagsFilter).toHaveBeenCalledWith(items);
+                expect(controller.buildOrderFilter).toHaveBeenCalledWith(items);
             });
         });
 
@@ -222,6 +225,48 @@ describe('Order', () => {
                 expect(controller.$.model.addFilter).toHaveBeenCalledWith(null, expectedOrder);
             });
         });
+
+        describe('buildTagsFilter()', () => {
+            it(`should create an array of non repeated tag values and then set the tagValues property`, () => {
+                const items = [
+                    {
+                        id: 1, name: 'My Item 1', tags: [
+                            {tagFk: 4, name: 'Length', value: 1},
+                            {tagFk: 5, name: 'Color', value: 'red'}
+                        ]
+                    },
+                    {
+                        id: 2, name: 'My Item 2', tags: [
+                            {tagFk: 4, name: 'Length', value: 1},
+                            {tagFk: 5, name: 'Color', value: 'blue'}
+                        ]
+                    }];
+                controller.buildTagsFilter(items);
+
+                expect(controller.tagValues.length).toEqual(3);
+            });
+        });
+
+        describe('buildOrderFilter()', () => {
+            it(`should create an array of non repeated tags plus default filters and then set the orderFields property`, () => {
+                const items = [
+                    {
+                        id: 1, name: 'My Item 1', tags: [
+                            {tagFk: 4, name: 'Length'},
+                            {tagFk: 5, name: 'Color'}
+                        ]
+                    },
+                    {
+                        id: 2, name: 'My Item 2', tags: [
+                            {tagFk: 5, name: 'Color'},
+                            {tagFk: 6, name: 'Relevancy'}
+                        ]
+                    }];
+                controller.buildOrderFilter(items);
+
+                expect(controller.orderFields.length).toEqual(7);
+            });
+        });
     });
 });
 

modules/order/front/locale/es.yml

@@ -16,6 +16,7 @@ Item id: Id de artículo
 Order by: Ordenar por
 Order: Orden
 Price: Precio
+Color and price: Color y precio
 Ascendant: Ascendente
 Descendant: Descendente
 Created from: Creado desde