Merge pull request #495 from fecgov/feature/428-set-title-on-each-page

Feature/428 set title on each page

front-end/src/app/app-routing.module.ts

@@ -20,7 +20,7 @@ const routes: Routes = [
     path: '',
     component: LayoutComponent,
     children: [
-      { path: 'dashboard', component: DashboardComponent },
+      { path: 'dashboard', component: DashboardComponent, title: 'FECFile Dashboard' },
       { path: 'reports', loadChildren: () => import('./reports/reports.module').then((m) => m.ReportsModule) },
       { path: 'contacts', loadChildren: () => import('./contacts/contacts.module').then((m) => m.ContactsModule) },
       { path: 'committee/users', loadChildren: () => import('./users/users.module').then((m) => m.UsersModule) },

front-end/src/app/contacts/contacts-routing.module.ts

@@ -5,6 +5,7 @@ import { ContactListComponent } from './contact-list/contact-list.component';
 const routes: Routes = [
   {
     path: '',
+    title: 'Manage Contacts',
     component: ContactListComponent,
     pathMatch: 'full',
   },

front-end/src/app/profile/profile-routing.module.ts

@@ -1,14 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { AccountInfoComponent } from "./account-info/account-info.component";
+import { AccountInfoComponent } from './account-info/account-info.component';
 
 const routes: Routes = [
   {
     path: 'account',
+    title: 'Account Page',
     component: AccountInfoComponent,
     pathMatch: 'full',
   },
-  { path: '**', redirectTo: '' }
+  { path: '**', redirectTo: '' },
 ];
 
 @NgModule({

front-end/src/app/reports/reports-routing.module.ts

@@ -26,60 +26,72 @@ import { ReportIsEditableGuard } from '../shared/guards/report-is-editable.guard
 const routes: Routes = [
   {
     path: '',
+    title: 'Manage Reports',
     component: ReportListComponent,
     pathMatch: 'full',
   },
   {
     path: 'f3x/create/cash-on-hand/:reportId',
+    title: 'Cash on hand',
     component: CashOnHandComponent,
     canActivate: [ReportIsEditableGuard, CashOnHandGuard],
   },
   {
     path: 'f3x/create/step1',
+    title: 'Create a report',
     component: CreateF3XStep1Component,
   },
   {
     path: 'f3x/create/step1/:reportId',
+    title: 'Create a report',
     component: CreateF3XStep1Component,
     canActivate: [ReportIsEditableGuard],
   },
   {
     path: 'f3x/create/step2/:reportId',
+    title: 'Report Form 3X',
     component: CreateF3xStep2Component,
     canActivate: [ReportIsEditableGuard],
   },
   {
     path: 'f3x/summary/:reportId',
+    title: 'View summary page',
     component: ReportSummaryComponent,
     resolve: { report: ReportResolver },
   },
   {
     path: 'f3x/detailed-summary/:reportId',
+    title: 'View detailed summary page',
     component: ReportDetailedSummaryComponent,
     resolve: { report: ReportResolver },
   },
   {
     path: 'f3x/web-print/:reportId',
+    title: 'Print preview',
     component: ReportWebPrintComponent,
     resolve: { report: ReportResolver },
   },
   {
     path: 'f3x/memo/:reportId',
+    title: 'Add a report level memo',
     component: ReportLevelMemoComponent,
     canActivate: [ReportIsEditableGuard],
   },
   {
     path: 'f3x/submit/step1/:reportId',
+    title: 'Confirm information',
     component: SubmitF3xStep1Component,
     canActivate: [ReportIsEditableGuard],
   },
   {
     path: 'f3x/submit/step2/:reportId',
+    title: 'Submit report',
     component: SubmitF3xStep2Component,
     canActivate: [ReportIsEditableGuard],
   },
   {
     path: 'f3x/submit/status/:reportId',
+    title: 'Report status',
     component: ReportSubmissionStatusComponent,
     resolve: { report: ReportResolver },
   },

front-end/src/app/shared/components/transaction-type-base/transaction-type-base.component.ts

@@ -15,10 +15,10 @@ import { ContactTypeLabels, ContactTypes } from '../../models/contact.model';
   template: '',
 })
 export abstract class TransactionTypeBaseComponent implements OnInit, OnDestroy {
-  @Input() title = '';
-  @Input() schema: JsonSchema | null = null;
-  @Input() transaction: Transaction | null = null;
-  @Input() contributionPurposeDescrip = '';
+  @Input() title: string | undefined;
+  @Input() schema: JsonSchema | undefined;
+  @Input() transaction: Transaction | undefined;
+  @Input() contributionPurposeDescrip: string | undefined;
 
   abstract formProperties: string[];
 

front-end/src/app/shared/interfaces/transaction-type.interface.ts

@@ -10,8 +10,8 @@ export interface TransactionType {
   componentGroupId: string;
   title: string;
   schema: JsonSchema;
-  transaction: Transaction | null;
-  parent: Transaction | null;
+  transaction: Transaction | undefined;
+  parent: Transaction | undefined;
   contributionPurposeDescripReadonly(): string;
   getNewTransaction(): Transaction;
 }

front-end/src/app/shared/models/transaction-types/INDV_REC.model.ts

@@ -8,8 +8,8 @@ export class INDV_REC implements TransactionType {
   componentGroupId = 'A';
   title = LabelUtils.get(ScheduleATransactionTypeLabels, ScheduleATransactionTypes.INDIVIDUAL_RECEIPT);
   schema = schema;
-  transaction = null;
-  parent = null;
+  transaction = undefined;
+  parent = undefined;
 
   contributionPurposeDescripReadonly(): string {
     return '';

front-end/src/app/shared/models/transaction-types/JF_TRAN.model.ts

@@ -8,8 +8,8 @@ export class JF_TRAN implements TransactionType {
   componentGroupId = 'E';
   title = LabelUtils.get(ScheduleATransactionTypeLabels, ScheduleATransactionTypes.JF_TRANSFER);
   schema = schema;
-  transaction = null;
-  parent = null;
+  transaction = undefined;
+  parent = undefined;
 
   contributionPurposeDescripReadonly(): string {
     return 'Transfer of JF Proceeds';

front-end/src/app/shared/models/transaction-types/JF_TRAN_PAC_MEMO.model.ts

@@ -9,8 +9,8 @@ export class JF_TRAN_PAC_MEMO implements TransactionType {
   componentGroupId = 'F';
   title = LabelUtils.get(ScheduleATransactionTypeLabels, ScheduleATransactionTypes.JF_TRAN_PAC_MEMO);
   schema = schema;
-  transaction: Transaction | null = null;
-  parent: SchATransaction | null = null;
+  transaction: Transaction | undefined;
+  parent: SchATransaction | undefined;
 
   contributionPurposeDescripReadonly(): string {
     return `JF Memo: ${this.parent?.contributor_organization_name}`;

front-end/src/app/shared/models/transaction-types/OFFSET_TO_OPEX.model.ts

@@ -8,8 +8,8 @@ export class OFFSET_TO_OPEX implements TransactionType {
   componentGroupId = 'B';
   title = LabelUtils.get(ScheduleATransactionTypeLabels, ScheduleATransactionTypes.OFFSETS_TO_OPERATING_EXPENDITURES);
   schema = schema;
-  transaction = null;
-  parent = null;
+  transaction = undefined;
+  parent = undefined;
 
   contributionPurposeDescripReadonly(): string {
     return '';

front-end/src/app/shared/models/transaction-types/OTH_REC.model.ts

@@ -8,8 +8,8 @@ export class OTH_REC implements TransactionType {
   componentGroupId = 'C';
   title = LabelUtils.get(ScheduleATransactionTypeLabels, ScheduleATransactionTypes.OTHER_RECEIPTS);
   schema = schema;
-  transaction = null;
-  parent = null;
+  transaction = undefined;
+  parent = undefined;
 
   contributionPurposeDescripReadonly(): string {
     return '';

front-end/src/app/shared/models/transaction-types/TRIB_REC.model.ts

@@ -8,8 +8,8 @@ export class TRIB_REC implements TransactionType {
   componentGroupId = 'D';
   title = LabelUtils.get(ScheduleATransactionTypeLabels, ScheduleATransactionTypes.TRIBAL_RECEIPT);
   schema = schema;
-  transaction = null;
-  parent = null;
+  transaction = undefined;
+  parent = undefined;
 
   contributionPurposeDescripReadonly(): string {
     return 'Tribal Receipt';

front-end/src/app/shared/services/validate.service.spec.ts

@@ -99,7 +99,7 @@ describe('ValidateService', () => {
   });
 
   it('#getSchemaProperties() should return empty array when no schema', () => {
-    const properties: string[] = service.getSchemaProperties(null);
+    const properties: string[] = service.getSchemaProperties(undefined);
     expect(properties.length).toBe(0);
   });
 });

front-end/src/app/shared/services/validate.service.ts

@@ -12,13 +12,13 @@ export class ValidateService {
    * @property - This property is a placeholder for the schema to use in the form element
    * custom validator located in the method formValidator() below.
    */
-  formValidatorSchema: JsonSchema | null = null;
+  formValidatorSchema: JsonSchema | undefined;
 
   /**
    * @property - This property is a placeholder for the ng reactive form to use in the form
    * element custom validator located in the method formValidator() below.
    */
-  formValidatorForm: FormGroup | null = null;
+  formValidatorForm: FormGroup | undefined;
 
   /**
    * Validate a data object against a JSON Schema document
@@ -37,7 +37,7 @@ export class ValidateService {
    * @param {JsonSchema} schema
    * @returns {string[]} list of property names
    */
-  getSchemaProperties(schema: JsonSchema | null): string[] {
+  getSchemaProperties(schema: JsonSchema | undefined): string[] {
     if (schema) {
       return Object.keys(schema.properties);
     }

front-end/src/app/transactions/transaction-container/transaction-container.component.html

@@ -1,48 +1,48 @@
-<ng-container *ngIf="transactionType.componentGroupId === 'A'">
+<ng-container *ngIf="transactionType?.componentGroupId === 'A'">
   <app-transaction-group-a
-    [title]="transactionType.title"
-    [schema]="transactionType.schema"
-    [transaction]="transactionType.transaction"
-    [contributionPurposeDescrip]="transactionType.contributionPurposeDescripReadonly()"
+    [title]="transactionType?.title"
+    [schema]="transactionType?.schema"
+    [transaction]="transactionType?.transaction"
+    [contributionPurposeDescrip]="transactionType?.contributionPurposeDescripReadonly()"
   ></app-transaction-group-a>
 </ng-container>
-<ng-container *ngIf="transactionType.componentGroupId === 'B'">
+<ng-container *ngIf="transactionType?.componentGroupId === 'B'">
   <app-transaction-group-b
-    [title]="transactionType.title"
-    [schema]="transactionType.schema"
-    [transaction]="transactionType.transaction"
-    [contributionPurposeDescrip]="transactionType.contributionPurposeDescripReadonly()"
+    [title]="transactionType?.title"
+    [schema]="transactionType?.schema"
+    [transaction]="transactionType?.transaction"
+    [contributionPurposeDescrip]="transactionType?.contributionPurposeDescripReadonly()"
   ></app-transaction-group-b>
 </ng-container>
-<ng-container *ngIf="transactionType.componentGroupId === 'C'">
+<ng-container *ngIf="transactionType?.componentGroupId === 'C'">
   <app-transaction-group-c
-    [title]="transactionType.title"
-    [schema]="transactionType.schema"
-    [transaction]="transactionType.transaction"
-    [contributionPurposeDescrip]="transactionType.contributionPurposeDescripReadonly()"
+    [title]="transactionType?.title"
+    [schema]="transactionType?.schema"
+    [transaction]="transactionType?.transaction"
+    [contributionPurposeDescrip]="transactionType?.contributionPurposeDescripReadonly()"
   ></app-transaction-group-c>
 </ng-container>
-<ng-container *ngIf="transactionType.componentGroupId === 'D'">
+<ng-container *ngIf="transactionType?.componentGroupId === 'D'">
   <app-transaction-group-d
-    [title]="transactionType.title"
-    [schema]="transactionType.schema"
-    [transaction]="transactionType.transaction"
-    [contributionPurposeDescrip]="transactionType.contributionPurposeDescripReadonly()"
+    [title]="transactionType?.title"
+    [schema]="transactionType?.schema"
+    [transaction]="transactionType?.transaction"
+    [contributionPurposeDescrip]="transactionType?.contributionPurposeDescripReadonly()"
   ></app-transaction-group-d>
 </ng-container>
-<ng-container *ngIf="transactionType.componentGroupId === 'E'">
+<ng-container *ngIf="transactionType?.componentGroupId === 'E'">
   <app-transaction-group-e
-    [title]="transactionType.title"
-    [schema]="transactionType.schema"
-    [transaction]="transactionType.transaction"
-    [contributionPurposeDescrip]="transactionType.contributionPurposeDescripReadonly()"
+    [title]="transactionType?.title"
+    [schema]="transactionType?.schema"
+    [transaction]="transactionType?.transaction"
+    [contributionPurposeDescrip]="transactionType?.contributionPurposeDescripReadonly()"
   ></app-transaction-group-e>
 </ng-container>
-<ng-container *ngIf="transactionType.componentGroupId === 'F'">
+<ng-container *ngIf="transactionType?.componentGroupId === 'F'">
   <app-transaction-group-f
-    [title]="transactionType.title"
-    [schema]="transactionType.schema"
-    [transaction]="transactionType.transaction"
-    [contributionPurposeDescrip]="transactionType.contributionPurposeDescripReadonly()"
+    [title]="transactionType?.title"
+    [schema]="transactionType?.schema"
+    [transaction]="transactionType?.transaction"
+    [contributionPurposeDescrip]="transactionType?.contributionPurposeDescripReadonly()"
   ></app-transaction-group-f>
 </ng-container>

front-end/src/app/transactions/transaction-container/transaction-container.component.spec.ts

@@ -20,6 +20,7 @@ import { CheckboxModule } from 'primeng/checkbox';
 import { InputTextModule } from 'primeng/inputtext';
 import { InputTextareaModule } from 'primeng/inputtextarea';
 import { InputNumberModule } from 'primeng/inputnumber';
+import { of } from 'rxjs';
 
 describe('TransactionContainerComponent', () => {
   let component: TransactionContainerComponent;
@@ -53,11 +54,9 @@ describe('TransactionContainerComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            snapshot: {
-              data: {
-                transactionType: TransactionTypeUtils.factory('OFFSET_TO_OPEX'),
-              },
-            },
+            data: of({
+              transactionType: TransactionTypeUtils.factory('OFFSET_TO_OPEX'),
+            }),
           },
         },
         provideMockStore({

front-end/src/app/transactions/transaction-container/transaction-container.component.ts

@@ -5,23 +5,32 @@ import { TransactionType } from '../../shared/interfaces/transaction-type.interf
 import { Store } from '@ngrx/store';
 import { selectCommitteeAccount } from '../../store/committee-account.selectors';
 import { CommitteeAccount } from '../../shared/models/committee-account.model';
+import { Title } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-transaction-container',
   templateUrl: './transaction-container.component.html',
 })
 export class TransactionContainerComponent implements OnInit, OnDestroy {
-  transactionType: TransactionType = this.activatedRoute.snapshot.data['transactionType'];
+  transactionType: TransactionType | undefined;
   destroy$: Subject<boolean> = new Subject<boolean>();
 
-  constructor(private activatedRoute: ActivatedRoute, private store: Store) {}
+  constructor(private activatedRoute: ActivatedRoute, private store: Store, private titleService: Title) {
+    activatedRoute.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
+      this.transactionType = data['transactionType'];
+      if (this.transactionType) {
+        const title = this.transactionType['title'];
+        this.titleService.setTitle(title);
+      }
+    });
+  }
 
   ngOnInit(): void {
     this.store
       .select(selectCommitteeAccount)
       .pipe(takeUntil(this.destroy$))
       .subscribe((committeeAccount: CommitteeAccount) => {
-        if (this.transactionType.transaction) {
+        if (this.transactionType?.transaction) {
           this.transactionType.transaction.filer_committee_id_number = committeeAccount.committee_id;
         }
       });

front-end/src/app/transactions/transactions-routing.module.ts

@@ -17,11 +17,13 @@ import { TransactionListComponent } from './transaction-list/transaction-list.co
 const routes: Routes = [
   {
     path: 'report/:reportId/list',
+    title: 'Manage your transactions',
     component: TransactionListComponent,
     resolve: { report: ReportResolver },
   },
   {
     path: 'report/:reportId/create',
+    title: 'Add a receipt',
     component: TransactionTypePickerComponent,
     canActivate: [ReportIsEditableGuard],
   },

front-end/src/app/users/users-routing.module.ts

@@ -6,6 +6,7 @@ const routes: Routes = [
   {
     path: '',
     component: UserListComponent,
+    title: 'Manage Users',
     pathMatch: 'full',
   },
   { path: '**', redirectTo: '' },