Merge pull request #2353 from bcgov/bugfix/2266

Fix public/portal document links

Author: trslater

alcs-frontend/src/app/shared/document-file-loader/document-file-loader.component.ts

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { DocumentService } from '../../services/common/document/document.service';
 
 @Component({
-  selector: 'app-temp',
+  selector: 'document-file-loader',
   templateUrl: './document-file-loader.component.html',
   styleUrl: './document-file-loader.component.scss',
 })

portal-frontend/src/app/features/applications/application-details/application-details.component.html

@@ -91,9 +91,16 @@ <h3>3. Primary Contact</h3>
           [showRequired]="showErrors && needsAuthorizationLetter"
         ></app-no-data>
         <div *ngFor="let file of authorizationLetters">
-          <a routerLink="/document/{{ file.documentUuid }}" target="_blank" data-testid="authorization-letter">{{
+          <a *ngIf="isMobile" (click)="downloadFile(file.documentUuid)" data-testid="authorization-letter">{{
             file.fileName
           }}</a>
+          <a
+            *ngIf="!isMobile"
+            routerLink="/document/{{ file.documentUuid }}"
+            target="_blank"
+            data-testid="authorization-letter"
+            >{{ file.fileName }}</a
+          >
         </div>
         <app-validation-error *ngIf="!needsAuthorizationLetter && authorizationLetters.length > 0">
           Authorization letters are not required, please remove them
@@ -314,16 +321,16 @@ <h3>6. Proposal</h3>
 </section>
 <section>
   <h3>7. Optional Documents</h3>
-  <div *ngIf="applicationSubmission" 
-    [ngClass]="{'review-table': !isMobile, 'review-list': isMobile}">
+  <div *ngIf="applicationSubmission" [ngClass]="{ 'review-table': !isMobile, 'review-list': isMobile }">
     <div *ngIf="!isMobile" class="other-attachments full-width">
       <div class="grid-1 subheading2">File Name</div>
       <div class="grid-2 subheading2">Type</div>
       <div class="grid-3 subheading2">Description</div>
 
       <ng-container *ngFor="let file of otherFiles">
         <div class="grid-1" data-testid="optional-document-file-name">
-          <a routerLink="/document/{{ file.documentUuid }}" target="_blank">{{ file.fileName }}</a>
+          <a *ngIf="isMobile" (click)="downloadFile(file.documentUuid)">{{ file.fileName }}</a>
+          <a *ngIf="!isMobile" routerLink="/document/{{ file.documentUuid }}" target="_blank">{{ file.fileName }}</a>
         </div>
         <div class="grid-2" data-testid="optional-document-type">
           {{ file.type?.label }}

portal-frontend/src/app/features/applications/application-details/application-details.component.spec.ts

@@ -10,6 +10,8 @@ import { ApplicationSubmissionDetailedDto } from '../../../services/application-
 import { CodeService } from '../../../services/code/code.service';
 
 import { ApplicationDetailsComponent } from './application-details.component';
+import { HttpClient } from '@angular/common/http';
+import { DocumentService } from '../../../services/document/document.service';
 
 describe('ApplicationDetailsComponent', () => {
   let component: ApplicationDetailsComponent;
@@ -18,6 +20,8 @@ describe('ApplicationDetailsComponent', () => {
   let mockAppDocumentService: DeepMocked<ApplicationDocumentService>;
   let mockRouter: DeepMocked<Router>;
   let mockParcelService: DeepMocked<ApplicationParcelService>;
+  let mockHttpClient: DeepMocked<HttpClient>;
+  let mockDocumentService: DeepMocked<DocumentService>;
 
   let applicationDocumentPipe = new BehaviorSubject<ApplicationDocumentDto[]>([]);
 
@@ -26,6 +30,8 @@ describe('ApplicationDetailsComponent', () => {
     mockAppDocumentService = createMock();
     mockRouter = createMock();
     mockParcelService = createMock();
+    mockHttpClient = createMock();
+    mockDocumentService = createMock();
 
     await TestBed.configureTestingModule({
       providers: [
@@ -45,6 +51,14 @@ describe('ApplicationDetailsComponent', () => {
           provide: ApplicationParcelService,
           useValue: mockParcelService,
         },
+        {
+          provide: HttpClient,
+          useValue: mockHttpClient,
+        },
+        {
+          provide: DocumentService,
+          useValue: mockDocumentService,
+        },
       ],
       declarations: [ApplicationDetailsComponent],
       schemas: [NO_ERRORS_SCHEMA],

portal-frontend/src/app/features/applications/application-details/application-details.component.ts

@@ -13,8 +13,10 @@ 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 { openFileInline } from '../../../shared/utils/file';
 import { MOBILE_BREAKPOINT } from '../../../shared/utils/breakpoints';
+import { DocumentService } from '../../../services/document/document.service';
+import { downloadFile } from '../../../shared/utils/file';
+import { ToastService } from '../../../services/toast/toast.service';
 
 @Component({
   selector: 'app-application-details',
@@ -47,7 +49,9 @@ export class ApplicationDetailsComponent implements OnInit, OnDestroy {
     private codeService: CodeService,
     private applicationDocumentService: ApplicationDocumentService,
     private applicationParcelService: ApplicationParcelService,
-    private router: Router
+    private router: Router,
+    private documentService: DocumentService,
+    private toastService: ToastService,
   ) {}
 
   ngOnInit(): void {
@@ -85,10 +89,13 @@ export class ApplicationDetailsComponent implements OnInit, OnDestroy {
     this.$destroy.complete();
   }
 
-  async openFile(file: ApplicationDocumentDto) {
-    const res = await this.applicationDocumentService.openFile(file.uuid);
-    if (res) {
-      openFileInline(res.url, file.fileName);
+  async downloadFile(uuid: string) {
+    try {
+      const { url, fileName } = await this.documentService.getDownloadUrlAndFileName(uuid, false, true);
+
+      downloadFile(url, fileName);
+    } catch (e) {
+      this.toastService.showErrorToast('Failed to download file');
     }
   }
 

portal-frontend/src/app/features/applications/application-details/cove-details/cove-details.component.html

@@ -52,9 +52,10 @@
 
   <div class="subheading2 grid-1">Proposal Map / Site Plan</div>
   <div class="grid-double">
-    <a *ngFor="let map of proposalMap" routerLink="/document/{{ map.documentUuid }}" target="_blank">
-      {{ map.fileName }}
-    </a>
+    <ng-container *ngFor="let map of proposalMap">
+      <a *ngIf="isMobile" (click)="downloadFile(map.documentUuid)">{{ map.fileName }}</a>
+      <a *ngIf="!isMobile" routerLink="/document/{{ map.documentUuid }}" target="_blank">{{ map.fileName }}</a>
+    </ng-container>
     <app-no-data [showRequired]="showErrors" *ngIf="proposalMap.length === 0"></app-no-data>
   </div>
 
@@ -70,9 +71,8 @@
     <div class="subheading2 grid-1">Draft Covenant</div>
     <div class="grid-double">
       <div *ngFor="let file of srwTerms">
-        <a routerLink="/document/{{ file.documentUuid }}" target="_blank">
-          {{ file.fileName }}
-        </a>
+        <a *ngIf="isMobile" (click)="downloadFile(file.documentUuid)">{{ file.fileName }}</a>
+        <a *ngIf="!isMobile" routerLink="/document/{{ file.documentUuid }}" target="_blank">{{ file.fileName }}</a>
       </div>
       <app-no-data
         [showRequired]="showErrors && !!_applicationSubmission.coveHasDraft"

portal-frontend/src/app/features/applications/application-details/cove-details/cove-details.component.spec.ts

@@ -1,20 +1,27 @@
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DeepMocked } from '@golevelup/ts-jest';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
 import { CovenantTransfereeService } from '../../../../services/covenant-transferee/covenant-transferee.service';
 
 import { CoveDetailsComponent } from './cove-details.component';
 import { ApplicationDocumentService } from '../../../../services/application-document/application-document.service';
 import { ApplicationParcelService } from '../../../../services/application-parcel/application-parcel.service';
+import { DocumentService } from '../../../../services/document/document.service';
 
 describe('CoveDetailsComponent', () => {
   let component: CoveDetailsComponent;
   let fixture: ComponentFixture<CoveDetailsComponent>;
   let mockAppDocumentService: DeepMocked<ApplicationDocumentService>;
   let mockAppParcelService: DeepMocked<ApplicationParcelService>;
   let mockTransfereeService: DeepMocked<CovenantTransfereeService>;
+  let mockDocumentService: DeepMocked<DocumentService>;
 
   beforeEach(async () => {
+    mockAppDocumentService = createMock();
+    mockAppParcelService = createMock();
+    mockTransfereeService = createMock();
+    mockDocumentService = createMock();
+
     await TestBed.configureTestingModule({
       declarations: [CoveDetailsComponent],
       providers: [
@@ -30,6 +37,10 @@ describe('CoveDetailsComponent', () => {
           provide: CovenantTransfereeService,
           useValue: mockTransfereeService,
         },
+        {
+          provide: DocumentService,
+          useValue: mockDocumentService,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA],
     }).compileComponents();

portal-frontend/src/app/features/applications/application-details/cove-details/cove-details.component.ts

@@ -1,13 +1,14 @@
 import { Component, HostListener, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { ApplicationDocumentDto } from '../../../../services/application-document/application-document.dto';
-import { ApplicationDocumentService } from '../../../../services/application-document/application-document.service';
 import { ApplicationSubmissionDetailedDto } from '../../../../services/application-submission/application-submission.dto';
 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 { openFileInline } from '../../../../shared/utils/file';
 import { MOBILE_BREAKPOINT } from '../../../../shared/utils/breakpoints';
+import { DocumentService } from '../../../../services/document/document.service';
+import { downloadFile } from '../../../../shared/utils/file';
+import { ToastService } from '../../../../services/toast/toast.service';
 
 @Component({
   selector: 'app-cove-details',
@@ -41,8 +42,9 @@ export class CoveDetailsComponent {
 
   constructor(
     private router: Router,
-    private applicationDocumentService: ApplicationDocumentService,
     private covenantTransfereeService: CovenantTransfereeService,
+    private documentService: DocumentService,
+    private toastService: ToastService,
   ) {}
 
   async onEditSection(step: number) {
@@ -55,10 +57,13 @@ export class CoveDetailsComponent {
     }
   }
 
-  async openFile(file: ApplicationDocumentDto) {
-    const res = await this.applicationDocumentService.openFile(file.uuid);
-    if (res) {
-      openFileInline(res.url, file.fileName);
+  async downloadFile(uuid: string) {
+    try {
+      const { url, fileName } = await this.documentService.getDownloadUrlAndFileName(uuid, false, true);
+
+      downloadFile(url, fileName);
+    } catch (e) {
+      this.toastService.showErrorToast('Failed to download file');
     }
   }
 

portal-frontend/src/app/features/applications/application-details/excl-details/excl-details.component.html

@@ -37,38 +37,36 @@
 
   <div class="subheading2 grid-1">Proposal Map / Site Plan</div>
   <div class="grid-double">
-    <a *ngFor="let map of proposalMap" routerLink="/document/{{ map.documentUuid }}" target="_blank">
-      {{ map.fileName }}
-    </a>
+    <ng-container *ngFor="let map of proposalMap">
+      <a class="mobile" (click)="downloadFile(map.documentUuid)">{{ map.fileName }}</a>
+      <a class="desktop" routerLink="/document/{{ map.documentUuid }}" target="_blank">{{ map.fileName }}</a>
+    </ng-container>
     <app-no-data [showRequired]="showErrors" *ngIf="proposalMap.length === 0"></app-no-data>
   </div>
 
   <div class="subheading2 grid-1">Notice of Public Hearing (Advertisement)</div>
   <div class="grid-double">
     <div *ngFor="let file of noticeOfPublicHearing">
-      <a routerLink="/document/{{ file.documentUuid }}" target="_blank">
-        {{ file.fileName }}
-      </a>
+      <a class="mobile" (click)="downloadFile(file.documentUuid)">{{ file.fileName }}</a>
+      <a class="desktop" routerLink="/document/{{ file.documentUuid }}" target="_blank">{{ file.fileName }}</a>
     </div>
     <app-no-data [showRequired]="showErrors" *ngIf="noticeOfPublicHearing.length === 0"></app-no-data>
   </div>
 
   <div class="subheading2 grid-1">Proof of Signage</div>
   <div class="grid-double">
     <div *ngFor="let file of proofOfSignage">
-      <a routerLink="/document/{{ file.documentUuid }}" target="_blank">
-        {{ file.fileName }}
-      </a>
+      <a class="mobile" (click)="downloadFile(file.documentUuid)">{{ file.fileName }}</a>
+      <a class="desktop" routerLink="/document/{{ file.documentUuid }}" target="_blank">{{ file.fileName }}</a>
     </div>
     <app-no-data [showRequired]="showErrors" *ngIf="proofOfSignage.length === 0"></app-no-data>
   </div>
 
   <div class="subheading2 grid-1">Report of Public Hearing</div>
   <div class="grid-double">
     <div *ngFor="let file of reportOfPublicHearing">
-      <a routerLink="/document/{{ file.documentUuid }}" target="_blank">
-        {{ file.fileName }}
-      </a>
+      <a class="mobile" (click)="downloadFile(file.documentUuid)">{{ file.fileName }}</a>
+      <a class="desktop" routerLink="/document/{{ file.documentUuid }}" target="_blank">{{ file.fileName }}</a>
     </div>
     <app-no-data [showRequired]="showErrors" *ngIf="reportOfPublicHearing.length === 0"></app-no-data>
   </div>

portal-frontend/src/app/features/applications/application-details/excl-details/excl-details.component.scss

@@ -0,0 +1,15 @@
+@use '../../../../../styles/functions' as *;
+
+.mobile {
+  @media screen and (min-width: $tabletBreakpoint) {
+    display: none;
+  }
+}
+
+.desktop {
+  display: none;
+
+  @media screen and (min-width: $tabletBreakpoint) {
+    display: inline;
+  }
+}

portal-frontend/src/app/features/applications/application-details/excl-details/excl-details.component.spec.ts

@@ -1,17 +1,26 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DeepMocked } from '@golevelup/ts-jest';
+import { createMock, DeepMocked } from '@golevelup/ts-jest';
 
 import { ExclDetailsComponent } from './excl-details.component';
 import { ApplicationDocumentService } from '../../../../services/application-document/application-document.service';
 import { ApplicationParcelService } from '../../../../services/application-parcel/application-parcel.service';
+import { HttpClient } from '@angular/common/http';
+import { DocumentService } from '../../../../services/document/document.service';
 
 describe('ExclDetailsComponent', () => {
   let component: ExclDetailsComponent;
   let fixture: ComponentFixture<ExclDetailsComponent>;
   let mockAppDocumentService: DeepMocked<ApplicationDocumentService>;
   let mockAppParcelService: DeepMocked<ApplicationParcelService>;
+  let mockHttpClient: DeepMocked<HttpClient>;
+  let mockDocumentService: DeepMocked<DocumentService>;
 
   beforeEach(async () => {
+    mockAppDocumentService = createMock();
+    mockAppParcelService = createMock();
+    mockHttpClient = createMock();
+    mockDocumentService = createMock();
+
     await TestBed.configureTestingModule({
       declarations: [ExclDetailsComponent],
       providers: [
@@ -23,6 +32,14 @@ describe('ExclDetailsComponent', () => {
           provide: ApplicationParcelService,
           useValue: mockAppParcelService,
         },
+        {
+          provide: HttpClient,
+          useValue: mockHttpClient,
+        },
+        {
+          provide: DocumentService,
+          useValue: mockDocumentService,
+        },
       ],
     }).compileComponents();