Create utils and add filename to backend requests

bcgov · Mar 11, 2024 · 2e1f124 · 2e1f124
1 parent aab36e6
commit 2e1f124
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 4 deletions.
diff --git a/portal-frontend/src/app/services/application-document/application-document.service.ts b/portal-frontend/src/app/services/application-document/application-document.service.ts
@@ -51,7 +51,10 @@ export class ApplicationDocumentService {
 
   async openFile(fileUuid: string) {
     try {
-      return await firstValueFrom(this.httpClient.get<{ url: string }>(`${this.serviceUrl}/${fileUuid}/open`));
+      return await firstValueFrom(
+        // TODO: Make fileName mandatory when ready to update all other usage
+        this.httpClient.get<{ url: string; fileName?: string }>(`${this.serviceUrl}/${fileUuid}/open`)
+      );
     } catch (e) {
       console.error(e);
       this.toastService.showErrorToast('Failed to open the document, please try again');

diff --git a/...-frontend/src/app/services/notice-of-intent-document/notice-of-intent-document.service.ts b/...-frontend/src/app/services/notice-of-intent-document/notice-of-intent-document.service.ts
@@ -51,7 +51,10 @@ export class NoticeOfIntentDocumentService {
 
   async openFile(fileUuid: string) {
     try {
-      return await firstValueFrom(this.httpClient.get<{ url: string }>(`${this.serviceUrl}/${fileUuid}/open`));
+      return await firstValueFrom(
+        // TODO: Make fileName mandatory when ready to update all other usage
+        this.httpClient.get<{ url: string; fileName?: string }>(`${this.serviceUrl}/${fileUuid}/open`)
+      );
     } catch (e) {
       console.error(e);
       this.toastService.showErrorToast('Failed to open the document, please try again');

diff --git a/portal-frontend/src/app/shared/owner-dialogs/parcel-owners/parcel-owners.component.ts b/portal-frontend/src/app/shared/owner-dialogs/parcel-owners/parcel-owners.component.ts
@@ -11,6 +11,7 @@ import { NoticeOfIntentOwnerService } from '../../../services/notice-of-intent-o
 import { OWNER_TYPE } from '../../dto/owner.dto';
 import { CrownOwnerDialogComponent } from '../crown-owner-dialog/crown-owner-dialog.component';
 import { OwnerDialogComponent } from '../owner-dialog/owner-dialog.component';
+import { openFileIframe } from '../../utils/file';
 
 @Component({
   selector: 'app-parcel-owners[owners][fileId][submissionUuid][ownerService]',
@@ -107,7 +108,8 @@ export class ParcelOwnersComponent {
   async onOpenFile(uuid: string) {
     const res = await this.documentService.openFile(uuid);
     if (res) {
-      window.open(res.url, '_blank');
+      const { fileName, url } = res;
+      openFileIframe(fileName || 'browser title', url);
     }
   }
 }
diff --git a/portal-frontend/src/app/shared/utils/file.ts b/portal-frontend/src/app/shared/utils/file.ts
@@ -11,3 +11,23 @@ export const openPdfFile = (fileName: string, data: any) => {
   }
   downloadLink.click();
 };
+
+export const openFileIframe = (fileName: string, url: string) => {
+  const newWindow = window.open('', '_blank');
+  if (newWindow) {
+    newWindow.document.title = fileName;
+
+    const iframe = newWindow.document.createElement('iframe');
+    iframe.src = url;
+    iframe.style.borderWidth = '0';
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+
+    newWindow.document.body.appendChild(iframe);
+    newWindow.document.body.style.backgroundColor = 'rgb(82, 86, 89)';
+    newWindow.document.body.style.height = '100%';
+    newWindow.document.body.style.width = '100%';
+    newWindow.document.body.style.margin = '0';
+    newWindow.document.body.style.overflow = 'hidden';
+  }
+};
diff --git a/services/apps/alcs/src/portal/application-document/application-document.controller.ts b/services/apps/alcs/src/portal/application-document/application-document.controller.ts
@@ -75,7 +75,9 @@ export class ApplicationDocumentController {
 
     if (canAccessDocument) {
       const url = await this.applicationDocumentService.getInlineUrl(document);
-      return { url };
+      // TODO: Same thing for other document controllers
+      const { fileName } = document.document;
+      return { url, fileName };
     }
 
     throw new NotFoundException('Failed to find document');