Merge pull request 'fear(smart-table): now shows the default order with the column arrows' (#825) from 3457-smart_table_order into dev

Reviewed-on: #825
Reviewed-by: Carlos Jimenez Ruiz <carlosjr@verdnatura.es>

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

@@ -44,16 +44,10 @@ export default class SmartTable extends Component {
 
     set model(value) {
         this._model = value;
-        if (value)
+        if (value) {
             this.$.model = value;
-    }
-
-    get viewConfigId() {
-        return this._viewConfigId;
-    }
-
-    set viewConfigId(value) {
-        this._viewConfigId = value;
+            this.defaultOrder();
+        }
     }
 
     getDefaultViewConfig() {
@@ -163,6 +157,40 @@ export default class SmartTable extends Component {
         }
     }
 
+    defaultOrder() {
+        const order = this.model.order;
+        if (!order) return;
+
+        const orderFields = order.split(', ');
+
+        for (const fieldString of orderFields) {
+            const field = fieldString.split(' ');
+            const fieldName = field[0];
+
+            let sortType = 'ASC';
+            if (field.length === 2)
+                sortType = field[1];
+
+            const column = this.columns.find(column => column.field == fieldName);
+            if (column) {
+                this.sortCriteria.push({field: fieldName, sortType: sortType});
+
+                const isASC = sortType == 'ASC';
+                const isDESC = sortType == 'DESC';
+
+                if (isDESC) {
+                    column.element.classList.remove('asc');
+                    column.element.classList.add('desc');
+                }
+
+                if (isASC) {
+                    column.element.classList.remove('desc');
+                    column.element.classList.add('asc');
+                }
+            }
+        }
+    }
+
     registerColumns() {
         const header = this.element.querySelector('thead > tr');
         if (!header) return;
@@ -175,7 +203,7 @@ export default class SmartTable extends Component {
                 const columnElement = angular.element(column);
                 const caption = columnElement.text().trim();
 
-                this.columns.push({field, caption, index});
+                this.columns.push({field, caption, index, element: column});
 
                 column.addEventListener('click', () => this.orderHandler(column));
             }

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

@@ -80,6 +80,45 @@ describe('Component smartTable', () => {
         });
     });
 
+    describe('defaultOrder', () => {
+        it('should insert a new object to the controller sortCriteria with a sortType value of "ASC"', () => {
+            const element = document.createElement('div');
+            controller.model = {order: 'id'};
+            controller.columns = [
+                {field: 'id', element: element},
+                {field: 'test1', element: element},
+                {field: 'test2', element: element}
+            ];
+
+            controller.defaultOrder();
+
+            const firstSortCriteria = controller.sortCriteria[0];
+
+            expect(firstSortCriteria.field).toEqual('id');
+            expect(firstSortCriteria.sortType).toEqual('ASC');
+        });
+
+        it('should insert two new objects to the controller sortCriteria with a sortType values of "ASC" and "DESC"', () => {
+            const element = document.createElement('div');
+            controller.model = {order: 'test1, id DESC'};
+            controller.columns = [
+                {field: 'id', element: element},
+                {field: 'test1', element: element},
+                {field: 'test2', element: element}
+            ];
+
+            controller.defaultOrder();
+
+            const firstSortCriteria = controller.sortCriteria[0];
+            const secondSortCriteria = controller.sortCriteria[1];
+
+            expect(firstSortCriteria.field).toEqual('test1');
+            expect(firstSortCriteria.sortType).toEqual('ASC');
+            expect(secondSortCriteria.field).toEqual('id');
+            expect(secondSortCriteria.sortType).toEqual('DESC');
+        });
+    });
+
     describe('addFilter()', () => {
         it('should call the model addFilter() with a basic where filter if exprBuilder() was not received', () => {
             controller.model = {addFilter: jest.fn()};

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

@@ -1,6 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="Buys/latestBuysFilter"
+    order="itemFk DESC"
     limit="20"
     data="$ctrl.buys"
     auto-load="true">
@@ -34,8 +35,8 @@
                             </vn-multi-check>
                         </th>
                         <th translate>Picture</th>
-                        <th field="id">
-                            <span translate>Identifier</span>
+                        <th field="itemFk">
+                            <span translate>Item ID</span>
                         </th>
                         <th field="packing" number>
                             <span translate>Packing</span>

modules/monitor/front/index/tickets/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="SalesMonitors/salesFilter"
     limit="20"
-    order="shippedDate DESC, theoreticalhour, id">
+    order="shipped DESC, theoreticalHour, id">
 </vn-crud-model>
 <vn-portal slot="topbar">
     <vn-searchbar
@@ -27,11 +27,13 @@
         view-config-id="ticketsMonitor" 
         options="$ctrl.smartTableOptions" 
         expr-builder="$ctrl.exprBuilder(param, value)">
-        <slot-actions><vn-check
-            label="Auto-refresh"
-            vn-tooltip="Toggle auto-refresh every 2 minutes"
-            on-change="$ctrl.autoRefresh(value)">
-        </vn-check></slot-actions>
+        <slot-actions>
+            <vn-check
+                label="Auto-refresh"
+                vn-tooltip="Toggle auto-refresh every 2 minutes"
+                on-change="$ctrl.autoRefresh(value)">
+            </vn-check>
+        </slot-actions>
         <slot-table>
             <table>
                 <thead>

modules/monitor/front/index/tickets/style.scss

@@ -29,7 +29,7 @@ vn-monitor-sales-tickets {
         height: 736px
     }
 
-    vn-tbody a[ng-repeat].vn-tr:focus {
+    tbody tr[ng-repeat]:focus {
         background-color: $color-primary-light
     }