From eb36f86b9d27df391347688d4c50d0955986083d Mon Sep 17 00:00:00 2001
From: joan <joan@verdnatura.es>
Date: Mon, 8 Nov 2021 14:46:23 +0100
Subject: [PATCH] Added smart-table to item index

---
 modules/item/front/index/index.html | 253 ++++++++++++++++------------
 modules/item/front/index/index.js   |  23 ++-
 modules/item/front/index/style.scss |   2 +-
 3 files changed, 166 insertions(+), 112 deletions(-)

diff --git a/modules/item/front/index/index.html b/modules/item/front/index/index.html
index 0232950426..9fa03eabb8 100644
--- a/modules/item/front/index/index.html
+++ b/modules/item/front/index/index.html
@@ -1,115 +1,148 @@
 <vn-auto-search
     model="model">
 </vn-auto-search>
-<vn-data-viewer
-    model="model"
-    class="vn-w-xl vn-mb-xl">
-    <vn-card>
-        <vn-table
-            model="model"
-            show-fields="$ctrl.showFields"
-            vn-smart-table="itemIndex">
-            <vn-thead>
-                <vn-tr>
-                    <vn-th shrink></vn-th>
-                    <vn-th field="id" shrink>Id</vn-th>
-                    <vn-th field="grouping" shrink>Grouping</vn-th>
-                    <vn-th field="packing" shrink>Packing</vn-th>
-                    <vn-th field="name">Description</vn-th>
-                    <vn-th field="stems" shrink>Stems</vn-th>
-                    <vn-th field="size" shrink>Size</vn-th>
-                    <vn-th field="typeFk" shrink>Type</vn-th>
-                    <vn-th field="category" shrink>Category</vn-th>
-                    <vn-th field="intrastat" shrink>Intrastat</vn-th>
-                    <vn-th field="origin" shrink>Origin</vn-th>
-                    <vn-th field="salesperson" shrink>Buyer</vn-th>
-                    <vn-th field="density" shrink>Density</vn-th>
-                    <vn-th field="stemMultiplier" shrink>Multiplier</vn-th>
-                    <vn-th field="active" shrink>Active</vn-th>
-                    <vn-th field="landed" shrink-date>Landed</vn-th>
-                    <vn-th></vn-th>
-                </vn-tr>
-            </vn-thead>
-            <vn-tbody>
-                <a ng-repeat="item in model.data"
-                    class="clickable vn-tr search-result"
-                    ui-sref="item.card.summary({id: item.id})">
-                    <vn-td shrink>
-                        <img 
-                            ng-src="{{::$root.imagePath('catalog', '50x50', item.id)}}"
-                            zoom-image="{{::$root.imagePath('catalog', '1600x900', item.id)}}"
-                            vn-click-stop
-                            on-error-src/>
-                    </vn-td>
-                    <vn-td shrink>
-                        <span
-                            vn-click-stop="itemDescriptor.show($event, item.id)"
-                            class="link">
-                            {{::item.id}}
-                        </span>
-                    </vn-td>
-                    <vn-td shrink>{{::item.grouping | dashIfEmpty}}</vn-td>
-                    <vn-td shrink>{{::item.packing | dashIfEmpty}}</vn-td>
-                    <vn-td vn-fetched-tags>
-                        <div>
-                            <vn-one title="{{::item.name}}">{{::item.name}}</vn-one>
-                            <vn-one ng-if="::item.subName">
-                                <h3 title="{{::item.subName}}">{{::item.subName}}</h3>
-                            </vn-one>
-                        </div>
-                        <vn-fetched-tags
-                            max-length="6"
-                            item="item"
-                            tabindex="-1">
-                        </vn-fetched-tags>
-                    </vn-td>
-                    <vn-td shrink>{{::item.stems}}</vn-td>
-                    <vn-td shrink>{{::item.size}}</vn-td>
-                    <vn-td shrink title="{{::item.typeName}}">
-                        {{::item.typeName}}
-                    </vn-td>
-                    <vn-td shrink title="{{::item.category}}">
-                        {{::item.category}}
-                    </vn-td>
-                    <vn-td shrink title="{{::item.intrastat}}">
-                        {{::item.intrastat}}
-                    </vn-td>
-                    <vn-td shrink>{{::item.origin}}</vn-td>
-                    <vn-td shrink title="{{::item.userName}}">
-                        <span 
-                            class="link" 
-                            vn-click-stop="workerDescriptor.show($event, item.buyerFk)">
-                            {{::item.userName}}
-                        </span>
-                    </vn-td>
-                    <vn-td shrink>{{::item.density}}</vn-td>
-                    <vn-td shrink >{{::item.stemMultiplier}}</vn-td>
-                    <vn-td shrink>
-                        <vn-check
-                            disabled="true"
-                            ng-model="::item.isActive">
-                        </vn-check> 
-                    </vn-td>
-                    <vn-td shrink-date>{{::item.landed | date:'dd/MM/yyyy'}}</vn-td> 
-                    <vn-td shrink>
-                        <vn-horizontal class="buttons">
-                            <vn-icon-button
-                                vn-click-stop="clone.show(item.id)"
-                                vn-tooltip="Clone"
-                                icon="icon-clone">
-                            </vn-icon-button>
-                            <vn-icon-button
-                                vn-click-stop="$ctrl.preview(item)"
-                                vn-tooltip="Preview"
-                                icon="preview">
-                            </vn-icon-button>
-                        </vn-horizontal>
-                    </vn-td>
-                </a>
-            </vn-tbody>
-        </vn-table>
-    </vn-card>
-</vn-data-viewer>
+<vn-card>
+    <smart-table 
+        model="model" 
+        view-config-id="itemsIndex" 
+        options="$ctrl.smartTableOptions" 
+        expr-builder="$ctrl.exprBuilder(param, value)">
+        <slot-table>
+            <table class="vn-table">
+                <thead>
+                    <tr>
+                        <th shrink></th>
+                        <th field="id" shrink>
+                            <span translate>Id</span>
+                        </th>
+                        <th field="grouping" shrink>
+                            <span translate>Grouping</span>
+                        </th>
+                        <th field="packing" shrink>
+                            <span translate>Packing</span>
+                        </th>
+                        <th field="name">
+                            <span translate>Description</span>
+                        </th>
+                        <th field="stems" shrink>
+                            <span translate>Stems</span>
+                        </th>
+                        <th field="size" shrink>
+                            <span translate>Size</span>
+                        </th>
+                        <th field="typeFk" shrink>
+                            <span translate>Type</span>
+                        </th>
+                        <th field="category" shrink>
+                            <span translate>Category</span>
+                        </th>
+                        <th field="intrastat" shrink>
+                            <span translate>Intrastat</span>
+                        </th>
+                        <th field="origin" shrink>
+                            <span translate>Origin</span>
+                        </th>
+                        <th field="salesperson" shrink>
+                            <span translate>Buyer</span>
+                        </th>
+                        <th field="density" shrink>
+                            <span translate>Density</span>
+                        </th>
+                        <th field="stemMultiplier" shrink>
+                            <span translate>Multiplier</span>
+                        </th>
+                        <th field="active" shrink>
+                            <span translate>Active</span>
+                        </th>
+                        <th field="landed" shrink-date>
+                            <span translate>Landed</span>
+                        </th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr ng-repeat="item in model.data"
+                        vn-anchor="::{
+                            state: 'item.card.summary', 
+                            params: {id: item.id}
+                        }">
+                        <td shrink>
+                            <img 
+                                ng-src="{{::$root.imagePath('catalog', '50x50', item.id)}}"
+                                zoom-image="{{::$root.imagePath('catalog', '1600x900', item.id)}}"
+                                vn-click-stop
+                                on-error-src/>
+                        </td>
+                        <td shrink>
+                            <span
+                                vn-click-stop="itemDescriptor.show($event, item.id)"
+                                class="link">
+                                {{::item.id}}
+                            </span>
+                        </td>
+                        <td shrink>{{::item.grouping | dashIfEmpty}}</td>
+                        <td shrink>{{::item.packing | dashIfEmpty}}</td>
+                        <td vn-fetched-tags>
+                            <div>
+                                <vn-one title="{{::item.name}}">{{::item.name}}</vn-one>
+                                <vn-one ng-if="::item.subName">
+                                    <h3 title="{{::item.subName}}">{{::item.subName}}</h3>
+                                </vn-one>
+                            </div>
+                            <vn-fetched-tags
+                                max-length="6"
+                                item="item"
+                                tabindex="-1">
+                            </vn-fetched-tags>
+                        </td>
+                        <td shrink>{{::item.stems}}</td>
+                        <td shrink>{{::item.size}}</td>
+                        <td shrink title="{{::item.typeName}}">
+                            {{::item.typeName}}
+                        </td>
+                        <td shrink title="{{::item.category}}">
+                            {{::item.category}}
+                        </td>
+                        <td shrink title="{{::item.intrastat}}">
+                            {{::item.intrastat}}
+                        </td>
+                        <td shrink>{{::item.origin}}</td>
+                        <td shrink title="{{::item.userName}}">
+                            <span 
+                                class="link" 
+                                vn-click-stop="workerDescriptor.show($event, item.buyerFk)">
+                                {{::item.userName}}
+                            </span>
+                        </td>
+                        <td shrink>{{::item.density}}</td>
+                        <td shrink >{{::item.stemMultiplier}}</td>
+                        <td shrink>
+                            <vn-check
+                                disabled="true"
+                                ng-model="::item.isActive">
+                            </vn-check> 
+                        </td>
+                        <td shrink-date>{{::item.landed | date:'dd/MM/yyyy'}}</td> 
+                        <td shrink>
+                            <vn-horizontal class="buttons">
+                                <vn-icon-button
+                                    vn-click-stop="clone.show(item.id)"
+                                    vn-tooltip="Clone"
+                                    icon="icon-clone">
+                                </vn-icon-button>
+                                <vn-icon-button
+                                    vn-click-stop="$ctrl.preview(item)"
+                                    vn-tooltip="Preview"
+                                    icon="preview">
+                                </vn-icon-button>
+                            </vn-horizontal>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </slot-table>
+    </smart-table>
+</vn-card>
 <a ui-sref="item.create" vn-tooltip="New item" vn-bind="+" fixed-bottom-right>
     <vn-float-button icon="add"></vn-float-button>
 </a>
@@ -133,7 +166,7 @@
 </vn-popup>
 <vn-contextmenu 
     vn-id="contextmenu" 
-    targets="['vn-data-viewer']" 
+    targets="['smart-table']" 
     model="model"
     expr-builder="$ctrl.exprBuilder(param, value)">
         <slot-menu>
diff --git a/modules/item/front/index/index.js b/modules/item/front/index/index.js
index 3235d684e4..86e67f919e 100644
--- a/modules/item/front/index/index.js
+++ b/modules/item/front/index/index.js
@@ -5,9 +5,30 @@ import './style.scss';
 class Controller extends Section {
     constructor($element, $) {
         super($element, $);
-        this.showFields = {
+        /* this.showFields = {
             id: false,
             actions: false
+        }; */
+
+        this.smartTableOptions = {
+            activeButtons: {
+                search: true,
+                shownColumns: true,
+            },
+            columns: [
+                {
+                    field: 'category',
+                    autocomplete: {
+                        url: 'ItemCategories',
+                    }
+                },
+                {
+                    field: 'origin',
+                    autocomplete: {
+                        url: 'Origins',
+                    }
+                },
+            ]
         };
     }
 
diff --git a/modules/item/front/index/style.scss b/modules/item/front/index/style.scss
index b0b94c19d3..eaa1a16ed4 100644
--- a/modules/item/front/index/style.scss
+++ b/modules/item/front/index/style.scss
@@ -23,7 +23,7 @@ vn-item-product {
     }
 }
 
-vn-table {
+table {
     img {
         border-radius: 50%;
         width: 50px;