Document Viewer Review

src/app/app-routing.module.ts

@@ -10,6 +10,10 @@ const routes: Routes = [
     path: '',
     loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
   },
+  {
+    path: 'viewer',
+    loadChildren: () => import('./pages/events/attachments/viewer/viewer.module').then( m => m.ViewerPageModule)
+  },
  /*  {
     path: 'cal-modal',
     loadChildren: () => import('./pages/cal-modal/cal-modal.module').then( m => m.CalModalPageModule)

src/app/app.module.ts

@@ -11,7 +11,6 @@ import { AppComponent } from './app.component';
 import { HttpClientModule } from '@angular/common/http';
 
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
-/* import { IonicSelectableModule } from 'ionic-selectable'; */
 
 @NgModule({
   declarations: [AppComponent],
@@ -23,7 +22,6 @@ import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
     HttpClientModule,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
     InAppBrowser,
-    /* IonicSelectableModule */
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/pages/events/attachments/attachments-routing.module.ts

@@ -7,6 +7,10 @@ const routes: Routes = [
   {
     path: '',
     component: AttachmentsPage
+  },
+  {
+    path: 'viewer',
+    loadChildren: () => import('./viewer/viewer.module').then( m => m.ViewerPageModule)
   }
 ];
 

src/app/pages/events/attachments/attachments.page.html

@@ -3,7 +3,7 @@
     <ion-buttons slot="start">
       <ion-back-button (click)="navigateBack()" defaultHref="" icon="chevron-back"></ion-back-button>
     </ion-buttons>
-    <ion-title>Anexos do evento</ion-title>
+    <ion-title>Anexos do evento 5</ion-title>
   </ion-toolbar>
 </ion-header>
 <ion-content>

src/app/pages/events/attachments/attachments.page.ts

@@ -3,6 +3,8 @@ import { AttachmentsService } from 'src/app/services/attachments.service';
 import { Attachment } from 'src/app/models/attachment.model';
 import { ActivatedRoute, Router } from '@angular/router';
 import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';
+import { AlertController, ModalController } from '@ionic/angular';
+import { ViewerPage } from 'src/app/pages/events/attachments/viewer/viewer.page'
 
 @Component({
   selector: 'app-attachments',
@@ -14,7 +16,7 @@ export class AttachmentsPage implements OnInit {
   loadedEventAttachments: Attachment[];
   pageId: string;
 
-  constructor(private attachamentsService: AttachmentsService, private activatedRoute: ActivatedRoute, private iab: InAppBrowser, private route: Router) { }
+  constructor(private attachamentsService: AttachmentsService, private activatedRoute: ActivatedRoute, private iab: InAppBrowser, private route: Router, private modalCtrl: ModalController) { }
 
   ngOnInit() {
         /* Emit new data when something changes */
@@ -32,14 +34,28 @@ export class AttachmentsPage implements OnInit {
     this.attachamentsService.getEventAttachments(eventid).subscribe(attachments => {
       this.loadedEventAttachments = attachments;
       this.pageId = eventid;
-      console.log(this.pageId);
     });
   }
 
-  viewDocument(documenturl:string)
+  async viewDocument(documenturl:string)
   {
-    const browser = this.iab.create(documenturl);
+    //var ref = cordova.InAppBrowser.open(documenturl, '_blank', 'location=yes');
+
+    const browser = this.iab.create(documenturl, "_self")
     browser.show();
+
+    // const modal = await this.modalCtrl.create({
+    //   component: ViewerPage,
+    //    componentProps: {
+    //     externalLink: documenturl
+    //   },
+    //   cssClass: 'viewer',
+    //   backdropDismiss: false
+    // });
+
+    // await modal.present();
+
+    // modal.onDidDismiss();
   }
 
   navigateBack(){

src/app/pages/events/attachments/viewer/viewer-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ViewerPage } from './viewer.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ViewerPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ViewerPageRoutingModule {}

src/app/pages/events/attachments/viewer/viewer.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { ViewerPageRoutingModule } from './viewer-routing.module';
+
+import { ViewerPage } from './viewer.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    ViewerPageRoutingModule
+  ],
+  declarations: [ViewerPage]
+})
+export class ViewerPageModule {}

src/app/pages/events/attachments/viewer/viewer.page.html

@@ -0,0 +1,22 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>viewer</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <iframe class="e2e-iframe-untrusted-src" *ngIf="externalLink" [src]="externalLinkSanitized" width="100%" height="100%" frameborder="0" 
+    sandbox="allow-scripts 
+    allow-pointer-lock 
+    allow-same-origin 
+    allow-popups 
+    allow-forms"></iframe>
+    <!-- <iframe class="e2e-iframe-untrusted-src" *ngIf="externalLink" [src]="externalLinkSanitized" width="100%" height="100%" frameborder="0" 
+    sandbox="allow-presentation 
+    allow-scripts 
+    allow-top-navigation 
+    allow-pointer-lock 
+    allow-same-origin 
+    allow-popups 
+    allow-forms"></iframe> -->
+</ion-content>

src/app/pages/events/attachments/viewer/viewer.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { ViewerPage } from './viewer.page';
+
+describe('ViewerPage', () => {
+  let component: ViewerPage;
+  let fixture: ComponentFixture<ViewerPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ViewerPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ViewerPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/events/attachments/viewer/viewer.page.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-viewer',
+  templateUrl: './viewer.page.html',
+  styleUrls: ['./viewer.page.scss'],
+})
+export class ViewerPage implements OnInit {
+
+  externalLink: string;
+  externalLinkSanitized: SafeResourceUrl;
+
+  constructor(public sanitizer: DomSanitizer) { }
+
+  ngOnInit() {
+    this.externalLinkSanitized = this.sanitizer.bypassSecurityTrustResourceUrl(this.externalLink);
+    console.log(this.externalLinkSanitized);
+  }
+
+}

src/app/pages/gabinete-digital/expediente/expediente-detail/expediente-detail.page.ts

@@ -5,6 +5,7 @@ import { DailyWorkTask } from '../../../../models/dailyworktask.model';
 import { ActivatedRoute } from '@angular/router';
 import { formatDate } from '@angular/common';
 
+
 @Component({
   selector: 'app-expediente-detail',
   templateUrl: './expediente-detail.page.html',
@@ -43,7 +44,7 @@ export class ExpedienteDetailPage implements OnInit {
 
   viewDocument()
   {
-    const browser = this.iab.create(this.task.DocumentURL);
+    const browser = this.iab.create(this.task.DocumentURL,"_blank");
     browser.show();
   }
 }