feat(smartTag): added sort priority between multiple sorting

Refs: 3528

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: 1});
             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/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;
         }
     }
@@ -143,4 +143,16 @@ smart-table {
         flex: initial;
         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
 }

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