Added dates to table and date Sorting

src/app/services/sorting.service.ts

@@ -8,6 +8,10 @@ export function sortByStringAscending<T>(items: T[], key: (T) => string) {
   return items.sort((a, b) => key(a).localeCompare(key(b)));
 }
 
+export function sortByDateAscending<T>(items: T[], key: (T) => Date) {
+  return items.sort((a, b) =>  <any>key(b) - <any>key(a));
+}
+
 export function getNumberForPriority(priority: Priority): number {
   switch (priority) {
     case Priority.High:

src/app/services/table-component.base.ts

@@ -1,4 +1,4 @@
-import {sortByNumberAscending, sortByStringAscending} from './sorting.service';
+import {sortByNumberAscending, sortByStringAscending, sortByDateAscending} from './sorting.service';
 import {Priority} from './backend.service';
 
 export abstract class TableComponentBase<T> {
@@ -32,6 +32,19 @@ export abstract class TableComponentBase<T> {
     }
   }
 
+  protected doDateSort(by: string, key: (item: T) => Date) {
+    if (this.sortBy === by) {
+      this.sortDescending = !this.sortDescending;
+    } else {
+      this.sortBy = by;
+    }
+
+    this.items = sortByDateAscending(this.items, key);
+    if (this.sortDescending) {
+      this.items = this.items.reverse();
+    }
+  }
+
   public getAllPriorities(): string[] {
     return Object.values(Priority);
   }

src/app/sprint-table/sprint-table.component.html

@@ -22,6 +22,20 @@
             <span *ngIf="sortDescending === false">▼</span>
           </span>
         </th>
+        <th (click)="sortByStartDate()" class="sortable">
+            <span>Start</span>
+            <span *ngIf="sortBy === 'startDate'" class="pl-3">
+              <span *ngIf="sortDescending">▲</span>
+              <span *ngIf="sortDescending === false">▼</span>
+            </span>
+          </th>
+          <th (click)="sortByEndDate()" class="endDate">
+            <span>End</span>
+            <span *ngIf="sortBy === 'endDate'" class="pl-3">
+              <span *ngIf="sortDescending">▲</span>
+              <span *ngIf="sortDescending === false">▼</span>
+            </span>
+          </th>
         <th></th>
       </tr>
       </thead>
@@ -30,6 +44,8 @@
       <tr *ngFor="let sprint of filteredItems" [class.table-info]="sprint.id === highlightId">
         <td>{{sprint.id}}</td>
         <td>{{sprint.title}}</td>
+        <td>{{sprint.startDate | date:'dd.MM.yyyy'}}</td>
+        <td>{{sprint.endDate | date:'dd.MM.yyyy'}}</td>
         <td>
           <button class="btn btn-secondary m-2" (click)="openSprintForm(sprint)">Bearbeiten</button>
           <button class="btn btn-secondary m-2" (click)="deleteSprint(sprint)">Löschen</button>

src/app/sprint-table/sprint-table.component.ts

@@ -76,4 +76,12 @@ export class SprintTableComponent extends TableComponentBase<ScrumSprint> {
   sortByTitle() {
     this.doStringSort('title', sprint => sprint.title);
   }
+
+  sortByStartDate() {
+    this.doDateSort('startDate', sprint => sprint.startDate);
+  }
+
+  sortByEndDate() {
+    this.doDateSort('endDate', sprint => sprint.endDate);
+  }
 }