Implement group by milestone (#316)

WATcher's default view displays issues and pull requests based solely on
their assignees. Grouping issues and pull requests based on their
associated milestones may provide another useful view for the user.

Let's implement the "Group by Milestone" feature.

src/app/core/models/milestone.model.ts

@@ -1,7 +1,9 @@
+import { Group } from './github/group.interface';
+
 /**
  * Represents a milestone and its attributes fetched from Github.
  */
-export class Milestone {
+export class Milestone implements Group {
   static DefaultMilestone: Milestone = new Milestone({ title: 'Without a milestone', state: null });
   title: string;
   state: string;
@@ -11,7 +13,10 @@ export class Milestone {
     this.state = milestone.state;
   }
 
-  public equals(milestone: Milestone) {
-    return this.title === milestone.title;
+  public equals(other: any) {
+    if (!(other instanceof Milestone)) {
+      return false;
+    }
+    return this.title === other.title;
   }
 }

src/app/core/services/grouping/grouping-context.service.ts

@@ -4,9 +4,11 @@ import { Group } from '../../models/github/group.interface';
 import { Issue } from '../../models/issue.model';
 import { AssigneeGroupingStrategy } from './assignee-grouping-strategy.service';
 import { GroupingStrategy } from './grouping-strategy.interface';
+import { MilestoneGroupingStrategy } from './milestone-grouping-strategy.service';
 
 export enum GroupBy {
-  Assignee = 'assignee'
+  Assignee = 'assignee',
+  Milestone = 'milestone'
 }
 
 export const DEFAULT_GROUPBY = GroupBy.Assignee;
@@ -33,6 +35,7 @@ export class GroupingContextService {
 
     // Initialize the grouping strategy map with available strategies
     this.groupingStrategyMap.set(GroupBy.Assignee, this.injector.get(AssigneeGroupingStrategy));
+    this.groupingStrategyMap.set(GroupBy.Milestone, this.injector.get(MilestoneGroupingStrategy));
   }
 
   /**

src/app/core/services/grouping/milestone-grouping-strategy.service.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Issue } from '../../models/issue.model';
+import { Milestone } from '../../models/milestone.model';
+import { MilestoneService } from '../milestone.service';
+import { GroupingStrategy } from './grouping-strategy.interface';
+
+/**
+ * A GroupingStrategy that groups issues/prs based on their milestones.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class MilestoneGroupingStrategy implements GroupingStrategy {
+  constructor(private milestoneService: MilestoneService) {}
+
+  /**
+   * Retrieves data for a milestone.
+   */
+  getDataForGroup(issues: Issue[], key: Milestone): Issue[] {
+    return issues.filter((issue) => issue.milestone.equals(key));
+  }
+
+  /**
+   * Retrieves an Observable emitting milestones available for grouping issues.
+   */
+  getGroups(): Observable<Milestone[]> {
+    return this.milestoneService.fetchMilestones().pipe(
+      map((milestones) => {
+        return this.milestoneService.parseMilestoneData(milestones);
+      })
+    );
+  }
+
+  /**
+   * Groups other than Default Milestone need to be shown on the
+   * hidden group list if empty.
+   */
+  isInHiddenList(group: Milestone): boolean {
+    return group !== Milestone.DefaultMilestone;
+  }
+}

src/app/issues-viewer/card-view/card-view.component.html

@@ -48,3 +48,16 @@
     </mat-card>
   </div>
 </ng-template>
+
+<ng-template #milestoneHeader let-milestone>
+  <div class="column-header">
+    <mat-card>
+      <mat-card-header [ngStyle]="{ height: '40px' }">
+        <mat-card-title>
+          {{ milestone.title }}
+        </mat-card-title>
+        <div class="row-count">{{ this.issues.count }}</div>
+      </mat-card-header>
+    </mat-card>
+  </div>
+</ng-template>

src/app/issues-viewer/card-view/card-view.component.ts

@@ -36,6 +36,7 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
   @ViewChild('defaultHeader') defaultHeaderTemplate: TemplateRef<any>;
   @ViewChild('assigneeHeader') assigneeHeaderTemplate: TemplateRef<any>;
+  @ViewChild('milestoneHeader') milestoneHeaderTemplate: TemplateRef<any>;
 
   issues: IssuesDataTable;
   issues$: Observable<Issue[]>;
@@ -82,6 +83,8 @@ export class CardViewComponent implements OnInit, AfterViewInit, OnDestroy, Filt
     switch (this.groupingContextService.currGroupBy) {
       case GroupBy.Assignee:
         return this.assigneeHeaderTemplate;
+      case GroupBy.Milestone:
+        return this.milestoneHeaderTemplate;
       default:
         return this.defaultHeaderTemplate;
     }

src/app/issues-viewer/hidden-groups/hidden-groups.component.html

@@ -31,3 +31,11 @@
     </mar-card-header>
   </mat-card>
 </ng-template>
+
+<ng-template #milestoneCard let-milestone>
+  <mat-card>
+    <mar-card-header class="mat-card-header">
+      <mat-card-title>{{ milestone.title }}</mat-card-title>
+    </mar-card-header>
+  </mat-card>
+</ng-template>

src/app/issues-viewer/hidden-groups/hidden-groups.component.ts

@@ -12,13 +12,16 @@ export class HiddenGroupsComponent {
 
   @ViewChild('defaultCard') defaultCardTemplate: TemplateRef<any>;
   @ViewChild('assigneeCard') assigneeCardTemplate: TemplateRef<any>;
+  @ViewChild('milestoneCard') milestoneCardTemplate: TemplateRef<any>;
 
   constructor(public groupingContextService: GroupingContextService) {}
 
   getCardTemplate(): TemplateRef<any> {
     switch (this.groupingContextService.currGroupBy) {
       case GroupBy.Assignee:
         return this.assigneeCardTemplate;
+      case GroupBy.Milestone:
+        return this.milestoneCardTemplate;
       default:
         return this.defaultCardTemplate;
     }