Feature/355 read only reports

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

@@ -12,7 +12,7 @@ const routes: Routes = [
     path: '',
     component: LoginComponent,
     pathMatch: 'full',
-    canActivate:[LoginGuard],
+    canActivate: [LoginGuard],
   },
   { path: 'twoFactLogin', component: TwoFactorLoginComponent },
   { path: 'confirm-2f', component: ConfirmTwoFactorComponent },

front-end/src/app/layout/sidebar/menu-report/menu-report.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import { NavigationEnd, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -37,6 +38,7 @@ describe('MenuReportComponent', () => {
         SharedModule,
         PanelMenuModule,
         BrowserAnimationsModule,
+        HttpClientTestingModule,
         RouterTestingModule.withRoutes([{ path: 'transactions/report/999/list', redirectTo: '' }]),
       ],
     }).compileComponents();

front-end/src/app/layout/sidebar/menu-report/menu-report.component.ts

@@ -10,6 +10,7 @@ import { Report, CashOnHand } from '../../../shared/interfaces/report.interface'
 import { ReportCodeLabelList } from '../../../shared/utils/reportCodeLabels.utils';
 import { f3xReportCodeDetailedLabels, LabelList } from '../../../shared/utils/label.utils';
 import { F3xFormTypeLabels } from '../../../shared/models/f3x-summary.model';
+import { ReportService } from '../../../shared/services/report.service';
 
 @Component({
   selector: 'app-menu-report',
@@ -24,6 +25,7 @@ export class MenuReportComponent implements OnInit, OnDestroy {
   reportCodeLabelList$: Observable<ReportCodeLabelList> = new Observable<ReportCodeLabelList>();
   f3xFormTypeLabels: LabelList = F3xFormTypeLabels;
   f3xReportCodeDetailedLabels: LabelList = f3xReportCodeDetailedLabels;
+  reportIsEditableFlag = false;
   cashOnHand: CashOnHand = {
     report_id: null,
     value: null,
@@ -47,17 +49,19 @@ export class MenuReportComponent implements OnInit, OnDestroy {
     /^\/reports\/f3x\/submit\/status\/\d+/, // Submit your report group
   ];
 
-  constructor(private router: Router, private store: Store) {}
+  constructor(private router: Router, private store: Store, private reportService: ReportService) {}
 
   ngOnInit(): void {
-    this.reportCodeLabelList$ = this.store.select<ReportCodeLabelList>(selectReportCodeLabelList);
+    this.reportCodeLabelList$ = this.store
+      .select<ReportCodeLabelList>(selectReportCodeLabelList)
+      .pipe(takeUntil(this.destroy$));
 
-    // Update the active report whenever a new one is pushed to the ngrx store.
     this.store
       .select(selectActiveReport)
       .pipe(takeUntil(this.destroy$))
       .subscribe((report: Report | null) => {
         this.activeReport = report;
+        this.reportIsEditableFlag = this.reportService.isEditable(report);
       });
 
     this.store
@@ -88,6 +92,7 @@ export class MenuReportComponent implements OnInit, OnDestroy {
           {
             label: 'ENTER A TRANSACTION',
             expanded: false,
+            visible: this.reportIsEditableFlag,
             items: [
               {
                 label: 'Cash on hand',
@@ -101,6 +106,7 @@ export class MenuReportComponent implements OnInit, OnDestroy {
               {
                 label: 'Add a receipt',
                 routerLink: [`/transactions/report/${this.currentReportId}/create`],
+                visible: this.reportIsEditableFlag,
               },
               { label: 'Add a disbursements', styleClass: 'menu-item-disabled' },
               { label: 'Add loans and debts', styleClass: 'menu-item-disabled' },
@@ -123,16 +129,31 @@ export class MenuReportComponent implements OnInit, OnDestroy {
                 label: 'View print preview',
                 routerLink: [`/reports/f3x/web-print/${this.currentReportId}`],
               },
-              { label: 'Add a report level memo', routerLink: [`/reports/f3x/memo/${this.currentReportId}`] },
+              {
+                label: 'Add a report level memo',
+                routerLink: [`/reports/f3x/memo/${this.currentReportId}`],
+                visible: this.reportIsEditableFlag,
+              },
             ],
           },
           {
             label: 'SUBMIT YOUR REPORT',
             expanded: false,
             items: [
-              { label: 'Confirm information', routerLink: [`/reports/f3x/submit/step1/${this.currentReportId}`] },
-              { label: 'Submit report', routerLink: [`/reports/f3x/submit/step2/${this.currentReportId}`] },
-              { label: 'Report status', routerLink: [`/reports/f3x/submit/status/${this.currentReportId}`] },
+              {
+                label: 'Confirm information',
+                routerLink: [`/reports/f3x/submit/step1/${this.currentReportId}`],
+                visible: this.reportIsEditableFlag,
+              },
+              {
+                label: 'Submit report',
+                routerLink: [`/reports/f3x/submit/step2/${this.currentReportId}`],
+                visible: this.reportIsEditableFlag,
+              },
+              {
+                label: 'Report status',
+                routerLink: [`/reports/f3x/submit/status/${this.currentReportId}`],
+              },
             ],
           },
         ];

front-end/src/app/layout/sidebar/sidebar.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { provideMockStore } from '@ngrx/store/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { UserLoginData } from 'app/shared/models/user.model';
@@ -22,7 +23,13 @@ describe('SidebarComponent', () => {
     };
 
     await TestBed.configureTestingModule({
-      imports: [BrowserAnimationsModule, MenuModule, PanelMenuModule, RouterTestingModule.withRoutes([])],
+      imports: [
+        BrowserAnimationsModule,
+        MenuModule,
+        PanelMenuModule,
+        HttpClientTestingModule,
+        RouterTestingModule.withRoutes([]),
+      ],
       declarations: [SidebarComponent, MenuReportComponent],
       providers: [
         provideMockStore({

front-end/src/app/reports/f3x/create-workflow/cash-on-hand.component.ts

@@ -1,27 +1,29 @@
-import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Subject, takeUntil } from 'rxjs';
 import { Store } from '@ngrx/store';
 import { setCashOnHandAction } from 'app/store/cash-on-hand.actions';
 import { MessageService } from 'primeng/api';
 import { ValidateService } from 'app/shared/services/validate.service';
 import { schema as f3xSchema } from 'fecfile-validate/fecfile_validate_js/dist/F3X';
 import { F3xSummary } from 'app/shared/models/f3x-summary.model';
 import { F3xSummaryService } from 'app/shared/services/f3x-summary.service';
+import { selectActiveReport } from 'app/store/active-report.selectors';
 
 @Component({
   selector: 'app-cash-on-hand',
   templateUrl: './cash-on-hand.component.html',
 })
-export class CashOnHandComponent implements OnInit {
+export class CashOnHandComponent implements OnInit, OnDestroy {
+  private destroy$ = new Subject<boolean>();
   formProperties: string[] = ['L6a_cash_on_hand_jan_1_ytd', 'cash_on_hand_date'];
   report: F3xSummary | undefined;
   formSubmitted = false;
   form: FormGroup = this.fb.group(this.validateService.getFormGroupFields(this.formProperties));
 
   constructor(
     public router: Router,
-    private activatedRoute: ActivatedRoute,
     private f3xSummaryService: F3xSummaryService,
     private validateService: ValidateService,
     private fb: FormBuilder,
@@ -30,7 +32,10 @@ export class CashOnHandComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.report = this.activatedRoute.snapshot.data['report'];
+    this.store
+      .select(selectActiveReport)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((report) => (this.report = report as F3xSummary));
 
     // Initialize validation tracking of current JSON schema and form data
     this.validateService.formValidatorSchema = f3xSchema;
@@ -42,6 +47,11 @@ export class CashOnHandComponent implements OnInit {
     this.form.patchValue({ ...this.report });
   }
 
+  ngOnDestroy(): void {
+    this.destroy$.next(true);
+    this.destroy$.complete();
+  }
+
   public save(): void {
     this.formSubmitted = true;
 

front-end/src/app/reports/f3x/create-workflow/create-f3x-step1.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Validators } from '@angular/forms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
 import {
   electionReportCodes,
@@ -19,11 +19,13 @@ import { F3xSummaryService } from 'app/shared/services/f3x-summary.service';
 import { ValidateService } from 'app/shared/services/validate.service';
 import { f3xReportCodeDetailedLabels, LabelUtils, PrimeOptions, StatesCodeLabels } from 'app/shared/utils/label.utils';
 import { selectCommitteeAccount } from 'app/store/committee-account.selectors';
+import { selectActiveReport } from 'app/store/active-report.selectors';
 import { environment } from 'environments/environment';
 import { schema as f3xSchema } from 'fecfile-validate/fecfile_validate_js/dist/F3X';
 import { MessageService } from 'primeng/api';
 import { Subject, takeUntil } from 'rxjs';
 import { LabelList } from '../../../shared/utils/label.utils';
+import { ReportService } from 'app/shared/services/report.service';
 
 @Component({
   selector: 'app-create-f3x-step1',
@@ -59,12 +61,22 @@ export class CreateF3XStep1Component implements OnInit, OnDestroy {
     private fb: FormBuilder,
     private f3xSummaryService: F3xSummaryService,
     private messageService: MessageService,
+    protected router: Router,
     private activatedRoute: ActivatedRoute,
-    protected router: Router
+    private reportService: ReportService
   ) {}
 
   ngOnInit(): void {
-    const report: F3xSummary = this.activatedRoute.snapshot.data['report'];
+    const reportId = this.activatedRoute.snapshot.data['reportId'];
+    this.store
+      .select(selectActiveReport)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((report) => {
+        if (reportId && report) {
+          this.form.patchValue(report);
+        }
+      });
+
     this.store
       .select(selectCommitteeAccount)
       .pipe(takeUntil(this.destroy$))
@@ -92,9 +104,6 @@ export class CreateF3XStep1Component implements OnInit, OnDestroy {
               report_code: this.getReportCodes()[0],
             });
           });
-        if (report) {
-          this.form.patchValue(report);
-        }
       });
     this.stateOptions = LabelUtils.getPrimeOptions(StatesCodeLabels);
 
@@ -111,85 +120,75 @@ export class CreateF3XStep1Component implements OnInit, OnDestroy {
   }
 
   /**
-   * Checks if a field's date is within another report's dates or if 
+   * Checks if a field's date is within another report's dates or if
    * another report's dates fall within the form's "from" and "through" dates
-   * 
+   *
    * @param fieldDate {Date} the date of the field being checked
    * @param fromDate {Date} the form's "from" date
    * @param throughDate {Date} the form's "through" date
    * @param targetDate {F3xCoverageDates} the object whose date is being checked for an overlap
    * @returns true if there is an overlap in dates
    */
-  checkForDateOverlap(
-    fieldDate: Date,
-    fromDate: Date,
-    throughDate: Date,
-    targetDate: F3xCoverageDates
-  ): boolean {
-    return (
-      targetDate &&
+  checkForDateOverlap(fieldDate: Date, fromDate: Date, throughDate: Date, targetDate: F3xCoverageDates): boolean {
+    return (targetDate &&
       targetDate.coverage_from_date &&
       targetDate.coverage_through_date &&
-      (
-        //The form's date is between another report's from/through date
-        ( fieldDate >= targetDate.coverage_from_date &&
-        fieldDate <= targetDate.coverage_through_date ) ||
+      //The form's date is between another report's from/through date
+      ((fieldDate >= targetDate.coverage_from_date && fieldDate <= targetDate.coverage_through_date) ||
         //Another report's dates are inside the form's dates
-        ( fromDate <= targetDate.coverage_from_date && 
+        (fromDate <= targetDate.coverage_from_date &&
           throughDate >= targetDate.coverage_from_date &&
-          fromDate <= targetDate.coverage_through_date && 
-          throughDate >= targetDate.coverage_through_date)
-      )
-    ) as boolean;
+          fromDate <= targetDate.coverage_through_date &&
+          throughDate >= targetDate.coverage_through_date))) as boolean;
   }
 
   buildCoverageDatesValidator(): ValidatorFn {
     /**
      * This is being used as a group validator, so it will always be called with a FormGroup
      * for the parameter, but addValidators() only takes a method that returns a ValidatorFn,
      * and a ValidatorFn must have parameters of AbstractControl or AbstractControl | FormGroup
-     * 
+     *
      * Additionally, a unit test is present to make sure that the constructed validator function
      * does not explode if passed an AbstractControl parameter.
      */
     return (toValidate: AbstractControl | FormGroup): null => {
       const group = toValidate as FormGroup;
-      if (group.controls){
+      if (group.controls) {
         const fromDate = group.controls['coverage_from_date'];
         const throughDate = group.controls['coverage_through_date'];
         if (this.f3xCoverageDatesList) {
-          for (const formValue of [fromDate, throughDate]){
+          for (const formValue of [fromDate, throughDate]) {
             const overlap = this.f3xCoverageDatesList.find((f3xCoverageDate) => {
               return this.checkForDateOverlap(formValue.value, fromDate.value, throughDate.value, f3xCoverageDate);
             });
-            if (overlap){
+            if (overlap) {
               this.setCoverageOverlapError(formValue, overlap);
             } else {
               const errors = formValue.errors;
-              if (errors){
-                delete errors["invaliddate"];
+              if (errors) {
+                delete errors['invaliddate'];
                 formValue.setErrors(errors);
               }
             }
           }
         }
       }
       return null;
-    }
+    };
   }
 
-  setCoverageOverlapError(formValue: AbstractControl, overlap: F3xCoverageDates){
+  setCoverageOverlapError(formValue: AbstractControl, overlap: F3xCoverageDates) {
     const f3xReportCodeLabel = f3xReportCodeDetailedLabels.find((label) => label[0] === overlap.report_code);
-    const reportCodeLabel = f3xReportCodeLabel
-      ? f3xReportCodeLabel[1] || overlap.report_code?.valueOf
-      : 'invalid name';
+    const reportCodeLabel = f3xReportCodeLabel ? f3xReportCodeLabel[1] || overlap.report_code?.valueOf : 'invalid name';
     const overlapFromDate = this.fecDatePipe.transform(overlap.coverage_from_date);
     const overlapThroughDate = this.fecDatePipe.transform(overlap.coverage_through_date);
     const errors = formValue.errors ? formValue.errors : {};
-    errors["invaliddate"] = {msg:`You have entered coverage dates that overlap ` +
+    errors['invaliddate'] = {
+      msg:
+        `You have entered coverage dates that overlap ` +
         `the coverage dates of the following report: ${reportCodeLabel} ` +
         ` ${overlapFromDate} - ${overlapThroughDate}`,
-    }
+    };
     formValue.setErrors(errors);
   }
 
@@ -238,6 +237,9 @@ export class CreateF3XStep1Component implements OnInit, OnDestroy {
 
     this.f3xSummaryService.create(summary, this.formProperties).subscribe((report: F3xSummary) => {
       if (jump === 'continue') {
+        // Save report to Cash On Hand in the store if necessary by pulling the reports table data.
+        this.reportService.getTableData().subscribe();
+
         this.router.navigateByUrl(`/reports/f3x/create/step2/${report.id}`);
       } else {
         this.router.navigateByUrl('/reports');