show message break line

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

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

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

@@ -44,7 +44,7 @@
   <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"
+      *ngFor="let message of messages1[roomId]; let messageIndex = index" class="messages-list-item-wrapper px-10-em"
       [ngClass]="{
         'info-meeting': message.messageType == IMessageType.information,
         'my-message': message.messageType != IMessageType.information && message?.sender?.wxUserId === SessionStore.user.UserId,
@@ -54,7 +54,7 @@
       <div class="message-container rotate-div" *ngIf="message.isDeleted != true && message.messageType != IMessageType.information">
         <div class="d-flex justify-content-between">
           <div>
-            <div >
+            <div style="white-space: pre-line;">
               {{ message.message }}
             </div>
 
@@ -130,7 +130,7 @@
         </div>
         <div style="text-align: end;">
 
-          <div *ngIf="totalMembers != 0">
+          <div *ngIf="totalMembers != 0 && SessionStore.user.UserId == message.sender.wxUserId">
             <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>

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

@@ -25,7 +25,7 @@ import { Observable, Subscription } from 'rxjs';
 import { RoomLocalRepository } from 'src/app/module/chat/data/repository/room/room-local-repository.service'
 import { MemberListLocalRepository } from 'src/app/module/chat/data/repository/member/member-list-local-repository.service'
 import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service';
-import { EditMessagePage } from 'src/app/modals/edit-message/edit-message.page';
+import { EditMessagePage } from 'src/app/ui/chat/modal/edit-message/edit-message.page';
 import { IMessageType, MessageAttachmentFileType, MessageAttachmentSource, MessageEntity } from 'src/app/core/chat/entity/message';
 import { JSFileToDataUrl } from 'src/app/utils/ToBase64';
 import { CameraService } from 'src/app/infra/camera/camera.service'
@@ -50,8 +50,6 @@ import { RoomTable } from 'src/app/infra/database/dexie/instance/chat/schema/roo
 import { TypingTable } from 'src/app/infra/database/dexie/instance/chat/schema/typing';
 import { HttpClient } from '@angular/common/http';
 import { v4 as uuidv4 } from 'uuid'
-import { MatMenuTrigger } from '@angular/material/menu';
-
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.page.html',
@@ -896,7 +894,8 @@ export class MessagesPage implements OnInit, OnChanges, AfterViewInit, OnDestroy
       componentProps: {
         roomId: this.roomId,
         members: [],
-        isAdmin: this.isAdmin
+        isAdmin: this.isAdmin,
+        roomType: this.roomType
       }
     });
     await modal.present();

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

@@ -20,13 +20,13 @@
     <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
+    <button *ngIf="isAdmin && roomType == EnumRoomType.Group" (click)="addUser()" class="btn-cancel" shape="round">Adicionar</button>
+    <button *ngIf="roomType == EnumRoomType.Group" (click)="leaveGroup()" class="btn-cancel" shape="round">Sair do Grupo</button>
+    <button *ngIf="isAdmin && roomType == EnumRoomType.Group" (click)="openChangeGroupName()" class="btn-cancel btn-cancel mt-10" shape="round" style="min-width: 192px;">Alterar
       nome do grupo</button>
-      <button *ngIf="isAdmin"  (click)="setRoomOwner()" class="btn-cancel" shape="round">Adicionar admin</button>
+      <button *ngIf="isAdmin && roomType == EnumRoomType.Group"  (click)="setRoomOwner()" class="btn-cancel" shape="round">Adicionar admin</button>
     <div class="solid"></div>
     <button (click)="close('cancel')" full class="btn-cancel mobile-only" shape="round">Cancelar</button>
-    <button *ngIf="isAdmin" (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
+    <button *ngIf="isAdmin && roomType == EnumRoomType.Group" (click)="deleteGroup()" class="btn-delete" shape="round">Apagar grupo</button>
   </div>
 </ion-content>

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

@@ -9,6 +9,7 @@ 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';
+import { RoomType } from 'src/app/core/chat/entity/group';
 
 @Component({
   selector: 'app-chat-popover',
@@ -21,6 +22,8 @@ export class ChatPopoverPage implements OnInit {
   isAdmin = false;
   isGroupCreated: boolean;
   showLoader = false
+  EnumRoomType = RoomType
+  roomType!: RoomType
 
   constructor(
     private popoverController: PopoverController,
@@ -32,6 +35,7 @@ export class ChatPopoverPage implements OnInit {
   ) {
     this.roomId = this.navParams.get('roomId');
     this.isAdmin = this.navParams.get('isAdmin');
+    this.roomType = this.navParams.get('roomType');
 
   }
 

src/app/ui/chat/modal/edit-message/edit-message-routing.module.ts

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

src/app/ui/chat/modal/edit-message/edit-message.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 { EditMessagePageRoutingModule } from './edit-message-routing.module';
+
+import { EditMessagePage } from './edit-message.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EditMessagePageRoutingModule
+  ],
+  declarations: [EditMessagePage]
+})
+export class EditMessagePageModule {}

src/app/ui/chat/modal/edit-message/edit-message.page.html

@@ -0,0 +1,51 @@
+<ion-header  class="ion-no-border">
+  <ion-toolbar class="header-toolbar">
+    <div class="main-header">
+      <div class="title-content width-100">
+        <div class="back-icon">
+          <!-- <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/Theme/doneIt/icons-arrow-arrow-left.svg'></ion-icon>
+          <button class="btn-no-color cursor-pointer" >
+            <ion-icon *ngIf="ThemeService.currentTheme == 'doneIt' " slot="end" src='assets/images/theme/{{ThemeService.currentTheme}}/icons-arrow-arrow-left.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'default' " slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+            <ion-icon *ngIf="ThemeService.currentTheme == 'gov' " slot="end" src='assets/images/theme/gov/icons-calendar-arrow-left.svg'></ion-icon>
+          </button> -->
+        </div>
+        <div class="div-title">
+          <ion-label class="title">Editar Mensagem</ion-label>
+        </div>
+      </div>
+    </div>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div class="main-content">
+
+    <div class="old-message-container d-flex justify-center">
+      <div class="old-message" style="white-space: pre-line;">{{ oldMessage }}</div>
+    </div>
+
+
+    <div class="type-message mt-40-em">
+      <ion-textarea #messageInput clearOnEdit="true" placeholder="Escrever uma mensagem" class="message-input" rows="1" [(ngModel)]="message"   (keyup.enter)="save()"  ></ion-textarea>
+    </div>
+  </div>
+</ion-content>
+
+<ion-footer class="ion-no-border">
+  <ion-toolbar class="footer-toolbar px-20">
+    <ion-buttons slot="start">
+      <button class="btn-ok" fill="clear" color="#fff" (click)="save()">
+        <ion-label>Enviar</ion-label>
+      </button>
+    </ion-buttons>
+    <ion-buttons  slot="end">
+      <button class="btn-cancel" fill="clear" color="#061b52" (click)="dismiss()" >
+        <ion-label>Cancelar</ion-label>
+      </button>
+    </ion-buttons>
+    
+  </ion-toolbar>
+</ion-footer>
+
+

src/app/ui/chat/modal/edit-message/edit-message.page.scss

@@ -0,0 +1,94 @@
+@import '~src/function.scss';
+
+.header-toolbar{
+    --background:transparent;
+    --opacity: 1;
+
+   .main-header{
+     width: 100%; /* 400px */
+     height: 100%;
+     font-family: Roboto;
+     border-top-left-radius: 25px;
+     border-top-right-radius: 25px;
+     background-color: #fff;
+     overflow:hidden;
+     padding: 30px 20px 0px 20px;
+     color:#000;
+     transform: translate3d(0, 1px, 0);
+
+     .div-icon{
+       width: rem(40);
+       float: right;
+       font-size: rem(35);
+       overflow: auto;
+       padding: 1px;
+     }
+     .div-icon ion-icon{
+       float: right;
+       padding-left: 20px;
+     }
+       .title-content{
+         margin: 0px auto;
+         overflow: auto;
+         padding: 0 !important;
+       }
+
+     .back-icon{
+       width: 37px;
+       float: left;
+       font-size: rem(35);
+       overflow: auto;
+
+       }
+     .div-title{
+         width: calc(100% - 45px);
+         padding: 0!important;
+         float: left;
+         margin: 2.5px 0 0 5px;
+     }
+     .title{
+         font-size: rem(25);
+     }
+   }
+ }
+
+ ion-content{
+   --background:transparent;
+ }
+ .main-content{
+   width: 100%;
+   height: 100%;
+   font-family: Roboto;
+   margin: 0 auto;
+   background-color: #fff;
+   overflow:auto;
+   padding: 0 0 0 0;
+
+    
+   }
+
+   .type-message {
+    display: flex;
+    border: 1px solid #ebebeb;
+    border-radius: 25px;
+    margin: 0 30px 0 30px;
+    align-items: center;
+    overflow: auto;
+  }
+
+.old-message-container {
+  padding: 40px;
+}
+.old-message {
+  font-size: rem(13);
+  font-family: Roboto;
+  overflow: auto;
+  background: var(--chat-incoming-msg-color);
+  border-radius: 10px;
+  display: inline;
+  padding: 10px 20px;
+}
+
+:host {
+  height: 400px;
+}

src/app/ui/chat/modal/edit-message/edit-message.page.spec.ts

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

src/app/ui/chat/modal/edit-message/edit-message.page.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { ThemeService } from 'src/app/services/theme.service'
+
+@Component({
+  selector: 'app-edit-message',
+  templateUrl: './edit-message.page.html',
+  styleUrls: ['./edit-message.page.scss'],
+})
+export class EditMessagePage implements OnInit {
+
+  @ViewChild('messageInput', { static: false }) messageInput!: ElementRef<HTMLIonTextareaElement>;
+  @Input() message: string;
+  @Input() roomId: any;
+
+  oldMessage: string
+
+  constructor(
+    private modalController: ModalController,
+    public ThemeService: ThemeService,
+  ) {}
+
+  ngOnInit() {
+    this.oldMessage = this.message
+  }
+  ngAfterViewInit() {
+    // Focus the textarea once the view has been initialized
+    this.messageInput.nativeElement.focus();
+  }
+
+  dismiss() {
+    this.modalController.dismiss();
+  }
+
+  save() {
+    // Implement your save logic here
+    console.log('Updated Message:', this.message);
+    this.modalController.dismiss({
+      'message': this.message
+    });
+  }
+
+}

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

@@ -23,7 +23,7 @@ import { Observable as  DexieObservable } from 'Dexie';
 import { Subscription } from 'rxjs';
 import { MessageTable } from 'src/app/infra/database/dexie/instance/chat/schema/message';
 import { ChatServiceService } from 'src/app/module/chat/domain/chat-service.service';
-import { EditMessagePage } from 'src/app/modals/edit-message/edit-message.page';
+import { EditMessagePage } from 'src/app/ui/chat/modal/edit-message/edit-message.page';
 import { MessageAttachmentFileType, MessageAttachmentSource, MessageEntity } from 'src/app/core/chat/entity/message';
 import { MemberTable } from 'src/app/infra/database/dexie/instance/chat/schema/members';
 import { TypingTable } from 'src/app/infra/database/dexie/instance/chat/schema/typing';