several improvements

2026-04-19 04:57:52 +00:00 · 2021-09-21 14:05:59 +01:00
parent afb7c42e9f
commit 2e209711bb
22 changed files with 603 additions and 74 deletions
@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';

@@ -12,15 +12,21 @@ 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';
+
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
+    PdfViewerModule,
    ChatPopoverPageModule,
    GroupMessagesPageRoutingModule,
+
+
  ],
  exports: [GroupMessagesPage],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  declarations: [GroupMessagesPage]
 })
 export class GroupMessagesPageModule {}
@@ -16,7 +16,7 @@
          <ion-icon src="assets/icon/icons-user.svg"></ion-icon>
        </div>
        <div class="header-bottom-contacts">
-          <ion-label *ngFor="let member of members" >
+          <ion-label class="contacts-list" *ngFor="let member of members" >
            {{member.name}},
          </ion-label>
        </div>
@@ -25,7 +25,6 @@
  </ion-toolbar>
 </ion-header>

-
 <ion-content>
  <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
@@ -38,6 +37,7 @@
      <ion-label> Esta conversa passou a grupo</ion-label><br />
      <ion-label>A conversa original mantêm-se como chat individual</ion-label>
    </div>
+
    <div class="container-width-100" *ngFor="let msg of messages; let last = last" #scrollMe>
      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" class='incoming-{{msg.u.username!=loggedUser.me.username}} max-width-45'>
        <div class="title">
@@ -49,15 +49,24 @@
          <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>
                <div class="file d-flex">
-                  <ion-thumbnail slot="start">
+                  <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>
            </div>
@@ -31,7 +31,7 @@
          }
        }
        .header-bottom{
-          width: 95%;
+          width: 98%;
          overflow: auto;

          .header-bottom-icon{
@@ -42,6 +42,7 @@

          }
          .header-bottom-contacts{
+            width: calc(100% - 40px);
            font-size: 15px;
            color: #797979;
            white-space: nowrap;
@@ -50,6 +51,12 @@
            float: left;
            padding: 5px;
            margin: 1px;
+
+            .contacts-list{
+              white-space: nowrap;
+              overflow: hidden !important;
+              text-overflow: ellipsis !important;
+            }
          }
        }

@@ -18,6 +18,15 @@ import { SearchList } from 'src/app/models/search-document';
 import { ProcessesService } from 'src/app/services/processes.service';
 import { FileService } from 'src/app/services/functions/file.service';

+
+/*
+import * as pdfjsLib from 'pdfjs-dist';
+if( pdfjsLib !== undefined ){
+  console.log( "set worker...");
+   pdfjsLib.GlobalWorkerOptions.workerSrc = "https://npmcdn.com/pdfjs-dist@2.4.456/build/pdf.worker.js";
+}
+*/
+
@Component({
  selector: 'app-group-messages',
  templateUrl: './group-messages.page.html',
@@ -56,6 +65,8 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe

  @ViewChild('scrollMe') private myScrollContainer: ElementRef;

+  pdfurl = "http://www.africau.edu/images/default/sample.pdf";
+
  constructor(
    private menu: MenuController,
    private modalController: ModalController,
@@ -74,6 +85,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
  ) {
    this.loggedUserChat = authService.ValidatedUserChat['data'];
    this.isGroupCreated = true;
+
  }
  ngOnChanges(changes: SimpleChanges): void {
    //this.getRoomInfo();
@@ -87,15 +99,54 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    console.log(this.roomId);
    this.setStatus('online');
    this.getChatMembers();
+
+    /* pdfjs.Lib.getDocument('sample.pdf').promise.then((doc)=>{
+      console.log(doc);
+
+    }) */
+    //this.loadPDF();
  }

+  /* loadPDF() {
+    const loadingTask = pdfjsLib.getDocument( this.pdfurl );
+    loadingTask.promise.then((pdf) => {
+      console.log( "pdf: ", pdf );
+       console.log('PDF loaded');
+
+  // Fetch the first page
+  var pageNumber = 1;
+  pdf.getPage(pageNumber).then(function(page) {
+    console.log('Page loaded');
+
+    var scale = 1.5;
+    var viewport = page.getViewport({scale: scale});
+
+    // Prepare canvas using PDF page dimensions
+    var canvas: any = document.getElementById('pdf_canvas');
+    var context = canvas.getContext('2d');
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+
+    // Render PDF page into canvas context
+    var renderContext = {
+      canvasContext: context,
+      viewport: viewport
+    };
+    var renderTask = page.render(renderContext);
+    renderTask.promise.then(function () {
+      console.log('Page rendered');
+    });
+  });
+    });
+  } */
+
  setStatus(status:string){
    let body = {
      message: '',
      status: status,
    }
    this.chatService.setUserStatus(body).subscribe(res => {
-      console.log(res);
+      //console.log(res);
    })
  }

@@ -132,10 +183,10 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
  async getChatMembers(){
    //return await this.chatService.getMembers(roomId).toPromise();
    this.chatService.getAllUsers().subscribe(res=> {
-      console.log(res);
+      //console.log(res);

      this.allUsers = res['users'].filter(data => data.username != this.loggedUserChat.me.username);
-      console.log(this.allUsers);
+      //console.log(this.allUsers);
    });
  }

@@ -187,7 +238,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    //If group is private call getGroupMembers
    if(room.t === 'p'){
      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
-        console.log(res);
+        //console.log(res);
        this.members = res['members'];
        this.showLoader = false;
      });
@@ -214,7 +265,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
        console.log(res);
        let msgOnly = res['messages'].filter(data => data.t != 'au');
        this.messages = msgOnly.reverse();
-        console.log(res);
+        //console.log(res);

        this.showLoader = false;
      });
@@ -438,6 +489,49 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
    };
  }

+  loadDocument() {
+    const input = this.fileLoaderService.createInput({
+      accept: ['.doc', '.docx', '.pdf']
+    })
+
+    input.onchange = async () => {
+      const file = this.fileLoaderService.getFirstFile(input)
+
+      console.log(file);
+
+      const imageData =  await this.fileToBase64Service.convert(file)
+      this.capturedImage = imageData;
+      this.capturedImageTitle = file.name;
+
+      let body = {
+        "message":
+        {
+          "rid": this.roomId,
+          "msg": "",
+          "attachments": [{
+            "title": this.capturedImageTitle,
+            "text": "",
+            "title_link": this.capturedImage,
+            "title_link_download": true,
+            "thumb_url": "https://static.ichimura.ed.jp/uploads/2017/10/pdf-icon.png",
+            "message_link": this.capturedImage,
+          }],
+          "file":{
+            "name": this.capturedImageTitle,
+            "type": "application/pdf",
+          }
+        }
+      }
+
+      this.chatService.sendMessage(body).subscribe(res=> {
+        //console.log(res);
+      },(error) => {
+
+      });
+      //console.log(this.capturedImage)
+    };
+  }
+
  async addDocGestaoDocumental(){
    const modal = await this.modalController.create({
      component: SearchPage,
@@ -529,7 +623,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe

    await modal.present();
    modal.onDidDismiss().then((res)=>{
-      console.log(res['data']);
+      //console.log(res['data']);
      if(res['data'] == 'meeting'){
        //this.closeAllDesktopComponents.emit();
        let data = {
@@ -538,9 +632,12 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
        }
        this.openNewEventPage.emit(data);
      }
-      else if(res['data'] == 'picture'){
+      else if(res['data'] == 'add-picture'){
        this.loadPicture();
      }
+      else if(res['data'] == 'add-document'){
+        this.loadDocument();
+      }
      else if(res['data'] == 'documentoGestaoDocumental'){
        this.addDocGestaoDocumental();
      }
@@ -565,13 +662,13 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
      console.log(this.messages);
      // Reconnect in one second
      if(this.route.url != "/home/chat"){
-        console.log("Timer message stop")
+        //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')
+          //console.log('Timer message running')
        }
        else{

@@ -39,6 +39,23 @@
        </div>
        <div>
          <ion-label>{{msg.msg}}</ion-label>
+          <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>
+            </div>
+          </div>
          {{last ? scrollToBottom() : ''}}
        </div>
      </div>
@@ -13,6 +13,7 @@ import { ChatOptionsFeaturesPage } from 'src/app/modals/chat-options-features/ch
 import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
 import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
 import { TimeService } from 'src/app/services/functions/time.service';
+import { FileService } from 'src/app/services/functions/file.service';

@Component({
  selector: 'app-messages',
@@ -61,6 +62,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    private toastService: ToastService,
    private route: Router,
    private timeService: TimeService,
+    private fileService: FileService,
  ) {
    this.loggedUser = authService.ValidatedUserChat['data'];

@@ -191,6 +193,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
    })
  }

+  viewDocument(url:string){
+    this.fileService.viewDocumentByUrl(url);
+  }
+
  getChatMembers() {
    console.log(this.roomId);

@@ -350,6 +356,20 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
        }
        this.openNewEventPage.emit(data);
      }
+      else if(res['data'] == 'add-picture'){
+        this.fileService.addPictureToChat(this.roomId);
+        //this.loadPicture();
+      }
+      else if(res['data'] == 'add-document'){
+        this.fileService.addDocumentToChat(this.roomId);
+        //this.loadDocument();
+      }
+      else if(res['data'] == 'documentoGestaoDocumental'){
+
+        this.fileService.addDocGestaoDocumentalToChat(this.roomId);
+        this.showLoader = false;
+        //this.addDocGestaoDocumental();
+      }

    });
  }