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) => {