Merge pull request #1489 from bcgov/feature/ALCS-1423

Planning Reviews Pt2
bcgov · Mar 7, 2024 · 8396035 · 8396035
2 parents bb0fcd3 + 8ad053e
commit 8396035
Show file tree

Hide file tree

Showing 42 changed files with 940 additions and 58 deletions.
diff --git a/...d/src/app/features/board/dialogs/planning-review/planning-review-dialog.component.spec.ts b/...d/src/app/features/board/dialogs/planning-review/planning-review-dialog.component.spec.ts
@@ -2,7 +2,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { MomentDateModule } from '@angular/material-moment-adapter';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -27,6 +26,7 @@ describe('PlanningReviewDialogComponent', () => {
   let mockBoardService: DeepMocked<BoardService>;
 
   const mockPlanningReviewDto: PlanningReviewDto = {
+    uuid: '',
     documentName: '',
     type: {} as any,
     open: true,

diff --git a/...ontend/src/app/features/board/dialogs/planning-review/planning-review-dialog.component.ts b/...ontend/src/app/features/board/dialogs/planning-review/planning-review-dialog.component.ts
@@ -9,29 +9,13 @@ import { PlanningReferralDto, PlanningReviewDto } from '../../../../services/pla
 import { ToastService } from '../../../../services/toast/toast.service';
 import { UserService } from '../../../../services/user/user.service';
 import { ApplicationPill } from '../../../../shared/application-type-pill/application-type-pill.component';
+import {
+  CLOSED_PR_LABEL,
+  OPEN_PR_LABEL,
+} from '../../../../shared/application-type-pill/application-type-pill.constants';
 import { ConfirmationDialogService } from '../../../../shared/confirmation-dialog/confirmation-dialog.service';
 import { CardDialogComponent } from '../card-dialog/card-dialog.component';
 
-export const OPEN_TYPE = {
-  label: 'Open',
-  code: 'Open',
-  shortLabel: 'Open',
-  backgroundColor: '#94c6ac',
-  borderColor: '#94c6ac',
-  description: 'Open',
-  textColor: '#313132',
-};
-
-export const CLOSED_TYPE = {
-  label: 'Closed',
-  code: 'Closed',
-  shortLabel: 'Closed',
-  backgroundColor: '#C6242A',
-  borderColor: '#C6242A',
-  description: 'Closed',
-  textColor: '#313132',
-};
-
 @Component({
   selector: 'app-detail-dialog',
   templateUrl: './planning-review-dialog.component.html',
@@ -42,8 +26,8 @@ export class PlanningReviewDialogComponent extends CardDialogComponent implement
   title?: string;
   planningType?: ApplicationPill;
   cardTitle = '';
-  OPEN_TYPE = OPEN_TYPE;
-  CLOSED_TYPE = CLOSED_TYPE;
+  OPEN_TYPE = OPEN_PR_LABEL;
+  CLOSED_TYPE = CLOSED_PR_LABEL;
 
   planningReview: PlanningReviewDto = this.data.planningReview;
   planningReferral: PlanningReferralDto = this.data;

diff --git a/...2/decision-input/decision-components/decision-component/decision-component.component.html b/...2/decision-input/decision-components/decision-component/decision-component.component.html
@@ -9,10 +9,10 @@ <h5>{{ data.noticeOfIntentDecisionComponentType?.label }}</h5>
   </div>
 
   <div *ngIf="data.noticeOfIntentDecisionComponentTypeCode === COMPONENT_TYPE.ROSO" class="row-no-flex">
-    <app-roso-input [form]="form"></app-roso-input>
+    <app-noi-roso-input [form]="form"></app-noi-roso-input>
   </div>
   <div *ngIf="data.noticeOfIntentDecisionComponentTypeCode === COMPONENT_TYPE.PFRS" class="row-no-flex">
-    <app-pfrs-input [form]="form"></app-pfrs-input>
+    <app-noi-pfrs-input [form]="form"></app-noi-pfrs-input>
   </div>
 
   <div class="grid-2">

diff --git a/.../decision-input/decision-components/decision-component/pfrs-input/pfrs-input.component.ts b/.../decision-input/decision-components/decision-component/pfrs-input/pfrs-input.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 @Component({
-  selector: 'app-pfrs-input',
+  selector: 'app-noi-pfrs-input',
   templateUrl: './pfrs-input.component.html',
   styleUrls: ['./pfrs-input.component.scss'],
 })

diff --git a/.../decision-input/decision-components/decision-component/roso-input/roso-input.component.ts b/.../decision-input/decision-components/decision-component/roso-input/roso-input.component.ts
@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 
 @Component({
-  selector: 'app-roso-input',
+  selector: 'app-noi-roso-input',
   templateUrl: './roso-input.component.html',
   styleUrls: ['./roso-input.component.scss'],
 })

diff --git a/alcs-frontend/src/app/features/planning-review/header/header.component.html b/alcs-frontend/src/app/features/planning-review/header/header.component.html
@@ -0,0 +1,48 @@
+<div class="header">
+  <div>
+    <span class="subtext heading">Planning Review</span>
+  </div>
+  <div class="first-row">
+    <div class="title">
+      <h5>{{ planningReview.fileNumber }} ({{ planningReview.documentName }})</h5>
+      <app-application-legacy-id [legacyId]="legacyId"></app-application-legacy-id>
+      <div class="labels">
+        <app-application-type-pill [type]="planningReview.type"></app-application-type-pill>
+      </div>
+    </div>
+    <div class="center">
+      <button
+        *ngIf="linkedCards.length === 1"
+        class="menu-item"
+        mat-flat-button
+        color="accent"
+        (click)="onGoToCard(linkedCards[0])"
+      >
+        <div class="center">
+          Go to card
+          <mat-icon style="transform: scale(1.1)">arrow_right_alt</mat-icon>
+        </div>
+      </button>
+      <ng-container *ngIf="linkedCards.length > 1">
+        <button class="menu-item center" mat-flat-button color="accent" [matMenuTriggerFor]="goToMenu">
+          Go to card ▾
+        </button>
+        <mat-menu class="move-board-menu" xPosition="before" #goToMenu="matMenu">
+          <button *ngFor="let card of linkedCards" mat-menu-item (click)="onGoToCard(card)">
+            {{ card.displayName }}
+          </button>
+        </mat-menu>
+      </ng-container>
+    </div>
+  </div>
+  <div class="sub-heading">
+    <div>
+      <div class="subheading2">Local/First Nation Government:</div>
+      <div class="body-text">
+        {{ planningReview.localGovernment.name }}
+        <app-no-data *ngIf="!planningReview.localGovernment"></app-no-data>
+      </div>
+    </div>
+    <div class="status-wrapper"><app-application-submission-status-type-pill [type]="statusPill"></app-application-submission-status-type-pill></div>
+  </div>
+</div>
diff --git a/alcs-frontend/src/app/features/planning-review/header/header.component.scss b/alcs-frontend/src/app/features/planning-review/header/header.component.scss
@@ -0,0 +1,58 @@
+@use '../../../../styles/colors';
+
+.heading {
+  color: colors.$primary-color-dark;
+  margin-bottom: 8px;
+}
+
+.header {
+  padding: 16px 80px;
+  border-bottom: 1px solid colors.$primary-color-dark;
+
+  .first-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  .title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    line-height: 32px;
+
+    h5 {
+      margin-right: 8px !important;
+    }
+  }
+
+  .labels {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: -8px;
+    margin-right: 8px;
+
+    app-application-type-pill {
+      margin-top: 8px;
+    }
+  }
+
+  .sub-heading {
+    margin-top: 16px;
+    margin-bottom: 8px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+  }
+
+  .subheading2 {
+    margin-bottom: 6px !important;
+  }
+}
+
+.status-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-end;
+}
diff --git a/alcs-frontend/src/app/features/planning-review/header/header.component.spec.ts b/alcs-frontend/src/app/features/planning-review/header/header.component.spec.ts
@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [RouterTestingModule],
+      declarations: [HeaderComponent],
+      providers: [],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+
+    component.planningReview = {
+      documentName: '',
+      fileNumber: '',
+      localGovernment: {
+        uuid: '',
+        name: '',
+        isFirstNation: false,
+        preferredRegionCode: '',
+      },
+      open: false,
+      referrals: [],
+      region: {
+        label: '',
+        code: '',
+        description: '',
+      },
+      type: {
+        code: '',
+        description: '',
+        label: '',
+        backgroundColor: '',
+        shortLabel: '',
+        textColor: '',
+      },
+      uuid: '',
+    };
+
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/alcs-frontend/src/app/features/planning-review/header/header.component.ts b/alcs-frontend/src/app/features/planning-review/header/header.component.ts
@@ -0,0 +1,47 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subject } from 'rxjs';
+import { CardDto } from '../../../services/card/card.dto';
+import { PlanningReviewDetailedDto, PlanningReviewDto } from '../../../services/planning-review/planning-review.dto';
+import { CLOSED_PR_LABEL, OPEN_PR_LABEL } from '../../../shared/application-type-pill/application-type-pill.constants';
+
+@Component({
+  selector: 'app-header[planningReview]',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent implements OnInit {
+  destroy = new Subject<void>();
+
+  @Input() planningReview!: PlanningReviewDetailedDto;
+
+  legacyId?: string;
+  applicant?: string;
+  linkedCards: (CardDto & { displayName: string })[] = [];
+  statusPill = OPEN_PR_LABEL;
+
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    this.setupLinkedCards();
+    if (!this.planningReview.open) {
+      this.statusPill = CLOSED_PR_LABEL;
+    }
+  }
+
+  async onGoToCard(card: CardDto) {
+    const boardCode = card.boardCode;
+    const cardUuid = card.uuid;
+    const cardTypeCode = card.type;
+    await this.router.navigateByUrl(`/board/${boardCode}?card=${cardUuid}&type=${cardTypeCode}`);
+  }
+
+  async setupLinkedCards() {
+    for (const [index, referral] of this.planningReview.referrals.entries()) {
+      this.linkedCards.push({
+        ...referral.card,
+        displayName: `Referral ${index}`,
+      });
+    }
+  }
+}
diff --git a/alcs-frontend/src/app/features/planning-review/overview/overview.component.html b/alcs-frontend/src/app/features/planning-review/overview/overview.component.html
@@ -0,0 +1,16 @@
+<div class="split">
+  <h3>Overview</h3>
+</div>
+<section>
+  <app-staff-journal *ngIf="planningReview" parentType="Planning Review" [parentUuid]="planningReview.uuid" />
+</section>
+<section *ngIf="planningReview">
+  <h5>Planning Review Type</h5>
+  <div>
+    <app-inline-dropdown (save)="onSaveType($event)" [options]="types" [value]="planningReview.type.code" />
+  </div>
+</section>
+<section *ngIf="planningReview">
+  <h5>Status</h5>
+  <div>{{ planningReview.open ? 'Open' : 'Closed' }}</div>
+</section>
diff --git a/alcs-frontend/src/app/features/planning-review/overview/overview.component.scss b/alcs-frontend/src/app/features/planning-review/overview/overview.component.scss
@@ -0,0 +1,7 @@
+h5 {
+  margin: 16px 0 !important;
+}
+
+section {
+  margin: 32px 0;
+}
diff --git a/alcs-frontend/src/app/features/planning-review/overview/overview.component.spec.ts b/alcs-frontend/src/app/features/planning-review/overview/overview.component.spec.ts
@@ -0,0 +1,52 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
+import { BehaviorSubject } from 'rxjs';
+import { NoticeOfIntentDecisionService } from '../../../services/notice-of-intent/decision/notice-of-intent-decision.service';
+import { NoticeOfIntentDetailService } from '../../../services/notice-of-intent/notice-of-intent-detail.service';
+import { NoticeOfIntentTimelineService } from '../../../services/notice-of-intent/notice-of-intent-timeline/notice-of-intent-timeline.service';
+import { NoticeOfIntentDto } from '../../../services/notice-of-intent/notice-of-intent.dto';
+import { PlanningReviewDetailService } from '../../../services/planning-review/planning-review-detail.service';
+import { PlanningReviewDetailedDto } from '../../../services/planning-review/planning-review.dto';
+import { PlanningReviewService } from '../../../services/planning-review/planning-review.service';
+import { ConfirmationDialogService } from '../../../shared/confirmation-dialog/confirmation-dialog.service';
+
+import { OverviewComponent } from './overview.component';
+import { NoticeOfIntentSubmissionStatusService } from '../../../services/notice-of-intent/notice-of-intent-submission-status/notice-of-intent-submission-status.service';
+
+describe('OverviewComponent', () => {
+  let component: OverviewComponent;
+  let fixture: ComponentFixture<OverviewComponent>;
+  let mockPRDetailService: DeepMocked<PlanningReviewDetailService>;
+  let mockPRService: DeepMocked<PlanningReviewService>;
+
+  beforeEach(async () => {
+    mockPRService = createMock();
+
+    mockPRDetailService = createMock();
+    mockPRDetailService.$planningReview = new BehaviorSubject<PlanningReviewDetailedDto | undefined>(undefined);
+    await TestBed.configureTestingModule({
+      providers: [
+        {
+          provide: PlanningReviewDetailService,
+          useValue: mockPRDetailService,
+        },
+        {
+          provide: PlanningReviewService,
+          useValue: mockPRService,
+        },
+      ],
+      declarations: [OverviewComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});