From 4d89b187066d37bb1417c1e086c46a8b987f9241 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 18 Apr 2020 19:03:21 +0300
Subject: [PATCH] Fixed 189 - Order indicators for Multi column sorting

---
 public/themes/luna-amber/theme.css       | 18 ++++++++++++++++++
 public/themes/luna-blue/theme.css        | 18 ++++++++++++++++++
 public/themes/luna-green/theme.css       | 18 ++++++++++++++++++
 public/themes/luna-pink/theme.css        | 18 ++++++++++++++++++
 public/themes/nova-colored/theme.css     | 18 ++++++++++++++++++
 public/themes/nova-dark/theme.css        | 18 ++++++++++++++++++
 public/themes/nova-light/theme.css       | 18 ++++++++++++++++++
 public/themes/nova-vue/theme.css         | 18 ++++++++++++++++++
 public/themes/rhea/theme.css             | 18 ++++++++++++++++++
 src/components/datatable/DataTable.vue   |  1 +
 src/components/datatable/TableHeader.vue | 12 +++++++++---
 src/components/treetable/TreeTable.vue   | 22 +++++++++++++---------
 12 files changed, 185 insertions(+), 12 deletions(-)

diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 8784a6ba7..bac078ca3 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #888888;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #FFB300;
+  background-color: #212121;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #888888;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #FFB300;
+  background-color: #212121;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 392914b27..863c867b2 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #888888;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #1f7ed0;
+  background-color: #ffffff;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #888888;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #1f7ed0;
+  background-color: #ffffff;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 5e5bd282b..2d033b1ee 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #888888;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #1ea04c;
+  background-color: #ffffff;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #888888;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #1ea04c;
+  background-color: #ffffff;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index e9149263c..5e1f608dc 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #888888;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #cc285c;
+  background-color: #ffffff;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #888888;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #cc285c;
+  background-color: #ffffff;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
diff --git a/public/themes/nova-colored/theme.css b/public/themes/nova-colored/theme.css
index 222d22468..a988d91d3 100644
--- a/public/themes/nova-colored/theme.css
+++ b/public/themes/nova-colored/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #848484;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #e02365;
+  background-color: #ffffff;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #e0e0e0;
   color: #333333;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #848484;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #e02365;
+  background-color: #ffffff;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #e0e0e0;
   color: #333333;
diff --git a/public/themes/nova-dark/theme.css b/public/themes/nova-dark/theme.css
index f0bf37a67..df5d42c99 100644
--- a/public/themes/nova-dark/theme.css
+++ b/public/themes/nova-dark/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #848484;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #007ad9;
+  background-color: #ffffff;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #e0e0e0;
   color: #333333;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #848484;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #007ad9;
+  background-color: #ffffff;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #e0e0e0;
   color: #333333;
diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index d12095b75..66d2ebaa8 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #848484;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #007ad9;
+  background-color: #ffffff;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #e0e0e0;
   color: #333333;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #848484;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #007ad9;
+  background-color: #ffffff;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #e0e0e0;
   color: #333333;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index b722fa21a..170f671db 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #848484;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #41b883;
+  background-color: #ffffff;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #e0e0e0;
   color: #333333;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #848484;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #41b883;
+  background-color: #ffffff;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #e0e0e0;
   color: #333333;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 5bf4529eb..4f39ffb17 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -2063,6 +2063,15 @@ body .p-datatable .p-sortable-column {
 body .p-datatable .p-sortable-column .p-sortable-column-icon {
   color: #666666;
 }
+body .p-datatable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #AFD3C8;
+  background-color: #385048;
+}
 body .p-datatable .p-sortable-column:not(.p-highlight):hover {
   background-color: #eaeaea;
   color: #666666;
@@ -2744,6 +2753,15 @@ body .p-treetable .p-sortable-column {
 body .p-treetable .p-sortable-column .p-sortable-column-icon {
   color: #666666;
 }
+body .p-treetable .p-sortable-column .p-sortable-column-badge {
+  border-radius: 50%;
+  height: 18px;
+  min-width: 18px;
+  line-height: 18px;
+  display: inline-block;
+  color: #AFD3C8;
+  background-color: #385048;
+}
 body .p-treetable .p-sortable-column:not(.p-highlight):hover {
   background-color: #eaeaea;
   color: #666666;
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index e3ad69448..8b88a4623 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -1852,6 +1852,7 @@ export default {
 
 .p-datatable .p-sortable-column {
     cursor: pointer;
+    user-select: none;
 }
 
 .p-datatable .p-sortable-column-icon {
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index 645cca55b..38c268895 100644
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -12,6 +12,7 @@
                         <DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
                         <span class="p-column-title" v-if="col.header">{{col.header}}</span>
                         <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
+                        <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
                         <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple' && !hasColumnFilter()" />
                     </th>
                 </template>
@@ -34,6 +35,7 @@
                     <ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
                     <span class="p-column-title" v-if="col.header">{{col.header}}</span>
                     <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
+                    <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
                     <DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
                     <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
                 </th>
@@ -95,13 +97,17 @@ export default {
         }
     },
     methods: {
+        isMultiSorted(column) {
+            return column.sortable && this.getMultiSortMetaIndex(column) > -1
+        },
+        isColumnSorted(column) {
+            return this.sortMode === 'single' ? (this.sortField && (this.sortField === column.field || this.sortField === column.sortField)) : this.isMultiSorted(column);
+        },
         getColumnHeaderClass(column) {
-            const sorted = this.sortMode === 'single' ? (this.sortField && (this.sortField === column.field || this.sortField === column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
-
             return [column.headerClass,
                     {'p-sortable-column': column.sortable},
                     {'p-resizable-column': this.resizableColumns},
-                    {'p-highlight': sorted}
+                    {'p-highlight': this.isColumnSorted(column)}
             ];
         },
         getFilterColumnHeaderClass(column) {
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index fe9ef775b..81205f752 100644
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -29,6 +29,7 @@
                             <TTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
                             <span class="p-column-title" v-if="col.header">{{col.header}}</span>
                             <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
+                            <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
                         </th>
                     </tr>
                     <tr v-if="hasColumnFilter()">
@@ -357,24 +358,26 @@ export default {
             this.d_first = 0;
             this.$emit('update:first', this.d_first);
         },
+        isMultiSorted(column) {
+            return column.sortable && this.getMultiSortMetaIndex(column) > -1
+        },
+        isColumnSorted(column) {
+            if (column.sortable) {
+                return this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
+            }
+                
+            return false; 
+        },
         getColumnHeaderClass(column) {
-            const sorted = this.isColumnSorted(column);
-
             return [column.headerClass,
                     {'p-sortable-column': column.sortable},
                     {'p-resizable-column': this.resizableColumns},
-                    {'p-highlight': sorted}
+                    {'p-highlight': this.isColumnSorted(column)}
             ];
         },
         getFilterColumnHeaderClass(column) {
             return ['p-filter-column', column.filterHeaderClass];
         },
-        isColumnSorted(column) {
-            if (column.sortable)
-                return this.sortMode === 'single' ? (this.d_sortField === (column.field || column.sortField)) : this.getMultiSortMetaIndex(column) > -1;
-            else
-                return false;
-        },
         getSortableColumnIcon(column) {
             let sorted = false;
             let sortOrder = null;
@@ -897,6 +900,7 @@ export default {
 
 .p-treetable .p-sortable-column {
     cursor: pointer;
+    user-select: none;
 }
 
 .p-treetable .p-sortable-column-icon {