Merge pull request #2533 from bcgov/2417-add-many-submitters-edit-submitter-section

2417 add many submitters edit submitter section

Author: trslater

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

@@ -15,6 +15,7 @@ import { DetailsHeaderComponent } from './details/header/details-header.componen
 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';
+import { AddSubmitterDialogComponent } from './details/complaint-referral/submitters/add-submitter-dialog/add-submitter-dialog.component';
 
 export const detailsRoutes: (Route & { icon?: string; menuTitle?: string })[] = [
   {
@@ -38,6 +39,11 @@ export const detailsRoutes: (Route & { icon?: string; menuTitle?: string })[] =
         component: ComplaintReferralComponent,
         data: { editing: 'overview' },
       },
+      {
+        path: 'submitters/edit',
+        component: ComplaintReferralComponent,
+        data: { editing: 'submitters' },
+      },
     ],
   },
 ];
@@ -68,6 +74,7 @@ const routes: Routes = [
     ComplaintReferralComponent,
     ComplaintReferralOverviewComponent,
     ComplaintReferralSubmittersComponent,
+    AddSubmitterDialogComponent,
   ],
   imports: [SharedModule.forRoot(), RouterModule.forChild(routes), MatMomentDateModule, CommonModule, SharedModule],
 })

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

@@ -1,5 +1,7 @@
 <ng-container *ngIf="editing === null">
   <section class="file-section">
+    <h3>Complaint / Referral Overview</h3>
+
     <app-compliance-and-enforcement-complaint-referral-overview [file]="file" />
 
     <div class="edit-section-button-container">
@@ -8,7 +10,16 @@
   </section>
 
   <section class="file-section">
+    <div class="submitters-header">
+      <h3>Submitters</h3>
+      <button mat-flat-button color="primary" type="button" (click)="openNewSubmitterDialog()">+ Submitter</button>
+    </div>
+
     <app-compliance-and-enforcement-complaint-referral-submitters [file]="file" />
+
+    <div class="edit-section-button-container">
+      <a mat-flat-button color="accent" [routerLink]="'submitters/edit'" class="edit-section-button">Edit Section</a>
+    </div>
   </section>
 
   <section class="file-section">
@@ -32,7 +43,36 @@ <h3>Complaint / Referral > Edit Overview</h3>
 
     <div class="button-container">
       <a mat-stroked-button color="warn" [routerLink]="'../..'">Cancel</a>
-      <button mat-flat-button color="primary" (click)="save()">Save</button>
+      <button mat-flat-button color="primary" (click)="saveOverview()">Save</button>
+    </div>
+  </form>
+</ng-container>
+
+<ng-container *ngIf="editing === 'submitters'">
+  <form [formGroup]="form">
+    <section class="form-section">
+      <h3>Complaint / Referral > Edit Submitters</h3>
+
+      <div class="submitter-container" *ngFor="let submitter of file?.submitters; let i = index">
+        <app-compliance-and-enforcement-submitter
+          #submitterComponents
+          [title]="'#' + (i + 1)"
+          [showDeleteButton]="true"
+          [submitter]="submitter"
+          [initialSubmissionType]="file?.initialSubmissionType ?? undefined"
+          (deleteButtonClicked)="deleteSubmitter(submitter.uuid)"
+          (formReady)="registerFormGroup('submitter-' + i, $event.formGroup)"
+        />
+      </div>
+    </section>
+
+    <button mat-flat-button color="accent" type="button" (click)="openNewSubmitterDialog()">
+      + Add another submitter
+    </button>
+
+    <div class="button-container">
+      <a mat-stroked-button color="warn" [routerLink]="'../..'">Cancel</a>
+      <button mat-flat-button color="primary" [disabled]="form.invalid" (click)="saveSubmitters()">Save</button>
     </div>
   </form>
 </ng-container>

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

@@ -8,6 +8,12 @@ section {
   margin: 32px 0;
 }
 
+.submitter-container {
+  padding: 24px;
+  border: 1px solid colors.$grey;
+  border-radius: 5px;
+}
+
 section.file-section {
   display: flex;
   flex-direction: column;
@@ -18,6 +24,12 @@ section.file-section {
   margin: 32px 0;
 }
 
+.form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
 .button-container {
   display: flex;
   justify-content: space-between;
@@ -40,3 +52,9 @@ a[mat-stroked-button] {
   font-weight: 700 !important;
   text-transform: uppercase;
 }
+
+.submitters-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

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

@@ -6,6 +6,7 @@ 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';
+import { HttpClient } from '@angular/common/http';
 
 describe('ComplaintReferralComponent', () => {
   let component: ComplaintReferralComponent;
@@ -14,12 +15,14 @@ describe('ComplaintReferralComponent', () => {
   let mockRouter: DeepMocked<Router>;
   let mockService: DeepMocked<ComplianceAndEnforcementService>;
   let mockToastService: DeepMocked<ToastService>;
+  let mockHttpClient: DeepMocked<HttpClient>;
 
   beforeEach(async () => {
     mockActivatedRoute = createMock<ActivatedRoute>();
     mockRouter = createMock<Router>();
     mockService = createMock<ComplianceAndEnforcementService>();
     mockToastService = createMock<ToastService>();
+    mockHttpClient = createMock<HttpClient>();
 
     TestBed.configureTestingModule({
       imports: [],
@@ -41,6 +44,10 @@ describe('ComplaintReferralComponent', () => {
           provide: ToastService,
           useValue: mockToastService,
         },
+        {
+          provide: HttpClient,
+          useValue: mockHttpClient,
+        },
       ],
     });
 
@@ -77,7 +84,7 @@ describe('ComplaintReferralComponent', () => {
     component.fileNumber = undefined;
     const toastSpy = jest.spyOn(mockToastService, 'showErrorToast');
 
-    await component.save();
+    await component.saveOverview();
 
     expect(toastSpy).toHaveBeenCalledWith('Error loading file');
     expect(mockService.update).not.toHaveBeenCalled();
@@ -92,10 +99,10 @@ describe('ComplaintReferralComponent', () => {
     const toastSpy = jest.spyOn(mockToastService, 'showSuccessToast');
     const navSpy = jest.spyOn(mockRouter, 'navigate');
 
-    await component.save();
+    await component.saveOverview();
 
     expect(mockService.update).toHaveBeenCalledWith('456', { foo: 'bar' }, { idType: 'fileNumber' });
-    expect(toastSpy).toHaveBeenCalledWith('File updated successfully');
+    expect(toastSpy).toHaveBeenCalledWith('Overview updated successfully');
     expect(navSpy).toHaveBeenCalled();
   });
 
@@ -110,7 +117,7 @@ describe('ComplaintReferralComponent', () => {
     } as any);
     jest.spyOn({ firstValueFrom }, 'firstValueFrom').mockImplementation(() => Promise.reject(new Error('fail')));
 
-    await expect(component.save()).resolves.not.toThrow();
+    await expect(component.saveOverview()).resolves.not.toThrow();
   });
 
   it('should complete $destroy on ngOnDestroy', () => {

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

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, QueryList, ViewChild, ViewChildren } 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';
@@ -11,6 +11,12 @@ 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';
+import { SubmitterComponent } from '../../submitter/submitter.component';
+import { UpdateComplianceAndEnforcementSubmitterDto } from '../../../../services/compliance-and-enforcement/submitter/submitter.dto';
+import { ComplianceAndEnforcementSubmitterService } from '../../../../services/compliance-and-enforcement/submitter/submitter.service';
+import { AddSubmitterDialogComponent } from './submitters/add-submitter-dialog/add-submitter-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { ConfirmationDialogService } from '../../../../shared/confirmation-dialog/confirmation-dialog.service';
 
 @Component({
   selector: 'app-complaint-referral',
@@ -23,11 +29,12 @@ export class ComplaintReferralComponent implements OnInit, OnDestroy {
   Section = Section;
 
   @ViewChild(OverviewComponent) overviewComponent?: OverviewComponent;
+  @ViewChildren(SubmitterComponent) submitterComponents?: QueryList<SubmitterComponent>;
 
   fileNumber?: string;
   file?: ComplianceAndEnforcementDto;
 
-  form = new FormGroup({ overview: new FormGroup({}), submitter: new FormGroup({}), property: new FormGroup({}) });
+  form = new FormGroup({});
 
   editing: string | null = null;
 
@@ -37,7 +44,10 @@ export class ComplaintReferralComponent implements OnInit, OnDestroy {
     private readonly route: ActivatedRoute,
     private readonly router: Router,
     private readonly service: ComplianceAndEnforcementService,
+    private readonly submitterService: ComplianceAndEnforcementSubmitterService,
     private readonly toastService: ToastService,
+    private readonly confirmationService: ConfirmationDialogService,
+    public dialog: MatDialog,
   ) {}
 
   ngOnInit(): void {
@@ -54,7 +64,7 @@ export class ComplaintReferralComponent implements OnInit, OnDestroy {
     });
   }
 
-  async save() {
+  async saveOverview() {
     const updateDto: UpdateComplianceAndEnforcementDto = this.overviewComponent?.$changes.getValue() ?? {};
 
     if (!this.fileNumber) {
@@ -65,15 +75,88 @@ export class ComplaintReferralComponent implements OnInit, OnDestroy {
 
     try {
       await firstValueFrom(this.service.update(this.fileNumber, updateDto, { idType: 'fileNumber' }));
-      this.toastService.showSuccessToast('File updated successfully');
+      this.toastService.showSuccessToast('Overview updated successfully');
       this.router.navigate(['../..'], { relativeTo: this.route });
     } catch (error) {
-      console.error('Error updating file:', error);
-      this.toastService.showErrorToast('Error loading file');
+      console.error('Error updating overview:', error);
+      this.toastService.showErrorToast('Error updating overview');
+    }
+  }
+
+  async saveSubmitters() {
+    if (!this.submitterComponents) {
+      return;
+    }
+
+    const submitters: { uuid: string; dto: UpdateComplianceAndEnforcementSubmitterDto }[] = this.submitterComponents
+      .toArray()
+      .flatMap((submitterComponent) => {
+        const [uuid, dto] = submitterComponent.$changes.getValue();
+
+        return uuid ? [{ uuid, dto }] : [];
+      });
+
+    try {
+      await firstValueFrom(this.submitterService.bulkUpdate(submitters));
+      this.toastService.showSuccessToast('Submitters updated successfully');
+      this.router.navigate(['../..'], { relativeTo: this.route });
+    } catch (error) {
+      console.error('Error updating submitters:', error);
+      this.toastService.showErrorToast('Error updating submitters');
     }
   }
 
-  async ngOnDestroy() {
+  async openNewSubmitterDialog() {
+    this.dialog
+      .open(AddSubmitterDialogComponent, {
+        minWidth: '600px',
+        maxWidth: '800px',
+        width: '70%',
+        data: {
+          fileUuid: this.file?.uuid,
+          initialSubmissionType: this.file?.initialSubmissionType,
+          service: this.submitterService,
+        },
+      })
+      .afterClosed()
+      .subscribe(async (saveSuccessful) => {
+        if (saveSuccessful) {
+          if (this.fileNumber) {
+            await this.service.loadFile(this.fileNumber, { withSubmitters: true });
+          }
+        }
+      });
+  }
+
+  async deleteSubmitter(uuid: string) {
+    this.confirmationService
+      .openDialog({
+        body: 'Are you sure you want to delete this submitter?',
+      })
+      .subscribe(async (isConfirmed) => {
+        if (isConfirmed) {
+          try {
+            await this.submitterService.delete(uuid);
+            this.toastService.showSuccessToast('Submitter deleted');
+
+            if (this.fileNumber) {
+              this.service.loadFile(this.fileNumber, { withSubmitters: true });
+            }
+          } catch (error) {
+            console.error(error);
+            this.toastService.showErrorToast('Failed to delete submitter');
+          }
+        }
+      });
+  }
+
+  registerFormGroup(name: string, formGroup: FormGroup) {
+    setTimeout(() => {
+      this.form.addControl(name, formGroup);
+    });
+  }
+
+  ngOnDestroy() {
     this.$destroy.next();
     this.$destroy.complete();
   }

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

@@ -1,5 +1,3 @@
-<h3>Complaint / Referral Overview</h3>
-
 <ng-template #noData>
   <div class="no-data">No Data</div>
 </ng-template>

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

@@ -11,7 +11,6 @@
 
   background-color: colors.$grey-light;
   padding: 24px;
-  margin-top: 24px;
 }
 
 .field {

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

@@ -0,0 +1,16 @@
+<form [formGroup]="form">
+  <app-compliance-and-enforcement-submitter
+    #submitterComponent
+    [title]="'Add Submitter'"
+    [submitter]="undefined"
+    [initialSubmissionType]="data?.initialSubmissionType"
+    (formReady)="registerFormGroup($event)"
+  />
+
+  <div class="button-container">
+    <button type="button" mat-stroked-button color="warn" (click)="close()">Cancel</button>
+    <button type="button" mat-flat-button color="primary" (click)="addSubmitter()" [disabled]="form.invalid">
+      Save
+    </button>
+  </div>
+</form>

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

@@ -0,0 +1,10 @@
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px;
+}
+
+.button-container {
+  display: flex;
+}