Add Notification Parcel UI

portal-frontend/src/app/features/notifications/edit-submission/edit-submission.component.html

@@ -31,7 +31,15 @@ <h6 *ngIf="notificationSubmission">Notice of Intent ID: {{ notificationSubmissio
 >
   <cdk-step label="Parcel Details">
     <ng-container *ngTemplateOutlet="header"></ng-container>
-    <div *ngIf="cdkStepper.selectedIndex === steps.Parcel"></div>
+    <div *ngIf="cdkStepper.selectedIndex === steps.Parcel">
+      <app-notification-parcel-details
+        [$notificationSubmission]='$notificationSubmission'
+        [showErrors]="showValidationErrors"
+        (navigateToStep)="switchStep($event)"
+        (componentInitialized)="onParcelDetailsInitialized()"
+        (exit)="onExit()">
+      </app-notification-parcel-details>
+    </div>
   </cdk-step>
   <cdk-step label="Identify Transferees">
     <ng-container *ngTemplateOutlet="header"></ng-container>

portal-frontend/src/app/features/notifications/edit-submission/edit-submission.component.ts

@@ -4,16 +4,13 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, combineLatest, Observable, of, Subject, takeUntil } from 'rxjs';
 import { NoticeOfIntentDocumentDto } from '../../../services/notice-of-intent-document/notice-of-intent-document.dto';
-import {
-  NOI_SUBMISSION_STATUS,
-  NoticeOfIntentSubmissionDetailedDto,
-} from '../../../services/notice-of-intent-submission/notice-of-intent-submission.dto';
 import { NotificationSubmissionDetailedDto } from '../../../services/notification-submission/notification-submission.dto';
 import { NotificationSubmissionService } from '../../../services/notification-submission/notification-submission.service';
 import { ToastService } from '../../../services/toast/toast.service';
 import { CustomStepperComponent } from '../../../shared/custom-stepper/custom-stepper.component';
 import { OverlaySpinnerService } from '../../../shared/overlay-spinner/overlay-spinner.service';
 import { scrollToElement } from '../../../shared/utils/scroll-helper';
+import { ParcelDetailsComponent } from './parcels/parcel-details.component';
 
 export enum EditNotificationSteps {
   Parcel = 0,
@@ -43,6 +40,7 @@ export class EditSubmissionComponent implements OnDestroy, AfterViewInit {
   showValidationErrors = false;
 
   @ViewChild('cdkStepper') public customStepper!: CustomStepperComponent;
+  @ViewChild(ParcelDetailsComponent) parcelDetailsComponent!: ParcelDetailsComponent;
 
   constructor(
     private notificationSubmissionService: NotificationSubmissionService,
@@ -116,9 +114,20 @@ export class EditSubmissionComponent implements OnDestroy, AfterViewInit {
     await this.router.navigateByUrl(`notification/${this.fileId}/edit/${index}`);
   }
 
+  onParcelDetailsInitialized() {
+    if (this.expandedParcelUuid && this.parcelDetailsComponent) {
+      this.parcelDetailsComponent.openParcel(this.expandedParcelUuid);
+      this.expandedParcelUuid = undefined;
+    }
+  }
+
   async saveSubmission(step: number) {
     switch (step) {
       case EditNotificationSteps.Parcel:
+        if (this.parcelDetailsComponent) {
+          await this.parcelDetailsComponent.onSave();
+        }
+        break;
       case EditNotificationSteps.Transferees:
       case EditNotificationSteps.PrimaryContact:
       case EditNotificationSteps.Government:

portal-frontend/src/app/features/notifications/edit-submission/edit-submission.module.ts

@@ -3,8 +3,11 @@ import { CommonModule } from '@angular/common';
 import { RouterModule, Routes } from '@angular/router';
 import { CanDeactivateGuard } from '../../../shared/guard/can-deactivate.guard';
 import { SharedModule } from '../../../shared/shared.module';
-import { EditSubmissionBaseModule } from './edit-submission-base.module';
 import { EditSubmissionComponent } from './edit-submission.component';
+import { DeleteParcelDialogComponent } from './parcels/delete-parcel/delete-parcel-dialog.component';
+import { ParcelDetailsComponent } from './parcels/parcel-details.component';
+import { ParcelEntryConfirmationDialogComponent } from './parcels/parcel-entry/parcel-entry-confirmation-dialog/parcel-entry-confirmation-dialog.component';
+import { ParcelEntryComponent } from './parcels/parcel-entry/parcel-entry.component';
 import { StepComponent } from './step.partial';
 
 const routes: Routes = [
@@ -20,7 +23,14 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  declarations: [StepComponent],
-  imports: [CommonModule, SharedModule, RouterModule.forChild(routes), EditSubmissionBaseModule],
+  declarations: [
+    StepComponent,
+    EditSubmissionComponent,
+    ParcelDetailsComponent,
+    ParcelEntryComponent,
+    ParcelEntryConfirmationDialogComponent,
+    DeleteParcelDialogComponent,
+  ],
+  imports: [CommonModule, SharedModule, RouterModule.forChild(routes)],
 })
 export class EditSubmissionModule {}

portal-frontend/src/app/features/notifications/edit-submission/files-step.partial.ts

@@ -5,7 +5,6 @@ import { NoticeOfIntentDocumentDto } from '../../../services/notice-of-intent-do
 import { NoticeOfIntentDocumentService } from '../../../services/notice-of-intent-document/notice-of-intent-document.service';
 import { DOCUMENT_TYPE } from '../../../shared/dto/document.dto';
 import { FileHandle } from '../../../shared/file-drag-drop/drag-drop.directive';
-import { RemoveFileConfirmationDialogComponent } from '../../applications/alcs-edit-submission/remove-file-confirmation-dialog/remove-file-confirmation-dialog.component';
 import { StepComponent } from './step.partial';
 
 @Component({
@@ -42,21 +41,6 @@ export abstract class FilesStepComponent extends StepComponent {
   }
 
   async onDeleteFile($event: NoticeOfIntentDocumentDto) {
-    if (this.draftMode) {
-      this.dialog
-        .open(RemoveFileConfirmationDialogComponent)
-        .beforeClosed()
-        .subscribe(async (didConfirm) => {
-          if (didConfirm) {
-            this.deleteFile($event);
-          }
-        });
-    } else {
-      await this.deleteFile($event);
-    }
-  }
-
-  private async deleteFile($event: NoticeOfIntentDocumentDto) {
     await this.noticeOfIntentDocumentService.deleteExternalFile($event.uuid);
     if (this.fileId) {
       const documents = await this.noticeOfIntentDocumentService.getByFileId(this.fileId);

portal-frontend/src/app/features/notifications/edit-submission/parcels/delete-parcel/delete-parcel-dialog.component.html

@@ -0,0 +1,36 @@
+<ng-template #startStepControls>
+  <button mat-stroked-button color="primary" (click)="onCancel()">cancel</button>
+  <button mat-flat-button color="primary" (click)="next()">continue</button>
+</ng-template>
+
+<ng-template #lastStepControls>
+  <button mat-stroked-button color="primary" (click)="back()">back</button>
+  <button mat-flat-button color="primary" (click)="onDelete()">confirm</button>
+</ng-template>
+
+<div mat-dialog-title>
+  <h4>Delete Parcel #{{ parcelNumber }}</h4>
+</div>
+
+<div mat-dialog-content class='content'>
+  <div *ngIf="stepIdx === warningStep">
+    <app-warning-banner>
+      <b>Warning:</b> All information relevant to this parcel, including information added in subsequent steps, will be
+      deleted.
+    </app-warning-banner>
+
+    <div class="step-controls">
+      <ng-container *ngTemplateOutlet="startStepControls"></ng-container>
+    </div>
+  </div>
+
+  <div *ngIf="stepIdx === confirmationStep">
+    <div class="confirm-content">
+      <h5>Are you sure you want to delete this? This action cannot be undone.</h5>
+    </div>
+
+    <div class="step-controls">
+      <ng-container *ngTemplateOutlet="lastStepControls"></ng-container>
+    </div>
+  </div>
+</div>

portal-frontend/src/app/features/notifications/edit-submission/parcels/delete-parcel/delete-parcel-dialog.component.scss

@@ -0,0 +1,24 @@
+@use '../../../../../../styles/functions' as *;
+
+.margin-bottom-1 {
+  margin-bottom: rem(16);
+}
+
+.step-controls {
+  display: flex;
+  justify-content: space-between;
+}
+
+.confirm-content {
+  margin: rem(24) 0;
+}
+
+@media screen and (min-width: $desktopBreakpoint) {
+  .step-controls {
+    justify-content: flex-end;
+
+    button {
+      margin-left: rem(25) !important;
+    }
+  }
+}

portal-frontend/src/app/features/notifications/edit-submission/parcels/delete-parcel/delete-parcel-dialog.component.spec.ts

@@ -0,0 +1,47 @@
+import { HttpClient } from '@angular/common/http';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
+import { NoticeOfIntentParcelService } from '../../../../../services/notice-of-intent-parcel/notice-of-intent-parcel.service';
+import { DeleteParcelDialogComponent } from './delete-parcel-dialog.component';
+
+describe('DeleteParcelDialogComponent', () => {
+  let component: DeleteParcelDialogComponent;
+  let fixture: ComponentFixture<DeleteParcelDialogComponent>;
+  let mockHttpClient: DeepMocked<HttpClient>;
+  let mockNoiParcelService: DeepMocked<NoticeOfIntentParcelService>;
+
+  beforeEach(async () => {
+    mockHttpClient = createMock();
+    mockNoiParcelService = createMock();
+
+    await TestBed.configureTestingModule({
+      declarations: [DeleteParcelDialogComponent],
+      providers: [
+        {
+          provide: HttpClient,
+          useValue: mockHttpClient,
+        },
+        {
+          provide: NoticeOfIntentParcelService,
+          useValue: mockNoiParcelService,
+        },
+        {
+          provide: MatDialogRef,
+          useValue: {},
+        },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DeleteParcelDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

portal-frontend/src/app/features/notifications/edit-submission/parcels/delete-parcel/delete-parcel-dialog.component.ts

@@ -0,0 +1,52 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { NoticeOfIntentParcelService } from '../../../../../services/notice-of-intent-parcel/notice-of-intent-parcel.service';
+
+export enum NotificationParcelDeleteStepsEnum {
+  warning = 0,
+  confirmation = 1,
+}
+
+@Component({
+  selector: 'app-delete-parcel-dialog',
+  templateUrl: './delete-parcel-dialog.component.html',
+  styleUrls: ['./delete-parcel-dialog.component.scss'],
+})
+export class DeleteParcelDialogComponent {
+  parcelUuid!: string;
+  parcelNumber!: string;
+
+  stepIdx = 0;
+
+  warningStep = NotificationParcelDeleteStepsEnum.warning;
+  confirmationStep = NotificationParcelDeleteStepsEnum.confirmation;
+
+  constructor(
+    private noticeOfIntentParcelService: NoticeOfIntentParcelService,
+    private dialogRef: MatDialogRef<DeleteParcelDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DeleteParcelDialogComponent
+  ) {
+    this.parcelUuid = data.parcelUuid;
+    this.parcelNumber = data.parcelNumber;
+  }
+
+  async next() {
+    this.stepIdx += 1;
+  }
+
+  async back() {
+    this.stepIdx -= 1;
+  }
+
+  async onCancel(dialogResult: boolean = false) {
+    this.dialogRef.close(dialogResult);
+  }
+
+  async onDelete() {
+    const result = await this.noticeOfIntentParcelService.deleteMany([this.parcelUuid]);
+
+    if (result) {
+      this.onCancel(true);
+    }
+  }
+}

portal-frontend/src/app/features/notifications/edit-submission/parcels/parcel-details.component.html

@@ -0,0 +1,57 @@
+<div>
+  <div class="step-description">
+    <h3>Identify Parcels Under SRW</h3>
+    <p>Provide parcel identification and registered ownership information for each parcel.</p>
+    <p>*All fields are required unless stated optional.</p>
+  </div>
+  <mat-expansion-panel
+    *ngFor="let parcel of parcels; let parcelInd = index"
+    [expanded]="
+      parcels.length === 1 || (newParcelAdded && parcelInd === parcels.length - 1) || parcel.uuid === expandedParcel
+    "
+    (opened)="openParcel(parcel.uuid)"
+  >
+    <mat-expansion-panel-header>
+      <mat-panel-title> Parcel #{{ parcelInd + 1 }} Details & Owner Information </mat-panel-title>
+    </mat-expansion-panel-header>
+
+    <app-notification-parcel-entry
+      [parcel]="parcel"
+      [fileId]="fileId"
+      [submissionUuid]="submissionUuid"
+      [showErrors]="showErrors"
+      (onFormGroupChange)="onParcelFormChange($event)"
+    ></app-notification-parcel-entry>
+
+    <div>
+      <div class="flex-evenly-wrap parcel-buttons-wrappers">
+        <button class="margin-top-1-half" mat-stroked-button color="primary" (click)="onSave()">
+          Save Parcel #{{ parcelInd + 1 }} Details & Owner Information
+        </button>
+        <button
+          class="margin-top-1-half"
+          *ngIf="parcels.length > 1"
+          mat-stroked-button
+          color="accent"
+          (click)="onDelete(parcel.uuid, parcelInd + 1)"
+        >
+          Delete Parcel #{{ parcelInd + 1 }} Details
+        </button>
+      </div>
+    </div>
+  </mat-expansion-panel>
+
+  <div>
+    <button mat-stroked-button color="primary" (click)="onAddParcel()">Add another parcel</button>
+  </div>
+
+  <div class="button-container">
+    <button (click)="onSaveExit()" mat-stroked-button color="accent">Save and Exit</button>
+    <div>
+      <div></div>
+      <button mat-flat-button color="primary" (click)="onNavigateToStep(currentStep + 1)">
+        Next<span class="mobile-hidden"> Step</span>
+      </button>
+    </div>
+  </div>
+</div>