feat(apps): create target column

Create a column which displays the current target of the pull request

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

@@ -3,11 +3,12 @@ import {CommonModule} from '@angular/common';
 
 import {MatTableModule} from '@angular/material/table';
 import {SummaryColumn} from './summary/summary.component';
+import {TargetColumn} from './target/target.component';
 import {StatusColumn} from './status/status.component';
 import {MatIconModule} from '@angular/material/icon';
 
 @NgModule({
-  declarations: [SummaryColumn, StatusColumn],
+  declarations: [SummaryColumn, TargetColumn, StatusColumn],
   imports: [CommonModule, MatTableModule, MatIconModule],
 })
 export class ColumnsModule {}

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

@@ -0,0 +1,4 @@
+<mat-header-cell *matHeaderCellDef>Target</mat-header-cell>
+<mat-cell *matCellDef="let row">
+  {{getTargetText(row.target)}}
+</mat-cell>

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

@@ -0,0 +1,11 @@
+.mat-column-target {
+  max-width: 80px;
+
+  &.mat-header-cell {
+    justify-content: center;
+  }
+
+  &.mat-cell {
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,44 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {BaseColumn} from '../base';
+
+/** The targets available, and the text to show in the UI. */
+const Targets = [
+  {
+    label: 'target: patch',
+    text: 'Patch',
+  },
+  {
+    label: 'target: minor',
+    text: 'Minor',
+  },
+  {
+    label: 'target: major',
+    text: 'Major',
+  },
+  {
+    label: 'target: lts',
+    text: 'LTS',
+  },
+  {
+    label: 'target: rc',
+    text: 'RC',
+  },
+  {
+    label: 'target: feature branch',
+    text: 'Feature Branch',
+  },
+];
+
+@Component({
+  selector: 'target-column',
+  templateUrl: './target.component.html',
+  styleUrls: ['./target.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TargetColumn extends BaseColumn {
+  name = 'target';
+
+  getTargetText(target: string) {
+    return Targets.find((t) => t.label === target)?.text ?? 'No Target';
+  }
+}

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

@@ -11,6 +11,7 @@ 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';
+import {TargetColumn} from './columns/target/target.component';
 
 @Component({
   selector: 'pr-table',
@@ -19,7 +20,7 @@ import {StatusColumn} from './columns/status/status.component';
 })
 export class PrTableComponent implements AfterViewInit {
   /** The columns used in the PR table. */
-  columns: Type<BaseColumn>[] = [SummaryColumn, StatusColumn];
+  columns: Type<BaseColumn>[] = [SummaryColumn, StatusColumn, TargetColumn];
   /** Data source for the table providing the list of pull requests/ */
   dataSource: MatTableDataSource<PullRequest> = new MatTableDataSource();
   /** The table. */

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

@@ -1,3 +1,11 @@
 import {PullRequest as SharedPullRequest} from '../../../shared/models/app-models';
+import {FirestorePullRequest} from '../../../shared/models/pull-request';
 
-export class PullRequest extends SharedPullRequest {}
+export class PullRequest extends SharedPullRequest {
+  target: string | undefined;
+
+  override async setData(data: FirestorePullRequest) {
+    await super.setData(data);
+    this.target = this.labels.find((l) => l?.name?.startsWith('target:'))?.name || '';
+  }
+}

apps/shared/models/pull-request.ts

@@ -52,7 +52,6 @@ export class PullRequest extends GithubBaseModel<FirestorePullRequest> {
   assignees!: User[];
   user!: User;
   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)];