fear(smart-table): now shows the default order with the column arrows

Refs: 3457

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;
+            this.defaultOrder();
         }
-
-    get viewConfigId() {
-        return this._viewConfigId;
-    }
-
-    set viewConfigId(value) {
-        this._viewConfigId = value;
     }
 
     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));
             }

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
+        <slot-actions>
+            <vn-check
                 label="Auto-refresh"
                 vn-tooltip="Toggle auto-refresh every 2 minutes"
                 on-change="$ctrl.autoRefresh(value)">
-        </vn-check></slot-actions>
+            </vn-check>
+        </slot-actions>
         <slot-table>
             <table>
                 <thead>
@@ -81,7 +83,8 @@
                             state: 'ticket.card.summary', 
                             params: {id: ticket.id},
                             target: '_blank'
-                        }">
+                        }"
+                        tabindex="2" vn-focus>
                         <td>
                             <vn-icon
                                 ng-show="::ticket.isTaxDataChecked === 0"

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
     }