From af0bf6f0d0493212f3b8639b7b40566de85fd710 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sat, 18 Apr 2020 17:41:50 +0300
Subject: [PATCH] Fixed #235 - Removable sort on DataTable

---
 src/components/datatable/DataTable.d.ts   |  1 +
 src/components/datatable/DataTable.vue    | 64 ++++++++++++++---------
 src/views/datatable/DataTableDoc.vue      |  6 +++
 src/views/datatable/DataTableSortDemo.vue | 16 ++++++
 4 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/components/datatable/DataTable.d.ts b/src/components/datatable/DataTable.d.ts
index 293c8bcd7..a0f2822be 100644
--- a/src/components/datatable/DataTable.d.ts
+++ b/src/components/datatable/DataTable.d.ts
@@ -21,6 +21,7 @@ export declare class DataTable extends Vue {
     defaultSortOrder?: number;
     multiSortMeta?: any[];
     sortMode?: string;
+    removableSort?: boolean;
     filters?: {
         [s: string]: any;
     };
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 8d2c3c9b7..2207d9a5e 100644
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -222,6 +222,10 @@ export default {
             type: String,
             default: 'single'
         },
+        removableSort: {
+            type: Boolean,
+            default: false
+        },
         filters: {
             type: Object,
             default: null
@@ -475,24 +479,35 @@ export default {
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
                     DomHandler.clearSelection();
 
-                    this.d_sortOrder = (this.d_sortField === columnField) ? this.d_sortOrder * -1 : this.defaultSortOrder;
-                    this.d_sortField = columnField;
-
-                    if(this.sortMode === 'multiple') {
-                        let metaKey = event.metaKey || event.ctrlKey;
-                        if (!metaKey) {
-                            this.d_multiSortMeta = [];
+                    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;
                         }
 
-                        this.addSortMeta({field: this.d_sortField, order: this.d_sortOrder});
+                        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.filter(meta => meta.field === columnField);
+                        }
+
+                        this.addMultiSortField(columnField);
+                        this.$emit('update:multiSortMeta', this.d_multiSortMeta);
                     }
 
-                    this.$emit('update:sortField', this.d_sortField);
-                    this.$emit('update:sortOrder', this.d_sortOrder);
-                    this.$emit('update:multiSortMeta', this.d_multiSortMeta);
-
                     this.$emit('sort', this.createLazyLoadEvent(event));
-
                     this.resetPage();
                 }
             }
@@ -551,19 +566,18 @@ export default {
 
             return (this.d_multiSortMeta[index].order * result);
         },
-        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, metaKey) {
+            let index =  this.d_multiSortMeta.findIndex(meta => meta.field === field);
+            
+            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});
             }
-
-            if(index >= 0)
-                this.d_multiSortMeta[index] = meta;
-            else
-                this.d_multiSortMeta.push(meta);
 
             this.d_multiSortMeta = [...this.d_multiSortMeta];
         },
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 2a8e54d5d..d433ab65f 100644
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -1819,6 +1819,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>
diff --git a/src/views/datatable/DataTableSortDemo.vue b/src/views/datatable/DataTableSortDemo.vue
index d48fb2b04..b4f90bb6a 100644
--- a/src/views/datatable/DataTableSortDemo.vue
+++ b/src/views/datatable/DataTableSortDemo.vue
@@ -33,6 +33,14 @@
                 <Column field="brand" header="Brand" :sortable="true"></Column>
                 <Column field="color" header="Color" :sortable="true"></Column>
             </DataTable>
+
+            <h3>Removable Sort</h3>
+			<DataTable :value="cars" removableSort>
+                <Column field="vin" header="Vin" :sortable="true"></Column>
+                <Column field="year" header="Year" :sortable="true"></Column>
+                <Column field="brand" header="Brand" :sortable="true"></Column>
+                <Column field="color" header="Color" :sortable="true"></Column>
+            </DataTable>
 		</div>
 
         <div class="content-section documentation">
@@ -63,6 +71,14 @@
     &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
     &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
 &lt;/DataTable&gt;
+
+&lt;h3&gt;Removable Sort&lt;/h3&gt;
+&lt;DataTable :value="cars" removableSort&gt;
+    &lt;Column field="vin" header="Vin" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="year" header="Year" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="brand" header="Brand" :sortable="true"&gt;&lt;/Column&gt;
+    &lt;Column field="color" header="Color" :sortable="true"&gt;&lt;/Column&gt;
+&lt;/DataTable&gt;
 </template>
 </CodeHighlight>