Delete message in chat completed

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

@@ -13,6 +13,7 @@ import { ChatPopoverPageModule } from '../../popover/chat-popover/chat-popover.m
 import { NewEventPageModule } from '../../agenda/new-event/new-event.module';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import {MatMenuModule} from '@angular/material/menu';
 
 @NgModule({
   imports: [
@@ -23,6 +24,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     PdfViewerModule,
     ChatPopoverPageModule,
     GroupMessagesPageRoutingModule,
+    MatMenuModule
     //
   ],
   exports: [GroupMessagesPage],

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

@@ -32,14 +32,20 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="messages overflow-y-auto" #scrollMe>
+  <div class="messages" #scrollMe>
     <div class="welcome-text">
       <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="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" *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" >
+        <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>

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

@@ -131,8 +131,18 @@
    .messages{
     font-size: 13px;
     font-family: Roboto;
+    overflow: auto;
+
+    //set scroll do bottom
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
     width: 100%;
     height: 100%;
+    word-wrap: break-word;
+    -webkit-overflow-scrolling: touch;
 
     .incoming-true, .incoming-false{
        padding: 15px 20px;

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

@@ -319,6 +319,16 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     });
     this.message = "";
   }
+
+  deleteMessage(msgId:string){
+    let body = {
+      "roomId": this.roomId,
+      "msgId": msgId,
+      "asUser": false,
+    }
+    this.alertService.confirmDeleteMessage(body);
+  }
+
   async openGroupMessagesOptions() {
 
     const enterAnimation = (baseEl: any) => {

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

@@ -34,11 +34,9 @@
     <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; 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>
-
           <mat-menu #beforeMenu="matMenu" xPosition="before">
-            <button (click)="deleteMessage()" class="menuButton">Apagar mensagem</button>
+            <button (click)="deleteMessage(msg._id)" class="menuButton">Apagar mensagem</button>
           </mat-menu>
         </div>
         <div class="title">

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

@@ -117,10 +117,10 @@
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
 
-    .container-width-100{
+    /* .container-width-100{
       width: 100%;
       overflow: auto;
-    }
+    } */
 
 
     .incoming-true, .incoming-false{

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

@@ -192,6 +192,18 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.message = "";
   }
 
+  deleteMessage(msgId:string){
+    let body = {
+      "roomId": this.roomId,
+      "msgId": msgId,
+      "asUser": false,
+    }
+    this.alertService.confirmDeleteMessage(body);
+    /* this.chatService.deleteMessage(body).subscribe(res=>{
+      console.log(res);
+    }); */
+  }
+
   loadMessages(){
     //this.showLoader = true;
     const roomId = this.roomId
@@ -207,10 +219,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       }); */
       //this.showLoader = false;
     })
-  }2
-
-  deleteMessage(){
-    alert('This');
   }
 
   viewDocument(url:string){
@@ -404,17 +412,17 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     const roomId = this.roomId;
 
     this.chatService.getRoomMessages(this.roomId).subscribe(async res => {
-      console.log(res['success']);
+      //console.log(res['success']);
 
 
      if (res['success'] == true) {
       // Show Error
       //showMessage(response.statusText);
-      //this.loadMessages()
+      this.loadMessages()
       this.messages = res['messages'].reverse();
       this.chatMessageStore.add(roomId, this.messages)
 
-      console.log(this.messages);
+      //console.log(this.messages);
       // Reconnect in one second
       if(this.route.url != "/home/chat"){
         console.log("Timer message stop")