Implement group by milestone

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;
     }