Merge pull request #963 from bcgov/feature/ALCS-787

Add Notification Detail Page

alcs-frontend/src/app/app-routing.module.ts

@@ -45,6 +45,14 @@ const routes: Routes = [
     loadChildren: () =>
       import('./features/notice-of-intent/notice-of-intent.module').then((m) => m.NoticeOfIntentModule),
   },
+  {
+    path: 'notification',
+    canActivate: [HasRolesGuard],
+    data: {
+      roles: ROLES_ALLOWED_APPLICATIONS,
+    },
+    loadChildren: () => import('./features/notification/notification.module').then((m) => m.NotificationModule),
+  },
   {
     path: 'schedule',
     canActivate: [HasRolesGuard],

alcs-frontend/src/app/features/notification/applicant-info/applicant-info.component.html

@@ -0,0 +1,10 @@
+<div class="applicant-info">
+  <div *ngIf="notification && submission">
+    <app-notification-details
+      [submission]="submission"
+      [fileNumber]="fileNumber"
+      [isSubmittedToAlc]="isSubmittedToAlc"
+      [showEdit]="true"
+    ></app-notification-details>
+  </div>
+</div>

alcs-frontend/src/app/features/notification/applicant-info/applicant-info.component.scss

@@ -0,0 +1,10 @@
+.applicant-info {
+    & > div {
+      margin: 32px 0;
+    }
+  }
+
+  .subheading1 {
+    margin-bottom: 4px !important;
+  }
+

alcs-frontend/src/app/features/notification/applicant-info/applicant-info.component.spec.ts

@@ -0,0 +1,40 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
+import { BehaviorSubject } from 'rxjs';
+import { NotificationDetailService } from '../../../services/notification/notification-detail.service';
+import { NotificationDto } from '../../../services/notification/notification.dto';
+import { ToastService } from '../../../services/toast/toast.service';
+
+import { ApplicantInfoComponent } from './applicant-info.component';
+
+describe('ApplicantInfoComponent', () => {
+  let component: ApplicantInfoComponent;
+  let fixture: ComponentFixture<ApplicantInfoComponent>;
+  let mockAppDetailService: DeepMocked<NotificationDetailService>;
+  let mockToastService: DeepMocked<ToastService>;
+
+  beforeEach(async () => {
+    mockAppDetailService = createMock();
+    mockAppDetailService.$notification = new BehaviorSubject<NotificationDto | undefined>(undefined);
+
+    await TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      declarations: [ApplicantInfoComponent],
+      providers: [
+        { provide: NotificationDetailService, useValue: mockAppDetailService },
+        { provide: ToastService, useValue: mockToastService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ApplicantInfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alcs-frontend/src/app/features/notification/applicant-info/applicant-info.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subject, takeUntil } from 'rxjs';
+import { NotificationDetailService } from '../../../services/notification/notification-detail.service';
+import { NotificationSubmissionService } from '../../../services/notification/notification-submission/notification-submission.service';
+import { NotificationDto, NotificationSubmissionDetailedDto } from '../../../services/notification/notification.dto';
+import { DOCUMENT_TYPE } from '../../../shared/document/document.dto';
+
+@Component({
+  selector: 'app-applicant-info',
+  templateUrl: './applicant-info.component.html',
+  styleUrls: ['./applicant-info.component.scss'],
+})
+export class ApplicantInfoComponent implements OnInit, OnDestroy {
+  fileNumber: string = '';
+  applicant: string = '';
+  destroy = new Subject<void>();
+  DOCUMENT_TYPE = DOCUMENT_TYPE;
+  notification: NotificationDto | undefined;
+  submission?: NotificationSubmissionDetailedDto = undefined;
+  isSubmittedToAlc = false;
+
+  constructor(
+    private notificationDetailService: NotificationDetailService,
+    private notificationSubmissionService: NotificationSubmissionService
+  ) {}
+
+  ngOnInit(): void {
+    this.notificationDetailService.$notification.pipe(takeUntil(this.destroy)).subscribe(async (notification) => {
+      if (notification) {
+        this.notification = notification;
+        this.fileNumber = notification.fileNumber;
+
+        this.submission = await this.notificationSubmissionService.fetchSubmission(this.fileNumber);
+        this.isSubmittedToAlc = !!notification.dateSubmittedToAlc;
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy.next();
+    this.destroy.complete();
+  }
+}

alcs-frontend/src/app/features/notification/applicant-info/notification-details/notification-details.component.html

@@ -0,0 +1,129 @@
+<section>
+  <app-parcel *ngIf="files && submission" [notificationSubmission]="submission"></app-parcel>
+</section>
+<section>
+  <h3>Transferees</h3>
+  <div *ngIf="submission" class="review-table">
+    <div class="transferee-table full-width">
+      <div class="subheading2">Type</div>
+      <div class="subheading2">Full Name</div>
+      <div class="subheading2">Organization</div>
+      <div class="subheading2">Phone</div>
+      <div class="subheading2">Email</div>
+      <ng-container *ngFor="let transferee of submission.transferees">
+        <div>{{ transferee.type.label }}</div>
+        <div>{{ transferee.displayName }}</div>
+        <div>
+          {{ transferee.organizationName }}
+          <app-no-data *ngIf="!transferee.organizationName"></app-no-data>
+        </div>
+        <div>
+          <span *ngIf="transferee.phoneNumber">{{ transferee.phoneNumber | mask : '(000) 000-0000' }}</span>
+        </div>
+        <div>{{ transferee.email }}</div>
+      </ng-container>
+    </div>
+  </div>
+</section>
+<section>
+  <h3>Primary Contact Information</h3>
+  <div *ngIf="submission" class="review-table">
+    <div class="subheading2 grid-1">Type</div>
+    <div class="grid-double">
+      {{ submission.contactFirstName }}
+      <app-no-data *ngIf="!submission.contactFirstName"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Last Name</div>
+    <div class="grid-double">
+      {{ submission.contactLastName }}
+      <app-no-data *ngIf="!submission.contactLastName"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Organization</div>
+    <div class="grid-double">
+      {{ submission.contactOrganization }}
+      <app-no-data *ngIf="!submission.contactOrganization"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Phone</div>
+    <div class="grid-double">
+      {{ submission.contactPhone }}
+      <app-no-data *ngIf="!submission.contactPhone"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Email</div>
+    <div class="grid-double">
+      {{ submission.contactEmail }}
+      <app-no-data *ngIf="!submission.contactEmail"></app-no-data>
+    </div>
+  </div>
+</section>
+<section *ngIf="showFullApp">
+  <h3>Proposal</h3>
+  <div *ngIf="submission" class="review-table">
+    <div class="subheading2 grid-1">Submitter’s File Number</div>
+    <div class="grid-double">
+      {{ submission.submittersFileNumber }}
+      <app-no-data *ngIf="!submission.submittersFileNumber"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">What is the purpose of the SRW?</div>
+    <div class="grid-double">
+      {{ submission.purpose }}
+      <app-no-data *ngIf="!submission.purpose"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Total area of the SRW</div>
+    <div class="grid-double">
+      {{ submission.totalArea }}
+      <app-no-data *ngIf="!submission.totalArea"></app-no-data>
+    </div>
+    <div class="subheading2 grid-1">Upload Terms of the SRW</div>
+    <div class="grid-double">
+      <div *ngFor="let document of srwTerms">
+        <a (click)="openFile(document.uuid)">
+          {{ document.fileName }}
+        </a>
+      </div>
+    </div>
+    <div class="subheading2 grid-1">Is there a survey plan associated with the SRW?</div>
+    <div class="grid-double">
+      {{ submission.hasSurveyPlan ? 'Yes' : 'No' }}
+    </div>
+    <div *ngIf="submission.hasSurveyPlan" class="full-width survey-plan-table">
+      <div class="subheading2">File Name</div>
+      <div class="subheading2">Survey Plan Number</div>
+      <div class="subheading2">Control Number</div>
+      <ng-container *ngFor="let document of surveyPlans">
+        <div>
+          <a (click)="openFile(document.uuid)">
+            {{ document.fileName }}
+          </a>
+        </div>
+        <div>
+          {{ document.surveyPlanNumber }}
+        </div>
+        <div>
+          {{ document.controlNumber }}
+        </div>
+      </ng-container>
+    </div>
+  </div>
+</section>
+<section *ngIf="showFullApp">
+  <h3>Optional Documents</h3>
+  <div *ngIf="submission" class="review-table">
+    <div class="other-attachments full-width">
+      <div class="grid-1 subheading2">Type</div>
+      <div class="grid-2 subheading2">Description</div>
+      <div class="grid-3 subheading2">File Name</div>
+      <ng-container *ngFor="let file of otherFiles">
+        <div class="grid-1">
+          {{ file.type?.label }}
+        </div>
+        <div class="grid-2">
+          {{ file.description }}
+        </div>
+        <div class="grid-3">
+          <a (click)="openFile(file.uuid)">{{ file.fileName }}</a>
+        </div>
+      </ng-container>
+      <div *ngIf="otherFiles.length === 0" class="full-width">No optional attachments</div>
+    </div>
+  </div>
+</section>

alcs-frontend/src/app/features/notification/applicant-info/notification-details/notification-details.component.scss

@@ -0,0 +1,115 @@
+@use '../../../../../styles/colors';
+
+:host::ng-deep {
+  .view-grid-item {
+    display: grid;
+    grid-template-columns: minmax(100px, 0.5fr) 1fr;
+    column-gap: 16px;
+    margin-bottom: 12px;
+  }
+
+  .details-wrapper {
+    margin-top: 24px;
+    margin-bottom: 24px;
+
+    .title {
+      margin-bottom: 16px !important;
+    }
+  }
+
+  h3 .subtext {
+    margin: 0.5rem 0 !important;
+  }
+
+  label {
+    font-weight: 600;
+  }
+
+  .no-data-text {
+    text-align: center;
+    color: colors.$grey;
+    padding-top: rem(12);
+
+    .error {
+      justify-content: center;
+    }
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    width: 100%;
+  }
+}
+
+:host::ng-deep {
+  .transferee-table {
+    display: grid;
+    grid-template-columns: max-content max-content max-content max-content max-content;
+    overflow-x: auto;
+    grid-column-gap: 36px;
+    grid-row-gap: 12px;
+    overflow: unset;
+  }
+
+  .survey-plan-table {
+    display: grid;
+    grid-template-columns: max-content max-content max-content;
+    overflow-x: auto;
+    grid-column-gap: 36px;
+    grid-row-gap: 12px;
+    overflow: unset;
+  }
+
+  .scrollable {
+    overflow-x: auto;
+  }
+
+  .other-attachments {
+    display: grid;
+    grid-template-columns: max-content max-content max-content;
+    overflow-x: auto;
+    overflow-y: hidden;
+    grid-column-gap: 36px;
+    grid-row-gap: 12px;
+
+    .full-width {
+      grid-column: 1/3;
+    }
+  }
+
+  .review-table {
+    background-color: colors.$grey-light;
+    display: grid;
+    grid-row-gap: 24px;
+    grid-column-gap: 16px;
+    word-wrap: break-word;
+    hyphens: auto;
+    padding: 16px;
+    margin: 24px 0 40px 0;
+    grid-template-columns: minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr) minmax(60px, 1fr);
+
+    .full-width {
+      grid-column: 1/5;
+    }
+
+    .grid-double {
+      grid-column: 2/5;
+    }
+
+    .grid-1 {
+      grid-column: 1/2;
+    }
+
+    .grid-2 {
+      grid-column: 2/3;
+    }
+
+    .grid-3 {
+      grid-column: 3/5;
+    }
+
+    .subheading2 {
+      margin-bottom: 4px !important;
+    }
+  }
+}