git pull made

package-lock.json

@@ -4738,6 +4738,15 @@
         "tslib": "^1.9.3"
       },
       "dependencies": {
+        "@ionic/core": {
+          "version": "5.5.4",
+          "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.5.4.tgz",
+          "integrity": "sha512-IjbGN8vh3XuJ2ulo3BMlMflcWlUhvEGEexr29JKFvb+O4bWKP5sC2fkqSrswrIstOmv7axm7CeIi2MNRkwYwVA==",
+          "requires": {
+            "ionicons": "^5.1.2",
+            "tslib": "^1.10.0"
+          }
+        },
         "tslib": {
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -5020,9 +5029,9 @@
       }
     },
     "@ionic/core": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.7.0.tgz",
-      "integrity": "sha512-5GunAeZWDhjbo4/gFCYjA4vXP3V+8PEoGa9C+ZEojurpk7IBuAtI36KalCukrHLPoIbfUCywTXoZubfC1S6lHQ==",
+      "version": "5.8.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-5.8.1.tgz",
+      "integrity": "sha512-twAPHhrGMYvHW0NgebMBfN70xDUkFxW+Zcxeus7jrhuJh1uWp/3MwawLi4InCwpyuFQiBo8yAaqC1hB1wTZmLA==",
       "requires": {
         "@stencil/core": "^2.4.0",
         "ionicons": "^5.5.3",
@@ -6557,6 +6566,11 @@
         }
       }
     },
+    "@pdftron/pdfjs-express": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@pdftron/pdfjs-express/-/pdfjs-express-8.1.0.tgz",
+      "integrity": "sha512-YKH2M8ZVXQgFpxVKD48mtDcVwjdLkibp4j9gCMkywSwDc1lQv2jzGmRSBQzsq5QKVx54MHHVWIr5hG21KduACw=="
+    },
     "@rkusa/linebreak": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@rkusa/linebreak/-/linebreak-1.0.0.tgz",
@@ -6621,9 +6635,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.8.0.tgz",
-      "integrity": "sha512-WazFGUMnbumg8ePNvej8cIOEcxvuZ0ugKQkkE1xFbDYcl7DgJd62MiG+bIqCcQlIdLEfhjAdoixxlFdJgrgjyA=="
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.8.1.tgz",
+      "integrity": "sha512-iv9J6oLO/lv7/aO45M05yw3pp1J7olY400vlOZgdMVs3s5zHfalY1ZPYM0KyqU4+7DZuadKYbd0aQZ/g2PInZw=="
     },
     "@szmarczak/http-timer": {
       "version": "1.1.2",

package.json

@@ -57,7 +57,8 @@
     "@ionic-native/sqlite-porter": "^5.31.1",
     "@ionic-native/status-bar": "^5.0.0",
     "@ionic-native/wheel-selector": "^5.31.1",
-    "@ionic/angular": "^5.7.0",
+    "@ionic/angular": "^5.5.4",
+    "@ionic/core": "^5.8.1",
     "@ionic/pwa-elements": "^3.0.2",
     "@ionic/storage": "^2.3.1",
     "@logisticinfotech/ionic4-datepicker": "^1.4.4",
@@ -84,7 +85,7 @@
     "duration": "^0.2.2",
     "faker": "^5.5.3",
     "global": "^4.4.0",
-    "http-proxy-middleware": "^2.0.1",
+    "hammerjs": "^2.0.8",
     "http-server": "^0.12.3",
     "ibm-mfp-web-push": "^8.0.2020052213",
     "ibm-mfp-web-sdk": "^8.0.2021021706",

src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, HammerModule } from '@angular/platform-browser';
 import { RouteReuseStrategy } from '@angular/router';
 
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
@@ -92,6 +92,7 @@ import { SQLite } from '@ionic-native/sqlite/ngx';
     MatDialogModule,
     //
     PdfViewerModule,
+    HammerModule,
     ],
   providers: [
     { provide: MAT_DATE_LOCALE, useValue: 'pt' },

src/app/pages/agenda/agenda.page.ts

@@ -283,7 +283,6 @@ export class AgendaPage implements OnInit {
 
     this.viewingEventObject = event;
 
-    this.eventSelectedDate =  event.start;
     this.selectedEventId = event.id;
 
     this.cloneAllmobileComponent();
@@ -482,6 +481,9 @@ export class AgendaPage implements OnInit {
 
   loadRangeEvents(startTime: Date, endTime: Date) {
 
+    this.rangeStartDate = startTime
+    this.rangeEndDate = endTime
+    
     this.showLoader = true;
 
     if(window.innerWidth < 800){
@@ -920,7 +922,7 @@ export class AgendaPage implements OnInit {
       // });
       this.myCal.update();
       this.myCal.loadEvents();
-      this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
+      // this.loadRangeEvents(this.rangeStartDate, this.rangeEndDate);
     }
 
     this.cloneAllmobileComponent();

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

@@ -2,13 +2,25 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="header-top">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
-        <div class="middle">
-          <ion-label class="title">{{roomName}}</ion-label>
+        <!-- <app-btn-modal-dismiss></app-btn-modal-dismiss> -->
+        <div class="left">
+          <button class="btn-no-color" (click)="close()">
+            <!-- <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon> -->
+            <fa-icon icon="chevron-left" class="header-top-btn"></fa-icon>
+          </button>
+        </div>
+        <div class="middle-container" *ngIf="!showMessageOptions">
+          <div class="middle">
+            <ion-label class="title">{{roomName}}</ion-label>
+          </div>
+        </div>
+        <div class="middle-container-options" *ngIf="showMessageOptions">
+          <fa-icon (click)="deleteMessage(selectedMsgId)" icon="trash" class="middle-container-options-icons"></fa-icon>
         </div>
         <div class="right">
           <button class="btn-no-color" (click)="openOptions()">
-            <ion-icon src="assets/images/icons-menu.svg"></ion-icon>
+           <!--  <ion-icon src="assets/images/icons-menu.svg"></ion-icon> -->
+            <fa-icon icon="ellipsis-v" class="header-top-btn"></fa-icon>
           </button>
         </div>
       </div>
@@ -34,13 +46,13 @@
     </ion-refresher-content>
   </ion-refresher>
 
-  <div class="messages overflow-y-auto" #scrollMe>
+  <div (click)="handleClick()" class="messages overflow-y-auto" #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 *ngFor="let msg of messages; let last = last" >
-      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of messages; let last = last" [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
+      <div *ngIf="msg.t != 'r' && msg.t != 'ul' && msg.t != 'ru'" (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
         <div class="title">
           <ion-label>{{msg.u.name}}</ion-label>
           <span class="time">{{showDateDuration(msg._updatedAt)}}</span>

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

@@ -19,18 +19,49 @@
           overflow: auto;
           padding: 0 !important;
           background: #fff;
-           .middle{
+
+          .left{
+            width: fit-content;
+            float: left;
+            //font-size: 35px;
+            overflow: hidden;
+          }
+
+          .middle-container{
+            overflow: auto;
+            height: auto;
+            width:calc(100% - 57px);
+            float: left;
+
+            .middle{
+              padding: 0!important;
+              margin: 0 0 0 10px;
+            }
+          }
+          .middle-container-options{
             padding: 0!important;
             float: left;
-            width:calc(100% - 77px);
-            margin: 2.5px 0 0 5px;
+            width: calc(100% - 67px);
+            text-align: right;
+
+            .middle-container-options-icons{
+              color: #0782c9;
+              font-size: 23px;
+            }
           }
           .right{
             padding: 0!important;
             float: right;
             font-size: 25px;
             color: #0782c9;
-            margin: 5px 0 0 0;
+          }
+          .header-top-btn{
+            background: transparent;
+            font-size: 25px !important;
+            font-weight: 100 !important;
+            /* color: #0782c9; */
+            color: #42b9fe;
+            padding: 0 5px 0 5px;
           }
         }
         .header-bottom{
@@ -145,6 +176,18 @@
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
 
+    .messages-list-item-wrapper{
+      overflow: auto;
+    }
+    .messages-list-item-wrapper-active{
+      background: #e6f6ff75 !important;
+    }
+
+    .message-container{
+      //border: 1px solid red;
+    }
+
+
     .incoming-true, .incoming-false{
       width: 305px;
        padding: 15px 20px;

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

@@ -51,6 +51,10 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   attendees: EventPerson[] = [];
   scrollToBottomBtn = false;
 
+  longPressActive = false;
+  showMessageOptions = false;
+  selectedMsgId:string;
+
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
 
   constructor(
@@ -99,11 +103,37 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     })
   }
 
+  deleteMessage(msgId:string){
+    let body = {
+      "roomId": this.roomId,
+      "msgId": msgId,
+      "asUser": false,
+    }
+    if(msgId){
+      this.alertService.confirmDeleteMessage(body);
+    }
+    else{
+      this.toastService.badRequest('Não foi possível apagar');
+    }
+    this.showMessageOptions = false;
+    this.selectedMsgId = "";
+  }
+
   ngAfterViewInit() {
     this.scrollChangeCallback = () => this.onContentScrolled(event);
     window.addEventListener('scroll', this.scrollChangeCallback, true);
   }
 
+  handlePress(id?:string){
+    this.selectedMsgId = id;
+    this.showMessageOptions = true;
+  }
+
+  handleClick(){
+    this.showMessageOptions = false;
+    this.selectedMsgId = "";
+  }
+
   onContentScrolled(e) {
     this.startPosition = e.srcElement.scrollTop;
     let scroll = e.srcElement.scrollTop;

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

@@ -10,6 +10,7 @@ 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';
+import { MatMenuModule } from '@angular/material/menu';
 
 
 @NgModule({
@@ -18,7 +19,8 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     FormsModule,
     IonicModule,
     FontAwesomeModule,
-    MessagesPageRoutingModule
+    MessagesPageRoutingModule,
+    MatMenuModule,
   ],
   declarations: [MessagesPage]
 })

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

@@ -1,15 +1,25 @@
 <ion-header  class="ion-no-border">
   <ion-toolbar class="header-toolbar">
+    <!-- <div #rectangle class="rectangle" (press)="handlePress()">
+      Double click me to change the color
+    </div> -->
     <div class="main-header">
       <div class="header-top">
         <div class="left">
           <button class="btn-no-color" (click)="close()">
-            <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+            <!-- <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon> -->
+            <fa-icon icon="chevron-left" class="header-top-btn"></fa-icon>
           </button>
         </div>
-        <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>
+        <div class="middle-container" *ngIf="!showMessageOptions">
+          <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>
+          </div>
+        </div>
+        <div class="middle-container-options" *ngIf="showMessageOptions">
+          <fa-icon (click)="deleteMessage(selectedMsgId)" icon="trash" class="middle-container-options-icons"></fa-icon>
+          <!-- <ion-icon name="trash"></ion-icon> -->
         </div>
         <div hidden class="right">
           <button class="btn-no-color" (click)="openMessagesOptions()">
@@ -30,47 +40,52 @@
 </ion-header>
 
 <ion-content>
+
   <ion-refresher  name="refresher" slot="fixed" (ionRefresh)="doRefresh($event)">
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     <ion-refresher-content>
     </ion-refresher-content>
   </ion-refresher>
-  <div class="messages" #scrollMe>
-    <div *ngFor="let msg of chatMessageStore.message[roomId] ; let last = last" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
-      <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.attachments" class="message-attachments">
-          <div *ngFor="let file of msg.attachments">
-            <img *ngIf="file.image_url" src="{{file.image_url}}" alt="image">
-            <div>
+
+  <div (click)="handleClick()" class="messages" #scrollMe>
+    <div class="messages-list-item-wrapper container-width-100" *ngFor="let msg of chatMessageStore.message[roomId]; let last = last"
+    [class.messages-list-item-wrapper-active]="msg._id == selectedMsgId">
+      <div (press)="handlePress(msg._id)" class='message-container incoming-{{msg.u.username!=loggedUser.me.username}}'>
+        <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.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">
-                  <!-- <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 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() : ''}}
         </div>
-        {{last ? scrollToBottom() : ''}}
       </div>
     </div>
   </div>

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

@@ -20,20 +20,49 @@
           overflow: auto;
           padding: 0 !important;
           background: #fff;
+
           .left{
-            width: 37px;
+            width: fit-content;
             float: left;
-            font-size: 35px;
+            //font-size: 35px;
             overflow: hidden;
+
+            .header-top-btn{
+              background: transparent;
+              font-size: 25px !important;
+              font-weight: 100 !important;
+              /* color: #0782c9; */
+              color: #42b9fe;
+            }
           }
-           .middle{
+
+          .middle-container{
+            overflow: auto;
+            height: auto;
+
+            .middle{
+              padding: 0!important;
+              float: left;
+              width:calc(100% - 77px);
+              margin: 0px 0 0 10px;
+              display: flex;
+              align-items: center;
+            }
+          }
+
+          .middle-container-options{
             padding: 0!important;
             float: left;
-            width:calc(100% - 77px);
-            margin: 2.5px 0 0 5px;
-            display: flex;
-            align-items: center;
+            width: calc(100% - 25px);
+            text-align: right;
 
+            /* ion-icon{
+              font-size: 25px;
+            } */
+            .middle-container-options-icons{
+              color: #0782c9;
+              font-size: 23px;
+            }
           }
           .right{
             padding: 0!important;
@@ -118,6 +147,17 @@
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
 
+    .messages-list-item-wrapper{
+      overflow: auto;
+    }
+    .messages-list-item-wrapper-active{
+      background: #e6f6ff75 !important;
+    }
+
+    .message-container{
+      //border: 1px solid red;
+    }
+
 
     .incoming-true, .incoming-false{
       width: 305px;

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

@@ -1,6 +1,6 @@
 import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router'
-import { ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { map } from 'rxjs/operators';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
@@ -17,6 +17,7 @@ import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
 import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
 import { environment } from 'src/environments/environment';
 
+
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.page.html',
@@ -26,6 +27,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   showLoader: boolean;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+/*   @ViewChild('messageContainer') messageContainer: ElementRef; */
+  @ViewChild('rectangle') private rectangle: ElementRef;
 
   loggedUser: any;
 
@@ -47,6 +50,9 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   startPosition: number;
   scrollToBottomBtn = false;
   attendees: EventPerson[] = [];
+  longPressActive = false;
+  showMessageOptions = false;
+  selectedMsgId:string;
 
   constructor(
     public popoverController: PopoverController,
@@ -59,6 +65,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private route: Router,
     private activatedRoute: ActivatedRoute,
     private fileService: FileService,
+    private gestureController: GestureController,
   ) {
     /* this.activatedRoute.paramMap.subscribe(params => {
       if(params["params"].SerialNumber) {
@@ -84,6 +91,86 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.el.scrollTop = this.el.scrollHeight - this.el.scrollTop; */
 
     this.setStatus('online');
+    //this.onPressingMessage();
+
+    /* setInterval(()=>{
+      const gesture = this.gestureController.create({
+        el: this.rectangle.nativeElement,
+        gestureName:'my-gesture',
+        onMove: (detail) => { this.onMove(detail); }
+      })
+
+      gesture.enable();
+     }, 9000); */
+
+
+  }
+
+  ngAfterViewInit() {
+    this.scrollChangeCallback = () => this.onContentScrolled(event);
+    window.addEventListener('scroll', this.scrollChangeCallback, true);
+
+    const gesture = this.gestureController.create({
+      el: this.rectangle.nativeElement,
+      gestureName:'long-press',
+      onStart: () => { alert('OP') },
+      /* onMove () => {
+        console.log('Move');
+      }, */
+      onEnd: () => {
+        console.log('ENNNNNDS');
+      },
+    })
+
+    gesture.enable();
+  }
+
+  handlePress(id?:string){
+    this.selectedMsgId = id;
+    this.showMessageOptions = true;
+    /* if(!this.showMessageOptions){
+      this.showMessageOptions = true;
+    }
+    else{
+      this.showMessageOptions = false;
+    } */
+  }
+
+  handleClick(){
+    this.showMessageOptions = false;
+    this.selectedMsgId = "";
+  }
+
+  /* onPressingMessage(){
+    const gesture = this.gestureController.create({
+      el: this.messageContainer.nativeElement,
+      gestureName: 'long-press',
+      onStart: ev =>{
+        this.longPressActive = true;
+        console.log('Pressing');
+      },
+      onEnd: ev => {
+        this.longPressActive = false;
+        console.log('Stop pressing');
+      }
+    });
+    gesture.enable(true);
+  } */
+
+  deleteMessage(msgId:string){
+    let body = {
+      "roomId": this.roomId,
+      "msgId": msgId,
+      "asUser": false,
+    }
+    if(msgId){
+      this.alertService.confirmDeleteMessage(body);
+    }
+    else{
+      this.toastService.badRequest('Não foi possível apagar');
+    }
+    this.showMessageOptions = false;
+    this.selectedMsgId = "";
   }
 
   setStatus(status:string){
@@ -129,10 +216,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     } catch(err) { }
   }
 
-  ngAfterViewInit() {
-    this.scrollChangeCallback = () => this.onContentScrolled(event);
-    window.addEventListener('scroll', this.scrollChangeCallback, true);
-  }
+
 
   onContentScrolled(e) {
     this.startPosition = e.srcElement.scrollTop;

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

@@ -1,5 +1,5 @@
 import { AfterViewChecked, AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
-import { AnimationController, ModalController, PopoverController } from '@ionic/angular';
+import { AnimationController, GestureController, ModalController, PopoverController } from '@ionic/angular';
 import { AlertService } from 'src/app/services/alert.service';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -24,6 +24,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   showLoader: boolean;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+  @ViewChild('message-item') messageContainer: ElementRef;
 
   loggedUser: any;
 
@@ -52,6 +53,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   startPosition: number;
   mesageItemDropdownOptions: boolean = false;
   scrollToBottomBtn = false;
+  longPressActive = false;
 
   constructor(
     public popoverController: PopoverController,
@@ -65,6 +67,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     private route: Router,
     private timeService: TimeService,
     private fileService: FileService,
+    private gestureController: GestureController,
   ) {
     this.loggedUser = authService.ValidatedUserChat['data'];
 
@@ -89,6 +92,21 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.setStatus('online');
   }
 
+  onPressingMessage(){
+    const gesture = this.gestureController.create({
+      el: this.messageContainer.nativeElement,
+      gestureName: 'long-press',
+      onStart: ev =>{
+        this.longPressActive = true;
+        console.log('Pressing');
+      },
+      onEnd: ev => {
+        this.longPressActive = false;
+        console.log('Stop pressing');
+      }
+    });
+  }
+
   setStatus(status:string){
     let body = {
       message: '',

src/main.ts

@@ -6,6 +6,8 @@ import { environment } from './environments/environment';
 
 import { defineCustomElements } from '@ionic/pwa-elements/loader';
 
+import "hammerjs"; // HAMMER TIME
+
 if (environment.production) {
   enableProdMode();
 }
@@ -14,4 +16,4 @@ platformBrowserDynamic().bootstrapModule(AppModule)
   .catch(err => console.log(err));
 
   // Call the element loader after the platform has been bootstrapped
-defineCustomElements(window);
+defineCustomElements(window);