add contacts

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

@@ -12,7 +12,6 @@ import { RoomRepositoryService } from 'src/app/services/Repositorys/chat/reposit
 import { HttpErrorResponse } from '@angular/common/http';
 
 
-
 class UserToSelect {
 
 }
@@ -95,7 +94,7 @@ export class ContactsPage implements OnInit {
 
       }, () => {
         this.loading = false
-      }); 
+      });
     }*/
   }
 
@@ -170,7 +169,7 @@ export class ContactsPage implements OnInit {
 
     }
     /*  this.chatService.createRoom(body).subscribe(res => {
- 
+
        this.room = res['room'];
        this.openMessagesModal(this.room._id);
        this.ChatSystemService.getAllRooms()

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

@@ -7,7 +7,7 @@
           <!-- <button (click)="ChatMessageDebuggingPage()">Dev</button> -->
           <span><ion-icon *ngIf="RochetChatConnectorService.isLogin" class="online" name="ellipse"></ion-icon></span>
         </div>
-        <div hidden class="right">
+        <div class="right">
           <button title="Menu" class="btn-no-color" (click)="_openMessagesOptions()">
             <ion-icon *ngIf="ThemeService.currentTheme == 'default' " src="assets/images/theme/blue/icons-menu.svg"></ion-icon>
             <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " src="assets/images/theme/gov/icons-menu.svg">
@@ -41,9 +41,14 @@
 
       <p>Room ID: {{ roomData.id }}</p>
 
-      {{ roomMessage$ | async | json }}
     </ion-list>
 
+    <div *ngFor="let message of roomMessage$ | async">
+      <div [ngClass]="{'my-message': message.sender.wxUserId === sessionStore.user.UserName, 'other-message': message.sender.wxUserId !== sessionStore.user.UserName}">
+        {{ message | json  }}
+      </div>
+    </div>
+
     members
     <ion-list *ngIf="roomMembers$ | async as memberList">
 

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

@@ -143,41 +143,54 @@ ion-content {
   .messages {
     font-size: rem(13);
     font-family: Roboto;
-    overflow: auto;
+    // 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;
+    // //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;
 
-    .container-width-100 {
-      width: 100%;
-      overflow: auto;
-    }
-
-    .incoming-true,
-    .incoming-false {
+    .other-message,
+    .my-message {
       padding: 15px 20px;
       border-radius: 10px;
+
+      // Common styles for incoming messages
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      //margin-bottom: 10px; // Adjust as needed
+      //padding: 5px; // Adjust as needed
     }
 
-    .incoming-true {
+    .other-message {
       margin: 10px 75px 10px 20px;
-      background: #ebebeb;
-      float: left;
+      // background: #ebebeb;
+      // float: left;
+      // Styles for incoming messages from other users
+      justify-content: flex-start;
     }
   }
 
-  .incoming-false {
+  .my-message {
     margin: 10px 20px 10px 75px;
     background: var(--chat-incoming-msg-color);
-    float: right;
+    //float: right;
+    // Styles for incoming messages from the current user
+    justify-content: flex-end;
+  }
+
+  .message-bubble {
+    // Styles for the message bubble
+    background-color: #e2e2e2; // Example background color
+    padding: 10px; // Adjust as needed
+    border-radius: 10px; // Adjust as needed
   }
 
   .title {

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

@@ -40,7 +40,9 @@ import { MessageRepositoryService } from 'src/app/services/Repositorys/chat/repo
 import { MessageInputDTO } from 'src/app/services/Repositorys/chat/dto/message/messageInputDtO';
 import { TableMemberList } from 'src/app/services/Repositorys/chat/data-source/room/rooom-local-data-source.service';
 import { Observable } from 'rxjs';
-
+import { TableMessage } from 'src/app/services/Repositorys/chat/data-source/message/message-local-data-source.service';
+import { ChatPopoverPage } from '../../popover/chat-popover/chat-popover.page';
+import { Observable as  DexieObservable } from 'Dexie';
 
 const IMAGE_DIR = 'stored-images';
 @Component({
@@ -66,6 +68,12 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   @Output() openNewEventPage: EventEmitter<any> = new EventEmitter<any>();
   @Output() getDirectMessages: EventEmitter<any> = new EventEmitter<any>();
+  @Output() closeAllDesktopComponents: EventEmitter<any> = new EventEmitter<any>();
+  @Output() showEmptyContainer: EventEmitter<any> = new EventEmitter<any>();
+  @Output() openGroupContacts: EventEmitter<any> = new EventEmitter<any>();
+  @Output() openEditGroupPage: EventEmitter<any> = new EventEmitter<any>();
+  @Output() getGroups: EventEmitter<any> = new EventEmitter<any>();
+
 
 
   chatMessageStore = ChatMessageStore
@@ -109,9 +117,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   textField = ''
 
-  roomData$: Observable<RoomListItemOutPutDTO | undefined>
-  roomMessage$: Observable<RoomListOutPutDTO>
-  roomMembers$:  Observable<TableMemberList[] | undefined>
+  roomData$: DexieObservable<RoomListItemOutPutDTO | undefined>
+  roomMessage$: DexieObservable<TableMessage[]>
+  roomMembers$:  DexieObservable<TableMemberList[] | undefined>
 
   constructor(
     public popoverController: PopoverController,
@@ -144,7 +152,7 @@ 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)
+    this.roomMembers$ = this.roomRepositoryService.getRoomMemberByIdLive(this.roomId) as any
     this.roomRepositoryService.getRoomById(this.roomId)
     this.messageRepositoryService.listAllMessagesByRoomId(this.roomId)
   }
@@ -583,7 +591,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
 
   async _openMessagesOptions() {
-
     const enterAnimation = (baseEl: any) => {
       const backdropAnimation = this.animationController.create()
         .addElement(baseEl.querySelector('ion-backdrop')!)
@@ -607,17 +614,48 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       return enterAnimation(baseEl).direction('reverse');
     }
 
-
     const modal = await this.modalController.create({
       enterAnimation,
       leaveAnimation,
-      component: MessagesOptionsPage,
-      cssClass: 'model profile-modal search-submodal',
+      component: ChatPopoverPage,
+      cssClass: 'model search-submodal chat-option-aside',
       componentProps: {
         roomId: this.roomId,
+        members: [],
+        isAdmin: this.isAdmin
       }
     });
-    return await modal.present();
+    await modal.present();
+    modal.onDidDismiss().then(res => {
+
+      if (res.data == 'leave') {
+        this.getRoomInfo();
+        this.closeAllDesktopComponents.emit();
+        this.showEmptyContainer.emit();
+        this.ChatSystemService.hidingRoom(this.roomId).catch((error) => console.error(error));
+      }
+      else if (res.data == 'delete') {
+        this.closeAllDesktopComponents.emit();
+        this.showEmptyContainer.emit();
+      }
+      else if (res.data == 'cancel') {
+
+      }
+      else if (res.data == 'edit') {
+
+        //this.closeAllDesktopComponents.emit();
+        this.openEditGroupPage.emit(this.roomId);
+      } else if (res.data == 'addUser') {
+
+        this.openGroupContactsPage();
+      }
+      else {}
+
+    });
+  }
+
+  openGroupContactsPage() {
+    this.openGroupContacts.emit(this.roomId);
   }