add typing

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

@@ -67,7 +67,8 @@
                       <div class="item-date" [class.item-date-active]="room.value.id == idSelected">{{room.value.duration}}</div>
                     </div>
                     <div *ngIf="room.value.lastMessage" class="item-description" [class.item-description-active]="room.value.id == idSelected">
-                      <ion-label *ngIf="room.value.lastMessage">{{room.value.lastMessage.msg}}</ion-label>
+                      <ion-label *ngIf="room.value.lastMessage && room.value.otherUserType == false">{{room.value.lastMessage.msg}}</ion-label>
+                      <ion-label *ngIf="room.value.otherUserType == true">A escrever ...</ion-label>
                       <ion-label *ngIf="room.value.lastMessage.file">
                         <fa-icon *ngIf="room.value.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="room.value.id == idSelected"></fa-icon>
                         <fa-icon *ngIf="room.value.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="room.value.id == idSelected"></fa-icon>
@@ -121,7 +122,11 @@
                         <div class="item-date" [class.item-date-active]="group.value.id ==idSelected" *ngIf="group.value.customFields.countDownDate">{{countDownDate(group.value.customFields.countDownDate, group.value.id)}}</div>
                       </div>
                       <div *ngIf="group.value.lastMessage" class="item-description d-flex align-items-center" [class.item-description-active]="group.value.id ==idSelected">
-                        <div class="item-message">{{group.value.lastMessage.u.name}}: {{group.value.lastMessage.msg}} </div>
+                        <div class="item-message" *ngIf="group.value.otherUserType == false">{{group.value.lastMessage.u.name}}: {{group.value.lastMessage.msg}} </div>
+
+                        <div class="item-message" *ngIf="group.value.otherUserType == false">{{group.value.lastMessage.u.name}}: {{group.value.lastMessage.msg}} </div>
+                        <div *ngIf="group.value.otherUserType == true">{{group.value.userThatIsTyping}} A escrever ...</div>
+
                         <div class="item-files add-ellipsis" *ngIf="group.value.file">
                           <fa-icon *ngIf="group.value.lastMessage.file.type != 'application/meeting'" icon="file-alt" class="file-icon" [class.set-active-item-font-to-white]="group.value.id == idSelected"></fa-icon>
                           <fa-icon *ngIf="group.value.lastMessage.file.type == 'application/meeting'" icon="calendar-alt" class="file-icon" [class.set-active-item-font-to-white]="group.value.id == idSelected"></fa-icon>

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

@@ -220,18 +220,18 @@
     </div>
     <div class="message-box width-80">
       <ion-item class="ion-no-padding type-message" lines="none">
-        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getGroupRoom(roomId).message" (ionChange)="changeInput()"></ion-textarea>
         <button hidden class="btn-no-color">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button>
       </ion-item>
     </div>
     <div>
-      <button *ngIf="message" class="btn-no-color" (click)="sendMessage()">
+      <button *ngIf="wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' "  class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' "  class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
-      <button *ngIf="!message" class="btn-no-color">
+      <button *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color">
         <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
         <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>

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

@@ -39,7 +39,6 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
-  message:any;
   messages:any;
 
   room:any;
@@ -184,6 +183,11 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.currentPosition = scroll;
   }
 
+
+  changeInput() {
+    this.wsChatMethodsService.getDmRoom(this.roomId).typing()
+  }
+
   async goToEvent(eventId: any) {
     let classs;
     if (window.innerWidth < 701) {
@@ -323,8 +327,7 @@ export class GroupMessagesPage implements OnInit, AfterViewInit, OnDestroy {
 
 
   sendMessage() {
-    this.wsChatMethodsService.getGroupRoom(this.roomId).send(this.message)
-    this.message = "";
+    this.wsChatMethodsService.getGroupRoom(this.roomId).send()
   }
 
   async openOptions() {

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

@@ -212,7 +212,7 @@
     </div>
     <div class="width-70">
       <ion-item class="ion-no-padding ion-no-margin type-message" lines="none">
-        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" *ngIf="!recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" *ngIf="!recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="changeInput()"></ion-textarea>
         <ion-textarea autocomplete="on" spellcheck="true" *ngIf="recording" clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="durationDisplay"></ion-textarea>
         <button hidden #recordbtn class="btn-no-color" (click)="notImplemented()">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
@@ -220,11 +220,11 @@
       </ion-item>
     </div>
     <div>
-      <button *ngIf="message" class="btn-no-color" (click)="sendMessage()">
+      <button *ngIf="wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
         <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
         <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
-      <button *ngIf="!message" class="btn-no-color">
+      <button *ngIf="!wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color">
         <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
         <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>

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

@@ -343,6 +343,10 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
+  changeInput() {
+    this.wsChatMethodsService.getDmRoom(this.roomId).typing()
+  }
+  
   sendMessage() {
     let body = {
       "message":

src/app/services/chat/room.service.ts

@@ -10,6 +10,7 @@ import { Platform } from '@ionic/angular';
 import { SqliteService } from 'src/app/services/sqlite.service';
 import { NativeNotificationService } from 'src/app/services/native-notification.service';
 import { SessionStore } from 'src/app/store/session.service';
+import { capitalizeTxt } from 'src/plugin/text'
 @Injectable({
   providedIn: 'root'
 })
@@ -27,6 +28,12 @@ export class RoomService {
   _updatedAt = {}
   private hasLoadHistory = false
   duration = ''
+  isTyping = false
+  otherUserType = false
+  lastTimeType = null
+  message = ''
+  lastMessageTxt = ''
+  userThatIsTyping = ''
 
   private ToastService = ToastsService
   mgsArray = [];
@@ -95,10 +102,67 @@ export class RoomService {
 
       }
     )
+
+
+
+    this.WsChatService.receiveStreamNotifyRoom((message) => {
+      
+      console.log(message.fields)
+
+      if(message.fields.eventName == this.id+'/'+'typing') {
+
+        this.userThatIsTyping = this.usernameToDisplayName(message.fields.args[0])
+        this.isTyping =  message.fields.args[1]
+        this.otherUserType = message.fields.args[1]
+
+      } else if (message.fields.eventName == this.id+'/'+'deleteMessage') {}
+
+    })
   }
 
-  send(msg) {
-    this.WsChatService.send(this.id, msg)
+  send() {
+    this.WsChatService.send(this.id, this.message)
+    this.message= ''
+  }
+
+
+  typing(text:string = this.message) {
+
+    if(this.lastMessageTxt == text) { return false }
+    this.lastTimeType = new Date().getTime()
+
+    const lastIsTyping = this.isTyping
+    if(text.length >= 1) {
+      this.isTyping = true  
+    } else {
+      this.isTyping = false
+    }
+
+    if(lastIsTyping != this.isTyping) {
+      this.WsChatService.sendStreamNotifyRoom(this.id, SessionStore.user.RochetChatUser, 'typing', this.isTyping)
+    }
+    
+
+    this.lastMessageTxt = this.message
+    this.typingWatch()
+  }
+
+
+  private typingWatch() {
+    setTimeout(()=>{
+      const now = new Date().getTime()
+
+      if((now - this.lastTimeType) >= 2888) {
+        
+        if(this.isTyping == true) {
+          this.isTyping = false
+          this.WsChatService.sendStreamNotifyRoom(this.id, SessionStore.user.RochetChatUser, 'typing', this.isTyping)
+        }
+      } else {
+        console.log(now - this.lastTimeType)
+      }
+
+    }, 3000)
   }
 
   leave(rid?) {
@@ -324,7 +388,11 @@ export class RoomService {
   }
 
 
-  // to add
-  countDownDate() { }
+  usernameToDisplayName(username) {
+
+    const firstName = capitalizeTxt(username.split('.')[0])
+    const lastName =  capitalizeTxt(username.split('.')[1])
+    return firstName + ' ' + lastName
+  }
 
 }

src/app/services/chat/ws-chat-methods.service.ts

@@ -81,12 +81,16 @@ export class WsChatMethodsService {
       this.WsChatService.streamRoomMessages(id).then((subscription)=>{
         console.log('streamRoomMessages', subscription)
       })
+
+      this.WsChatService.subStreamNotifyRoom(id, 'typing', false)
     }
 
     for (const id in this.group) {
       this.WsChatService.streamRoomMessages(id).then((subscription)=>{
         console.log('streamRoomMessages', subscription)
       })
+
+      this.WsChatService.subStreamNotifyRoom(id, 'typing', false)
     }
 
     this.WsChatService.streamNotifyLogged().then((subscription=>{

src/app/services/chat/ws-chat.service.ts

@@ -231,7 +231,73 @@ export class WsChatService {
   deleteMessage() {}
   createRoom() {}
 
+  sendStreamNotifyRoom(roomId : string, username, event: 'typing', param: any) {
 
+    const requestId =  uuidv4()
+
+    let message = {
+      msg: "method",
+      method: "stream-notify-room",
+      id: requestId,
+      params: [
+        `${roomId}/${event}`,
+        username,
+        param
+      ]
+    };
+
+    this.ws.send({message, requestId})
+
+    return new Promise((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.id == requestId || deepFind(message,'result.id') == requestId) { // same request send
+          resolve('')
+          return true
+        }
+      }})
+    });
+
+  }
+
+
+  subStreamNotifyRoom(roomId : string , event: 'typing' | 'deleteMessage', param: any) {
+
+    const requestId =  uuidv4()
+
+    let message = {
+      msg: "sub",
+      id: requestId,
+      name: "stream-notify-room",
+      params:[
+        `${roomId}/${event}`,
+        param
+      ]
+    }
+
+
+    this.ws.send({message, requestId})
+
+    return new Promise((resolve, reject) => {
+      this.ws.registerCallback({type:'Onmessage', funx:(message)=>{
+        if(message.id == requestId ) { // same request send
+          resolve('')
+          return true
+        }
+      }})
+    });
+
+  }
+
+  receiveStreamNotifyRoom(funx: Function) {
+
+    this.ws.registerCallback({
+      type:'Onmessage',
+      funx:(message)=> {
+        if(message.collection == "stream-notify-room" && message.msg == 'changed') {
+          funx(message)
+        }
+    }})
+  }
   
   loadHistory(roomId, limit: number = 50) {
 

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

@@ -260,18 +260,18 @@
 
     <div class="width-100">
       <ion-item class="ion-no-padding type-message" lines="none">
-        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-textarea autocomplete="on" autocorrect="on" spellcheck="true" (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getGroupRoom(roomId).message" (ionChange)="changeInput()"></ion-textarea>
         <button hidden class="btn-no-color">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button>
       </ion-item>
     </div>
     <div class="btn-send">
-      <button *ngIf="message" class="btn-no-color" (click)="sendMessage()">
+      <button *ngIf="wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
         <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
         <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
-      <button title="Enviar Mensagem" *ngIf="!message" class="btn-no-color">
+      <button title="Enviar Mensagem" *ngIf="!wsChatMethodsService.getGroupRoom(roomId).message" class="btn-no-color">
         <ion-icon  *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
         <ion-icon  *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send" src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>

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

@@ -216,6 +216,11 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
     window.removeEventListener('scroll', this.scrollChangeCallback, true);
   }
 
+
+  changeInput() {
+    this.wsChatMethodsService.getDmRoom(this.roomId).typing()
+  }
+
   async getChatMembers() {
     //return await this.chatService.getMembers(roomId).toPromise();
     this.chatService.getAllUsers().subscribe(res => {
@@ -314,8 +319,7 @@ export class GroupMessagesPage implements OnInit, OnChanges, AfterViewInit, OnDe
   }
 
   sendMessage() {
-    this.wsChatMethodsService.getGroupRoom(this.roomId).send(this.message)
-    this.message = "";
+    this.wsChatMethodsService.getGroupRoom(this.roomId).send()
   }
 
   deleteMessage(msgId: string) {

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

@@ -206,20 +206,20 @@
     <div class="width-100">
       <ion-item class="ion-no-padding type-message" lines="none">
         <ion-textarea (keyup.enter)="sendMessage()" clearOnEdit="true" placeholder="Escrever uma mensagem"
-          class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+          class="message-input" rows="1" [(ngModel)]="wsChatMethodsService.getDmRoom(roomId).message" (ionChange)="changeInput()"></ion-textarea>
         <button hidden class="btn-no-color" (click)="notImplemented()">
           <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
         </button>
       </ion-item>
     </div>
     <div>
-      <button *ngIf="message" class="btn-no-color" (click)="sendMessage()">
+      <button *ngIf="wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color" (click)="sendMessage()">
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send"
           src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send"
           src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
       </button>
-      <button *ngIf="!message" class="btn-no-color">
+      <button *ngIf="!wsChatMethodsService.getDmRoom(roomId).message" class="btn-no-color">
         <ion-icon *ngIf="ThemeService.currentTheme == 'default' " class="chat-icon-send"
           src="assets/icon/theme/gov/icons-chat-send.svg"></ion-icon>
         <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " class="chat-icon-send"

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

@@ -42,7 +42,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   loggedUser: any;
 
-  message = '';
   messages: any;
   dm: any;
   userPresence = '';
@@ -250,8 +249,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   sendMessage() {
-    this.wsChatMethodsService.getDmRoom(this.roomId).send(this.message)
-    this.message = "";
+    this.wsChatMethodsService.getDmRoom(this.roomId).send()
   }
 
   deleteMessage(msgId: string) {
@@ -290,6 +288,10 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
 
+  changeInput() {
+    this.wsChatMethodsService.getDmRoom(this.roomId).typing()
+  }
+  
   async openViewDocumentModal(file: any) {
     let task = {
       serialNumber: '',