Open alcs and portal document inline with standardized method (#1513)

* Update ALCS CSP to allow file document storage source * Rename function name and update bg color * Update portal public documents and decision documents * Set browser tab title when opening alcs file inline * Change portal backend and frontend to retrieve filename from existing logic * Rename function to match alcs * Update alcs detail page open file logic
bcgov · Mar 14, 2024 · 215444e · 215444e
1 parent 99ae999
commit 215444e
Show file tree

Hide file tree

Showing 136 changed files with 544 additions and 574 deletions.
diff --git a/alcs-frontend/nginx.conf b/alcs-frontend/nginx.conf
@@ -19,7 +19,7 @@ http {
         add_header 'X-XSS-Protection' '1; mode=block';
         add_header 'Strict-Transport-Security' 'max-age=31536000; includeSubDomains; preload';
         add_header 'Cache-control' 'no-cache';
-        add_header 'Content-Security-Policy' "default-src 'self';img-src 'self';style-src 'unsafe-inline' 'self';connect-src $ENABLED_CONNECT_SRC; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com; base-uri 'self'; object-src 'none'; frame-src https://alcs-metabase-test.apps.silver.devops.gov.bc.ca https://alcs-metabase-prod.apps.silver.devops.gov.bc.ca;";
+        add_header 'Content-Security-Policy' "default-src 'self';img-src 'self';style-src 'unsafe-inline' 'self';connect-src $ENABLED_CONNECT_SRC; font-src 'self' https://fonts.gstatic.com https://fonts.googleapis.com; base-uri 'self'; object-src https://nrs.objectstore.gov.bc.ca; frame-src https://alcs-metabase-test.apps.silver.devops.gov.bc.ca https://alcs-metabase-prod.apps.silver.devops.gov.bc.ca https://nrs.objectstore.gov.bc.ca;";
         add_header 'Permissions-Policy' 'camera=(), geolocation=(), microphone=()';
         add_header 'Referrer-Policy' 'same-origin';
 

diff --git a/...eatures/application/applicant-info/application-details/application-details.component.html b/...eatures/application/applicant-info/application-details/application-details.component.html
@@ -81,7 +81,7 @@ <h3>Primary Contact Information</h3>
       <div class="subheading2 grid-1">Authorization Letter(s)</div>
       <div class="grid-double">
         <div *ngFor="let file of authorizationLetters">
-          <a (click)="openFile(file.uuid)">{{ file.fileName }}</a>
+          <a (click)="openFile(file)">{{ file.fileName }}</a>
         </div>
       </div>
     </ng-container>
@@ -226,7 +226,7 @@ <h3>Optional Documents</h3>
 
       <ng-container *ngFor="let file of otherFiles">
         <div class="grid-1">
-          <a (click)="openFile(file.uuid)">{{ file.fileName }}</a>
+          <a (click)="openFile(file)">{{ file.fileName }}</a>
         </div>
         <div class="grid-2">
           {{ file.type?.label }}

diff --git a/.../features/application/applicant-info/application-details/application-details.component.ts b/.../features/application/applicant-info/application-details/application-details.component.ts
@@ -47,19 +47,19 @@ export class ApplicationDetailsComponent implements OnInit, OnChanges, OnDestroy
     window.location.href = `${environment.portalUrl}/alcs/application/${this.fileNumber}/edit/${step}`;
   }
 
-  async openFile(uuid: string) {
-    await this.applicationDocumentService.download(uuid, '');
+  async openFile(file: ApplicationDocumentDto) {
+    await this.applicationDocumentService.download(file.uuid, file.fileName);
   }
 
   private async loadDocuments() {
     const documents = await this.applicationDocumentService.getApplicantDocuments(this.fileNumber);
     this.otherFiles = documents.filter(
       (document) =>
         document.type &&
-        [DOCUMENT_TYPE.PHOTOGRAPH, DOCUMENT_TYPE.OTHER, DOCUMENT_TYPE.PROFESSIONAL_REPORT].includes(document.type.code)
+        [DOCUMENT_TYPE.PHOTOGRAPH, DOCUMENT_TYPE.OTHER, DOCUMENT_TYPE.PROFESSIONAL_REPORT].includes(document.type.code),
     );
     this.authorizationLetters = documents.filter(
-      (document) => document.type?.code === DOCUMENT_TYPE.AUTHORIZATION_LETTER
+      (document) => document.type?.code === DOCUMENT_TYPE.AUTHORIZATION_LETTER,
     );
     this.files = documents;
   }

diff --git a/...of-intent/applicant-info/notice-of-intent-details/notice-of-intent-details.component.html b/...of-intent/applicant-info/notice-of-intent-details/notice-of-intent-details.component.html
@@ -51,7 +51,7 @@ <h3>Primary Contact Information</h3>
       <div class="subheading2 grid-1">Authorization Letter(s)</div>
       <div class="grid-double">
         <div *ngFor="let file of authorizationLetters">
-          <a (click)="openFile(file.uuid)">{{ file.fileName }}</a>
+          <a (click)="openFile(file)">{{ file.fileName }}</a>
         </div>
       </div>
     </ng-container>
@@ -68,21 +68,15 @@ <h3>Land Use</h3>
     <div class="full-width">
       <h4>Land Use of Parcel(s) under Notice of Intent</h4>
     </div>
-    <div class="subheading2 grid-1">
-      Describe all agriculture that currently takes place on the parcel(s).
-    </div>
+    <div class="subheading2 grid-1">Describe all agriculture that currently takes place on the parcel(s).</div>
     <div class="grid-double">
       {{ submission.parcelsAgricultureDescription }}
     </div>
-    <div class="subheading2 grid-1">
-      Describe all agricultural improvements made to the parcel(s).
-    </div>
+    <div class="subheading2 grid-1">Describe all agricultural improvements made to the parcel(s).</div>
     <div class="grid-double">
       {{ submission.parcelsAgricultureImprovementDescription }}
     </div>
-    <div class="subheading2 grid-1">
-      Describe all other uses that currently take place on the parcel(s).
-    </div>
+    <div class="subheading2 grid-1">Describe all other uses that currently take place on the parcel(s).</div>
     <div class="grid-double">
       {{ submission.parcelsNonAgricultureUseDescription }}
     </div>
@@ -184,7 +178,7 @@ <h3>Optional Documents</h3>
           {{ file.description }}
         </div>
         <div class="grid-3">
-          <a (click)="openFile(file.uuid)">{{ file.fileName }}</a>
+          <a (click)="openFile(file)">{{ file.fileName }}</a>
         </div>
       </ng-container>
       <div *ngIf="otherFiles.length === 0" class="full-width">No optional attachments</div>

diff --git a/...e-of-intent/applicant-info/notice-of-intent-details/notice-of-intent-details.component.ts b/...e-of-intent/applicant-info/notice-of-intent-details/notice-of-intent-details.component.ts
@@ -47,8 +47,8 @@ export class NoticeOfIntentDetailsComponent implements OnInit, OnChanges, OnDest
     window.location.href = `${environment.portalUrl}/alcs/notice-of-intent/${this.fileNumber}/edit/${step}`;
   }
 
-  async openFile(uuid: string) {
-    await this.noiDocumentService.download(uuid, '');
+  async openFile(file: NoticeOfIntentDocumentDto) {
+    await this.noiDocumentService.download(file.uuid, file.fileName);
   }
 
   private async loadDocuments() {

diff --git a/...ures/notification/applicant-info/notification-details/notification-details.component.html b/...ures/notification/applicant-info/notification-details/notification-details.component.html
@@ -18,7 +18,7 @@ <h3>Transferee(s)</h3>
           <app-no-data *ngIf="!transferee.organizationName"></app-no-data>
         </div>
         <div>
-          <span *ngIf="transferee.phoneNumber">{{ transferee.phoneNumber | mask : '(000) 000-0000' }}</span>
+          <span *ngIf="transferee.phoneNumber">{{ transferee.phoneNumber | mask: '(000) 000-0000' }}</span>
         </div>
         <div>{{ transferee.email }}</div>
       </ng-container>
@@ -76,7 +76,7 @@ <h3>Purpose of SRW</h3>
     <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)">
+        <a (click)="openFile(document)">
           {{ document.fileName }}
         </a>
       </div>
@@ -91,7 +91,7 @@ <h3>Purpose of SRW</h3>
       <div class="subheading2">Control Number</div>
       <ng-container *ngFor="let document of surveyPlans">
         <div>
-          <a (click)="openFile(document.uuid)">
+          <a (click)="openFile(document)">
             {{ document.fileName }}
           </a>
         </div>
@@ -115,7 +115,7 @@ <h3>Optional Documents</h3>
 
       <ng-container *ngFor="let file of otherFiles">
         <div>
-          <a (click)="openFile(file.uuid)">{{ file.fileName }}</a>
+          <a (click)="openFile(file)">{{ file.fileName }}</a>
         </div>
         <div>
           {{ file.type?.label }}

diff --git a/...atures/notification/applicant-info/notification-details/notification-details.component.ts b/...atures/notification/applicant-info/notification-details/notification-details.component.ts
@@ -42,8 +42,8 @@ export class NotificationDetailsComponent implements OnInit, OnChanges, OnDestro
     this.$destroy.complete();
   }
 
-  async openFile(uuid: string) {
-    await this.notificationDocumentService.download(uuid, '');
+  async openFile(file: NotificationDocumentDto) {
+    await this.notificationDocumentService.download(file.uuid, file.fileName);
   }
 
   private async loadDocuments() {
@@ -53,7 +53,7 @@ export class NotificationDetailsComponent implements OnInit, OnChanges, OnDestro
     this.otherFiles = documents.filter(
       (document) =>
         document.type &&
-        [DOCUMENT_TYPE.PHOTOGRAPH, DOCUMENT_TYPE.OTHER, DOCUMENT_TYPE.PROFESSIONAL_REPORT].includes(document.type.code)
+        [DOCUMENT_TYPE.PHOTOGRAPH, DOCUMENT_TYPE.OTHER, DOCUMENT_TYPE.PROFESSIONAL_REPORT].includes(document.type.code),
     );
     this.files = documents;
   }

diff --git a/...rontend/src/app/services/application/application-document/application-document.service.ts b/...rontend/src/app/services/application/application-document/application-document.service.ts
@@ -14,15 +14,18 @@ import { ApplicationDocumentDto, CreateDocumentDto, UpdateDocumentDto } from './
 export class ApplicationDocumentService {
   private url = `${environment.apiUrl}/application-document`;
 
-  constructor(private http: HttpClient, private toastService: ToastService) {}
+  constructor(
+    private http: HttpClient,
+    private toastService: ToastService,
+  ) {}
 
   async listAll(fileNumber: string) {
     return firstValueFrom(this.http.get<ApplicationDocumentDto[]>(`${this.url}/application/${fileNumber}`));
   }
 
   async listByVisibility(fileNumber: string, visibilityFlags: string[]) {
     return firstValueFrom(
-      this.http.get<ApplicationDocumentDto[]>(`${this.url}/application/${fileNumber}/${visibilityFlags.join()}`)
+      this.http.get<ApplicationDocumentDto[]>(`${this.url}/application/${fileNumber}/${visibilityFlags.join()}`),
     );
   }
 
@@ -55,13 +58,13 @@ export class ApplicationDocumentService {
 
   async getReviewDocuments(fileNumber: string) {
     return firstValueFrom(
-      this.http.get<ApplicationDocumentDto[]>(`${this.url}/application/${fileNumber}/reviewDocuments`)
+      this.http.get<ApplicationDocumentDto[]>(`${this.url}/application/${fileNumber}/reviewDocuments`),
     );
   }
 
   async getApplicantDocuments(fileNumber: string) {
     return firstValueFrom(
-      this.http.get<ApplicationDocumentDto[]>(`${this.url}/application/${fileNumber}/applicantDocuments`)
+      this.http.get<ApplicationDocumentDto[]>(`${this.url}/application/${fileNumber}/applicantDocuments`),
     );
   }
 

diff --git a/...end/src/app/services/application/application-submission/application-submission.service.ts b/...end/src/app/services/application/application-submission/application-submission.service.ts
@@ -2,7 +2,6 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { firstValueFrom } from 'rxjs';
 import { environment } from '../../../../environments/environment';
-import { openFileInline } from '../../../shared/utils/file';
 import { ToastService } from '../../toast/toast.service';
 import { ApplicationSubmissionDto, CovenantTransfereeDto, UpdateApplicationSubmissionDto } from '../application.dto';
 

diff --git a/alcs-frontend/src/app/shared/utils/file.ts b/alcs-frontend/src/app/shared/utils/file.ts
@@ -11,14 +11,21 @@ export const downloadFileFromUrl = (url: string, fileName: string) => {
 };
 
 export const openFileInline = (url: string, fileName: string) => {
-  const downloadLink = document.createElement('a');
-  downloadLink.href = url;
-  downloadLink.download = fileName;
-  downloadLink.target = '_blank';
-  if (window.webkitURL == null) {
-    downloadLink.onclick = (event: MouseEvent) => document.body.removeChild(<Node>event.target);
-    downloadLink.style.display = 'none';
-    document.body.appendChild(downloadLink);
+  const newWindow = window.open('', '_blank');
+  if (newWindow) {
+    newWindow.document.title = fileName;
+
+    const object = newWindow.document.createElement('object');
+    object.data = url;
+    object.style.borderWidth = '0';
+    object.style.width = '100%';
+    object.style.height = '100%';
+
+    newWindow.document.body.appendChild(object);
+    newWindow.document.body.style.backgroundColor = 'rgb(14, 14, 14)';
+    newWindow.document.body.style.height = '100%';
+    newWindow.document.body.style.width = '100%';
+    newWindow.document.body.style.margin = '0';
+    newWindow.document.body.style.overflow = 'hidden';
   }
-  downloadLink.click();
 };
diff --git a/...tend/src/app/features/applications/application-details/application-details.component.html b/...tend/src/app/features/applications/application-details/application-details.component.html
@@ -91,7 +91,7 @@ <h3>3. Primary Contact</h3>
           *ngIf="authorizationLetters.length === 0"
         ></app-no-data>
         <div *ngFor="let file of authorizationLetters">
-          <a (click)="openFile(file.uuid)">{{ file.fileName }}</a>
+          <a (click)="openFile(file)">{{ file.fileName }}</a>
         </div>
         <app-validation-error *ngIf="!needsAuthorizationLetter && authorizationLetters.length > 0">
           Authorization letters are not required, please remove them
@@ -320,7 +320,7 @@ <h3>7. Optional Documents</h3>
 
       <ng-container *ngFor="let file of otherFiles">
         <div class="grid-1">
-          <a (click)="openFile(file.uuid)">{{ file.fileName }}</a>
+          <a (click)="openFile(file)">{{ file.fileName }}</a>
         </div>
         <div class="grid-2">
           {{ file.type?.label }}

diff --git a/...ontend/src/app/features/applications/application-details/application-details.component.ts b/...ontend/src/app/features/applications/application-details/application-details.component.ts
@@ -13,7 +13,7 @@ import { LocalGovernmentDto } from '../../../services/code/code.dto';
 import { CodeService } from '../../../services/code/code.service';
 import { DOCUMENT_SOURCE, DOCUMENT_TYPE } from '../../../shared/dto/document.dto';
 import { OWNER_TYPE } from '../../../shared/dto/owner.dto';
-import { openFileIframe } from '../../../shared/utils/file';
+import { openFileInline } from '../../../shared/utils/file';
 
 @Component({
   selector: 'app-application-details',
@@ -83,10 +83,10 @@ export class ApplicationDetailsComponent implements OnInit, OnDestroy {
     this.$destroy.complete();
   }
 
-  async openFile(uuid: string) {
-    const res = await this.applicationDocumentService.openFile(uuid);
+  async openFile(file: ApplicationDocumentDto) {
+    const res = await this.applicationDocumentService.openFile(file.uuid);
     if (res) {
-      openFileIframe(res);
+      openFileInline(res.url, file.fileName);
     }
   }
 

diff --git a/...rc/app/features/applications/application-details/cove-details/cove-details.component.html b/...rc/app/features/applications/application-details/cove-details/cove-details.component.html
@@ -43,7 +43,7 @@
 
   <div class="subheading2 grid-1">Proposal Map / Site Plan</div>
   <div class="grid-double">
-    <a *ngFor="let map of proposalMap" (click)="openFile(map.uuid)">
+    <a *ngFor="let map of proposalMap" (click)="openFile(map)">
       {{ map.fileName }}
     </a>
     <app-no-data [showRequired]="showErrors" *ngIf="proposalMap.length === 0"></app-no-data>
@@ -61,7 +61,7 @@
     <div class="subheading2 grid-1">Draft Covenant</div>
     <div class="grid-double">
       <div *ngFor="let file of srwTerms">
-        <a (click)="openFile(file.uuid)">
+        <a (click)="openFile(file)">
           {{ file.fileName }}
         </a>
       </div>

diff --git a/.../src/app/features/applications/application-details/cove-details/cove-details.component.ts b/.../src/app/features/applications/application-details/cove-details/cove-details.component.ts
@@ -6,7 +6,7 @@ import { ApplicationSubmissionDetailedDto } from '../../../../services/applicati
 import { CovenantTransfereeDto } from '../../../../services/covenant-transferee/covenant-transferee.dto';
 import { CovenantTransfereeService } from '../../../../services/covenant-transferee/covenant-transferee.service';
 import { DOCUMENT_TYPE } from '../../../../shared/dto/document.dto';
-import { openFileIframe } from '../../../../shared/utils/file';
+import { openFileInline } from '../../../../shared/utils/file';
 
 @Component({
   selector: 'app-cove-details',
@@ -52,10 +52,10 @@ export class CoveDetailsComponent {
     }
   }
 
-  async openFile(uuid: string) {
-    const res = await this.applicationDocumentService.openFile(uuid);
+  async openFile(file: ApplicationDocumentDto) {
+    const res = await this.applicationDocumentService.openFile(file.uuid);
     if (res) {
-      openFileIframe(res);
+      openFileInline(res.url, file.fileName);
     }
   }
 

diff --git a/...rc/app/features/applications/application-details/excl-details/excl-details.component.html b/...rc/app/features/applications/application-details/excl-details/excl-details.component.html
@@ -37,7 +37,7 @@
 
   <div class="subheading2 grid-1">Proposal Map / Site Plan</div>
   <div class="grid-double">
-    <a *ngFor="let map of proposalMap" (click)="openFile(map.uuid)">
+    <a *ngFor="let map of proposalMap" (click)="openFile(map)">
       {{ map.fileName }}
     </a>
     <app-no-data [showRequired]="showErrors" *ngIf="proposalMap.length === 0"></app-no-data>
@@ -46,7 +46,7 @@
   <div class="subheading2 grid-1">Notice of Public Hearing (Advertisement)</div>
   <div class="grid-double">
     <div *ngFor="let file of noticeOfPublicHearing">
-      <a (click)="openFile(file.uuid)">
+      <a (click)="openFile(file)">
         {{ file.fileName }}
       </a>
     </div>
@@ -56,7 +56,7 @@
   <div class="subheading2 grid-1">Proof of Signage</div>
   <div class="grid-double">
     <div *ngFor="let file of proofOfSignage">
-      <a (click)="openFile(file.uuid)">
+      <a (click)="openFile(file)">
         {{ file.fileName }}
       </a>
     </div>
@@ -66,7 +66,7 @@
   <div class="subheading2 grid-1">Report of Public Hearing</div>
   <div class="grid-double">
     <div *ngFor="let file of reportOfPublicHearing">
-      <a (click)="openFile(file.uuid)">
+      <a (click)="openFile(file)">
         {{ file.fileName }}
       </a>
     </div>

diff --git a/.../src/app/features/applications/application-details/excl-details/excl-details.component.ts b/.../src/app/features/applications/application-details/excl-details/excl-details.component.ts
@@ -4,7 +4,7 @@ import { ApplicationDocumentService } from '../../../../services/application-doc
 import { ApplicationSubmissionDetailedDto } from '../../../../services/application-submission/application-submission.dto';
 import { ApplicationDocumentDto } from '../../../../services/application-document/application-document.dto';
 import { DOCUMENT_TYPE } from '../../../../shared/dto/document.dto';
-import { openFileIframe } from '../../../../shared/utils/file';
+import { openFileInline } from '../../../../shared/utils/file';
 
 @Component({
   selector: 'app-excl-details',
@@ -52,10 +52,10 @@ export class ExclDetailsComponent {
     }
   }
 
-  async openFile(uuid: string) {
-    const res = await this.applicationDocumentService.openFile(uuid);
+  async openFile(file: ApplicationDocumentDto) {
+    const res = await this.applicationDocumentService.openFile(file.uuid);
     if (res) {
-      openFileIframe(res);
+      openFileInline(res.url, file.fileName);
     }
   }
 }