feat(apps): create summary column (#520)

Create a summary column in the prs application for displaying information about a pull request.

PR Close #520

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

@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {MatTableModule} from '@angular/material/table';
+import {SummaryColumn} from './summary/summary.component';
+
+@NgModule({
+  declarations: [SummaryColumn],
+  imports: [CommonModule, MatTableModule],
+})
+export class ColumnsModule {}

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

@@ -0,0 +1,16 @@
+
+  <mat-header-cell *matHeaderCellDef>Pull Request</mat-header-cell>
+  <mat-cell *matCellDef="let pr">
+    <div class="summary">
+      <a target="_blank" rel="noopener" href="//github.com/{{pr.owner}}/{{pr.repo}}/pull/{{pr.number}}">{{pr.title}}</a>
+    </div>
+    <div class="info">
+      <span class="pr-number">#{{pr.number}}</span>
+      <span class="pr-author">{{pr.user?.name}}</span>
+      <span class="pr-labels">
+        <span *ngFor="let label of pr.labels" class="label" [style.background-color]="label.color" [style.color]="label.fontColor">
+          {{label.name}}
+        </span>
+      </span>
+  </div>
+  </mat-cell>

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

@@ -0,0 +1,34 @@
+.mat-column-summary {
+  &.mat-header-cell {
+  }
+
+  &.mat-cell {
+    flex-direction: column;
+
+    .summary {
+      width: 100%;
+      a {
+        text-decoration: none;
+        color: currentColor;
+      }
+    }
+
+    .info {
+      width: 100%;
+      .pr-number, .pr-author {
+        margin-right: 8px;
+        font-size: .8em;
+      }
+
+      .label {
+        border-radius: 0.5em;
+        padding: 0.1em 0.4em;
+        font-size: .8em;
+        margin-right: 4px;
+        background-color: #b1b1b1;
+        color: currentColor;
+        white-space: nowrap;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {BaseColumn} from '../base';
+
+@Component({
+  selector: 'summary-column',
+  templateUrl: './summary.component.html',
+  styleUrls: ['./summary.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SummaryColumn extends BaseColumn {
+  name = 'summary';
+}

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

@@ -1,15 +1,15 @@
 import {CdkColumnDef} from '@angular/cdk/table';
 import {Component, Injector, AfterViewInit, ViewChild, ViewContainerRef, Type} from '@angular/core';
-import {Firestore, collectionData, collectionGroup, query, limit} from '@angular/fire/firestore';
 import {
   MatColumnDef,
   MatHeaderRowDef,
   MatRowDef,
   MatTable,
   MatTableDataSource,
 } from '@angular/material/table';
-import {PullRequest} from '../../../../shared/models/app-models';
+import {PullRequest} from '../../models/pull-request';
 import {BaseColumn} from './columns/base';
+import {SummaryColumn} from './columns/summary/summary.component';
 
 @Component({
   selector: 'pr-table',
@@ -18,10 +18,9 @@ import {BaseColumn} from './columns/base';
 })
 export class PrTableComponent implements AfterViewInit {
   /** The columns used in the PR table. */
-  columns: Type<BaseColumn>[] = [];
+  columns: Type<BaseColumn>[] = [SummaryColumn];
   /** Data source for the table providing the list of pull requests/ */
   dataSource: MatTableDataSource<PullRequest> = new MatTableDataSource();
-
   /** The table. */
   @ViewChild(MatTable, {static: true}) table!: MatTable<PullRequest>;
   /** The row definintion. */

apps/prs/src/models/pull-request.ts

@@ -1,3 +1,3 @@
 import {PullRequest as SharedPullRequest} from '../../../shared/models/app-models';
 
-export class PullRequest extends SharedPullRequest {}
+export class PullRequest extends SharedPullRequest {}

apps/shared/models/BUILD.bazel

@@ -38,5 +38,6 @@ ts_library(
     ),
     deps = [
         "@npm//@octokit/webhooks-types",
+        "@npm//font-color-contrast",
     ],
 )

apps/shared/models/pull-request.ts

@@ -72,8 +72,12 @@ export class PullRequest extends GithubBaseModel<FirestorePullRequest> {
     this.milestone = data.milestone as any;
     this.assignees = data.assignees as any;
     this.commit = data.commit;
-    User.getByReference(data.user).then((u) => (this.user = u));
-    Promise.all(data.labels.map((l) => Label.getByReference(l))).then((l) => (this.labels = l));
+
+    // All asyncronous data fields should be awaited together.
+    await Promise.all([
+      User.getByReference(data.user).then((u) => (this.user = u)),
+      Promise.all(data.labels.map((l) => Label.getByReference(l))).then((l) => (this.labels = l)),
+    ]);
   }
 
   static override githubHelpers: GithubHelperFunctions<