Merge pull request #2487 from bcgov/2416-create-complaint-referral-tab-from-submission

2416 create complaint referral tab from submission

Author: trslater

alcs-frontend/angular.json

@@ -50,8 +50,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "2mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "3mb"
                 },
                 {
                   "type": "anyComponentStyle",

alcs-frontend/src/app/features/compliance-and-enforcement/compliance-and-enforcement.component.spec.ts

@@ -40,7 +40,7 @@ describe('ComplianceAndEnforcementComponent', () => {
 
   it('should call service.loadFile with correct arguments in loadFile()', async () => {
     await component.loadFile('456');
-    expect(mockService.loadFile).toHaveBeenCalledWith('456', { withProperty: true });
+    expect(mockService.loadFile).toHaveBeenCalledWith('456', undefined);
   });
 
   it('should complete destroy subject on ngOnDestroy', () => {

alcs-frontend/src/app/features/compliance-and-enforcement/compliance-and-enforcement.component.ts

@@ -1,9 +1,12 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { Subject, takeUntil } from 'rxjs';
 import { detailsRoutes } from './compliance-and-enforcement.module';
 import { ComplianceAndEnforcementDto } from '../../services/compliance-and-enforcement/compliance-and-enforcement.dto';
-import { ComplianceAndEnforcementService } from '../../services/compliance-and-enforcement/compliance-and-enforcement.service';
+import {
+  ComplianceAndEnforcementService,
+  FetchOptions,
+} from '../../services/compliance-and-enforcement/compliance-and-enforcement.service';
 import { ToastService } from '../../services/toast/toast.service';
 
 @Component({
@@ -21,6 +24,7 @@ export class ComplianceAndEnforcementComponent implements OnInit, OnDestroy {
 
   constructor(
     private readonly route: ActivatedRoute,
+    private readonly router: Router,
     private readonly service: ComplianceAndEnforcementService,
     private readonly toastService: ToastService,
   ) {}
@@ -30,12 +34,18 @@ export class ComplianceAndEnforcementComponent implements OnInit, OnDestroy {
       this.file = file ?? undefined;
     });
 
+    this.router.events.pipe(takeUntil(this.$destroy)).subscribe((event) => {
+      if (event instanceof NavigationEnd && this.fileNumber) {
+        this.loadFile(this.fileNumber, { withSubmitters: true });
+      }
+    });
+
     this.route.params.pipe(takeUntil(this.$destroy)).subscribe(async (params) => {
       const { fileNumber } = params;
 
       if (fileNumber) {
         this.fileNumber = fileNumber;
-        this.loadFile(fileNumber);
+        this.loadFile(fileNumber, { withSubmitters: true });
       }
     });
   }
@@ -45,9 +55,9 @@ export class ComplianceAndEnforcementComponent implements OnInit, OnDestroy {
     this.$destroy.complete();
   }
 
-  async loadFile(fileNumber: string) {
+  async loadFile(fileNumber: string, options?: FetchOptions) {
     try {
-      await this.service.loadFile(fileNumber, { withProperty: true });
+      await this.service.loadFile(fileNumber, options);
     } catch (error) {
       console.error('Error loading file:', error);
       this.toastService.showErrorToast('Failed to load file');

alcs-frontend/src/app/features/compliance-and-enforcement/compliance-and-enforcement.module.ts

@@ -12,6 +12,9 @@ import { DetailsOverviewComponent } from './details/overview/details-overview.co
 import { ComplianceAndEnforcementComponent } from './compliance-and-enforcement.component';
 import { CommonModule } from '@angular/common';
 import { DetailsHeaderComponent } from './details/header/details-header.component';
+import { ComplaintReferralComponent } from './details/complaint-referral/complaint-referral.component';
+import { ComplaintReferralOverviewComponent } from './details/complaint-referral/overview/overview.component';
+import { ComplaintReferralSubmittersComponent } from './details/complaint-referral/submitters/submitters.component';
 
 export const detailsRoutes: (Route & { icon?: string; menuTitle?: string })[] = [
   {
@@ -20,6 +23,23 @@ export const detailsRoutes: (Route & { icon?: string; menuTitle?: string })[] =
     icon: 'summarize',
     menuTitle: 'Overview',
   },
+  {
+    path: 'complaint-referral',
+    icon: 'edit_note',
+    menuTitle: 'Complaint / Referral',
+    children: [
+      {
+        path: '',
+        component: ComplaintReferralComponent,
+        data: { editing: null },
+      },
+      {
+        path: 'overview/edit',
+        component: ComplaintReferralComponent,
+        data: { editing: 'overview' },
+      },
+    ],
+  },
 ];
 
 const routes: Routes = [
@@ -45,6 +65,9 @@ const routes: Routes = [
     ComplianceAndEnforcementComponent,
     DetailsHeaderComponent,
     DetailsOverviewComponent,
+    ComplaintReferralComponent,
+    ComplaintReferralOverviewComponent,
+    ComplaintReferralSubmittersComponent,
   ],
   imports: [SharedModule.forRoot(), RouterModule.forChild(routes), MatMomentDateModule, CommonModule, SharedModule],
 })

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/complaint-referral.component.html

@@ -0,0 +1,36 @@
+<ng-container *ngIf="editing === null">
+  <section class="file-section">
+    <app-compliance-and-enforcement-complaint-referral-overview [file]="file" />
+
+    <div class="edit-section-button-container">
+      <a mat-flat-button color="accent" [routerLink]="'overview/edit'" class="edit-section-button">Edit Section</a>
+    </div>
+  </section>
+
+  <section class="file-section">
+    <app-compliance-and-enforcement-complaint-referral-submitters [file]="file" />
+  </section>
+
+  <section class="file-section">
+    <app-compliance-and-enforcement-documents
+      #submissionDocumentsComponent
+      [title]="'Complaint/Referral Submission'"
+      [fileNumber]="fileNumber"
+      [options]="submissionDocumentOptions"
+      [section]="Section.SUBMISSION"
+    />
+  </section>
+</ng-container>
+
+<ng-container *ngIf="editing === 'overview'">
+  <form [formGroup]="form">
+    <section class="form-section">
+      <app-compliance-and-enforcement-overview #overviewComponent [parentForm]="form" [file]="file" />
+    </section>
+
+    <div class="button-container">
+      <a mat-flat-button [routerLink]="'../..'">Cancel</a>
+      <button mat-flat-button color="primary" (click)="save()">Save</button>
+    </div>
+  </form>
+</ng-container>

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/complaint-referral.component.scss

@@ -0,0 +1,36 @@
+@use '../../../../../styles/colors';
+
+h5 {
+  margin: 16px 0 !important;
+}
+
+section {
+  margin: 32px 0;
+}
+
+section.file-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.25);
+  margin: 32px 0;
+}
+
+.button-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 24px;
+}
+
+.edit-section-button-container {
+  display: flex;
+  justify-content: center;
+}
+
+.edit-section-button {
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  text-transform: uppercase;
+}

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/complaint-referral.component.spec.ts

@@ -0,0 +1,125 @@
+import { ComplianceAndEnforcementService } from '../../../../services/compliance-and-enforcement/compliance-and-enforcement.service';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComplaintReferralComponent } from './complaint-referral.component';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ToastService } from '../../../../services/toast/toast.service';
+import { firstValueFrom, of, Subject } from 'rxjs';
+import { ComplianceAndEnforcementDto } from '../../../../services/compliance-and-enforcement/compliance-and-enforcement.dto';
+
+describe('ComplaintReferralComponent', () => {
+  let component: ComplaintReferralComponent;
+  let fixture: ComponentFixture<ComplaintReferralComponent>;
+  let mockActivatedRoute: DeepMocked<ActivatedRoute>;
+  let mockRouter: DeepMocked<Router>;
+  let mockService: DeepMocked<ComplianceAndEnforcementService>;
+  let mockToastService: DeepMocked<ToastService>;
+
+  beforeEach(async () => {
+    mockActivatedRoute = createMock<ActivatedRoute>();
+    mockRouter = createMock<Router>();
+    mockService = createMock<ComplianceAndEnforcementService>();
+    mockToastService = createMock<ToastService>();
+
+    TestBed.configureTestingModule({
+      imports: [],
+      declarations: [ComplaintReferralComponent],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: mockActivatedRoute,
+        },
+        {
+          provide: Router,
+          useValue: mockRouter,
+        },
+        {
+          provide: ComplianceAndEnforcementService,
+          useValue: mockService,
+        },
+        {
+          provide: ToastService,
+          useValue: mockToastService,
+        },
+      ],
+    });
+
+    fixture = TestBed.createComponent(ComplaintReferralComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should set editing from route data on ngOnInit', () => {
+    const dataSubject = new Subject<any>();
+    mockActivatedRoute.data = dataSubject as any;
+    component.ngOnInit();
+    dataSubject.next({ editing: 'overview' });
+    expect(component.editing).toBe('overview');
+  });
+
+  it('should set file, fileNumber, and submissionDocumentOptions.fileId from service.$file', () => {
+    const fileSubject = new Subject<any>();
+    mockService.$file = fileSubject as any;
+    component.ngOnInit();
+    const file = { fileNumber: '123' };
+
+    fileSubject.next(file);
+
+    expect(component.file).toBe(file);
+    expect(component.fileNumber).toBe('123');
+    expect(component.submissionDocumentOptions.fileId).toBe('123');
+  });
+
+  it('should show error toast and not call update if fileNumber is missing on save', async () => {
+    component.fileNumber = undefined;
+    const toastSpy = jest.spyOn(mockToastService, 'showErrorToast');
+
+    await component.save();
+
+    expect(toastSpy).toHaveBeenCalledWith('Error loading file');
+    expect(mockService.update).not.toHaveBeenCalled();
+  });
+
+  it('should call update, show success toast, and navigate on successful save', async () => {
+    component.fileNumber = '456';
+    component.overviewComponent = {
+      $changes: { getValue: () => ({ foo: 'bar' }) },
+    } as any;
+    mockService.update.mockReturnValue(of({} as ComplianceAndEnforcementDto));
+    const toastSpy = jest.spyOn(mockToastService, 'showSuccessToast');
+    const navSpy = jest.spyOn(mockRouter, 'navigate');
+
+    await component.save();
+
+    expect(mockService.update).toHaveBeenCalledWith('456', { foo: 'bar' }, { idType: 'fileNumber' });
+    expect(toastSpy).toHaveBeenCalledWith('File updated successfully');
+    expect(navSpy).toHaveBeenCalled();
+  });
+
+  it('should catch error and not throw if update fails', async () => {
+    component.fileNumber = '789';
+    component.overviewComponent = {
+      $changes: { getValue: () => ({}) },
+    } as any;
+    mockService.update.mockReturnValue({
+      toPromise: () => Promise.reject(new Error('fail')),
+      subscribe: (_: any, error: any) => error(new Error('fail')),
+    } as any);
+    jest.spyOn({ firstValueFrom }, 'firstValueFrom').mockImplementation(() => Promise.reject(new Error('fail')));
+
+    await expect(component.save()).resolves.not.toThrow();
+  });
+
+  it('should complete $destroy on ngOnDestroy', () => {
+    const nextSpy = jest.spyOn(component.$destroy, 'next');
+    const completeSpy = jest.spyOn(component.$destroy, 'complete');
+
+    component.ngOnDestroy();
+
+    expect(nextSpy).toHaveBeenCalled();
+    expect(completeSpy).toHaveBeenCalled();
+  });
+});

alcs-frontend/src/app/features/compliance-and-enforcement/details/complaint-referral/complaint-referral.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { firstValueFrom, Subject, takeUntil } from 'rxjs';
+import { ComplianceAndEnforcementService } from '../../../../services/compliance-and-enforcement/compliance-and-enforcement.service';
+import {
+  ComplianceAndEnforcementDto,
+  UpdateComplianceAndEnforcementDto,
+} from '../../../../services/compliance-and-enforcement/compliance-and-enforcement.dto';
+import { Section } from '../../../../services/compliance-and-enforcement/documents/document.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { submissionDocumentOptions } from '../../draft/draft.component';
+import { OverviewComponent } from '../../overview/overview.component';
+import { ToastService } from '../../../../services/toast/toast.service';
+
+@Component({
+  selector: 'app-complaint-referral',
+  templateUrl: './complaint-referral.component.html',
+  styleUrls: ['./complaint-referral.component.scss'],
+})
+export class ComplaintReferralComponent implements OnInit, OnDestroy {
+  $destroy = new Subject<void>();
+
+  Section = Section;
+
+  @ViewChild(OverviewComponent) overviewComponent?: OverviewComponent;
+
+  fileNumber?: string;
+  file?: ComplianceAndEnforcementDto;
+
+  form = new FormGroup({ overview: new FormGroup({}), submitter: new FormGroup({}), property: new FormGroup({}) });
+
+  editing: string | null = null;
+
+  submissionDocumentOptions = submissionDocumentOptions;
+
+  constructor(
+    private readonly route: ActivatedRoute,
+    private readonly router: Router,
+    private readonly service: ComplianceAndEnforcementService,
+    private readonly toastService: ToastService,
+  ) {}
+
+  ngOnInit(): void {
+    this.route.data.pipe(takeUntil(this.$destroy)).subscribe(async (data) => {
+      this.editing = data['editing'];
+    });
+
+    this.service.$file.pipe(takeUntil(this.$destroy)).subscribe((file) => {
+      if (file) {
+        this.file = file;
+        this.fileNumber = file.fileNumber;
+        this.submissionDocumentOptions.fileId = file.fileNumber;
+      }
+    });
+  }
+
+  async save() {
+    const updateDto: UpdateComplianceAndEnforcementDto = this.overviewComponent?.$changes.getValue() ?? {};
+
+    if (!this.fileNumber) {
+      console.error('Error loading file by file number. File number not defined.');
+      this.toastService.showErrorToast('Error loading file');
+      return;
+    }
+
+    try {
+      await firstValueFrom(this.service.update(this.fileNumber, updateDto, { idType: 'fileNumber' }));
+      this.toastService.showSuccessToast('File updated successfully');
+      this.router.navigate(['../..'], { relativeTo: this.route });
+    } catch (error) {
+      console.error('Error updating file:', error);
+      this.toastService.showErrorToast('Error loading file');
+    }
+  }
+
+  async ngOnDestroy() {
+    this.$destroy.next();
+    this.$destroy.complete();
+  }
+}