From a5dd0943945e99d97a5b196af2bdd0d67efc57aa Mon Sep 17 00:00:00 2001
From: Joey Perrott <josephperrott@gmail.com>
Date: Mon, 18 Apr 2022 12:11:27 -0700
Subject: [PATCH] feat(apps): create status column

Create a column to display the overall pull request status
---
 .../app/pr-table/columns/columns.module.ts    |  6 +++--
 .../columns/status/status.component.html      |  4 +++
 .../columns/status/status.component.scss      | 19 +++++++++++++
 .../columns/status/status.component.ts        | 27 +++++++++++++++++++
 .../src/app/pr-table/pr-table.component.ts    |  3 ++-
 apps/shared/models/pull-request.ts            |  3 +++
 6 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 apps/prs/src/app/pr-table/columns/status/status.component.html
 create mode 100644 apps/prs/src/app/pr-table/columns/status/status.component.scss
 create mode 100644 apps/prs/src/app/pr-table/columns/status/status.component.ts

diff --git a/apps/prs/src/app/pr-table/columns/columns.module.ts b/apps/prs/src/app/pr-table/columns/columns.module.ts
index ad8d82ed4..cca8b2beb 100644
--- a/apps/prs/src/app/pr-table/columns/columns.module.ts
+++ b/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 {}
diff --git a/apps/prs/src/app/pr-table/columns/status/status.component.html b/apps/prs/src/app/pr-table/columns/status/status.component.html
new file mode 100644
index 000000000..a8cdb39cd
--- /dev/null
+++ b/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>
diff --git a/apps/prs/src/app/pr-table/columns/status/status.component.scss b/apps/prs/src/app/pr-table/columns/status/status.component.scss
new file mode 100644
index 000000000..aa542afa9
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/apps/prs/src/app/pr-table/columns/status/status.component.ts b/apps/prs/src/app/pr-table/columns/status/status.component.ts
new file mode 100644
index 000000000..9e63a3c4d
--- /dev/null
+++ b/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.');
+  }
+}
diff --git a/apps/prs/src/app/pr-table/pr-table.component.ts b/apps/prs/src/app/pr-table/pr-table.component.ts
index 394628300..6ebd1761e 100644
--- a/apps/prs/src/app/pr-table/pr-table.component.ts
+++ b/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. */
diff --git a/apps/shared/models/pull-request.ts b/apps/shared/models/pull-request.ts
index b2dfb3406..ec6e1533f 100644
--- a/apps/shared/models/pull-request.ts
+++ b/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;