feat(datagrid): add ability to unsort columns (#1612)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Once turned on column sort can only be rotated between `ASC` and `DESC ` when clicking on the column, but can't be turned off.

Issue Number: CDE-2416

## What is the new behavior?
Column sort can be turned off by clicking third time on the column.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

projects/angular/src/data/datagrid/datagrid-column.spec.ts

@@ -95,6 +95,8 @@ export default function (): void {
         expect(component.sortOrder).toBe(ClrDatagridSortOrder.ASC);
         component.sort();
         expect(component.sortOrder).toBe(ClrDatagridSortOrder.DESC);
+        component.sort();
+        expect(component.sortOrder).toBe(ClrDatagridSortOrder.UNSORTED);
       });
 
       it('knows when the column has an ascending sortDirection', function () {
@@ -114,12 +116,21 @@ export default function (): void {
 
       it('sets the column sortDirection to null when sort is cleared', function () {
         component.sortBy = comparator;
-        expect(component.sortDirection).toBe(undefined);
+        expect(component.sortDirection).toBeUndefined();
         component.sort();
         sortService.clear();
         expect(component.sortDirection).toBeNull();
       });
 
+      it('sets the column sortDirection to null when sort is rotated to initial state', function () {
+        component.sortBy = comparator;
+        expect(component.sortDirection).toBeUndefined();
+        component.sort();
+        component.sort();
+        component.sort();
+        expect(component.sortDirection).toBeNull();
+      });
+
       it('offers a shortcut to sort based on a property name', function () {
         component.field = 'test';
         expect(sortService.comparator).toBeUndefined();
@@ -312,6 +323,9 @@ export default function (): void {
         title.click();
         context.detectChanges();
         expect(context.clarityDirective.sortOrder).toBe(ClrDatagridSortOrder.DESC);
+        title.click();
+        context.detectChanges();
+        expect(context.clarityDirective.sortOrder).toBe(ClrDatagridSortOrder.UNSORTED);
       });
 
       it('adds and removes the correct direction when sorting', function () {

projects/angular/src/data/datagrid/datagrid-column.ts

@@ -202,16 +202,12 @@ export class ClrDatagridColumn<T = any>
   set sortBy(comparator: ClrDatagridComparatorInterface<T> | string) {
     if (typeof comparator === 'string') {
       this._sortBy = new DatagridPropertyComparator(comparator);
+    } else if (comparator) {
+      this._sortBy = comparator;
+    } else if (this.field) {
+      this._sortBy = new DatagridPropertyComparator(this.field);
     } else {
-      if (comparator) {
-        this._sortBy = comparator;
-      } else {
-        if (this.field) {
-          this._sortBy = new DatagridPropertyComparator(this.field);
-        } else {
-          delete this._sortBy;
-        }
-      }
+      delete this._sortBy;
     }
   }
 
@@ -230,17 +226,18 @@ export class ClrDatagridColumn<T = any>
     }
 
     switch (value) {
-      // the Unsorted case happens when the current state is either Asc or Desc
-      default:
-      case ClrDatagridSortOrder.UNSORTED:
-        this._sort.clear();
-        break;
       case ClrDatagridSortOrder.ASC:
         this.sort(false);
         break;
       case ClrDatagridSortOrder.DESC:
         this.sort(true);
         break;
+      // the Unsorted case happens when the current state is neither Asc nor Desc
+      case ClrDatagridSortOrder.UNSORTED:
+      default:
+        this._sort.clear();
+        this._sortDirection = null;
+        break;
     }
   }
 
@@ -357,6 +354,14 @@ export class ClrDatagridColumn<T = any>
       return;
     }
 
+    if (reverse === undefined && this.sortOrder === ClrDatagridSortOrder.DESC) {
+      this._sortOrder = ClrDatagridSortOrder.UNSORTED;
+      this._sort.clear();
+      this._sortDirection = null;
+      this.sortOrderChange.emit(this._sortOrder);
+      return;
+    }
+
     this._sort.toggle(this._sortBy, reverse);
 
     // setting the private variable to not retrigger the setter logic

projects/demo/src/app/datagrid/sorting/sorting.html

@@ -81,7 +81,7 @@ <h2>Custom sort</h2>
 <clr-datagrid>
   <clr-dg-column>User ID</clr-dg-column>
   <clr-dg-column>Name</clr-dg-column>
-  <clr-dg-column>Creation date</clr-dg-column>
+  <clr-dg-column [clrDgField]="'creation'" [clrDgSortBy]="userCreationComparator">Creation date</clr-dg-column>
   <clr-dg-column [clrDgField]="'pokemon.name'" [clrDgSortBy]="pokemonComparator" [(clrDgSortOrder)]="sortOrder">
     Pokemon
   </clr-dg-column>

projects/demo/src/app/datagrid/sorting/sorting.ts

@@ -6,12 +6,18 @@
  */
 
 import { Component } from '@angular/core';
-import { ClrDatagridSortOrder } from '@clr/angular';
+import { ClrDatagridComparatorInterface, ClrDatagridSortOrder } from '@clr/angular';
 
 import { Inventory } from '../inventory/inventory';
 import { User } from '../inventory/user';
 import { PokemonComparator } from '../utils/pokemon-comparator';
 
+export class UserCreationComparator implements ClrDatagridComparatorInterface<User> {
+  compare(a: User, b: User) {
+    return a.creation.getTime() - b.creation.getTime();
+  }
+}
+
 @Component({
   selector: 'clr-datagrid-sorting-demo',
   providers: [Inventory],
@@ -23,6 +29,7 @@ export class DatagridSortingDemo {
   sortOrder: ClrDatagridSortOrder = ClrDatagridSortOrder.UNSORTED;
 
   pokemonComparator = new PokemonComparator();
+  userCreationComparator = new UserCreationComparator();
 
   constructor(inventory: Inventory) {
     inventory.size = 10;