filters refactor

db/dump/fixtures.sql

@@ -643,7 +643,8 @@ INSERT INTO `vn`.`itemType`(`id`, `code`, `name`, `categoryFk`, `life`,`workerFk
         (2, 'ITG', 'Anthurium',      1, 31,     5, 0),
         (3, 'WPN', 'Paniculata',     2, 31,     5, 0),
         (4, 'PRT', 'Delivery ports', 3, NULL,   5, 1),
-        (5, 'CON', 'Container',      3, NULL,   5, 1);
+        (5, 'CON', 'Container',      3, NULL,   5, 1),
+        (6, 'ALS', 'Alstroemeria',   1, 31,     5, 0);
 
 INSERT INTO `vn`.`ink`(`id`, `name`, `picture`, `showOrder`)
     VALUES

e2e/helpers/selectors.js

@@ -605,7 +605,7 @@ export default {
         orderByAutocomplete: 'vn-autocomplete[label="Order by"]',
         plantRealmButton: 'vn-order-catalog > vn-side-menu vn-icon[icon="icon-plant"]',
         typeAutocomplete: 'vn-autocomplete[data="$ctrl.itemTypes"]',
-        itemIdInput: 'vn-catalog-filter vn-textfield[ng-model="$ctrl.itemFk"] input',
+        itemIdInput: 'vn-catalog-filter vn-textfield[ng-model="$ctrl.itemId"] input',
         itemTagValueInput: 'vn-catalog-filter vn-textfield[ng-model="$ctrl.value"] input',
         openTagSearch: 'vn-catalog-filter > div > vn-vertical > vn-textfield[ng-model="$ctrl.value"] .append i',
         tagAutocomplete: 'vn-order-catalog-search-panel vn-autocomplete[ng-model="filter.tagFk"]',

modules/order/front/filter/index.html

@@ -6,27 +6,26 @@
 </vn-crud-model>
 <div>
     <vn-horizontal class="item-category">
+        <vn-autocomplete vn-id="category"
+            data="categories"
+            ng-model="$ctrl.categoryId"
+            show-field="name"
+            value-field="id"
+            label="Category">
+        </vn-autocomplete>
         <vn-one ng-repeat="category in categories">
             <vn-icon 
-                ng-class="{'active': $ctrl.category.id == category.id}"
+                ng-class="{'active': $ctrl.categoryId == category.id}"
                 icon="{{::category.icon}}"
                 vn-tooltip="{{::category.name}}"
-                ng-click="$ctrl.category = {
+                ng-click="$ctrl.categoryId = category.id">
-                    id: category.id,
-                    value: category.name
-                }">
             </vn-icon>
         </vn-one>
     </vn-horizontal>
     <vn-vertical class="input">
-        <vn-autocomplete
+        <vn-autocomplete vn-id="type"
-            vn-id="type"
             data="$ctrl.itemTypes"
-            on-change="$ctrl.type = {
+            ng-model="$ctrl.typeId"
-                id: value,
-                value: type.selection.name
-            }"
-            ng-model="$ctrl.type.id"
             show-field="name"
             value-field="id"
             label="Type"
@@ -38,9 +37,6 @@
                         {{categoryName}}
                     </div>
                 </tpl-item>
-            <prepend>
-                <vn-icon icon="search"></vn-icon>
-            </prepend>
         </vn-autocomplete>
     </vn-vertical>
     <vn-vertical class="input vn-pt-md">
@@ -73,7 +69,7 @@
         <vn-textfield
             ng-keyUp="$ctrl.onSearchById($event)"
             label="Item id"
-            ng-model="$ctrl.itemFk">
+            ng-model="$ctrl.itemId">
             <prepend>
                 <vn-icon icon="icon-item"></vn-icon>
             </prepend>
@@ -106,20 +102,20 @@
     </vn-popover>
     <div class="chips">
         <vn-chip 
-            ng-if="$ctrl.category"
+            ng-if="category.selection"
             removable="true"
             translate-attr="{title: 'Category'}"
-            on-remove="$ctrl.category = null"
+            on-remove="$ctrl.categoryId = null"
             class="colored"> 
-            <span translate>{{$ctrl.category.value}}</span>
+            <span translate>{{category.selection.name}}</span>
         </vn-chip>
         <vn-chip 
-            ng-if="$ctrl.type"
+            ng-if="type.selection"
             removable="true"
             translate-attr="{title: 'Type'}"
-            on-remove="$ctrl.type = null"
+            on-remove="$ctrl.typeId = null"
             class="colored"> 
-            <span translate>{{$ctrl.type.value}}</span>
+            <span translate>{{type.selection.name}}</span>
         </vn-chip>
         <vn-chip
             ng-repeat="tag in $ctrl.tags"

modules/order/front/filter/index.js

@@ -24,65 +24,50 @@ class Controller {
      * @param {Object} value - Order data
      */
     set order(value) {
-        if (!value || !value.id || this._order) return;
         this._order = value;
 
+        if (!value) return;
+
         this.$.$applyAsync(() => {
-            let category;
+            if (this.$stateParams.categoryId)
-            let type;
+                this.categoryId = this.$stateParams.categoryId;
 
-            if (this.$stateParams.category)
+            if (this.$stateParams.typeId)
-                category = JSON.parse(this.$stateParams.category);
+                this.typeId = this.$stateParams.typeId;
-
-            if (this.$stateParams.type)
-                type = JSON.parse(this.$stateParams.type);
-
-            if (category && category.id)
-                this.category = category;
-
-            if (type && type.id)
-                this.type = type;
         });
     }
 
-    get category() {
+    get categoryId() {
-        return this._category;
+        return this._categoryId;
     }
 
-    set category(value) {
+    set categoryId(value) {
-        this.catalog.$scope.model.data = [];
+        if (!value || (this.categoryId == value))
-        this.itemTypes = [];
+            value = null;
-        this.type = null;
 
-        if (!value || (this.category && this.category.id == value.id))
+        this._categoryId = value;
-            this._category = null;
+        this.itemTypes = [];
-        else
+        this.typeId = null;
-            this._category = value;
 
         this.updateStateParams();
 
         if (this.tags.length > 0)
             this.applyFilters();
 
-        if (this._category)
+        if (value)
             this.updateItemTypes();
     }
 
-    get type() {
+    get typeId() {
-        return this._type;
+        return this._typeId;
     }
 
-    set type(value) {
+    set typeId(value) {
-        if (value && this.type && this.type.id == value.id) return;
+        this._typeId = value;
-
-        this._type = value;
-
-        if (!value || !value.id)
-            this._type = null;
 
         this.updateStateParams();
 
-        if ((value && value.id) || this.tags.length > 0)
+        if ((value) || this.tags.length > 0)
             this.applyFilters();
     }
 
@@ -91,17 +76,18 @@ class Controller {
      */
     updateItemTypes() {
         let params = {
-            itemCategoryId: this.category.id
+            itemCategoryId: this.categoryId
         };
 
         const query = `Orders/${this.order.id}/getItemTypeAvailable`;
-        this.$http.get(query, {params}).then(res => {
+        this.$http.get(query, {params}).then(res =>
-            this.itemTypes = res.data;
+            this.itemTypes = res.data);
-        });
     }
 
     onSearchById(event) {
-        if (event.key === 'Enter' && (this.tags.length > 0 || this.itemFk || this.type))
+        console.log(event);
+        const hasValue = this.tags.length > 0 || this.itemId || this.typeId;
+        if (event.key === 'Enter' && hasValue)
             this.applyFilters();
     }
 
@@ -117,7 +103,7 @@ class Controller {
     remove(index) {
         this.tags.splice(index, 1);
 
-        if (this.tags.length >= 0 || this.itemFk || this.type)
+        if (this.tags.length >= 0 || this.itemId || this.typeId)
             this.applyFilters();
     }
 
@@ -126,14 +112,14 @@ class Controller {
         let newFilter = {};
         const model = this.catalog.$scope.model;
 
-        if (this.category)
+        if (this.categoryId)
-            newFilter.categoryFk = this.category.id;
+            newFilter.categoryFk = this.categoryId;
 
-        if (this.type)
+        if (this.typeId)
-            newFilter.typeFk = this.type.id;
+            newFilter.typeFk = this.typeId;
 
-        if (this.itemFk)
+        if (this.itemId)
-            newFilter = {'i.id': this.itemFk};
+            newFilter = {'i.id': this.itemId};
 
         newParams = {
             orderFk: this.order.id,
@@ -164,13 +150,13 @@ class Controller {
     updateStateParams() {
         const params = {};
 
-        if (this.category)
+        if (this.categoryId)
-            params.category = JSON.stringify(this.category);
+            params.categoryId = this.categoryId;
+        else params.categoryId = undefined;
 
-        if (this.type)
+        if (this.typeId)
-            params.type = JSON.stringify(this.type);
+            params.typeId = this.typeId;
-        else
+        else params.typeId = undefined;
-            params.type = undefined;
 
         this.$state.go(this.$state.current.name, params);
     }

modules/order/front/filter/style.scss

@@ -14,6 +14,10 @@ vn-catalog-filter > div {
         align-items: flex-start;
         flex-wrap: wrap;
 
+        vn-autocomplete[vn-id="category"] {
+            display: none
+        }
+
         & > vn-one {
             padding: $spacing-sm;
             min-width: 33.33%;

modules/order/front/routes.json

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