Updated tests

modules/order/front/catalog/index.html

@@ -11,6 +11,12 @@
     limit="50"
     data="$ctrl.items">
 </vn-crud-model>
+<vn-portal slot="topbar">
+    <vn-searchbar info="Search by item id or name"></vn-searchbar>
+</vn-portal>
+<vn-auto-search
+    on-search="$ctrl.onSearch($params)">
+</vn-auto-search>
 
 <vn-order-catalog-view model="model" 
     order="$ctrl.order">
@@ -77,13 +83,13 @@
         </div>
     </vn-vertical>
     <vn-vertical class="input vn-pt-md">
-        <vn-textfield vn-id="itemId"
+        <!-- <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-textfield> -->
 
         <vn-datalist vn-one 
             vn-id="search"

modules/order/front/catalog/index.js

@@ -1,13 +1,10 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
-    constructor($http, $scope, $state, $compile, $transitions) {
-        this.$http = $http;
-        this.$ = $scope;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.$compile = $compile;
+class Controller extends Section {
+    constructor($element, $, $transitions) {
+        super($element, $);
         this.$transitions = $transitions;
         this.itemTypes = [];
         this._tags = [];
@@ -52,17 +49,14 @@ class Controller {
         if (!value) return;
 
         this.$.$applyAsync(() => {
-            if (this.$stateParams.itemId)
-                this.itemId = parseInt(this.$stateParams.itemId);
+            if (this.$params.categoryId)
+                this.categoryId = parseInt(this.$params.categoryId);
 
-            if (this.$stateParams.categoryId)
-                this.categoryId = parseInt(this.$stateParams.categoryId);
+            if (this.$params.typeId)
+                this.typeId = parseInt(this.$params.typeId);
 
-            if (this.$stateParams.typeId)
-                this.typeId = parseInt(this.$stateParams.typeId);
-
-            if (this.$stateParams.tags)
-                this.tags = JSON.parse(this.$stateParams.tags);
+            if (this.$params.tags)
+                this.tags = JSON.parse(this.$params.tags);
         });
     }
 
@@ -126,6 +120,17 @@ class Controller {
         this.applyFilters();
     }
 
+    get itemName() {
+        return this._itemName;
+    }
+
+    set itemName(value) {
+        this._itemName = value;
+
+        this.updateStateParams();
+        this.applyFilters();
+    }
+
     get tags() {
         return this._tags;
     }
@@ -248,8 +253,11 @@ class Controller {
         if (this.itemId)
             newFilter = {'i.id': this.itemId};
 
+        if (this.itemName)
+            newFilter = {'i.name': {like: `%${this.itemName}%`}};
+
         newParams = {
-            orderFk: this.order.id,
+            orderFk: this.$params.id,
             orderBy: this.getOrderBy(),
             tags: this.tags,
         };
@@ -290,6 +298,10 @@ class Controller {
         if (this.itemId)
             params.itemId = this.itemId;
 
+        params.itemName = undefined;
+        if (this.itemName)
+            params.itemName = this.itemName;
+
         params.tags = undefined;
         if (this.tags.length) {
             const tags = [];
@@ -348,9 +360,21 @@ class Controller {
         newFilterList = newFilterList.concat(tags);
         this.orderFields = newFilterList;
     }
+
+    onSearch(params) {
+        if (params.search) {
+            if (/^\d+$/.test(params.search)) {
+                this.itemId = params.search;
+                this.itemName = null;
+            } else {
+                this.itemId = null;
+                this.itemName = params.search;
+            }
+        }
+    }
 }
 
-Controller.$inject = ['$http', '$scope', '$state', '$compile', '$transitions'];
+Controller.$inject = ['$element', '$scope', '$transitions'];
 
 ngModule.component('vnOrderCatalog', {
     template: require('./index.html'),

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

@@ -17,11 +17,15 @@ describe('Order', () => {
             $scope.search = {};
             $scope.itemId = {};
             $state = _$state_;
-            $state.params.categoryId = 1;
-            $state.params.typeId = 2;
             $state.current.name = 'my.current.state';
-            controller = $componentController('vnOrderCatalog', {$scope, $state});
+            const $element = angular.element('<vn-order-catalog></vn-order-catalog>');
+            controller = $componentController('vnOrderCatalog', {$element, $scope, $state});
             controller._order = {id: 4};
+            controller.$params = {
+                categoryId: 1,
+                typeId: 2,
+                id: 4
+            };
         }));
 
         describe('order() setter', () => {
@@ -123,6 +127,18 @@ describe('Order', () => {
             });
         });
 
+        describe('itemName() setter', () => {
+            it(`should set itemName property and then call updateStateParams() and applyFilters() methods`, () => {
+                jest.spyOn(controller, 'updateStateParams');
+                jest.spyOn(controller, 'applyFilters');
+
+                controller.itemName = 'Bow';
+
+                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');

modules/order/front/routes.json

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