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 @@
+Status
+
+ {{getStatusIconForStatus(pr.status)}}
+
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[] = [SummaryColumn];
+ columns: Type[] = [SummaryColumn, StatusColumn];
/** Data source for the table providing the list of pull requests/ */
dataSource: MatTableDataSource = 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 {
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;