Downaload file on chat done

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

@@ -4,12 +4,15 @@
       <div class="header-top">
         <div class="middle" *ngFor="let users of dmUsers">
           <ion-label class="title">{{users.name}}</ion-label>
-          <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
+          <span>
+            <ion-icon class="{{users.status}}" name="ellipse"></ion-icon>
+          </span>
         </div>
         <div hidden class="right">
           <button class="btn-no-color" (click)="_openMessagesOptions()">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/icons-menu.svg"></ion-icon>
-            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg"></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
+            </ion-icon>
           </button>
         </div>
       </div>
@@ -40,7 +43,8 @@
     <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last">
       <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
         <div class="message-item-options d-flex justify-content-end">
-          <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
+          <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
+          </fa-icon>
           <mat-menu #beforeMenu="matMenu" xPosition="before">
             <button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
           </mat-menu>
@@ -54,9 +58,11 @@
           {{last ? scrollToBottom() : ''}}
         </div>
       </div>
-      <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.alias == 'documento'">
+      <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'
+        *ngIf="msg.alias == 'documento'">
         <div class="message-item-options d-flex justify-content-end">
-          <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer"></fa-icon>
+          <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
+          </fa-icon>
           <mat-menu #beforeMenu="matMenu" xPosition="before">
             <button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
           </mat-menu>
@@ -78,11 +84,14 @@
               </div>
               <div *ngIf="msg.file">
                 <div class="file">
-                    <div (click)="viewDocument(msg, file.title_link)" class="file-details add-ellipsis cursor-pointer" *ngIf="msg.file">
+                  <div (click)="viewDocument(msg, file.title_link)" 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>
+                      <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>
                       <ion-icon *ngIf="msg.file.type == 'application/meeting'" src="assets/icon/webtrix.svg"></ion-icon>
                     </span>
@@ -93,7 +102,8 @@
                   <ion-label *ngIf="msg.file">
                     <span *ngIf="file.description">{{file.description}}</span>
                     <span *ngIf="file.description && msg.file.type != 'application/webtrix'"> • </span>
-                      <span *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
+                    <span
+                      *ngIf="msg.file.type != 'application/webtrix'">{{msg.file.type.replace('application/','').toUpperCase()}}</span>
                   </ion-label>
                 </div>
               </div>
@@ -103,12 +113,51 @@
         </div>
 
       </div>
-      <div *ngIf="msg.file" >
+
+      <div class='message-item incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45' *ngIf="msg.msg ==''">
+        <div *ngIf="msg.file.type == 'application/img'">
+          <div class="message-item-options d-flex justify-content-end">
+            <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">
+            </fa-icon>
+            <mat-menu #beforeMenu="matMenu" xPosition="before">
+              <button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
+            </mat-menu>
+          </div>
+          <div class="title">
+            <ion-label>{{msg.u.name}}</ion-label>
+            <span class="time">{{showDateDuration(msg._updatedAt)}}</span>
+          </div>
+          <div>
+            <ion-label>{{msg.msg}}</ion-label>
+            <div *ngIf="msg.file" class="message-attachments">
+              <div>
+                <div (click)="openPreview(msg)">
+                  <!-- <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image" (click)="imageSize(file.image_url)"> -->
+                  TTTT
+                  <img *ngIf="msg.file.image_url" src="{{msg.file.image_url}}" alt="image">
+                </div>
+              </div>
+            </div>
+            {{last ? scrollToBottom() : ''}}
+          </div>
+        </div>
+      </div>
+
+
+      <div *ngIf="msg.file">
         <div class="info-meeting" *ngIf="msg.file.type == 'application/meeting'">
           <ion-label class="info-meeting-small">{{msg.u.name}} criou esta reunião</ion-label><br />
-          <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal"><ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label></button><br />
+          <button (click)="goToEvent(msg.file.id)" class="btn-no-color info-meeting-normal">
-          <ion-label class="info-meeting-medium"><ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a {{showDateDuration(msg.file.end_date)}}</ion-label><br />
+            <ion-label class="info-meeting-normal">{{msg.file.subject}}</ion-label>
-          <ion-label class="info-meeting-medium"><ion-icon></ion-icon><ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}</ion-label><br />
+          </button><br />
+          <ion-label class="info-meeting-medium">
+            <ion-icon name="calendar-outline"></ion-icon> De {{showDateDuration(msg.file.start_date)}} a
+            {{showDateDuration(msg.file.end_date)}}
+          </ion-label><br />
+          <ion-label class="info-meeting-medium">
+            <ion-icon></ion-icon>
+            <ion-icon name="location-outline"></ion-icon> {{msg.file.venue}}
+          </ion-label><br />
         </div>
         {{last ? scrollToBottom() : ''}}
       </div>
@@ -156,7 +205,8 @@
 
     <div class="width-100">
       <ion-item class="ion-no-padding type-message" lines="none">
-        <ion-textarea (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-textarea (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem"
+          class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
         <button hidden class="btn-no-color" (click)="notImplemented()">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button>
@@ -164,14 +214,17 @@
     </div>
     <div>
       <button *ngIf="message" class="btn-no-color" (click)="sendMessage()">
-        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send"
-        <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+          src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send"
+          src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
       <button *ngIf="!message" class="btn-no-color">
-        <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send"
-        <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+          src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
+        <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send"
+          src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
     </div>
   </div>
 </ion-footer>
-

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

@@ -109,7 +109,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     console.log("Chat route", this.route.url)
 
     this.setStatus('online');
-    this.getMessageDB();
+    //this.getMessageDB();
   }
 
   onPressingMessage() {
@@ -272,55 +272,57 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   }
 
-  getImageFromStorage (element) {
+  async transformData(res) {
-    let image;
-      if (typeof element.file != 'undefined') {
-        if (typeof element.file.guid != 'undefined') {
-          let imageguid = this.storage.get(element.file.guid);
-          if (imageguid) {
-            image = imageguid;
-            console.log('IMAGE STORAGE', image)
-          } else {
-            image = "";
-            console.log('IMAGE STORAGE', image)
-          }
-        } else {
-          image = "";
-        }
-      }
-      console.log('IMAGE STORAGE RETURN', image.__zone_symbol__value)
-    return image.__zone_symbol__value;
-  }
-
-  transformData(res) {
     let mgsArray = [];
-    res.forEach(async element => {
+    res.map(async element => {
 
+      if (element.file) {
+        if (element.file.guid) {
+          await this.storage.get(element.file.guid).then((image) => {
             let chatmsg = {
               _id: element._id,
               attachments: element.attachments,
               channels: element.channels,
-        file: element.file,
+              file: {
+                guid: element.file.guid,
+                image_url: image,
+                type: element.file.type
+              },
               mentions: element.mentions,
               msg: element.msg,
               rid: element.rid,
               ts: element.ts,
               u: element.u,
               _updatedAt: element._updatedAt,
-        image_url: this.getImageFromStorage(element),
+
             }
 
             mgsArray.push(chatmsg)
 
+          })
+        }
+      } else {
+        let chatmsg = {
+          _id: element._id,
+          attachments: element.attachments,
+          channels: element.channels,
+          mentions: element.mentions,
+          msg: element.msg,
+          rid: element.rid,
+          ts: element.ts,
+          u: element.u,
+          _updatedAt: element._updatedAt,
+        }
+
+        mgsArray.push(chatmsg)
+      }
 
     });
-    console.log('Web TRANSFORM MSG', mgsArray)
+    await this.storage.remove('chatmsg').then(() => {
-    this.storage.remove('chatmsg').then(() => {
       console.log('MSG REMOVE FROM STORAGE')
     });
-    this.storage.set('chatmsg', mgsArray).then(() => {
+    await this.storage.set('chatmsg', mgsArray).then((value) => {
-      console.log('MSG SAVED ON STORAGE')
+      console.log('MSG SAVED ON STORAGE', value)
-      this.getMessageDB();
     });
 
   }
@@ -328,10 +330,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   loadMessages() {
     //this.showLoader = true;
     const roomId = this.roomId
-    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
+    this.chatService.getRoomMessages(this.roomId).subscribe(async res => {
       console.log('ALL MSG FROM CHATROCK', res);
-      this.transformData(res['messages']);
+      await this.transformData(res['messages']);
-      this.getMessageDB();
       //this.getFileFromLakeFS();
       /* this.messages = res['messages'].reverse();
       this.chatMessageStore.add(roomId, this.messages) */
@@ -705,10 +706,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
         // Show Error
         //showMessage(response.statusText);
         console.log('ALL MSG FROM CHATROCK', res);
-        /* this.transformData(res['messages']);
+        /* this.transformData(res['messages']);*/
-        this.getMessageDB(); */
+        await this.transformData(res['messages']);
-        this.transformData(res['messages']);
         this.getMessageDB();
+
         /* 
         this.messages = res['messages'].reverse();
         this.chatMessageStore.add(roomId, this.messages) */
@@ -827,7 +828,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   async openPreview(msg) {
-    if (msg.image_url = "") {
+    if (msg.file.image_url === null) {
+      this.downloadFileMsg(msg)
+    } else {
       const modal = await this.modalController.create({
         component: ViewMediaPage,
         cssClass: 'modal modal-desktop',
@@ -838,8 +841,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
         }
       });
       modal.present();
-    } else {
-      this.downloadFileMsg(msg)
     }
 
   }