add message status

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

@@ -41,27 +41,38 @@
 
 <ion-content  >
 
-  <div class="messages height-100 width-100 d-flex flex-column" #scrollMe>
+  <div class="messages height-100 width-100 d-flex flex-column" #scrollMe >
 
     <div
-    *ngFor="let message of roomMessage$ | async" class="messages-list-item-wrapper"
-    [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}">
+    *ngFor="let message of (roomMessage$ | async)" class="messages-list-item-wrapper"
+    [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserId, 'other-message': message.sender.wxUserId !== sessionStore.user.UserId}"
+    >
     <div class="message-container">
 
-      {{ message.message }}
-      <br>
-      <ion-icon *ngIf="message.messageStatus != 'send'" src="assets/images/clock-regular.svg"></ion-icon>
-      <ion-icon *ngIf="message.messageStatus == 'send'" src="assets/images/check-solid.svg"></ion-icon>
+      <div class="d-flex justify-content-between">
+        <div>
+          {{ message.message }}
+        </div>
+
+        <div>
+          <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)="messageDelete({messageId: message.id })" class="menuButton">Apagar mensagem</button>
+              <button (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
+              <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
+            </mat-menu>
+          </div>
+
+        </div>
 
-      <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)="messageDelete({messageId: message.id })" class="menuButton">Apagar mensagem</button>
-          <button (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
-          <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
-        </mat-menu>
       </div>
+      <div style="text-align: end;">
 
+        <div *ngIf="message.messageStatus != 'send'" style="font-size: .6875rem;">A enviar</div>
+        <div *ngIf="message.messageStatus == 'send'" style="font-size: .6875rem;">Enviado</div>
+
+      </div>
 
       <!-- Emoji Picker -->
       <div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
@@ -80,12 +91,12 @@
 
 
   </div>
-
+<!--
   <ion-fab horizontal="end" vertical="bottom" slot="fixed">
-    <ion-fab-button *ngIf="scrollToBottomBtn" (click)="scrollToBottomClicked()" color="light" size="small">
+    <ion-fab-button *ngIf="scrollToBottomBtn"  color="light" size="small">
       <ion-icon name="chevron-down"></ion-icon>
     </ion-fab-button>
-  </ion-fab>
+  </ion-fab> -->
 
 
 

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

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';
 import { AnimationController, GestureController, IonRange, ModalController, PopoverController } from '@ionic/angular';
 import { ToastService } from 'src/app/services/toast.service';
 import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
@@ -33,7 +33,7 @@ import { PermissionService } from 'src/app/services/permission.service';
 import { FileValidatorService } from "src/app/services/file/file-validator.service"
 import { ChatPopoverPage } from '../../popover/chat-popover/chat-popover.page';
 import { Observable as  DexieObservable } from 'Dexie';
-import { Subscription } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { MessageRepositoryService } from 'src/app/module/chat/data/repository/message-respository.service'
 import { RoomRepositoryService } from 'src/app/module/chat/data/repository/room-repository.service'
 import { TableMessage } from 'src/app/module/chat/data/data-source/message/message-local-data-source.service';
@@ -44,6 +44,7 @@ import { UserTypingServiceRepository } from 'src/app/module/chat/data/repository
 import { UserTypingList } from 'src/app/module/chat/data/data-source/userTyping/user-typing-local-data-source.service';
 import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service';
 import { EditMessagePage } from 'src/app/modals/edit-message/edit-message.page';
+import { tap } from 'rxjs/operators';
 
 
 const IMAGE_DIR = 'stored-images';
@@ -131,8 +132,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   selectedMessage: any = null;
   emojis: string[] = ['😊', '😂', '❤️', '👍', '😢']; // Add more emojis as needed
-
-
+  totalMessage = 0
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,
@@ -162,7 +162,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   ngOnChanges(changes: SimpleChanges): void {
     this.roomData$ = this.roomRepositoryService.getItemByIdLive(this.roomId)
+
     this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
+
     this.roomMembers$ = this.roomRepositoryService.getRoomMemberByIdLive(this.roomId) as any
     this.roomStatus$ = this.roomRepositoryService.getRoomStatus(this.roomId)
     this.roomRepositoryService.getRoomById(this.roomId)
@@ -175,20 +177,18 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       const uniqueArray = [...new Set(arrayNames)];
 
       (this.myInputRef.nativeElement as HTMLDivElement).innerHTML = '::'+ uniqueArray
-      this.scrollToBottomClicked()
     })
 
     this.newMessagesStream?.unsubscribe()
     this.newMessagesStream = this.messageRepositoryService.subscribeToNewMessages(this.roomId).subscribe((e) => {
 
-      setTimeout(() => {
-        this.scrollToBottomClicked()
-      }, 10)
       setTimeout(() => {
         this.scrollToBottomClicked()
       }, 200)
 
-      console.log('new message==============')
+      setTimeout(() => {
+        this.scrollToBottomClicked()
+      }, 500)
 
     })
 
@@ -327,9 +327,21 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     } catch (err) { }
   }
 
+
+  // @HostListener('scroll', ['$event'])
+  // onScroll(event: any): void {
+  //   // const scrollTop = event.target.scrollTop;
+  //   // const scrollHeight = event.target.scrollHeight;
+  //   // const clientHeight = event.target.clientHeight;
+
+  //   // if (scrollTop === 0) {
+  //   //   console.log('load more')
+  //   // }
+  // }
+
   ngAfterViewInit() {
-    this.scrollChangeCallback = () => this.onContentScrolled(event);
-    window.addEventListener('scroll', this.scrollChangeCallback, true);
+    // this.scrollChangeCallback = () => this.onContentScrolled(event);
+    // window.addEventListener('scroll', this.scrollChangeCallback, true);
   }
 
   onContentScrolled(e) {