feat(apps): create status column

Create a column to display the overall pull request status

apps/prs/src/app/pr-table/columns/columns.module.ts

@@ -3,9 +3,11 @@ import {CommonModule} from '@angular/common';
 
 import {MatTableModule} from '@angular/material/table';
 import {SummaryColumn} from './summary/summary.component';
+import {StatusColumn} from './status/status.component';
+import {MatIconModule} from '@angular/material/icon';
 
 @NgModule({
-  declarations: [SummaryColumn],
-  imports: [CommonModule, MatTableModule],
+  declarations: [SummaryColumn, StatusColumn],
+  imports: [CommonModule, MatTableModule, MatIconModule],
 })
 export class ColumnsModule {}

apps/prs/src/app/pr-table/columns/status/status.component.html

@@ -0,0 +1,4 @@
+<mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
+<mat-cell *matCellDef="let pr">
+  <mat-icon class="{{pr.status}}">{{getStatusIconForStatus(pr.status)}}</mat-icon>
+</mat-cell>

apps/prs/src/app/pr-table/columns/status/status.component.scss

@@ -0,0 +1,19 @@
+.mat-column-status {
+  &.mat-header-cell {
+  }
+
+  &.mat-cell {
+    .pending {
+      color: rgba(229, 196, 12, 0.44);
+    }
+
+    .success {
+      color: rgba(0, 128, 0, 0.44);
+    }
+
+    .error,
+    .failure {
+      color: rgba(255, 23, 23, 0.44);
+    }
+  }
+}

apps/prs/src/app/pr-table/columns/status/status.component.ts

@@ -0,0 +1,27 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {StatusEvent} from '@octokit/webhooks-types';
+import {BaseColumn} from '../base';
+
+@Component({
+  selector: 'status-column',
+  templateUrl: './status.component.html',
+  styleUrls: ['./status.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StatusColumn extends BaseColumn {
+  name = 'status';
+
+  getStatusIconForStatus(state: StatusEvent['state']) {
+    switch (state) {
+      case 'pending':
+        return 'pending';
+      case 'success':
+        return 'check_circle';
+      case 'failure':
+        return 'error';
+      case 'error':
+        return 'error';
+    }
+    throw Error('An invalid state was provided for retrieving the icon.');
+  }
+}

apps/prs/src/app/pr-table/pr-table.component.ts

@@ -10,6 +10,7 @@ import {
 import {PullRequest} from '../../models/pull-request';
 import {BaseColumn} from './columns/base';
 import {SummaryColumn} from './columns/summary/summary.component';
+import {StatusColumn} from './columns/status/status.component';
 
 @Component({
   selector: 'pr-table',
@@ -18,7 +19,7 @@ import {SummaryColumn} from './columns/summary/summary.component';
 })
 export class PrTableComponent implements AfterViewInit {
   /** The columns used in the PR table. */
-  columns: Type<BaseColumn>[] = [SummaryColumn];
+  columns: Type<BaseColumn>[] = [SummaryColumn, StatusColumn];
   /** Data source for the table providing the list of pull requests/ */
   dataSource: MatTableDataSource<PullRequest> = new MatTableDataSource();
   /** The table. */

apps/shared/models/pull-request.ts

@@ -54,6 +54,9 @@ export class PullRequest extends GithubBaseModel<FirestorePullRequest> {
   commit!: string;
   target: undefined | string;
 
+  // TODO: Determine the status icon via the data from firebase.
+  status = ['pending', 'success', 'failure', 'error'][Math.floor((Math.random() * 100) % 4)];
+
   override async setData(data: FirestorePullRequest) {
     this.owner = data.owner;
     this.repo = data.repo;