Filter item from a dialog

modules/entry/front/buy/import/index.html

@@ -69,6 +69,13 @@
                                     <tpl-item>
                                         {{::id}} - {{::name}}
                                     </tpl-item>
+                                    <append>
+                                        <vn-icon-button
+                                            icon="filter_alt"
+                                            vn-click-stop="$ctrl.showFilterDialog(buy)"
+                                            vn-tooltip="Filter...">
+                                        </vn-icon-button>
+                                    </append>
                                 </vn-autocomplete>
                             </td>
                             <td title="{{::buy.description}}" expand>{{::buy.description | dashIfEmpty}}</td>
@@ -100,7 +107,95 @@
                 label="Cancel"
                 ui-sref="entry.card.buy.index">
             </vn-button>
-            </vn-button>
         </vn-button-bar>
     </div>
 </form>
+
+<vn-dialog
+    vn-id="filterDialog"
+    on-accept="$ctrl.addTime()"
+    message="Filter item">
+    <tpl-body class="itemFilter">
+        <vn-horizontal>
+            <vn-textfield
+                label="Name" 
+                ng-model="$ctrl.itemFilterParams.name"
+                vn-focus>
+            </vn-textfield>
+            <vn-textfield
+                label="Size" 
+                ng-model="$ctrl.itemFilterParams.size">
+            </vn-textfield>
+            <vn-autocomplete
+                label="Producer"
+                ng-model="$ctrl.itemFilterParams.producerFk"
+                url="Producers"
+                show-field="name"
+                value-field="id">
+            </vn-autocomplete>
+            <vn-autocomplete
+                label="Type"
+                ng-model="$ctrl.itemFilterParams.typeFk"
+                url="ItemTypes"
+                show-field="name"
+                value-field="id">
+            </vn-autocomplete>
+            <vn-autocomplete
+                label="Color"
+                ng-model="$ctrl.itemFilterParams.inkFk"
+                url="Inks"
+                show-field="name"
+                value-field="id">
+            </vn-autocomplete>
+        </vn-horizontal>
+        <vn-horizontal class="vn-mb-md">
+            <vn-button vn-none
+                label="Search"
+                ng-click="$ctrl.filter()">
+            </vn-button>
+        </vn-horizontal>
+        <vn-crud-model
+            vn-id="itemsModel" 
+            url="Items"
+            filter="$ctrl.itemFilter"
+            data="items"
+            limit="10">
+        </vn-crud-model>
+        <vn-data-viewer
+        model="itemsModel"
+        class="vn-w-lg">
+            <vn-table class="scrollable">
+                <vn-thead>
+                    <vn-tr>
+                        <vn-th shrink>ID</vn-th>
+                        <vn-th expand>Item</vn-th>
+                        <vn-th number>Size</vn-th>
+                        <vn-th expand>Producer</vn-th>
+                        <vn-th>Color</vn-th>
+                    </vn-tr>
+                </vn-thead>
+                <vn-tbody>
+                    <a ng-repeat="item in items"
+                    class="clickable vn-tr search-result"
+                    ng-click="$ctrl.selectItem(item.id)">
+                        <vn-td shrink>
+                            <span
+                                ng-click="itemDescriptor.show($event, item.id)"
+                                class="link">
+                                {{::item.id}}
+                            </span>
+                        </vn-td>
+                        <vn-td expand>{{::item.name}}</vn-td>
+                        <vn-td number>{{::item.size}}</vn-td>
+                        <vn-td expand>{{::item.producer.name}}</vn-td>
+                        <vn-td>{{::item.ink.name}}</vn-td>
+                    </a>
+                </vn-tbody>
+            </vn-table>
+        </vn-data-viewer>
+        <vn-item-descriptor-popover
+            vn-id="item-descriptor"
+            warehouse-fk="$ctrl.vnConfig.warehouseFk">
+        </vn-item-descriptor-popover>
+    </tpl-body>
+</vn-dialog>

modules/entry/front/buy/import/index.js

@@ -88,6 +88,59 @@ class Controller extends Section {
             ? {id: $search}
             : {name: {like: '%' + $search + '%'}};
     }
+
+    showFilterDialog(buy) {
+        this.activeBuy = buy;
+        this.itemFilterParams = {};
+        this.itemFilter = {
+            include: [
+                {
+                    relation: 'producer',
+                    scope: {
+                        fields: ['name']
+                    }
+                },
+                {
+                    relation: 'ink',
+                    scope: {
+                        fields: ['name']
+                    }
+                }
+            ]
+        };
+
+        this.$.filterDialog.show();
+    }
+
+    selectItem(id) {
+        this.activeBuy['itemFk'] = id;
+        this.$.filterDialog.hide();
+    }
+
+    filter() {
+        const filter = this.itemFilter;
+        const params = this.itemFilterParams;
+        const where = {};
+
+        for (let key in params) {
+            const value = params[key];
+            if (!value) continue;
+
+            switch (key) {
+            case 'name':
+                where[key] = {like: `%${value}%`};
+                break;
+            case 'producerFk':
+            case 'typeFk':
+            case 'size':
+            case 'ink':
+                where[key] = value;
+            }
+        }
+
+        filter.where = where;
+        this.$.itemsModel.applyFilter(filter);
+    }
 }
 
 Controller.$inject = ['$element', '$scope'];

modules/entry/front/buy/import/style.scss

@@ -3,3 +3,9 @@ vn-entry-buy-import {
         width: 250px
     }
 }
+
+.itemFilter {
+    vn-table.scrollable {
+        height: 500px
+    }
+}

modules/entry/front/buy/locale/es.yml

@@ -4,3 +4,5 @@ Box: Embalaje
 Import buys: Importar compras
 Some of the imported buys doesn't have an item: Algunas de las compras importadas no tienen un artículo
 JSON files only: Solo ficheros JSON
+Filter item: Filtrar artículo
+Filter...: Filtrar...

modules/item/front/search-panel/locale/es.yml

@@ -1,6 +1,6 @@
 Ink: Tinta
 Origin: Origen
-Producer: Productor.
+Producer: Productor
 With visible: Con visible
 Field: Campo
 More fields: Más campos