Add Planning Review Documents

bcgov · Mar 11, 2024 · e3f83fb · e3f83fb
1 parent 8ad053e
commit e3f83fb
Show file tree

Hide file tree

Showing 27 changed files with 2,146 additions and 14 deletions.
diff --git a/...es/planning-review/documents/document-upload-dialog/document-upload-dialog.component.html b/...es/planning-review/documents/document-upload-dialog/document-upload-dialog.component.html
@@ -0,0 +1,131 @@
+<div mat-dialog-title>
+  <h4>{{ title }} Document</h4>
+  <span class="superseded-warning" *ngIf="showSupersededWarning"
+    >Superseded - Not associated with Applicant Submission in Portal</span
+  >
+</div>
+<div mat-dialog-content>
+  <form class="form" [formGroup]="form">
+    <div class="double">
+      <div>
+        <mat-label>Document Upload*</mat-label>
+      </div>
+      <input hidden type="file" #fileInput (change)="uploadFile($event)" placeholder="Upload file" />
+      <button
+        *ngIf="!pendingFile && !existingFile"
+        class="full-width upload-button"
+        mat-flat-button
+        color="accent"
+        [ngClass]="{
+          error: showVirusError
+        }"
+        (click)="fileInput.click()"
+      >
+        Upload
+      </button>
+      <div class="file" *ngIf="pendingFile">
+        <div>
+          <a (click)="openFile()">{{ pendingFile.name }}</a>
+          &nbsp;({{ pendingFile.size | filesize }})
+        </div>
+        <button [disabled]="!allowsFileEdit" (click)="onRemoveFile()" mat-button>
+          <mat-icon>close</mat-icon>
+          Remove
+        </button>
+      </div>
+      <div class="file" *ngIf="existingFile">
+        <div>
+          <a (click)="openExistingFile()">{{ existingFile.name }}</a>
+          &nbsp;({{ existingFile.size | filesize }})
+        </div>
+        <button [disabled]="!allowsFileEdit" (click)="onRemoveFile()" mat-button>
+          <mat-icon>close</mat-icon>
+          Remove
+        </button>
+      </div>
+      <mat-error class="left" style="display: flex" *ngIf="showVirusError">
+        <mat-icon>warning</mat-icon>&nbsp;A virus was detected in the file. Choose another file and try again.
+      </mat-error>
+    </div>
+
+    <div class="double">
+      <mat-form-field class="full-width" appearance="outline">
+        <mat-label>Document Name</mat-label>
+        <input required matInput id="name" [formControl]="name" name="name" />
+      </mat-form-field>
+    </div>
+
+    <div>
+      <ng-select
+        appearance="outline"
+        required
+        [items]="documentTypes"
+        placeholder="Document Type*"
+        bindLabel="label"
+        bindValue="code"
+        [ngModelOptions]="{ standalone: true }"
+        [(ngModel)]="documentTypeAhead"
+        [searchFn]="filterDocumentTypes"
+        (change)="onDocTypeSelected($event)"
+        appendTo="body"
+      >
+      </ng-select>
+    </div>
+    <div>
+      <mat-form-field class="full-width" appearance="outline">
+        <mat-label>Source</mat-label>
+        <mat-select [formControl]="source">
+          <mat-option *ngFor="let source of documentSources" [value]="source">{{ source }}</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div *ngIf="type.value === DOCUMENT_TYPE.CERTIFICATE_OF_TITLE">
+      <mat-form-field class="full-width" appearance="outline">
+        <mat-label>Associated Parcel</mat-label>
+        <mat-select [formControl]="parcelId">
+          <mat-option *ngFor="let parcel of selectableParcels" [value]="parcel.uuid">
+            #{{ parcel.index + 1 }} PID:
+            <span *ngIf="parcel.pid">{{ parcel.pid | mask : '000-000-000' }}</span>
+            <span *ngIf="!parcel.pid">No Data</span></mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div *ngIf="type.value === DOCUMENT_TYPE.CORPORATE_SUMMARY">
+      <mat-form-field class="full-width" appearance="outline">
+        <mat-label>Associated Organization</mat-label>
+        <mat-select [formControl]="ownerId">
+          <mat-option *ngFor="let owner of selectableOwners" [value]="owner.uuid">
+            {{ owner.label }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div class="double">
+      <mat-label>Visible To:</mat-label>
+      <div>
+        <mat-checkbox [formControl]="visibleToCommissioner">Commissioner</mat-checkbox>
+      </div>
+    </div>
+  </form>
+
+  <mat-dialog-actions align="end">
+    <div class="button-container">
+      <button type="button" mat-stroked-button color="primary" [mat-dialog-close]="false">Close</button>
+      <button
+        *ngIf="!isSaving"
+        type="button"
+        mat-flat-button
+        color="primary"
+        [disabled]="!form.valid || (!pendingFile && !existingFile)"
+        (click)="onSubmit()"
+      >
+        Save
+      </button>
+      <button *ngIf="isSaving" type="button" mat-flat-button color="primary" [disabled]="true">
+        <mat-spinner class="spinner" diameter="20"></mat-spinner>
+        Uploading
+      </button>
+    </div>
+  </mat-dialog-actions>
+</div>
diff --git a/...es/planning-review/documents/document-upload-dialog/document-upload-dialog.component.scss b/...es/planning-review/documents/document-upload-dialog/document-upload-dialog.component.scss
@@ -0,0 +1,55 @@
+@use '../../../../../styles/colors';
+
+.form {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  row-gap: 32px;
+  column-gap: 32px;
+
+  .double {
+    grid-column: 1/3;
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+a {
+  word-break: break-all;
+}
+
+.file {
+  border: 1px solid #000;
+  border-radius: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+}
+
+.upload-button {
+  margin-top: 6px !important;
+
+  &.error {
+    border: 2px solid colors.$error-color;
+  }
+}
+
+.spinner {
+  display: inline-block;
+  margin-right: 4px;
+}
+
+:host::ng-deep {
+  .mdc-button__label {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.superseded-warning {
+  background-color: colors.$secondary-color-dark;
+  color: #fff;
+  padding: 0 4px;
+}
diff --git a/...planning-review/documents/document-upload-dialog/document-upload-dialog.component.spec.ts b/...planning-review/documents/document-upload-dialog/document-upload-dialog.component.spec.ts
@@ -0,0 +1,49 @@
+import { EventEmitter, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
+import { PlanningReviewDocumentService } from '../../../../services/planning-review/planning-review-document/planning-review-document.service';
+import { ToastService } from '../../../../services/toast/toast.service';
+
+import { DocumentUploadDialogComponent } from './document-upload-dialog.component';
+
+describe('DocumentUploadDialogComponent', () => {
+  let component: DocumentUploadDialogComponent;
+  let fixture: ComponentFixture<DocumentUploadDialogComponent>;
+
+  let mockAppDocService: DeepMocked<PlanningReviewDocumentService>;
+
+  beforeEach(async () => {
+    mockAppDocService = createMock();
+
+    const mockDialogRef = {
+      close: jest.fn(),
+      afterClosed: jest.fn(),
+      subscribe: jest.fn(),
+      backdropClick: () => new EventEmitter(),
+    };
+
+    await TestBed.configureTestingModule({
+      declarations: [DocumentUploadDialogComponent],
+      providers: [
+        {
+          provide: PlanningReviewDocumentService,
+          useValue: mockAppDocService,
+        },
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: ToastService, useValue: {} },
+      ],
+      imports: [MatDialogModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DocumentUploadDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});