replicate download file from chat conversation mobile and web

src/app/pages/chat/messages/messages.page.html

@@ -64,10 +64,11 @@
                 <div>
                   <div class="file">
                     <!-- <canvas id="pdf_canvas"></canvas> -->
-                    <div class="file-details add-ellipsis" *ngIf="msg.file">
-                      <span (click)="viewDocument(file.title_link)" class="cursor-pointer">
+                    <div (click)="viewDocument(file)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
+                      <span *ngIf="msg.file.type">
                         <fa-icon *ngIf="msg.file.type == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
                         <fa-icon *ngIf="msg.file.type == 'application/word'" icon="file-word" class="word-icon"></fa-icon>
+                        <fa-icon *ngIf="msg.file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'" icon="file-word" class="excel-icon"></fa-icon>
                         <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
                       </span>
                       <ion-label class="file-title">{{file.title}}</ion-label>

src/app/pages/chat/messages/messages.page.ts

@@ -2,6 +2,7 @@ import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnIn
 import {ActivatedRoute, Router} from '@angular/router'
 import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { map } from 'rxjs/operators';
+import { ViewDocumentPage } from 'src/app/modals/view-document/view-document.page';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
 import { AlertService } from 'src/app/services/alert.service';
@@ -273,8 +274,28 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     })
   }
 
-  viewDocument(url:string){
-    this.fileService.viewDocumentByUrl(url);
+  viewDocument(file:any){
+    if(file.type == "file"){
+      let fullUrl = "https://www.tabularium.pt" + file.title_link;
+      this.fileService.viewDocumentByUrl(fullUrl);
+    }
+    else{
+      this.fileService.viewDocumentByUrl(file.title_link);
+      //this.openViewDocumentModal(file);
+    }
+  }
+
+  async openViewDocumentModal(file:any){
+    const modal = await this.modalController.create({
+      component: ViewDocumentPage,
+      componentProps: {
+        file: file,
+      },
+      cssClass: 'modal modal-desktop',
+      backdropDismiss: false
+    });
+    await modal.present();
+    modal.onDidDismiss();
   }
 
   getChatMembers() {