Merge branch '2139-oder_catalog_searchbar' of verdnatura/salix into dev

e2e/paths/07-order/02_basic_data.spec.js

@@ -81,7 +81,7 @@ describe('Order edit basic data path', () => {
             await page.waitToClick(selectors.orderBasicData.saveButton);
             const result = await page.waitForLastSnackbar();
 
-            expect(result).toEqual('Data saved!');
+            expect(result).toContain('Data saved!');
         });
 
         it('should now confirm the client have been edited', async() => {

e2e/paths/07-order/04_catalog.spec.js

@@ -69,8 +69,7 @@ describe('Order catalog', () => {
     });
 
     it('should search for an item by id', async() => {
-        await page.write(selectors.orderCatalog.itemId, '2');
-        await page.keyboard.press('Enter');
+        await page.accessToSearchResult('2');
         await page.waitForNumberOfElements('section.product', 1);
         const result = await page.countElement('section.product');
 

modules/order/front/catalog/index.html

@@ -11,6 +11,13 @@
     limit="50"
     data="$ctrl.items">
 </vn-crud-model>
+<vn-portal slot="topbar">
+    <vn-searchbar 
+        auto-state="false"
+        info="Search by item id or name"
+        on-search="$ctrl.onSearch($params)">
+    </vn-searchbar>
+</vn-portal>
 
 <vn-order-catalog-view model="model" 
     order="$ctrl.order">
@@ -77,14 +84,6 @@
         </div>
     </vn-vertical>
     <vn-vertical class="input vn-pt-md">
-        <vn-textfield vn-id="itemId"
-            ng-keyUp="$ctrl.onSearchById($event)"
-            label="Item id">
-            <prepend>
-                <vn-icon icon="icon-item"></vn-icon>
-            </prepend>
-        </vn-textfield>
-
         <vn-datalist vn-one 
             vn-id="search"
             data="$ctrl.tagValues"
@@ -117,10 +116,19 @@
             ng-if="$ctrl.itemId"
             removable="true"
             translate-attr="{title: 'Item'}"
-            on-remove="$ctrl.itemId = null"
+            on-remove="$ctrl.removeItemId()"
             class="colored"> 
             <span>Id: {{$ctrl.itemId}}</span>
         </vn-chip>
+        <vn-chip 
+            ng-if="$ctrl.itemName"
+            removable="true"
+            translate-attr="{title: 'Item'}"
+            on-remove="$ctrl.removeItemName()"
+            class="colored"> 
+            <span translate>Name</span>
+            <span>: {{$ctrl.itemName}}</span>
+        </vn-chip>
         <vn-chip 
             ng-if="category.selection"
             removable="true"

modules/order/front/catalog/index.js

@@ -48,9 +48,6 @@ class Controller extends Section {
         if (!value) return;
 
         this.$.$applyAsync(() => {
-            if (this.$params.itemId)
-                this.itemId = parseInt(this.$params.itemId);
-
             if (this.$params.categoryId)
                 this.categoryId = parseInt(this.$params.categoryId);
 
@@ -111,17 +108,6 @@ class Controller extends Section {
             this.applyFilters();
     }
 
-    get itemId() {
-        return this._itemId;
-    }
-
-    set itemId(value) {
-        this._itemId = value;
-
-        this.updateStateParams();
-        this.applyFilters();
-    }
-
     get tags() {
         return this._tags;
     }
@@ -195,18 +181,6 @@ class Controller extends Section {
             this.itemTypes = res.data);
     }
 
-    /**
-     * Search by item id filter
-     * @param {object} event
-     */
-    onSearchById(event) {
-        const value = this.$.itemId.value;
-        if (event.key === 'Enter' && value) {
-            this.itemId = value;
-            this.$.itemId.value = null;
-        }
-    }
-
     /**
      * Search by tag value
      * @param {object} event
@@ -230,9 +204,19 @@ class Controller extends Section {
             this.applyFilters();
     }
 
-    applyFilters() {
+    removeItemId() {
+        this.itemId = null;
+        this.applyFilters();
+    }
+
+    removeItemName() {
+        this.itemName = null;
+        this.applyFilters();
+    }
+
+    applyFilters(filter = {}) {
         let newParams = {};
-        let newFilter = {};
+        let newFilter = Object.assign({}, filter);
         const model = this.$.model;
 
         if (this.categoryId)
@@ -241,16 +225,13 @@ class Controller extends Section {
         if (this.typeId)
             newFilter.typeFk = this.typeId;
 
-        if (this.itemId)
-            newFilter = {'i.id': this.itemId};
-
         newParams = {
-            orderFk: this.order.id,
+            orderFk: this.$params.id,
             orderBy: this.getOrderBy(),
             tags: this.tags,
         };
 
-        model.applyFilter({where: newFilter}, newParams);
+        return model.applyFilter({where: newFilter}, newParams);
     }
 
     openPanel(event) {
@@ -282,10 +263,6 @@ class Controller extends Section {
         if (this.typeId)
             params.typeId = this.typeId;
 
-        params.itemId = undefined;
-        if (this.itemId)
-            params.itemId = this.itemId;
-
         params.tags = undefined;
         if (this.tags.length) {
             const tags = [];
@@ -344,6 +321,27 @@ class Controller extends Section {
         newFilterList = newFilterList.concat(tags);
         this.orderFields = newFilterList;
     }
+
+    onSearch(params) {
+        if (!params) return;
+
+        this.itemId = null;
+        this.itemName = null;
+
+        if (params.search) {
+            if (/^\d+$/.test(params.search)) {
+                this.itemId = params.search;
+                return this.applyFilters({
+                    'i.id': params.search
+                });
+            } else {
+                this.itemName = params.search;
+                return this.applyFilters({
+                    'i.name': {like: `%${params.search}%`}
+                });
+            }
+        } else return this.applyFilters();
+    }
 }
 
 ngModule.component('vnOrderCatalog', {

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

@@ -17,12 +17,15 @@ describe('Order', () => {
             $scope.search = {};
             $scope.itemId = {};
             $state = _$state_;
-            $state.params.categoryId = 1;
-            $state.params.typeId = 2;
             $state.current.name = 'my.current.state';
             const $element = angular.element('<vn-order-catalog></vn-order-catalog>');
             controller = $componentController('vnOrderCatalog', {$element, $scope});
             controller._order = {id: 4};
+            controller.$params = {
+                categoryId: 1,
+                typeId: 2,
+                id: 4
+            };
         }));
 
         describe('order() setter', () => {
@@ -112,18 +115,6 @@ describe('Order', () => {
             });
         });
 
-        describe('itemId() setter', () => {
-            it(`should set itemId property and then call updateStateParams() and applyFilters() methods`, () => {
-                jest.spyOn(controller, 'updateStateParams');
-                jest.spyOn(controller, 'applyFilters');
-
-                controller.itemId = 1;
-
-                expect(controller.updateStateParams).toHaveBeenCalledWith();
-                expect(controller.applyFilters).toHaveBeenCalledWith();
-            });
-        });
-
         describe('tags() setter', () => {
             it(`should set tags property and then call updateStateParams() and applyFilters() methods`, () => {
                 jest.spyOn(controller, 'updateStateParams');
@@ -158,23 +149,27 @@ describe('Order', () => {
             });
         });
 
-        describe('onSearchById()', () => {
-            it(`should not filter by id if the event key code doesn't equals to 'Enter'`, () => {
+        describe('onSearch()', () => {
+            it(`should apply a filter by item id an then call the applyFilters method`, () => {
                 jest.spyOn(controller, 'applyFilters');
 
-                controller.$.itemId.value = 1;
-                controller.onSearchById({key: 'Tab'});
+                const itemId = 1;
+                controller.onSearch({search: itemId});
 
-                expect(controller.applyFilters).not.toHaveBeenCalledWith();
+                expect(controller.applyFilters).toHaveBeenCalledWith({
+                    'i.id': itemId
+                });
             });
 
-            it(`should filter by id if the event key code equals to 'Enter' an then call applyFilters()`, () => {
+            it(`should apply a filter by item name an then call the applyFilters method`, () => {
                 jest.spyOn(controller, 'applyFilters');
 
-                controller.$.itemId.value = 1;
-                controller.onSearchById({key: 'Enter'});
+                const itemName = 'Bow';
+                controller.onSearch({search: itemName});
 
-                expect(controller.applyFilters).toHaveBeenCalledWith();
+                expect(controller.applyFilters).toHaveBeenCalledWith({
+                    'i.name': {like: `%${itemName}%`}
+                });
             });
         });
 
@@ -224,7 +219,6 @@ describe('Order', () => {
 
                 controller._categoryId = 2;
                 controller._typeId = 4;
-                controller._itemId = 1;
                 controller._tags = [
                     {tagFk: 11, value: 'Precission', tagSelection: {name: 'Category'}}
                 ];
@@ -232,7 +226,7 @@ describe('Order', () => {
                     value: 'Precission',
                     tagFk: 11, tagSelection: {name: 'Category'}}
                 ]);
-                let result = {categoryId: 2, typeId: 4, itemId: 1, tags: tags};
+                let result = {categoryId: 2, typeId: 4, tags: tags};
                 controller.updateStateParams();
 
                 expect(controller.$state.go).toHaveBeenCalledWith('my.current.state', result);

modules/order/front/catalog/locale/es.yml

@@ -0,0 +1,2 @@
+Name: Nombre
+Search by item id or name: Buscar por id de artículo o nombre

modules/order/front/routes.json

@@ -41,7 +41,7 @@
                 "order": "$ctrl.order"
             }
         }, {
-            "url": "/catalog?categoryId&typeId&itemId&tags",
+            "url": "/catalog?q&categoryId&typeId&tags",
             "state": "order.card.catalog",
             "component": "vn-order-catalog",
             "description": "Catalog",