finish styling individual messages view for desktop

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

@@ -10,7 +10,7 @@ const routes: Routes = [
     path: '',
     component: ChatPage,
   },
- /*  {
+  {
     path: 'conversation',
     loadChildren: () => import('./conversation/conversation.module').then( m => m.ConversationPageModule)
   },
@@ -39,7 +39,7 @@ const routes: Routes = [
     path: 'test',
     outlet:'test',
     loadChildren: () => import('./test/test.module').then( m => m.TestPageModule)
-  } */
+  }
 
 ];
 

src/app/pages/chat/chat.page.html

@@ -66,7 +66,7 @@
                     <div class="item-icon">
                       <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
                     </div>
-                    <div (click)="openGroupMessagesPage(group._id, group)" class="item-content">
+                    <div (click)="openGroupMessagesPage(group._id)" class="item-content">
                       <div class="item-title-time">
                         <div class="item-title">
                           <ion-label>{{group.name.split('-').join(' ')}}</ion-label>

src/app/pages/chat/chat.page.scss

@@ -40,7 +40,6 @@ ion-content{
   margin: 0 auto;
   background-color: #fff;
   //overflow:auto;
-  padding: 30px 20px 0 20px;
   border-top-left-radius: 25px;
   border-top-right-radius: 25px;
 
@@ -112,6 +111,8 @@ ion-content{
 
     .aside-wrapper{
       width: 40%;
+      padding: 30px 20px 0 20px !important;
+      border-right: 1px solid #d8d8d8;
       .aside-title{
         font-size: 25px;
       }
@@ -123,7 +124,6 @@ ion-content{
       width: 60%;
       display: flex !important;
       background-color: white;
-      border: 1px solid green;
     }
     .item{
       .item-icon{

src/app/pages/chat/chat.page.ts

@@ -112,9 +112,9 @@ export class ChatPage implements OnInit {
       this.showMessages=true;
     }
   }
-  openGroupMessagesPage(rid, room) {
+  openGroupMessagesPage(rid) {
     if( window.innerWidth <= 1024){
-      this.openGroupMessagesModal(room);
+      this.openGroupMessagesModal(rid);
     }
     else{
       this.closeAllDesktopComponents();
@@ -242,21 +242,21 @@ export class ChatPage implements OnInit {
     modal.onDidDismiss();
   }
 
-  async openGroupMessagesModal(room:any){
+  async openGroupMessagesModal(roomId:any){
     let classs;
     if( window.innerWidth <= 1024){
       classs = 'modal'
     } else  {
       classs = 'chat-mobile-modal-to-Desktop'
     }
-    console.log(room);
+    console.log(roomId);
     
     const modal = await this.modalController.create({
       component: GroupMessagesPage,
       cssClass: classs,
       backdropDismiss: false,
       componentProps: {
-        room: room,
+        roomId: roomId,
       },
     });
     await modal.present();

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -26,6 +26,8 @@ export class GroupMessagesPage implements OnInit {
   members:any;
   contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
 
+  roomId: string;
+
   constructor(
     private menu: MenuController,
     private modalController: ModalController,
@@ -36,8 +38,7 @@ export class GroupMessagesPage implements OnInit {
     private authService: AuthService,
   ) {
     this.isGroupCreated = true;
-    this.room = this.navParams.get('room');
-    this.roomName = this.room.name.split('-').join(' ');
+    this.roomId = this.navParams.get('roomId');
   }
 
   ngOnInit() {
@@ -45,27 +46,40 @@ export class GroupMessagesPage implements OnInit {
       this.loggedUser=res;
       console.log(this.loggedUser); 
     });
-    this.load();
+    this.getRoomInfo();
   }
-  load(){
+
+  getRoomInfo(){
+    this.showLoader = true;
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      this.room = room['room'];
+      this.roomName = this.room.name.split('-').join(' ');
+      this.getGroupContacts(this.room);
+      this.loadGroupMessages(this.room);
+      this.showLoader = false;
+    });
+  }
+
+
+  /* load(){
     this.getGroupContacts();
     this.loadGroupMessages();
-  }
+  } */
 
   close(){
     this.modalController.dismiss();
   }
 
   doRefresh(ev:any){
-    this.load();
+    this.getRoomInfo();
     ev.target.complete();
   }
 
-  getGroupContacts(){
+  getGroupContacts(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers
     if(this.room.t === 'p'){
-      this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
@@ -73,18 +87,18 @@ export class GroupMessagesPage implements OnInit {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
+      this.chatService.getChannelMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
       });
     }
   }
-  loadGroupMessages(){
+  loadGroupMessages(room:any){
     this.showLoader = true;
     //If group is private call getGroupMembers
     if(this.room.t === 'p'){
-      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         let msgOnly = res['messages'].filter(data => data.t != 'au');
         this.messages = msgOnly.reverse();
@@ -93,7 +107,7 @@ export class GroupMessagesPage implements OnInit {
     }
     //Otherwise call getChannelMembers for públic groups
     else{
-      this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
+      this.chatService.getPublicGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         this.messages = res['messages'].reverse();
       });
@@ -104,12 +118,12 @@ export class GroupMessagesPage implements OnInit {
     let body = {
       "message": 
       { 
-        "rid": this.room._id, "msg": this.message 
+        "rid": this.roomId, "msg": this.message 
       }
     }
     
     this.chatService.sendMessage(body).subscribe(res=> {
-      this.loadGroupMessages(); 
+      this.getRoomInfo();
     });
     this.message = "";
   }
@@ -131,7 +145,7 @@ export class GroupMessagesPage implements OnInit {
         this.roomName = res.data.name.split('-').join(' ');
         console.log(this.roomName);
         
-        this.load();
+        this.getRoomInfo();
         /* this.modalController.dismiss(); */
       };
       
@@ -167,7 +181,7 @@ export class GroupMessagesPage implements OnInit {
     await modal.present();
 
     modal.onDidDismiss().then(()=>{
-      this.load();
+      this.getRoomInfo();
     });
   }
 

src/app/pages/chat/test/test.module.ts

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
@@ -7,6 +6,8 @@ import { IonicModule } from '@ionic/angular';
 import { TestPageRoutingModule } from './test-routing.module';
 
 import { TestPage } from './test.page';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
 
 @NgModule({
   imports: [

src/app/pages/chat/test/test.page.html

@@ -3,7 +3,30 @@
     <ion-title>test</ion-title>
   </ion-toolbar>
 </ion-header>
-
 <ion-content>
-TESTE
+  <div *ngFor="let member of members">{{member}}</div>
+
 </ion-content>
+<ion-footer>
+  <ion-toolbar>
+    <ion-row align-items-center class="row">
+      <ion-col size="1">
+        <ion-label class="ion-no-padding" lines="none">
+          <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+      <ion-col size="9">
+        <ion-item class="ion-no-padding type-message" lines="none">
+          <ion-textarea placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+        </ion-item>
+      </ion-col>
+      <ion-col size="2">
+        <!-- [disabled]="message === ''" -->
+        <ion-label>
+          <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+        </ion-label>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

src/app/pages/chat/test/test.page.ts

@@ -1,4 +1,10 @@
 import { Component, OnInit } from '@angular/core';
+import { ActionSheetController, MenuController, ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { AuthService } from 'src/app/services/auth.service';
+import { ChatService } from 'src/app/services/chat.service';
+import { ChatOptionsPopoverPage } from 'src/app/shared/popover/chat-options-popover/chat-options-popover.page';
+import { ChatPopoverPage } from 'src/app/shared/popover/chat-popover/chat-popover.page';
+import { GroupContactsPage } from '../group-messages/group-contacts/group-contacts.page';
 
 @Component({
   selector: 'app-test',
@@ -7,9 +13,188 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TestPage implements OnInit {
 
-  constructor() { }
+  showLoader: boolean;
+  isGroupCreated:boolean;
+  loggedUser: any;
+  message:any;
+  messages:any;
+  
 
-  ngOnInit() {
+  room:any;
+  roomName:any;
+  members:any;
+  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  constructor(
+    private menu: MenuController,
+    private modalController: ModalController,
+    private actionSheetController: ActionSheetController,
+    public popoverController: PopoverController,
+    private chatService: ChatService,
+    private navParams: NavParams,
+    private authService: AuthService,
+  ) {
+    this.isGroupCreated = true;
+    this.room = this.navParams.get('room');
+    this.roomName = this.room.name.split('-').join(' ');
   }
 
+  ngOnInit() {
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser); 
+    });
+    this.load();
+  }
+  load(){
+    this.getGroupContacts();
+    this.loadGroupMessages();
+  }
+
+  close(){
+    this.modalController.dismiss();
+  }
+
+  doRefresh(ev:any){
+    this.load();
+    ev.target.complete();
+  }
+
+  getGroupContacts(){
+    this.showLoader = true;
+    //If group is private call getGroupMembers
+    if(this.room.t === 'p'){
+      this.chatService.getGroupMembers(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+        this.showLoader = false;
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+        this.showLoader = false;
+      });
+    }
+  }
+  loadGroupMessages(){
+    this.showLoader = true;
+    //If group is private call getGroupMembers
+    if(this.room.t === 'p'){
+      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+        console.log(res);
+        let msgOnly = res['messages'].filter(data => data.t != 'au');
+        this.messages = msgOnly.reverse();
+        this.showLoader = false;
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getPublicGroupMessages(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.messages = res['messages'].reverse();
+      });
+    }
+  }
+  sendMessage(){
+
+    let body = {
+      "message": 
+      { 
+        "rid": this.room._id, "msg": this.message 
+      }
+    }
+    
+    this.chatService.sendMessage(body).subscribe(res=> {
+      this.loadGroupMessages(); 
+    });
+    this.message = "";
+  }
+
+  async openOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatPopoverPage,
+      cssClass: 'chat-popover',
+      event: ev,
+      componentProps: {
+        room: this.room,
+      },
+      translucent: true
+    });
+    await popover.present();
+    popover.onDidDismiss().then(res=>{
+      console.log(res);
+      if(res.data){
+        this.roomName = res.data.name.split('-').join(' ');
+        console.log(this.roomName);
+        
+        this.load();
+        /* this.modalController.dismiss(); */
+      };
+      
+    });
+  }
+  async openChatOptions(ev: any) {
+    const popover = await this.popoverController.create({
+      component: ChatOptionsPopoverPage,
+      cssClass: 'chat-options-popover',
+      event: ev,
+      componentProps: {
+        room: this.room,
+      },
+      translucent: true
+    });
+    return await popover.present();
+  }
+  async addContacts(){
+    console.log(this.members);
+  
+    const modal = await this.modalController.create({
+      component: GroupContactsPage,
+      componentProps: {
+        isCreated: this.isGroupCreated,
+        room: this.room,
+        members: this.members,
+        name: this.room.name,
+      }, 
+      cssClass: 'contacts',
+      backdropDismiss: false
+    });
+
+    await modal.present();
+
+    modal.onDidDismiss().then(()=>{
+      this.load();
+    });
+  }
+
+  /* async actionSheet() {
+    const actionSheet = await this.actionSheetController.create({
+      cssClass: 'my-custom-class',
+      buttons: [{
+        text: 'Sair do grupo',
+        handler: () => {
+          console.log('Delete clicked');
+        }
+      }, {
+        text: 'Alterar nome do grupo1',
+        handler: () => {
+          console.log('Alterar nome do grupo');
+          this.openChangeGroupName()
+        }
+      }, {
+        text: 'Apagar o grupo',
+        handler: () => {
+          console.log('Play clicked');
+        }
+      }, 
+      ]
+    });
+    await actionSheet.present();
+  }
+ */
+
 }
+

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

@@ -171,4 +171,4 @@
       align-self: center;
     }
   }
- }
+ }

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

@@ -29,28 +29,15 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="messages" #scrollMe>
-    <!-- <ion-infinite-scroll position="top" threshold="25%" (ionInfinite)="loadMoreMessages($event)">
-      <ion-infinite-scroll-content loadindSpiniter="crescent" loadingText="Carregando...">
-
-      </ion-infinite-scroll-content>
-    </ion-infinite-scroll> -->
-    <!-- <div class="incoming">
-      <div class="title">
-        <ion-label>Secretário Assuntos sociais</ion-label>
-        <span class="time">14:23</span>
-      </div>
-      <div>
-        <img src='assets/images/1.jpg' tappable>
-        <ion-label hidden >Investidura Filipe Nyusi</ion-label>
-      </div>
-    </div> -->
-    <div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
-      <div class="title">
-        <ion-label>{{msg.u.name}}</ion-label>
-        <span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
-      </div>
-      <div>
-        <ion-label>{{msg.msg}}</ion-label>
+    <div class="container-width-100" *ngFor="let msg of messages">
+      <div class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
+        <div class="title">
+          <ion-label>{{msg.u.name}}</ion-label>
+          <span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
+        </div>
+        <div>
+          <ion-label>{{msg.msg}}</ion-label>
+        </div>
       </div>
     </div>
   </div>
@@ -59,26 +46,19 @@
 
 
 <ion-footer>
-  <ion-toolbar>
-    <ion-row align-items-center class="row">
-      <ion-col size="1">
-        <ion-label class="ion-no-padding" lines="none">
-          <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
-        </ion-label>
-      </ion-col>
-      <ion-col size="9">
-        <ion-item class="ion-no-padding type-message" lines="none">
-          <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
-          <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
-        </ion-item>
-      </ion-col>
-      <ion-col size="2">
-        <!-- [disabled]="message === ''" -->
-        <ion-label>
-          <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
-        </ion-label>
-      </ion-col>
-    </ion-row>
-  </ion-toolbar>
+  <div class="container width-100 d-flex">
+    <div>
+      <ion-icon (click)="openChatOptions()" class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+    </div>
+    <div class="width-80">
+      <ion-item class="ion-no-padding type-message" lines="none">
+        <ion-textarea clearOnEdit="true" placeholder="Escrever uma mensagem" auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
+        <ion-icon slot="end" src="assets/icon/icons-chat-mic.svg"></ion-icon>
+      </ion-item>
+    </div>
+    <div>
+      <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+    </div>
+  </div>
 </ion-footer>
 

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

@@ -2,7 +2,6 @@
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
-    border: 1px solid red;
 
     .main-header{
         width: 100%; /* 400px */
@@ -12,21 +11,21 @@
         border-top-right-radius: 25px;
         background-color: #fff;
         overflow:hidden;
-        padding: 0px 20px 0px 20px;
+        //padding: 0px 20px 0px 20px;
         color:#000;
         transform: translate3d(0, 1px, 0);
+        padding: 30px 20px 0 20px !important;
         
         .header-top{
-          //width: 360px;
-          margin: 0px auto;
+          width: 100%;
           overflow: auto;
-          padding: 0 !important;
+          //padding: 0 !important;
           background: #fff;
            .middle{
-            padding: 0!important;
+            //padding: 0!important;
             float: left;
             width: 280px;
-            margin: 2.5px 0 0 5px;
+            margin: 2px 0 0 5px;
             display: flex;
             align-items: center;
             
@@ -40,9 +39,9 @@
           }
         }
         .header-bottom{
-          width: 310px;
+          width: 95%;
           overflow: auto;
-          margin: 0 auto;
+         
 
           .header-bottom-icon{
             width: 30px;
@@ -85,7 +84,7 @@
  ion-content{
    width: 100%;
    height: 100%;
-  border: 1px solid red;
+   padding: 30px 20px 0 20px !important;
    .welcome-text{
     /* width: 322px; */
     /*  width: em(422px); */
@@ -97,10 +96,10 @@
      padding: 10px;
      margin: 0 auto;
      line-height: 1.2rem;
-     margin: 20px 39px 25px;
+     //margin: 20px 39px 25px;
      border-radius: 8px;
-     
    }
+
    .messages{
     font-size: 13px;
     font-family: Roboto;
@@ -116,10 +115,14 @@
     height: 100%;
     word-wrap: break-word;
     -webkit-overflow-scrolling: touch;
+
+    .container-width-100{
+      width: 100%;
+      overflow: auto;
+    }
     
 
     .incoming-true, .incoming-false{
-      width: 305px;
        padding: 15px 20px;
        border-radius: 10px;
     }
@@ -144,19 +147,21 @@
       .time{
         color: #797979;
         text-align: right;
+        margin-left: 10px;
         float: right;
       }
    }
  }
 
  ion-footer{
-  width: 100%;
-  border: 1px solid red;
-   .row{
-     width: 380px;
-    margin: 0 auto;
-   }
-
+   padding-top: 7.5px;
+   padding-bottom: 7.5px;
+  .container{
+    justify-content: center;
+    justify-content: space-evenly;
+    
+  }
+  
   .chat-icon-options{
     display:block !important;
     font-size: 25px;