From 45d62fdbae494b900090a8cbeaec7247fc9e13bc Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 18 Apr 2020 19:14:26 +0300
Subject: [PATCH] #235 for TreeTable

---
 src/components/treetable/TreeTable.d.ts |  1 +
 src/components/treetable/TreeTable.vue  | 61 +++++++++++++++----------
 src/views/treetable/TreeTableDoc.vue    |  6 +++
 3 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
index 298e57c85f..be622dbce2 100644
--- a/src/components/treetable/TreeTable.d.ts
+++ b/src/components/treetable/TreeTable.d.ts
@@ -26,6 +26,7 @@ export declare class TreeTable extends Vue {
     defaultSortOrder?: number;
     multiSortMeta?: any[];
     sortMode?: string;
+    removableSort?: string;
     filters?: {
         [s: string]: any;
     };
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 441fd84251..99a28533d2 100644
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -188,6 +188,10 @@ export default {
             type: String,
             default: 'single'
         },
+        removableSort: {
+            type: Boolean,
+            default: false
+        },
         filters: {
             type: Object,
             default: null
@@ -417,52 +421,63 @@ export default {
         },
         onColumnHeaderClick(event, column) {
             if (column.sortable) {
-                this.resetPage();
                 const targetNode = event.target;
+                const columnField = column.sortField || column.field;
 
                 if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
                     DomHandler.clearSelection();
 
-                    const columnField = column.field || column.sortField;
-                    this.d_sortOrder = (this.d_sortField === columnField) ? this.d_sortOrder * -1 : this.defaultSortOrder;
-                    this.d_sortField = columnField;
+                    if (this.sortMode === 'single') {
+                        if (this.d_sortField === columnField) {
+                            if (this.removableSort && (this.d_sortOrder * -1 === this.defaultSortOrder)) {
+                                this.d_sortOrder = null;
+                                this.d_sortField = null;
+                            }
+                            else {
+                                this.d_sortOrder = this.d_sortOrder * -1
+                            }
+                        }
+                        else {
+                            this.d_sortOrder = this.defaultSortOrder;
+                            this.d_sortField = columnField;
+                        }
 
-                    if(this.sortMode === 'multiple') {
+                        this.$emit('update:sortField', this.d_sortField);
+                        this.$emit('update:sortOrder', this.d_sortOrder);
+                    }
+                    else if (this.sortMode === 'multiple') {
                         let metaKey = event.metaKey || event.ctrlKey;
                         if (!metaKey) {
-                            this.d_multiSortMeta = [];
+                            this.d_multiSortMeta =  this.d_multiSortMeta.filter(meta => meta.field === columnField);
                         }
 
-                        this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});
+                        this.addMultiSortField(columnField);
+                        this.$emit('update:multiSortMeta', this.d_multiSortMeta);
                     }
 
-                    this.$emit('update:sortField', this.d_sortFied);
-                    this.$emit('update:sortOrder', this.d_sortOrder);
-                    this.$emit('update:multiSortMeta', this.d_multiSortMeta);
-
                     this.$emit('sort', {
                         originalEvent: event,
                         sortField: this.d_sortField,
                         sortOrder: this.d_sortOrder,
                         multiSortMeta: this.d_multiSortMeta
                     });
+                    this.resetPage();
                 }
             }
         },
-        addSortMeta(meta) {
-            let index = -1;
-            for (let i = 0; i < this.d_multiSortMeta.length; i++) {
-                if (this.d_multiSortMeta[i].field === meta.field) {
-                    index = i;
-                    break;
-                }
-            }
+        addMultiSortField(field) {
+            let index =  this.d_multiSortMeta.findIndex(meta => meta.field === field);
 
-            if(index >= 0)
-                this.d_multiSortMeta[index] = meta;
-            else
-                this.d_multiSortMeta.push(meta);
+            if (index >= 0) {
+                if (this.removableSort && (this.d_multiSortMeta[index].order * -1 === this.defaultSortOrder))
+                    this.d_multiSortMeta.splice(index, 1);
+                else
+                    this.d_multiSortMeta[index] = {field: field, order: this.d_multiSortMeta[index].order * -1};
+            }
+            else {
+                this.d_multiSortMeta.push({field: field, order: this.defaultSortOrder});
+            }
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
         },
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 4cc206e7e6..9265a54766 100644
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -1393,6 +1393,12 @@ export default {
                                 <td>single</td>
                                 <td>Defines whether sorting works on single column or on multiple columns.</td>
                             </tr>
+                            <tr>
+                                <td>removableSort</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>When enabled, columns can have an un-sorted state.</td>
+                            </tr>
                             <tr>
                                 <td>filters</td>
                                 <td>object</td>