feat(apps): create the base of the pull request table

Create a table and base column definition for the pull request table to allow for the table columns to
be established incramentally.

Author: josephperrott

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

@@ -0,0 +1,14 @@
+import {Directive, ViewChild} from '@angular/core';
+import {MatCellDef, MatHeaderCellDef} from '@angular/material/table';
+
+// A Directive is used to satisfy the Angular compiler which wants a decorated class
+// even though its abstract.
+@Directive()
+export abstract class BaseColumn {
+  /** The cell definintion for a row. */
+  @ViewChild(MatCellDef, {static: true}) cell!: MatCellDef;
+  /** The header cell definintion for a row. */
+  @ViewChild(MatHeaderCellDef, {static: true}) headerCell!: MatHeaderCellDef;
+  /** The name of the column.  */
+  abstract name: string;
+}

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

@@ -0,0 +1,4 @@
+<mat-table [dataSource]="dataSource">
+  <mat-header-row *matHeaderRowDef="[]"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: [];"></mat-row>
+</mat-table>

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

@@ -0,0 +1,24 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {PrTableComponent} from './pr-table.component';
+
+describe('PrTableComponent', () => {
+  let component: PrTableComponent;
+  let fixture: ComponentFixture<PrTableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PrTableComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrTableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,59 @@
+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 {BaseColumn} from './columns/base';
+
+@Component({
+  selector: 'pr-table',
+  templateUrl: './pr-table.component.html',
+  styleUrls: ['./pr-table.component.scss'],
+})
+export class PrTableComponent implements AfterViewInit {
+  /** The columns used in the PR table. */
+  columns: Type<BaseColumn>[] = [];
+  /** 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. */
+  @ViewChild(MatRowDef, {static: true}) tableRow!: MatRowDef<PullRequest>;
+  /** The header row definition. */
+  @ViewChild(MatHeaderRowDef, {static: true}) tableHeaderRow!: MatHeaderRowDef;
+
+  constructor(private injector: Injector, private vcr: ViewContainerRef) {}
+
+  ngAfterViewInit(): void {
+    const columns = this.columns.map((column) => {
+      /** The column definition for the generated column. */
+      const columnDef = new MatColumnDef();
+      /**
+       * The injector to provide to the BaseColumn derived class, allowing it to be provided to the
+       * cell definitions in the template.
+       */
+      const injector = Injector.create({
+        providers: [{provide: CdkColumnDef, useValue: columnDef}],
+        parent: this.injector,
+      });
+      // The name, cell and headerCell are obtained from the generated component and set on the
+      // generated column definition.
+      const {name, cell, headerCell} = this.vcr.createComponent(column, {injector}).instance;
+      columnDef.name = name;
+      columnDef.cell = cell;
+      columnDef.headerCell = headerCell;
+      this.table.addColumnDef(columnDef);
+      return name;
+    });
+    // Set the columns for the rows in the table.
+    this.tableRow.columns = columns;
+    this.tableHeaderRow.columns = columns;
+  }
+}

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

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+
+import {PrTableComponent} from './pr-table.component';
+import {MatTableModule} from '@angular/material/table';
+import {ColumnsModule} from './columns/columns.module';
+
+@NgModule({
+  declarations: [PrTableComponent],
+  exports: [PrTableComponent],
+  imports: [CommonModule, MatTableModule, ColumnsModule],
+})
+export class PrTableModule {}