Changes to catalog filters

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

@@ -23,7 +23,7 @@ module.exports = Self => {
             },
             {
                 arg: 'tagGroups',
-                type: [['Object']],
+                type: ['Object'],
                 description: 'Filter by tag'
             },
         ],
@@ -55,45 +55,30 @@ module.exports = Self => {
                     JOIN vn.itemType it ON it.id = i.typeFk
                     JOIN vn.itemCategory ic ON ic.id = it.categoryFk`);
 
-        console.log(tagGroups);
         // Filter by tag
         if (tagGroups) {
-            /*  for (const [group, i] of tagGroups.entries()) {
-                for (const tag of group)
-                    console.log(tag);
-            }
- */
-            /*  for (const tag of tags) {
-                const tAlias = `it${i++}`;
+            for (const [i, tagGroup] of tagGroups.entries()) {
+                const values = tagGroup.values;
+                const tAlias = `it${i}`;
 
-                if (tag.tagFk) {
-                    stmt.merge({
-                        sql: `JOIN vn.itemTag ${tAlias} ON ${tAlias}.itemFk = i.id
-                            AND ${tAlias}.tagFk = ?
-                            AND ${tAlias}.value LIKE ?`,
-                        params: [tag.tagFk, `%${tag.value}%`],
-                    });
-                    // Convertir:
-                    JOIN vn.itemTag it1 ON it1.itemFk = i.id
-                            AND (
-                                (it1.tagFk = ? AND it1.value LIKE ?)
-                                OR (it1.tagFk = ? AND it1.value LIKE ?)
-                                OR (it1.tagFk = ? AND it1.value LIKE ?)
-                            )
-                    JOIN vn.itemTag it2 ON it2.itemFk = i.id
-                            AND (
-                                (it2.tagFk = ? AND it2.value LIKE ?)
-                                OR (it2.tagFk = ? AND it2.value LIKE ?)
-                                OR (it2.tagFk = ? AND it2.value LIKE ?)
-                            )
+                if (tagGroup.tagFk) {
+                    stmt.merge(`JOIN vn.itemTag ${tAlias} ON ${tAlias}.itemFk = i.id AND (`);
+                    for (const [i, tagValue] of values.entries()) {
+                        stmt.merge({
+                            sql: `${i > 0 ? 'OR' : ''} (${tAlias}.tagFk = ? AND ${tAlias}.value LIKE ?)`,
+                            params: [tagGroup.tagFk, `%${tagValue.value}%`],
+                        });
+                    }
+                    stmt.merge(`)`);
                 } else {
+                    const tagValue = values[0];
                     stmt.merge({
                         sql: `JOIN vn.itemTag ${tAlias} ON ${tAlias}.itemFk = i.id
                             AND ${tAlias}.value LIKE ?`,
-                        params: [`%${tag.value}%`],
+                        params: [`%${tagValue.value}%`],
                     });
                 }
-            } */
+            }
         }
 
         stmt.merge(conn.makeWhere(filter.where));

modules/order/front/catalog-search-panel/index.html

@@ -1,64 +1,37 @@
 <mg-ajax path="Tags" options="mgIndex as tags"></mg-ajax>
-<div class="vn-pa-lg" style="min-width: 10em">
+<div class="vn-pa-lg" style="min-width: 18em">
     <form name="form" ng-submit="$ctrl.onSearch()">
- <!--        <vn-horizontal>
-            <vn-autocomplete
-                vn-one
-                label="Tag"
-                ng-model="filter.tagFk"
-                selection="filter.tagSelection"
-                url="Tags"
-                show-field="name"
-                value-field="id"
-                required="true">
-                <tpl-item>{{name}}</tpl-item>
-            </vn-autocomplete>
-        </vn-horizontal>
-        <vn-horizontal>
-            <vn-textfield
-                vn-one
-                label="Value"
-                ng-model="filter.value"
-                required="true">
-            </vn-textfield>
-        </vn-horizontal> -->
-
-
         <vn-horizontal class="vn-pt-sm">
             <vn-one class="text-subtitle1" translate>
                 Tags
             </vn-one>
-            <vn-icon-button
-                vn-none
-                vn-bind="+"
-                vn-tooltip="Add tag"
-                icon="add_circle"
-                ng-click="$ctrl.addTag()">
-            </vn-icon-button>
         </vn-horizontal>
-        <vn-horizontal ng-repeat="itemTag in filter.tags">
+        <vn-horizontal>
             <vn-autocomplete
                 vn-id="tag"
                 vn-one
-                ng-model="itemTag.tagFk"
+                selection="filter.tagSelection"
+                ng-model="filter.tagFk"
                 data="tags.model"
                 show-field="name"
                 label="Tag"
                 on-change="itemTag.value = null">
             </vn-autocomplete>
+        </vn-horizontal>
+        <vn-horizontal ng-repeat="tagValue in filter.values">
             <vn-textfield
                 vn-one
                 ng-show="tag.selection.isFree !== false"
                 vn-id="text"
                 label="Value"
-                ng-model="itemTag.value">
+                ng-model="tagValue.value">
             </vn-textfield>
             <vn-autocomplete
                 vn-one
                 ng-show="tag.selection.isFree === false"
                 url="{{$ctrl.getSourceTable(tag.selection)}}"
                 label="Value"
-                ng-model="itemTag.value"
+                ng-model="tagValue.value"
                 show-field="name"
                 value-field="name">
             </vn-autocomplete>
@@ -66,10 +39,19 @@
                 vn-none
                 vn-tooltip="Remove tag"
                 icon="delete"
-                ng-click="filter.tags.splice($index, 1)"
+                ng-click="filter.values.splice($index, 1)"
                 tabindex="-1">
             </vn-icon-button>
         </vn-horizontal>
+        <vn-horizontal>
+            <vn-icon-button
+                vn-none
+                vn-bind="+"
+                vn-tooltip="Add value"
+                icon="add_circle"
+                ng-click="$ctrl.addValue()">
+            </vn-icon-button>
+        </vn-horizontal>
         <vn-horizontal class="vn-mt-lg">
             <vn-submit label="Search"></vn-submit>
         </vn-horizontal>

modules/order/front/catalog-search-panel/index.js

@@ -15,8 +15,8 @@ class Controller extends SearchPanel {
     set filter(value) {
         if (!value)
             value = {};
-        if (!value.tags)
-            value.tags = [{}];
+        if (!value.values)
+            value.values = [{}];
 
         this.$.filter = value;
     }
@@ -33,9 +33,13 @@ class Controller extends SearchPanel {
             return `ItemTags/filterItemTags/${selection.id}`;
     }
 
-    addTag() {
-        this.filter.tags.push({});
-        this.popover.relocate();
+    addValue() {
+        this.filter.values.push({});
+        setTimeout(() => this.popover.relocate());
+    }
+
+    changeTag() {
+
     }
 }
 

modules/order/front/catalog/index.html

@@ -114,7 +114,7 @@
         <vn-chip 
             ng-if="$ctrl.itemId"
             removable="true"
-            translate-attr="{title: 'Item'}"
+            vn-tooltip="Item id"
             on-remove="$ctrl.removeItemId()"
             class="colored"> 
             <span>Id: {{$ctrl.itemId}}</span>
@@ -122,16 +122,20 @@
         <vn-chip 
             ng-if="$ctrl.itemName"
             removable="true"
-            translate-attr="{title: 'Item'}"
+            vn-tooltip="Item"
             on-remove="$ctrl.removeItemName()"
-            class="colored"> 
-            <span translate>Name</span>
-            <span>: {{$ctrl.itemName}}</span>
+            class="colored">
+            <div>
+                <span>
+                    <span translate>Name</span>:
+                </span>
+                <span>{{$ctrl.itemName}}</span>
+            </div>
         </vn-chip>
         <vn-chip 
             ng-if="category.selection"
             removable="true"
-            translate-attr="{title: 'Category'}"
+            vn-tooltip="Category"
             on-remove="$ctrl.categoryId = null"
             class="colored"> 
             <span translate>{{category.selection.name}}</span>
@@ -139,26 +143,24 @@
         <vn-chip 
             ng-if="type.selection"
             removable="true"
-            translate-attr="{title: 'Type'}"
+            vn-tooltip="Type"
             on-remove="$ctrl.typeId = null"
             class="colored"> 
             <span translate>{{type.selection.name}}</span>
         </vn-chip>
         <vn-chip
-            ng-repeat="tag in $ctrl.tags"
+            ng-repeat="tagGroup in $ctrl.tagGroups"
             removable="true"
-            translate-attr="{title: 'Tag'}"
             on-remove="$ctrl.remove($index)"
+            vn-tooltip="{{::$ctrl.formatTooltip(tagGroup)}}"
             class="colored"> 
             <div>
-                <span ng-if="::tag.tagFk">
-                    <span translate>
-                        {{::tag.tagSelection.name}}
-                    </span>
-                    <span ng-if="::tag.value">: </span> 
+                <span ng-if="::tagGroup.tagFk">
+                    <span translate>{{::tagGroup.tagSelection.name}}</span>:
                 </span>
-                <span translate ng-if="::tag.value">
-                    "{{::tag.value}}"
+                <span ng-repeat="tagValue in tagGroup.values">
+                    <span ng-if="$index > 0">,</span>
+                    <span>"{{::tagValue.value}}"</span>
                 </span>
             </div>
         </vn-chip>

modules/order/front/catalog/index.js

@@ -206,19 +206,17 @@ class Controller extends Section {
     onSearchByTag(event) {
         const value = this.$.search.value;
         if (event.key !== 'Enter' || !value) return;
-        this.tags.push({
-            value: value,
-        });
+        this.tagGroups.push({values: [{value: value}]});
         this.$.search.value = null;
         this.updateStateParams();
         this.applyFilters();
     }
 
     remove(index) {
-        this.tags.splice(index, 1);
+        this.tagGroups.splice(index, 1);
         this.updateStateParams();
 
-        if (this.tags.length >= 0 || this.itemId || this.typeId)
+        if (this.tagGroups.length >= 0 || this.itemId || this.typeId)
             this.applyFilters();
     }
 
@@ -242,7 +240,7 @@ class Controller extends Section {
 
         if (this.typeId)
             newFilter.typeFk = this.typeId;
-        console.log(this.tagGroups);
+
         newParams = {
             orderFk: this.$params.id,
             orderBy: this.getOrderBy(),
@@ -262,8 +260,15 @@ class Controller extends Section {
 
     onPanelSubmit(filter) {
         this.$.popover.hide();
-        if (filter.tags && filter.tags.length) {
-            this.tagGroups.push(filter.tags);
+        const values = filter.values;
+        const nonEmptyValues = values.filter(tagValue => {
+            return tagValue.value;
+        });
+
+        filter.values = nonEmptyValues;
+
+        if (filter.tagFk && nonEmptyValues.length) {
+            this.tagGroups.push(filter);
             this.updateStateParams();
             this.applyFilters();
         }
@@ -283,10 +288,10 @@ class Controller extends Section {
         if (this.typeId)
             params.typeId = this.typeId;
 
-        /*       params.tags = undefined;
-        if (this.tags.length) {
-            const tags = [];
-            for (let tag of this.tags) {
+        params.tagGrops = undefined;
+        if (this.tagGrops.length) {
+            const tagGrops = [];
+            for (let tag of this.tagGrops) {
                 const tagParam = {value: tag.value};
 
                 if (tag.tagSelection) {
@@ -300,7 +305,7 @@ class Controller extends Section {
             }
 
             params.tags = JSON.stringify(tags);
-        } */
+        }
 
         this.$state.go(this.$state.current.name, params);
     }
@@ -362,6 +367,23 @@ class Controller extends Section {
             }
         } else return this.applyFilters();
     }
+
+    formatTooltip(tagGroup) {
+        const tagValues = tagGroup.values;
+
+        let title = '';
+        if (tagGroup.tagFk) {
+            const tagName = tagGroup.tagSelection.name;
+            title += `${tagName}: `;
+        }
+
+        for (let [i, tagValue] of tagValues.entries()) {
+            if (i > 0) title += ', ';
+            title += `"${tagValue.value}"`;
+        }
+
+        return `${title}`;
+    }
 }
 
 ngModule.vnComponent('vnOrderCatalog', {

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

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