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

@@ -171,9 +171,10 @@ export default class SmartTable extends Component {
             if (field.length === 2)
                 sortType = field[1];
 
+            const priority = this.sortCriteria.length + 1;
             const column = this.columns.find(column => column.field == fieldName);
             if (column) {
-                this.sortCriteria.push({field: fieldName, sortType: sortType});
+                this.sortCriteria.push({field: fieldName, sortType: sortType, priority: priority});
 
                 const isASC = sortType == 'ASC';
                 const isDESC = sortType == 'DESC';
@@ -187,6 +188,8 @@ export default class SmartTable extends Component {
                     column.element.classList.remove('desc');
                     column.element.classList.add('asc');
                 }
+
+                this.setPriority(column.element, priority);
             }
         }
     }
@@ -241,9 +244,13 @@ export default class SmartTable extends Component {
         const isDESC = existingCriteria && existingCriteria.sortType == 'DESC';
 
         if (!existingCriteria) {
-            this.sortCriteria.push({field: field, sortType: 'ASC'});
+            const priority = this.sortCriteria.length + 1;
+
+            this.sortCriteria.push({field: field, sortType: 'ASC', priority: priority});
             element.classList.remove('desc');
             element.classList.add('asc');
+
+            this.setPriority(element, priority);
         }
 
         if (isDESC) {
@@ -252,6 +259,8 @@ export default class SmartTable extends Component {
             }), 1);
             element.classList.remove('desc');
             element.classList.remove('asc');
+
+            element.querySelector('sort-priority').remove();
         }
 
         if (isASC) {
@@ -260,9 +269,29 @@ export default class SmartTable extends Component {
             element.classList.add('desc');
         }
 
+        let priority = 0;
+        for (const criteria of this.sortCriteria) {
+            const column = this.columns.find(column => column.field == criteria.field);
+            if (column) {
+                criteria.priority = priority;
+                priority++;
+
+                column.element.querySelector('sort-priority').remove();
+
+                this.setPriority(column.element, priority);
+            }
+        }
+
         this.applySort();
     }
 
+    setPriority(column, priority) {
+        const sortPriority = document.createElement('sort-priority');
+        sortPriority.setAttribute('class', 'sort-priority');
+        sortPriority.innerHTML = priority;
+        column.appendChild(sortPriority);
+    }
+
     displaySearch() {
         const header = this.element.querySelector('thead > tr');
         if (!header) return;

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

@@ -96,9 +96,10 @@ describe('Component smartTable', () => {
 
             expect(firstSortCriteria.field).toEqual('id');
             expect(firstSortCriteria.sortType).toEqual('ASC');
+            expect(firstSortCriteria.priority).toEqual(1);
         });
 
-        it('should insert two new objects to the controller sortCriteria with a sortType values of "ASC" and "DESC"', () => {
+        it('should add new entries 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 = [
@@ -114,8 +115,11 @@ describe('Component smartTable', () => {
 
             expect(firstSortCriteria.field).toEqual('test1');
             expect(firstSortCriteria.sortType).toEqual('ASC');
+            expect(firstSortCriteria.priority).toEqual(1);
+
             expect(secondSortCriteria.field).toEqual('id');
             expect(secondSortCriteria.sortType).toEqual('DESC');
+            expect(secondSortCriteria.priority).toEqual(2);
         });
     });
 

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

@@ -9,7 +9,7 @@ smart-table {
 
     }
     th[field][number] {
-        & > :before {
+        & > span:before {
             vertical-align: middle;
             font-family: 'Material Icons';
             content: 'arrow_downward';
@@ -19,26 +19,26 @@ smart-table {
         
         }
 
-        &.asc > :before, &.desc > :before {
+        &.asc > span:before, &.desc > span:before {
             color: $color-font;
             opacity: 1;
         }
 
-        &.asc > :before {
+        &.asc > span:before {
             content: 'arrow_upward';
         }
 
-        &.desc > :before {
+        &.desc > span:before {
             content: 'arrow_downward';
         }
 
-        &:hover > :before {
+        &:hover > span:before {
             opacity: 1;
         }
     }
 
     th[field]:not([number]) {
-        & > :after {
+        & > span:after {
             vertical-align: middle;
             font-family: 'Material Icons';
             content: 'arrow_downward';
@@ -48,20 +48,20 @@ smart-table {
         
         }
 
-        &.asc > :after, &.desc > :after {
+        &.asc > span:after, &.desc > span:after {
             color: $color-font;
             opacity: 1;
         }
 
-        &.asc > :after {
+        &.asc > span:after {
             content: 'arrow_upward';
         }
 
-        &.desc > :after {
+        &.desc > span:after {
             content: 'arrow_downward';
         }
 
-        &:hover > :after {
+        &:hover > span:after {
             opacity: 1;
         }
     }
@@ -144,3 +144,15 @@ smart-table {
         width: 33%
     }
 }
+.sort-priority {
+    background-color: $color-font-bg-marginal;
+    border-radius: 50%;
+    padding: 2px 5px;
+    display: inline-block;
+    text-align: center;
+    width: 7px;
+    height: 13px;
+
+    font-size: 10px;
+    color: $color-font-bg
+}

loopback/locale/en.json

@@ -119,5 +119,6 @@
 	"The PDF document does not exists": "The PDF document does not exists. Try regenerating it from 'Regenerate invoice PDF' option",
 	"This item is not available": "This item is not available",
 	"Deny buy request": "Purchase request for ticket id [{{ticketId}}]({{{url}}}) has been rejected. Reason: {{observation}}",
-	"The type of business must be filled in basic data": "The type of business must be filled in basic data"
+	"The type of business must be filled in basic data": "The type of business must be filled in basic data",
+	"The worker has hours recorded that day": "The worker has hours recorded that day"
 }

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

@@ -2,7 +2,7 @@
     vn-id="model"
     url="SalesMonitors/salesFilter"
     limit="20"
-    order="shipped DESC, theoreticalHour, id">
+    order="nickname">
 </vn-crud-model>
 <vn-portal slot="topbar">
     <vn-searchbar