fix message statud bag

src/app/module/chat/domain/service/room.service.ts

@@ -7,9 +7,7 @@ export class RoomService {
 
   constructor(
     private RoomSocketRepositoryService: RoomSocketRepositoryService
-  ) { 
+  ) {}
-    
-  }
   
   init() {
     this.OnReceiveCreateRoom()

src/app/module/chat/domain/use-case/message-to-async-ui.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MessageToAsyncUIService {
+
+  constructor() { }
+}

src/app/module/chat/domain/use-case/sync-all-room-messages.service.ts

@@ -9,6 +9,7 @@ import { RoomLocalRepository } from '../../data/repository/room/room-local-repos
 import { SessionStore } from 'src/app/store/session.service';
 import { Logger } from 'src/app/services/logger/main/service';
 import { XTracerAsync, TracingType } from 'src/app/services/monitoring/opentelemetry/tracer';
+import { v4 as uuidv4 } from 'uuid'
 
 @Injectable({
   providedIn: 'root'
@@ -54,15 +55,17 @@ export class SyncAllRoomMessagesService {
 
             this.messageLocalDataSourceService.findOrUpdate(clone)
 
-            const me = message.info.find(e => e.memberId == SessionStore.user.UserId)
+            const me = message.info.find(e => e.memberId == SessionStore.user.UserId && typeof e.deliverAt == 'string' )
 
             if(!me) {
               this.MessageSocketRepositoryService.sendDeliverAt({
                 memberId: SessionStore.user.UserId,
                 messageId: message.id,
                 roomId: message.roomId,
-                requestId: "string"
+                requestId: uuidv4()
               })
+
+              tracing.addEvent('send delever roomId'+ room.id)
             }
           }
 
@@ -70,14 +73,17 @@ export class SyncAllRoomMessagesService {
             let clone: MessageTable = message
             clone.roomId = room.id
 
-            const me = message.info.find(e => e.memberId == SessionStore.user.UserId)
+            const me = message.info.find(e => e.memberId == SessionStore.user.UserId && typeof e.deliverAt == 'string' )
             if(!me) {
               this.MessageSocketRepositoryService.sendDeliverAt({
                 memberId: SessionStore.user.UserId,
                 messageId: message.id,
                 roomId: message.roomId,
-                requestId: "string"
+                requestId: uuidv4()
               })
+
+              tracing.addEvent('send delever roomId'+ room.id)
+              
             }
           }
 

src/app/module/chat/infra/socket/signalR.ts

@@ -159,7 +159,6 @@ export class SignalRConnection {
 
     for(const method of methods) {
       this.hubConnection.on(method, (message: any) => {
-        console.log({message})
         this.messageSubject.next(message);
         this.sendDataSubject.next({
           method: method,

src/app/ui/chat/chat-routing.module.ts

@@ -60,6 +60,10 @@ const routes: Routes = [
     path: 'view-onces',
     loadChildren: () => import('./modal/view-onces/view-onces.module').then( m => m.ViewOncesPageModule)
   },
+  {
+    path: 'room-info',
+    loadChildren: () => import('./modal/room-info/room-info.module').then( m => m.RoomInfoPageModule)
+  },
 ];
 
 @NgModule({

src/app/ui/chat/component/messages/messages.page.html

@@ -41,13 +41,13 @@
 
 <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 rotate-div" #scrollMe >
 
     <div
       *ngFor="let message of messages1[roomId]; let messageIndex = index" 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">
+      <div class="message-container rotate-div">
 
         <div class="d-flex justify-content-between">
           <div>
@@ -151,7 +151,7 @@
         </div>
       </div>
       <!-- current emoji -->
-    <div>
+      <div class="rotate-div">
         <span *ngFor="let reaction of message.reactions" class="emoji-icon">
           {{ reaction.reaction }}
         </span>

src/app/ui/chat/component/messages/messages.page.scss

@@ -495,3 +495,12 @@ ion-footer {
   img {}
 
 }
+
+
+// .rotate-div {
+//   transform: rotate(180deg);
+//   -webkit-transform: rotate(180deg);
+//   -moz-transform: rotate(180deg);
+//   -ms-transform: rotate(180deg);
+//   -o-transform: rotate(180deg);
+// }

src/app/ui/chat/component/messages/messages.page.ts

@@ -147,6 +147,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   @ViewChild('imageModal') imageModal: TemplateRef<any>;
   totalMembers = 0
+  members: MemberTable[] = []
 
   constructor(
     public popoverController: PopoverController,
@@ -200,6 +201,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.roomMembers$ = this.MemberListLocalRepository.getRoomMemberByIdLive(this.roomId).pipe(
       tap((members) => {
         this.totalMembers = members.length
+        this.members = members
         for(const member of members) {
           if(member.wxUserId == SessionStore.user.UserId) {
             this.isAdmin = member.isAdmin
@@ -218,8 +220,6 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
       const uniqueArray = [...new Set(arrayNames)];
 
-      console.log({uniqueArray})
-
       if(uniqueArray.length >= 1) {
         (this.myInputRef.nativeElement as HTMLDivElement).innerHTML =  uniqueArray + '...'
       } else {
@@ -246,7 +246,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
   }
 
   allViewed(message: MessageEntity) {
-    return message.info.filter(e =>  typeof e.readAt == 'string').length == this.totalMembers
+    const totalMembers = this.members.filter((e) => message.sender.wxUserId != e.wxUserId ).length
+    return message.info.filter(e =>  typeof e.readAt == 'string' && message.sender.wxUserId != e.memberId ).length == totalMembers
   }
 
   async getMessages() {
@@ -258,9 +259,9 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
     this.messages1[this.roomId] = []
     this.messages1[this.roomId] = messages
 
-    if(messages.length >= 1) {
+    // if(messages.length >= 1) {
-      this.messages1[this.roomId].push(LastMessage)
+    //   this.messages1[this.roomId].push(LastMessage)
-    }
+    // }
 
     this.loadAttachment()
     setTimeout(() => {

src/app/ui/chat/modal/chat-popover/chat-popover.page.html

@@ -19,6 +19,7 @@
 
     <ion-progress-bar type="indeterminate" *ngIf="showLoader"></ion-progress-bar>
     <br *ngIf="showLoader">
+    <button (click)="details()" class="btn-cancel" shape="round">Detalhes</button>
     <button *ngIf="isAdmin" (click)="addUser()" class="btn-cancel" shape="round">Adicionar</button>
     <button (click)="leaveGroup()" class="btn-cancel" shape="round">Sair do Grupo</button>
     <button *ngIf="isAdmin" (click)="openChangeGroupName()" class="btn-cancel btn-cancel mt-10" shape="round" style="min-width: 192px;">Alterar

src/app/ui/chat/modal/chat-popover/chat-popover.page.ts

@@ -8,6 +8,7 @@ import { ZodError } from 'zod';
 import { isHttpResponse } from 'src/app/services/http.service';
 
 import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service'
+import { RoomInfoPage } from '../room-info/room-info.page';
 
 @Component({
   selector: 'app-chat-popover',
@@ -144,4 +145,23 @@ export class ChatPopoverPage implements OnInit {
     this.close('addUser');
   }
 
+
+  async details() {
+    const modal = await this.modalController.create({
+      component: RoomInfoPage,
+      cssClass: 'modal-aside',
+      backdropDismiss: true,
+      componentProps: {
+        roomId: this.roomId
+      }
+    });
+    await modal.present();
+    modal.onDidDismiss().then((res)=>{
+      if(res.data == 'success') {
+        this.leaveGroup();
+        //this.ChatSystemService.hidingRoom(this.roomId);
+      }
+    });
+  }
+
 }

src/app/ui/chat/modal/room-info/room-info-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { RoomInfoPage } from './room-info.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RoomInfoPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class RoomInfoPageRoutingModule {}

src/app/ui/chat/modal/room-info/room-info.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { RoomInfoPageRoutingModule } from './room-info-routing.module';
+
+import { RoomInfoPage } from './room-info.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RoomInfoPageRoutingModule
+  ],
+  declarations: [RoomInfoPage]
+})
+export class RoomInfoPageModule {}

src/app/ui/chat/modal/room-info/room-info.page.html

@@ -0,0 +1,18 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title class="title"  *ngIf="roomData$ | async as roomData"> Nome do grupo {{ roomData.roomName }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="px-20">
+
+  <div> Membros: </div>
+
+  <ion-list class="header-bottom-contacts"  *ngIf="roomMembers$ | async as memberList">
+    <div *ngFor="let user of memberList; let i = index">
+      <div class="py-10">
+        {{ user.wxFullName }} <span *ngIf="user.isAdmin">(admin do group)</span>
+      </div>
+    </div>
+  </ion-list>
+</ion-content>

src/app/ui/chat/modal/room-info/room-info.page.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { RoomInfoPage } from './room-info.page';
+
+describe('RoomInfoPage', () => {
+  let component: RoomInfoPage;
+  let fixture: ComponentFixture<RoomInfoPage>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RoomInfoPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(RoomInfoPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ui/chat/modal/room-info/room-info.page.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { Observable } from 'rxjs';
+import { MemberTable } from 'src/app/module/chat/infra/database/dexie/schema/members';
+import { MemberListLocalRepository } from 'src/app/module/chat/data/repository/member-list-local-repository.service'
+import { Observable as  DexieObservable } from 'Dexie';
+import { RoomTable } from 'src/app/module/chat/infra/database/dexie/schema/room';
+import { RoomLocalRepository } from 'src/app/module/chat/data/repository/room/room-local-repository.service'
+
+@Component({
+  selector: 'app-room-info',
+  templateUrl: './room-info.page.html',
+  styleUrls: ['./room-info.page.scss'],
+})
+export class RoomInfoPage implements OnInit {
+
+  roomId:string;
+  roomMembers$:  Observable<MemberTable[] | undefined>
+  roomData$: DexieObservable<RoomTable | undefined>
+
+  constructor(
+    private navParams: NavParams,
+    private MemberListLocalRepository: MemberListLocalRepository,
+    private RoomLocalRepository: RoomLocalRepository,
+  ) {
+    this.roomId = this.navParams.get('roomId');
+  }
+
+  ngOnInit() {
+
+    // this.roomMessage$ = this.messageRepositoryService.getItemsLive(this.roomId)
+    this.roomMembers$ = this.MemberListLocalRepository.getRoomMemberByIdLive(this.roomId).pipe()
+    this.roomData$ = this.RoomLocalRepository.getRoomByIdLive(this.roomId)
+  }
+
+}

src/theme/variables.scss

@@ -383,6 +383,22 @@ $app-theme: mat-light-theme(
   opacity: 1;
 }
 
+.modal-aside::part(content), .modal-aside .modal-wrapper {
+  position: absolute;
+  right: 0px;
+  height: 90%;
+  max-width: 100%;
+  border-radius:  0 0 25px 25px;
+  -webkit-border-radius:  0 0 25px 25px;
+  -moz-border-radius:  0 0 25px 25px;
+  -ms-border-radius:  0 0 25px 25px;
+  -o-border-radius:  0 0 25px 25px;
+  max-width: 400px;
+  width: 100%;
+  opacity: 1;
+  top: 0px;
+}
+
 .exp-options .popover-content {
   width: 100% !important;
   left: 0 !important;