Merge branch '2970-smart-table' of https://gitea.verdnatura.es/verdnatura/salix into 2970-smart-table

front/core/components/smart-table/index.js

@@ -12,12 +12,18 @@ export default class SmartTable extends Component {
         this.currentUserId = window.localStorage.currentUserWorkerId;
         this.$transclude = $transclude;
         this.sortCriteria = [];
+        this.$inputsScope;
         this.columns = [];
         this.autoSave = false;
-
         this.transclude();
     }
 
+    $onDestroy() {
+        const styleElement = document.querySelector('style[id="smart-table"]');
+        if (this.$.css && styleElement)
+            styleElement.parentNode.removeChild(styleElement);
+    }
+
     get options() {
         return this._options;
     }
@@ -112,29 +118,11 @@ export default class SmartTable extends Component {
 
     transclude() {
         const slotTable = this.element.querySelector('#table');
-        this.$transclude(($clone, $scope) => {
+        this.$transclude($clone => {
             const table = $clone[0];
             slotTable.appendChild(table);
             this.registerColumns();
-
-            const header = this.element.querySelector('thead > tr');
-            const columns = header.querySelectorAll('th');
-            const tbody = this.element.querySelector('tbody');
-            if (tbody) {
-                const noSearch = this.$compile(`
-                    <tr class="empty-rows" ng-if="!model.data">
-                        <td colspan="${columns.length}" translate>Enter a new search</td>
-                    </tr>
-                `)($scope);
-                tbody.appendChild(noSearch[0]);
-
-                const noRows = this.$compile(`
-                    <tr class="empty-rows" ng-if="model.data.length == 0">
-                        <td colspan="${columns.length}" translate>No data</td>
-                    </tr>
-                `)($scope);
-                tbody.appendChild(noRows[0]);
-            }
+            this.emptyDataRows();
         }, null, 'table');
     }
 
@@ -144,7 +132,8 @@ export default class SmartTable extends Component {
         viewConfig.configuration = Object.assign({}, viewConfig.configuration);
         userViewModel.save()
             .then(() => this.vnApp.showSuccess(this.$t('Data saved!')))
-            .then(() => this.applyViewConfig());
+            .then(() => this.applyViewConfig())
+            .then(() => this.$.smartTableColumns.hide());
     }
 
     applyViewConfig() {
@@ -172,12 +161,6 @@ export default class SmartTable extends Component {
             document.head.appendChild(this.$.css);
             this.$.css.appendChild(document.createTextNode(rule));
         }
-
-        this.$.$on('$destroy', () => {
-            styleElement = document.querySelector('style[id="smart-table"]');
-            if (this.$.css && styleElement)
-                styleElement.parentNode.removeChild(styleElement);
-        });
     }
 
     registerColumns() {
@@ -199,6 +182,27 @@ export default class SmartTable extends Component {
         }
     }
 
+    emptyDataRows() {
+        const header = this.element.querySelector('thead > tr');
+        const columns = header.querySelectorAll('th');
+        const tbody = this.element.querySelector('tbody');
+        if (tbody) {
+            const noSearch = this.$compile(`
+                    <tr class="empty-rows" ng-if="!model.data">
+                        <td colspan="${columns.length}" translate>Enter a new search</td>
+                    </tr>
+                `)(this.$);
+            tbody.appendChild(noSearch[0]);
+
+            const noRows = this.$compile(`
+                    <tr class="empty-rows" ng-if="model.data.length == 0">
+                        <td colspan="${columns.length}" translate>No data</td>
+                    </tr>
+                `)(this.$);
+            tbody.appendChild(noRows[0]);
+        }
+    }
+
     orderHandler(element) {
         const field = element.getAttribute('field');
         const existingCriteria = this.sortCriteria.find(criteria => {
@@ -239,10 +243,18 @@ export default class SmartTable extends Component {
         const columns = header.querySelectorAll('th');
 
         const hasSearchRow = tbody.querySelector('tr#searchRow');
-        if (hasSearchRow) return hasSearchRow.remove();
+        if (hasSearchRow) {
+            if (this.$inputsScope)
+                this.$inputsScope.$destroy();
+
+            return hasSearchRow.remove();
+        }
 
         const searchRow = document.createElement('tr');
         searchRow.setAttribute('id', 'searchRow');
+
+        this.$inputsScope = this.$.$new();
+
         for (let column of columns) {
             const field = column.getAttribute('field');
             const cell = document.createElement('td');
@@ -265,7 +277,6 @@ export default class SmartTable extends Component {
                     const autocomplete = options.autocomplete;
                     for (const prop in autocomplete)
                         props += `${camelToKebab(prop)}="${autocomplete[prop]}"\n`;
-
                     input = this.$compile(`
                     <vn-autocomplete
                         class="dense"
@@ -274,7 +285,7 @@ export default class SmartTable extends Component {
                         ${props}
                         on-change="$ctrl.searchByColumn('${field}')"
                         clear-disabled="true"
-                    />`)(this.$);
+                    />`)(this.$inputsScope);
                 } else {
                     input = this.$compile(`
                         <vn-textfield
@@ -283,7 +294,7 @@ export default class SmartTable extends Component {
                             ng-model="searchProps['${field}']"
                             ng-keydown="$ctrl.searchWithEvent($event, '${field}')"
                             clear-disabled="true"
-                        />`)(this.$);
+                        />`)(this.$inputsScope);
                 }
                 cell.appendChild(input[0]);
             }
@@ -300,7 +311,7 @@ export default class SmartTable extends Component {
     }
 
     searchByColumn(field) {
-        const searchCriteria = this.$.searchProps[field];
+        const searchCriteria = this.$inputsScope.searchProps[field];
         const emptySearch = searchCriteria == '' || null;
 
         const filters = this.filterSanitizer(field);
@@ -309,7 +320,7 @@ export default class SmartTable extends Component {
             this.model.userFilter = filters.userFilter;
 
         if (!emptySearch)
-            this.addFilter(field, this.$.searchProps[field]);
+            this.addFilter(field, this.$inputsScope.searchProps[field]);
         else this.model.refresh();
     }
 
@@ -407,10 +418,6 @@ export default class SmartTable extends Component {
         this.model.save()
             .then(() => this.vnApp.showSuccess(this.$t('Data saved!')));
     }
-
-    hasChanges() {
-        return true;
-    }
 }
 
 SmartTable.$inject = ['$element', '$scope', '$transclude'];

front/core/components/smart-table/style.scss

@@ -7,17 +7,14 @@ smart-table {
         cursor: pointer;
         align-items: center;
 
-        & > * {
-            display: flex
-        }
     }
     th[field][number] {
         & > :before {
-            display: flex;
+            vertical-align: middle;
             font-family: 'Material Icons';
             content: 'arrow_downward';
             color: $color-spacer;
-            margin: 2px 2px 0 0;
+            margin-right: 2px;
             opacity: 0
         
         }
@@ -42,11 +39,11 @@ smart-table {
 
     th[field]:not([number]) {
         & > :after {
-            display: flex;
+            vertical-align: middle;
             font-family: 'Material Icons';
             content: 'arrow_downward';
             color: $color-spacer;
-            margin: 2px 0 0 2px;
+            margin-left: 2px;
             opacity: 0
         
         }

front/core/components/smart-table/table.scss

@@ -33,7 +33,6 @@ smart-table table {
 
                 &[number] {
                     text-align: right;
-                    width: 96px;
                 }
                 &[centered] {
                     text-align: center;
@@ -101,7 +100,7 @@ smart-table table {
     .vn-check {
         margin: 0;
     }
-    .empty-rows {
+    .empty-rows > td {
         color: $color-font-secondary;
         font-size: 1.375rem;
         text-align: center;

modules/entry/front/latest-buys/index.html

@@ -137,7 +137,7 @@
                             <span
                                 vn-click-stop="itemDescriptor.show($event, buy.itemFk)"
                                 class="link">
-                                {{::buy.itemFk | zeroFill:6}}
+                                {{::buy.itemFk}}
                             </span>
                         </td>
                         <td number>