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,122 +41,122 @@
 
 <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}"
+      *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>
+        <div class="d-flex justify-content-between">
           <div>
-            {{ message.message }}
-          </div>
-
-          <div *ngFor="let attachment of message.attachments; let i = index">
-            <div *ngIf="attachment.source == MessageAttachmentFileSource.Webtrix">
-
-              <ion-icon  src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
-              <ion-label>{{ attachment.fileName}}</ion-label>
-              <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
-              <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
-              <ion-icon *ngIf="( msg.downloadLoader == true || msg.uploadingFile == true )" class="icon-download" src="assets/gif/theme/{{ThemeService.currentTheme}}/Blocks-loader.svg" slot="end"></ion-icon> -->
-
+            <div>
+              {{ message.message }}
             </div>
 
-            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
+            <div *ngFor="let attachment of message.attachments; let i = index">
+              <div *ngIf="attachment.source == MessageAttachmentFileSource.Webtrix">
 
-              <img
-                *ngIf="message.oneShot != true"
-                [src]="attachment.safeFile"
-                (load)="onImageLoad(message, messageIndex)"
-                (error)="onImageError()"
-              >
+                <ion-icon  src="assets/icon/webtrix.svg" class="file-icon font-25"></ion-icon>
+                <ion-label>{{ attachment.fileName}}</ion-label>
+                <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/default/icons-download.svg" slot="end"></ion-icon>
+                <ion-icon *ngIf="ThemeService.currentTheme == 'gov' && attachment.type != 'webtrix' && !( msg.downloadLoader == true || msg.uploadingFile == true ) " class="icon-download" src="assets/icon/theme/gov/icons-download.svg" slot="end"></ion-icon>
+                <ion-icon *ngIf="( msg.downloadLoader == true || msg.uploadingFile == true )" class="icon-download" src="assets/gif/theme/{{ThemeService.currentTheme}}/Blocks-loader.svg" slot="end"></ion-icon> -->
 
-              <div *ngIf="SessionStore.user.UserId == message.sender.wxUserId && message.oneShot == true">
-                Mandou uma mensagen com visualização única
               </div>
 
+              <div *ngIf="attachment.fileType == MessageAttachmentFileType.Image">
 
-              <div *ngIf="SessionStore.user.UserId != message.sender.wxUserId && message.oneShot == true">
-              <!-- <div *ngIf="message.oneShot == true" class="cursor-pointer"> -->
-                <div (click)="viewOnce($event, message, i)">
-                  Abrir a visualização única
+                <img
+                  *ngIf="message.oneShot != true"
+                  [src]="attachment.safeFile"
+                  (load)="onImageLoad(message, messageIndex)"
+                  (error)="onImageError()"
+                >
+
+                <div *ngIf="SessionStore.user.UserId == message.sender.wxUserId && message.oneShot == true">
+                  Mandou uma mensagen com visualização única
                 </div>
+
+
+                <div *ngIf="SessionStore.user.UserId != message.sender.wxUserId && message.oneShot == true">
+                <!-- <div *ngIf="message.oneShot == true" class="cursor-pointer"> -->
+                  <div (click)="viewOnce($event, message, i)">
+                    Abrir a visualização única
+                  </div>
+                </div>
+
               </div>
 
+              <div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">
+                <audio [src]="attachment.safeFile|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
+              </div>
+
+              <div *ngIf="attachment.fileType == MessageAttachmentFileType.Doc">
+                <fa-icon *ngIf="attachment.mimeType == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
+                <fa-icon *ngIf="attachment.mimeType == 'application/word'" icon="file-word" class="word-icon">
+                </fa-icon>
+                <fa-icon *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" icon="file-word" class="word-icon"></fa-icon>
+                <fa-icon
+                  *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
+                  icon="file-word" class="excel-icon"></fa-icon>
+                <ion-icon *ngIf="attachment.mimeType == 'application/webtrix'" src="assets/icon/webtrix.svg">
+                </ion-icon>
+                <ion-icon *ngIf="attachment.mimeType == 'application/meeting'" src="assets/icon/webtrix.svg">
+                </ion-icon>
+
+                <ion-label>{{ attachment.fileName}}</ion-label>
+              </div>
             </div>
 
-            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Audio">
-              <audio [src]="attachment.safeFile|safehtml" preload="metadata" class="flex-grow-1" controls controlsList="nodownload noplaybackrate"></audio>
+          </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(message)" class="menuButton">Apagar mensagem</button>
+                <button *ngIf="!message.hasAttachment" (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
+                <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
+              </mat-menu>
             </div>
 
-            <div *ngIf="attachment.fileType == MessageAttachmentFileType.Doc">
-              <fa-icon *ngIf="attachment.mimeType == 'application/pdf'" icon="file-pdf" class="pdf-icon"></fa-icon>
-              <fa-icon *ngIf="attachment.mimeType == 'application/word'" icon="file-word" class="word-icon">
-              </fa-icon>
-              <fa-icon *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'" icon="file-word" class="word-icon"></fa-icon>
-              <fa-icon
-                *ngIf="attachment.mimeType == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'"
-                icon="file-word" class="excel-icon"></fa-icon>
-              <ion-icon *ngIf="attachment.mimeType == 'application/webtrix'" src="assets/icon/webtrix.svg">
-              </ion-icon>
-              <ion-icon *ngIf="attachment.mimeType == 'application/meeting'" src="assets/icon/webtrix.svg">
-              </ion-icon>
+          </div>
+
+        </div>
+        <div style="text-align: end;">
+
+          <!-- <div *ngIf="messageStatus(message) == 'enviar'" style="font-size: .6875rem;">A enviar</div>
+          <div *ngIf="messageStatus(message) == 'enviado'" style="font-size: .6875rem;">Enviado</div>
+          <div *ngIf="messageStatus(message) == 'allReceived'" style="font-size: .6875rem;">allReceived</div>
+          <div *ngIf="messageStatus(message) == 'allViewed'" style="font-size: .6875rem;">allViewed</div>
+  -->
+
+          <div *ngIf="totalMembers != 0">
+            <ion-icon *ngIf="messageStatus(message) == 'enviar'" src="assets/images/clock-regular.svg"></ion-icon>
+            <ion-icon *ngIf="messageStatus(message) == 'enviado'" src="assets/images/check-solid.svg"></ion-icon>
+            <ion-icon *ngIf="messageStatus(message) == 'allReceived'" src="assets/images/check-double-solid.svg"></ion-icon>
+            <ion-icon *ngIf="messageStatus(message) == 'allViewed'" src="assets/images/check-double-solid -viewed.svg"></ion-icon>
 
-              <ion-label>{{ attachment.fileName}}</ion-label>
-            </div>
           </div>
 
         </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(message)" class="menuButton">Apagar mensagem</button>
-              <button *ngIf="!message.hasAttachment" (click)="editMessage(message)" class="menuButton">Editar mensagem</button>
-              <button (click)="toggleEmojiPicker(message)" class="menuButton">Reagir mensagem</button>
-            </mat-menu>
-          </div>
-
+        <!-- Emoji Picker -->
+        <div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
+          <span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
+            {{ emoji }}
+          </span>
         </div>
-
       </div>
-      <div style="text-align: end;">
-
-        <!-- <div *ngIf="messageStatus(message) == 'enviar'" style="font-size: .6875rem;">A enviar</div>
-        <div *ngIf="messageStatus(message) == 'enviado'" style="font-size: .6875rem;">Enviado</div>
-        <div *ngIf="messageStatus(message) == 'allReceived'" style="font-size: .6875rem;">allReceived</div>
-        <div *ngIf="messageStatus(message) == 'allViewed'" style="font-size: .6875rem;">allViewed</div>
- -->
-
-        <div *ngIf="totalMembers != 0">
-          <ion-icon *ngIf="messageStatus(message) == 'enviar'" src="assets/images/clock-regular.svg"></ion-icon>
-          <ion-icon *ngIf="messageStatus(message) == 'enviado'" src="assets/images/check-solid.svg"></ion-icon>
-          <ion-icon *ngIf="messageStatus(message) == 'allReceived'" src="assets/images/check-double-solid.svg"></ion-icon>
-          <ion-icon *ngIf="messageStatus(message) == 'allViewed'" src="assets/images/check-double-solid -viewed.svg"></ion-icon>
-
-        </div>
-
-      </div>
-
-      <!-- Emoji Picker -->
-      <div *ngIf="selectedMessage === message" class="emoji-picker" [ngStyle]="{'bottom': '0', 'right': '0'}">
-        <span *ngFor="let emoji of emojis" (click)="addReaction(message, emoji)" class="emoji-icon">
-          {{ emoji }}
+      <!-- current emoji -->
+      <div class="rotate-div">
+        <span *ngFor="let reaction of message.reactions" class="emoji-icon">
+          {{ reaction.reaction }}
         </span>
       </div>
     </div>
-    <!-- current emoji -->
-    <div>
-      <span *ngFor="let reaction of message.reactions" class="emoji-icon">
-        {{ reaction.reaction }}
-      </span>
-    </div>
-  </div>
 
 
   </div>

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

@@ -494,4 +494,13 @@ 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

@@ -68,7 +68,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
   roomType!: RoomType
   RoomTypeEnum = RoomType
-  
+
   @Input() roomId: string;
   @Input() showMessages: string;
 
@@ -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
@@ -210,7 +212,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
 
     this.roomStatus$ = this.MemberListLocalRepository.allMemberOnline(this.roomId)
     this.chatServiceService.getRoomById(this.roomId)
- 
+
     this.messageTypingSubject?.unsubscribe()
     this.messageTypingSubject  = this.userTypingLocalRepository.getUserTypingLiveByRoomId(this.roomId).subscribe((e) => {
       const arrayNames = e.filter((b)=> b.userId != SessionStore.user.UserId).map(e => e.userName)
@@ -218,14 +220,12 @@ 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 {
         (this.myInputRef.nativeElement as HTMLDivElement).innerHTML = ''
       }
-      
+
     }) as any
 
   }
@@ -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) {
-      this.messages1[this.roomId].push(LastMessage)
-    }
+    // if(messages.length >= 1) {
+    //   this.messages1[this.roomId].push(LastMessage)
+    // }
 
     this.loadAttachment()
     setTimeout(() => {
@@ -1001,7 +1002,7 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
         ]
       });
 
-      
+
       await alert.present();
     })
   }

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',
@@ -112,7 +113,7 @@ export class ChatPopoverPage implements OnInit {
   //Delete
   async deleteGroup() {
     this.showLoader = true
-    
+
     const result = await this.ChatServiceService.deleteRoomById(this.roomId)
 
 
@@ -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;