Create summary column

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

@@ -0,0 +1,3 @@
+import {PullRequest as SharedPullRequest} from '../../../shared/models/app-models';
+
+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/base.ts

@@ -14,11 +14,9 @@ export abstract class BaseModel<T> {
     this.setData(data);
   }
 
-  protected setData(data: T) {
-    this.data = data;
-  }
+  protected setData(data: T) {}
 
-  static getByReference<T>(ref: FirestoreReference<T>): TypeFromFirestoreRef<typeof ref> {
+  static getByReference<T>(ref: FirestoreReference<T>): Promise<TypeFromFirestoreRef<typeof ref>> {
     return this.prototype.getByReference(ref);
   }
 

apps/shared/models/label.ts

@@ -1,14 +1,22 @@
 import {Label as GithubLabel} from '@octokit/webhooks-types';
 import {GithubBaseModel, GithubHelperFunctions, toFirestoreReference} from './base';
+import contrast from 'font-color-contrast';
 
 export interface FirestoreLabel {
   name: string;
   color: string;
 }
 
 export class Label extends GithubBaseModel<FirestoreLabel> {
-  readonly name = this.data.name;
-  readonly color = this.data.color;
+  name!: string;
+  color!: string;
+  fontColor!: string;
+
+  override setData(data: FirestoreLabel) {
+    this.name = data.name;
+    this.color = data.color;
+    this.fontColor = contrast(data.color, 0.6);
+  }
 
   static override githubHelpers: GithubHelperFunctions<Label, GithubLabel, FirestoreLabel> = {
     buildRefString(model: GithubLabel) {

apps/shared/models/pull-request.ts

@@ -33,25 +33,52 @@ export interface FirestorePullRequest {
 }
 
 export class PullRequest extends GithubBaseModel<FirestorePullRequest> {
-  readonly owner = this.data.owner;
-  readonly repo = this.data.repo;
-  readonly node = this.data.node;
-  readonly state = this.data.state;
-  readonly authorAssociation = this.data.authorAssociation;
-  readonly changeFiles = this.data.changedFiles;
-  readonly closedAt = this.data.closedAt;
-  readonly commits = this.data.commits;
-  readonly createdAt = this.data.createdAt;
-  readonly draft = this.data.draft;
-  readonly labels = this.data.labels;
-  readonly maintainerCanModify = this.data.maintainerCanModify;
-  readonly number = this.data.number;
-  readonly requestedReviewers = this.data.requestedReviewers;
-  readonly title = this.data.title;
-  readonly milestone = this.data.milestone;
-  readonly assignees = this.data.assignees;
-  readonly user = this.data.user;
-  readonly commit = this.data.commit;
+  owner!: string;
+  repo!: string;
+  node!: string;
+  state!: string;
+  authorAssociation!: string;
+  changeFiles!: number;
+  closedAt!: string | null;
+  commits!: number;
+  createdAt!: string;
+  draft!: boolean;
+  labels!: Label[];
+  maintainerCanModify!: boolean;
+  number!: number;
+  requestedReviewers!: User[];
+  title!: string;
+  milestone!: Milestone | null;
+  assignees!: User[];
+  user!: User;
+  commit!: string;
+  target: undefined | string;
+
+  override async setData(data: FirestorePullRequest) {
+    this.owner = data.owner;
+    this.repo = data.repo;
+    this.node = data.node;
+    this.state = data.state;
+    this.authorAssociation = data.authorAssociation;
+    this.changeFiles = data.changedFiles;
+    this.closedAt = data.closedAt;
+    this.commits = data.commits;
+    this.createdAt = data.createdAt;
+    this.draft = data.draft;
+    this.maintainerCanModify = data.maintainerCanModify;
+    this.number = data.number;
+    this.requestedReviewers = data.requestedReviewers as any;
+    this.title = data.title;
+    this.milestone = data.milestone as any;
+    this.assignees = data.assignees as any;
+    this.commit = data.commit;
+
+    // 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<
     PullRequest,

package.json

@@ -111,6 +111,7 @@
     "firebase-admin": "^10.0.2",
     "firebase-functions": "^3.19.0",
     "firebase-tools": "^10.5.0",
+    "font-color-contrast": "^11.1.0",
     "git-raw-commits": "^2.0.10",
     "glob": "7.2.0",
     "husky": "^7.0.1",

yarn.lock

@@ -465,6 +465,7 @@ __metadata:
     firebase-admin: ^10.0.2
     firebase-functions: ^3.19.0
     firebase-tools: ^10.5.0
+    font-color-contrast: ^11.1.0
     git-raw-commits: ^2.0.10
     glob: 7.2.0
     husky: ^7.0.1
@@ -8235,6 +8236,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"font-color-contrast@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "font-color-contrast@npm:11.1.0"
+  checksum: 7c8af0690adc8ddfd8f3030bbce6d3345851fe78c0076fb5b3ab23568b241559fd2925f8923dc5e907faa4d49d79a03e5c04321b1551d04dbdd662a29857a968
+  languageName: node
+  linkType: hard
+
 "foreground-child@npm:^2.0.0":
   version: 2.0.0
   resolution: "foreground-child@npm:2.0.0"