further improvements

src/app/modals/chat-options-features/chat-options-features.page.html

@@ -5,7 +5,7 @@
     </button>
   </div>
   <div class="buttons">
-    <button hidden (click)="notImplemented()" full class="btn-cancel" shape="round" >Tirar Fotografia</button>
+    <button (click)="takePicture()" full class="btn-cancel hide-desktop" shape="round" >Tirar Fotografia</button>
     <button (click)="addPicture()" full class="btn-cancel" shape="round" >Anexar Fotografia</button>
     <button hidden (click)="addDocument()" class="btn-cancel" shape="round" >Documento</button>
     <button (click)="addDocGestaoDocumental()" class="btn-cancel" shape="round" >Anexar Documento (G.D.)</button>

src/app/modals/chat-options-features/chat-options-features.page.ts

@@ -72,6 +72,15 @@ export class ChatOptionsFeaturesPage implements OnInit {
     this.modalController.dismiss('add-document');
   }
 
+  takePicture(){
+    if( window.innerWidth < 701){
+      this.popoverController.dismiss('take-picture');
+    }
+    else{
+      this.modalController.dismiss('take-picture');
+    }
+  }
+
   addPicture(){
     this.modalController.dismiss('add-picture');
   }

src/app/pages/chat/group-messages/group-messages.module.ts

@@ -21,7 +21,6 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     FormsModule,
     FontAwesomeModule,
     IonicModule,
-
     GroupMessagesPageRoutingModule,
     ChatPopoverPageModule,
     BtnModalDismissPageModule,

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

@@ -50,15 +50,26 @@
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
               <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
-              <div *ngIf="file.thumb_url">
-                <div class="file d-flex">
-                  <ion-thumbnail slot="start">
-                    <img src="{{file.thumb_url}}" alt="image">
-                  </ion-thumbnail>
-                  <ion-label class="file-details">
-                    <h3 (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">{{file.title}}</h3>
-                    <p *ngIf="file.text">{{file.text}}</p>
-                  </ion-label>
+              <div>
+                <div>
+                  <div class="file">
+                    <!-- <canvas id="pdf_canvas"></canvas> -->
+                    <ion-label class="file-details" *ngIf="msg.file">
+                      <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                        <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>
+                        <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
+                        {{file.title}}
+                      </span>
+                    </ion-label>
+                  </div>
+                  <div class="file-details-optional">
+                    <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>
+                    </ion-label>
+                  </div>
                 </div>
               </div>
             </div>

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

@@ -9,6 +9,7 @@ import { MessagesPageRoutingModule } from './messages-routing.module';
 import { MessagesPage } from './messages.page';
 import { SharedModule } from 'src/app/shared/shared.module';
 import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-dismiss.page';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 
 @NgModule({
@@ -16,7 +17,7 @@ import { BtnModalDismissPage } from 'src/app/shared/btn-modal-dismiss/btn-modal-
     CommonModule,
     FormsModule,
     IonicModule,
-
+    FontAwesomeModule,
     MessagesPageRoutingModule
   ],
   declarations: [MessagesPage]

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

@@ -47,15 +47,25 @@
           <div *ngFor="let file of msg.attachments">
             <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
             <div>
-              <div class="file d-flex">
-                <ion-thumbnail *ngIf="file.thumb_url" slot="start">
-                  <img src="{{file.thumb_url}}" alt="image">
-                </ion-thumbnail>
-                <!-- <canvas id="pdf_canvas"></canvas> -->
-                <ion-label class="file-details">
-                  <h3 (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">{{file.title}}</h3>
-                  <p *ngIf="file.text">{{file.text}}</p>
-                </ion-label>
+              <div>
+                <div class="file">
+                  <!-- <canvas id="pdf_canvas"></canvas> -->
+                  <ion-label class="file-details" *ngIf="msg.file">
+                    <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                      <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>
+                      <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
+                      {{file.title}}
+                    </span>
+                  </ion-label>
+                </div>
+                <div class="file-details-optional">
+                  <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>
+                  </ion-label>
+                </div>
               </div>
             </div>
           </div>

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

@@ -339,7 +339,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
       // happens when the synchro was pending for too long
       // let's reconnect
       await this.serverLongPull();
-    } else if (res != 200) {
+    }
+    else if (res != 200) {
       // Show Error
       //showMessage(response.statusText);
       //this.loadMessages()

src/app/services/functions/file.service.ts

@@ -206,9 +206,11 @@ export class FileService {
     });
     await modal.present();
     modal.onDidDismiss().then(async res=>{
-      if(res){
+      const data = res.data;
+
+      if(data.selected){
         const loader = this.toastService.loading();
-        const data = res.data;
+
         this.documents.push(data.selected);
         console.log(res.data.selected);
         console.log(res.data.selected.Id);
@@ -226,12 +228,16 @@ export class FileService {
             "msg": "",
             "attachments": [{
               "title": res.data.selected.Assunto,
-              "text": res.data.selected.DocTypeDesc,
+              "description": res.data.selected.DocTypeDesc,
               "title_link": url_no_options,
               "title_link_download": true,
-              "thumb_url": "https://static.ichimura.ed.jp/uploads/2017/10/pdf-icon.png",
+              //"thumb_url": "assets/images/webtrix-logo.png",
               "message_link": url_no_options,
-            }]
+            }],
+            "file":{
+              "name": res.data.selected.Assunto,
+              "type": "application/webtrix"
+            }
           }
         }
         this.chatService.sendMessage(body).subscribe(res=> {
@@ -240,7 +246,7 @@ export class FileService {
         },(error) => {
           loader.remove();
         });
-
+        loader.remove();
       }
     });
   }

src/app/shared/chat/group-messages/group-messages.module.ts

@@ -12,17 +12,18 @@ import { SharedModule } from 'src/app/shared/shared.module';
 import { ChatPopoverPageModule } from '../../popover/chat-popover/chat-popover.module';
 import { NewEventPageModule } from '../../agenda/new-event/new-event.module';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    FontAwesomeModule,
     PdfViewerModule,
     ChatPopoverPageModule,
     GroupMessagesPageRoutingModule,
     //
-    PdfViewerModule,
   ],
   exports: [GroupMessagesPage],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],

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

@@ -50,23 +50,25 @@
             <div *ngFor="let file of msg.attachments">
               <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
               <div>
-                <div class="file d-flex">
-                  <ion-thumbnail *ngIf="file.thumb_url" slot="start">
-                    <img src="{{file.thumb_url}}" alt="image">
-                  </ion-thumbnail>
-                  <!-- <canvas id="pdf_canvas"></canvas> -->
-                  <ion-label class="file-details">
-                    <h3 (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">{{file.title}}</h3>
-                    <p *ngIf="file.text">{{file.text}}</p>
-                  </ion-label>
-
-                  <!-- <pdf-viewer
-                    [src]="file.title_link"
-                    [render-text]="true"
-                    style="display: block;"
-                    original-size="true"
-                    show-all="true">
-                  </pdf-viewer> -->
+                <div>
+                  <div class="file">
+                    <!-- <canvas id="pdf_canvas"></canvas> -->
+                    <ion-label class="file-details" *ngIf="msg.file">
+                      <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                        <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>
+                        <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
+                        {{file.title}}
+                      </span>
+                    </ion-label>
+                  </div>
+                  <div class="file-details-optional">
+                    <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>
+                    </ion-label>
+                  </div>
                 </div>
               </div>
             </div>

src/app/shared/chat/group-messages/group-messages.page.scss

@@ -1,4 +1,7 @@
  @import '~src/function.scss';
+ div{
+   overflow: auto;
+ }
 .header-toolbar{
     --background:transparent;
     --opacity: 1;

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

@@ -632,57 +632,67 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
         }
         this.openNewEventPage.emit(data);
       }
+      else if(res['data'] == 'take-picture'){
+        this.fileService.addCameraPictureToChat(this.roomId);
+        //this.loadPicture();
+      }
       else if(res['data'] == 'add-picture'){
-        this.loadPicture();
+        this.fileService.addPictureToChat(this.roomId);
+        //this.loadPicture();
       }
       else if(res['data'] == 'add-document'){
         this.loadDocument();
       }
       else if(res['data'] == 'documentoGestaoDocumental'){
-        this.addDocGestaoDocumental();
+        this.fileService.addDocGestaoDocumentalToChat(this.roomId);
+        //this.addDocGestaoDocumental();
       }
 
     });
   }
 
   async serverLongPull(){
-    this.chatService.getPrivateGroupMessages(this.roomId).subscribe(async res => {
 
-    if (res == 502) {
-      // Connection timeout
-      // happens when the connection was pending for too long
-      // let's reconnect
-      await this.serverLongPull();
-    } else if (res != 200) {
-      // Show Error
-      //showMessage(response.statusText);
-      //this.loadMessages()
-      let msgOnly = res['messages'].filter(data => data.t != 'au');
-      this.messages = msgOnly.reverse();
-      console.log(this.messages);
-      // Reconnect in one second
-      if(this.route.url != "/home/chat"){
-        //console.log("Timer message stop")
-      } else {
-        if(document.querySelector('app-group-messages')){
-          await new Promise(resolve => setTimeout(resolve,3000));
-          await this.serverLongPull();
-          this.getGroups.emit();
-          //console.log('Timer message running')
-        }
-        else{
-
-        }
-      }
-
-    } else {
-      // Got message
-      //let message = await response.text();
-      //this.loadMessages()
-      await this.serverLongPull();
+    if(this.route.url != "/home/chat" && document.querySelector('app-group-messages')){
+      console.log("Timer message stop")
+    }
+    else
+    {
+
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(async res =>
+      {
+        if(res['success'] == true) {
+          // Show Error
+          //showMessage(response.statusText);
+          //this.loadMessages()
+          let msgOnly = res['messages'].filter(data => data.t != 'au');
+          this.messages = msgOnly.reverse();
+          console.log(this.messages);
+          // Reconnect in one second
+
+          if(document.querySelector('app-group-messages')){
+              await new Promise(resolve => setTimeout(resolve,5000));
+              this.getGroups.emit();
+              console.log('Timer message running')
+              await this.serverLongPull();
+          }
+
+        }
+        else {
+          alert('HEY2')
+          // Got message
+          //let message = await response.text();
+          //this.loadMessages()
+          await this.serverLongPull();
+        }
+      }, (error)=>{
+        console.log(error);
+        this.serverLongPull();
+      });
     }
-  });
   }
 
+
+
 }
 

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

@@ -8,12 +8,14 @@ import { MessagesPageRoutingModule } from './messages-routing.module';
 
 import { MessagesPage } from './messages.page';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    FontAwesomeModule,
     MessagesPageRoutingModule
   ],
   exports: [MessagesPage],

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

@@ -42,18 +42,26 @@
           <div *ngIf="msg.attachments" class="message-attachments">
             <div *ngFor="let file of msg.attachments">
               <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
-              <div>
-                <div class="file d-flex">
-                  <ion-thumbnail *ngIf="file.thumb_url" slot="start">
-                    <img src="{{file.thumb_url}}" alt="image">
-                  </ion-thumbnail>
-                  <!-- <canvas id="pdf_canvas"></canvas> -->
-                  <ion-label class="file-details">
-                    <h3 (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">{{file.title}}</h3>
-                    <p *ngIf="file.text">{{file.text}}</p>
-                  </ion-label>
+                <div>
+                  <div class="file">
+                    <!-- <canvas id="pdf_canvas"></canvas> -->
+                    <ion-label class="file-details" *ngIf="msg.file">
+                      <span (click)="viewDocument(file.title_link)" class="file-title cursor-pointer">
+                        <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>
+                        <ion-icon *ngIf="msg.file.type == 'application/webtrix'" src="assets/icon/webtrix.svg"></ion-icon>
+                        {{file.title}}
+                      </span>
+                    </ion-label>
+                  </div>
+                  <div class="file-details-optional">
+                    <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>
+                    </ion-label>
+                  </div>
                 </div>
-              </div>
             </div>
           </div>
           {{last ? scrollToBottom() : ''}}

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

@@ -151,7 +151,29 @@
         margin-left: 10px;
         float: right;
       }
-   }
+    }
+    .message{
+      .message-attachments{
+        .file{
+          align-items: center;
+
+          .file-details{
+            width: 100%;
+
+            .file-title{
+              color: #000;
+              text-decoration: underline;
+              white-space: nowrap;
+              overflow: hidden !important;
+              text-overflow: ellipsis !important;
+            }
+            .file-title:hover{
+              color: #0782c9;
+            }
+          }
+        }
+      }
+    }
  }
 
  ion-footer{

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

@@ -139,6 +139,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       this.scrollingOnce = false;
     }
     this.currentPosition = scroll;
+    /* console.log(this.currentPosition);
+    console.log(this.scrollingOnce); */
   }
 
   ngOnDestroy() {
@@ -356,6 +358,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
         }
         this.openNewEventPage.emit(data);
       }
+      else if(res['data'] == 'take-picture'){
+        this.fileService.addCameraPictureToChat(this.roomId);
+        //this.loadPicture();
+      }
       else if(res['data'] == 'add-picture'){
         this.fileService.addPictureToChat(this.roomId);
         //this.loadPicture();
@@ -376,38 +382,42 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   async serverLongPull() {
 
-    const roomId = this.roomId
-    this.chatService.getRoomMessages(this.roomId).subscribe(async res => {
+    const roomId = this.roomId;
 
-    if (res == 502) {
-      // Connection timeout
-      // happens when the connection was pending for too long
-      // let's reconnect
-      await this.serverLongPull();
-    } else if (res != 200) {
+    this.chatService.getRoomMessages(this.roomId).subscribe(async res => {
+      console.log(res['success']);
+
+
+     if (res['success'] == true) {
       // Show Error
       //showMessage(response.statusText);
       //this.loadMessages()
       this.messages = res['messages'].reverse();
       this.chatMessageStore.add(roomId, this.messages)
+
       console.log(this.messages);
       // Reconnect in one second
       if(this.route.url != "/home/chat"){
         console.log("Timer message stop")
-      } else {
-          if(document.querySelector('app-messages')){
-            await new Promise(resolve => setTimeout(resolve, 5000));
-            await this.serverLongPull();
-            this.getDirectMessages.emit();
-            console.log('Timer message running')
-          }
       }
-    } else {
+      else{
+        if(document.querySelector('app-messages')){
+          await new Promise(resolve => setTimeout(resolve, 5000));
+          await this.serverLongPull();
+          this.getDirectMessages.emit();
+          console.log('Timer message running')
+        }
+      }
+    } /* else {
       // Got message
       //let message = await response.text();
       //this.loadMessages()
       await this.serverLongPull();
-    }
+    } */
+  }, (error)=>{
+    console.log(error);
+    this.serverLongPull();
+
   });
   }
 

src/global.scss

@@ -1072,6 +1072,48 @@ ngx-mat-datetime-content{
     }
 }
 
+.message-attachments{
+  border-radius: 5px;
+  background-color: #42b9fe13;
+  padding: 1px;
+  .file{
+    ion-thumbnail{
+      --size: 20px;
+    }
+    .file-details{
+      max-width: calc(100% - 20px);
+      padding-left: 5px;
+
+      .file-title:hover{
+        color: #0782c9;
+        text-decoration: underline;
+      }
+
+      span{
+        white-space: nowrap;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+      }
+      .pdf-icon{
+        color: #a40404;
+      }
+      .word-icon{
+        color: #295497;
+      }
+      .excel-icon{
+        color: #1f7244;
+      }
+      .powerpoint-icon{
+        color: #d24726;
+      }
+    }
+  }
+  .file-details-optional{
+    font-size: xx-small;
+    padding-left: 5px;
+  }
+}
+
 @media only screen and (min-width: 665px) {
     .loading-blocker {