save

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

@@ -4,7 +4,7 @@
       <div class="header-top">
         <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle">
-          <ion-label class="title">{{roomName}}</ion-label>
+          <ion-label class="title">{{room.name}}</ion-label>
         </div>
         <div class="right">
           <ion-icon  (click)="openOptions()" src="assets/images/icons-menu.svg"></ion-icon>
@@ -32,7 +32,7 @@
     </ion-refresher-content>
   </ion-refresher>
   <div class="welcome-text">
-    <ion-label>Esta conversa passou a grupo</ion-label><br />
+    <ion-label> {{message}} Esta conversa passou a grupo</ion-label><br />
     <ion-label>A conversa original mantêm-se como chat individual</ion-label>
   </div>
   <div *ngFor="let msg of messages" class="messages">
@@ -74,3 +74,4 @@
     </ion-row>
   </ion-toolbar>
 </ion-footer>
+

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

@@ -1,4 +1,4 @@
-@import '~src/function.scss';
+ @import '~src/function.scss';
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
@@ -16,7 +16,7 @@
         transform: translate3d(0, 1px, 0);
         
         .header-top{
-          width: 360px;
+          //width: 360px;
           margin: 0px auto;
           overflow: auto;
           padding: 0 !important;
@@ -79,7 +79,7 @@
  ion-content{
    .welcome-text{
     /* width: 322px; */
-     width: em(422px);
+     //width: em(422px);
      background: #ebebeb;
      text-align: center;
      font-size: 13px;
@@ -141,7 +141,7 @@
 
  ion-footer{
    .row{
-     width: 380px;
+     width: 100%;
     margin: 0 auto;
    }
 

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewChecked, Component, OnChanges, OnInit, Input, SimpleChanges, Output } 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';
@@ -13,7 +13,7 @@ import { GroupContactsPage } from './group-contacts/group-contacts.page';
   templateUrl: './group-messages.page.html',
   styleUrls: ['./group-messages.page.scss'],
 })
-export class GroupMessagesPage implements OnInit {
+export class GroupMessagesPage implements OnInit, OnChanges {
   showLoader: boolean;
   isGroupCreated:boolean;
   loggedUser: any;
@@ -24,7 +24,8 @@ export class GroupMessagesPage implements OnInit {
   room:any;
   roomName:any;
   members:any;
-  contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
+
+  @Input() roomId:string;
 
   constructor(
     private menu: MenuController,
@@ -32,12 +33,15 @@ export class GroupMessagesPage implements OnInit {
     private actionSheetController: ActionSheetController,
     public popoverController: PopoverController,
     private chatService: ChatService,
-    private navParams: NavParams,
+    /* private navParams: NavParams, */
     private authService: AuthService,
   ) {
     this.isGroupCreated = true;
-    this.room = this.navParams.get('room');
-    this.roomName = this.room.name.split('-').join(' ');
+    /* this.room = this.navParams.get('room'); */
+    /* this.roomName = this.room.name.split('-').join(' '); */
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    this.getRoomInfo();
   }
 
   ngOnInit() {
@@ -45,11 +49,8 @@ export class GroupMessagesPage implements OnInit {
       this.loggedUser=res;
       console.log(this.loggedUser); 
     });
-    this.load();
-  }
-  load(){
-    this.getGroupContacts();
-    this.loadGroupMessages();
+    this.getRoomInfo();
+    console.log(this.roomId);
   }
 
   close(){
@@ -57,15 +58,30 @@ export class GroupMessagesPage implements OnInit {
   }
 
   doRefresh(ev:any){
-    this.load();
+    this.getRoomInfo();
     ev.target.complete();
   }
+  get watch(){
+    this.getRoomInfo();
+    console.log('here watching');
+    
+    return this.roomId;
+  }
+  getRoomInfo(){
+    this.showLoader = true;
+    this.chatService.getRoomInfo(this.roomId).subscribe(room=>{
+      this.room = room['room'];
+      this.getGroupContacts(this.room);
+      this.loadGroupMessages(this.room);
+      this.showLoader = false;
+    });
+  }
 
-  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=>{
+    if(room.t === 'p'){
+      this.chatService.getGroupMembers(this.roomId).subscribe(res=>{
         console.log(res);
         this.members = res['members'];
         this.showLoader = false;
@@ -73,27 +89,33 @@ 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){
+    console.log('here'+room.t);
+    
     this.showLoader = true;
     //If group is private call getGroupMembers
-    if(this.room.t === 'p'){
-      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+    if(room.t === 'p'){
+      console.log('private');
+      
+      this.chatService.getPrivateGroupMessages(this.roomId).subscribe(res=>{
         console.log(res);
         let msgOnly = res['messages'].filter(data => data.t != 'au');
         this.messages = msgOnly.reverse();
+        console.log(res);
+        
         this.showLoader = false;
       });
     }
     //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,17 +126,18 @@ 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.loadGroupMessages(); */ 
+     this.getRoomInfo();
     });
     this.message = "";
   }
 
-  async openOptions(ev: any) {
+  /* async openOptions(ev: any) {
     const popover = await this.popoverController.create({
       component: ChatPopoverPage,
       cssClass: 'chat-popover',
@@ -132,7 +155,7 @@ export class GroupMessagesPage implements OnInit {
         console.log(this.roomName);
         
         this.load();
-        /* this.modalController.dismiss(); */
+        //this.modalController.dismiss(); 
       };
       
     });
@@ -170,7 +193,7 @@ export class GroupMessagesPage implements OnInit {
       this.load();
     });
   }
-
+ */
   /* async actionSheet() {
     const actionSheet = await this.actionSheetController.create({
       cssClass: 'my-custom-class',
@@ -198,3 +221,4 @@ export class GroupMessagesPage implements OnInit {
  */
 
 }
+

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

@@ -2,7 +2,6 @@
   <ion-toolbar class="header-toolbar">
     <div class="main-header">
       <div class="header-top">
-        <app-btn-modal-dismiss></app-btn-modal-dismiss>
         <div class="middle" *ngFor="let users of dmUsers">
           <ion-label class="title">{{users.name}}</ion-label>
           <span><ion-icon class="{{users.status}}" name="ellipse"></ion-icon></span>
@@ -57,6 +56,8 @@
   </div>
 
 </ion-content>
+
+
 <ion-footer>
   <ion-toolbar>
     <ion-row align-items-center class="row">
@@ -80,3 +81,4 @@
     </ion-row>
   </ion-toolbar>
 </ion-footer>
+

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

@@ -2,6 +2,7 @@
 .header-toolbar{
     --background:transparent;
     --opacity: 1;
+    border: 1px solid red;
 
     .main-header{
         width: 100%; /* 400px */
@@ -11,12 +12,12 @@
         border-top-right-radius: 25px;
         background-color: #fff;
         overflow:hidden;
-        padding: 30px 20px 0px 20px;
+        padding: 0px 20px 0px 20px;
         color:#000;
         transform: translate3d(0, 1px, 0);
         
         .header-top{
-          width: 360px;
+          //width: 360px;
           margin: 0px auto;
           overflow: auto;
           padding: 0 !important;
@@ -82,9 +83,13 @@
     }
  }
  ion-content{
+   width: 100%;
+   height: 100%;
+  border: 1px solid red;
    .welcome-text{
     /* width: 322px; */
-     width: em(422px);
+    /*  width: em(422px); */
+    width: 100%;
      background: #ebebeb;
      text-align: center;
      font-size: 13px;
@@ -94,6 +99,7 @@
      line-height: 1.2rem;
      margin: 20px 39px 25px;
      border-radius: 8px;
+     
    }
    .messages{
     font-size: 13px;
@@ -144,6 +150,8 @@
  }
 
  ion-footer{
+  width: 100%;
+  border: 1px solid red;
    .row{
      width: 380px;
     margin: 0 auto;
@@ -220,4 +228,5 @@ display: block;
  float: left;
  padding-left: 10px;
 }
+ 
  

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

@@ -1,18 +1,18 @@
-import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewChecked, Component, ElementRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
 import { ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { Status } from 'src/app/models/chat/status.model';
-import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
 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 { MessagesOptionsPage } from 'src/app/shared/popover/messages-options/messages-options.page';
+import { ContactsPage } from '../new-group/contacts/contacts.page';
 
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.page.html',
   styleUrls: ['./messages.page.scss'],
 })
-export class MessagesPage implements OnInit, AfterViewChecked {
+export class MessagesPage implements OnInit, AfterViewChecked, OnChanges {
   showLoader: boolean;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
@@ -25,15 +25,22 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   userPresence='';
   dmUsers:any;
 
+  @Input() roomId:string;
   
   constructor(
     public popoverController: PopoverController,
     private modalController: ModalController,
-    private navParams: NavParams,
+    /* private navParams: NavParams, */
     private chatService: ChatService,
     private authService: AuthService,
   ) { 
-    this.dm = this.navParams.get('dm');
+   /*  this.dm = this.navParams.get('dm'); */
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(this.roomId);
+    this.load();
+    
+    //throw new Error('Method not implemented.');
   }
 
   ngOnInit() {
@@ -48,12 +55,16 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     /* setInterval(()=>{ */
       this.load();
     /* }, 9000); */
+    console.log(this.roomId);
+    
     
   }
   load(){
     this.loadMessages();
     this.getChatMembers();
   }
+
+
   doRefresh(ev:any){
     this.load();
     ev.target.complete();
@@ -61,6 +72,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   
   ngAfterViewChecked() {        
     this.scrollToBottom();
+    console.log(this.roomId);
   } 
   scrollToBottom(): void {
     try {
@@ -76,7 +88,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     let body = {
       "message": 
       { 
-        "rid": this.dm._id, "msg": this.message 
+        "rid": this.roomId, "msg": this.message 
       }
     }
     
@@ -88,7 +100,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   
   loadMessages(){
     this.showLoader = true;
-    this.chatService.getRoomMessages(this.dm._id).subscribe(res => {
+    this.chatService.getRoomMessages(this.roomId).subscribe(res => {
       /* console.log(res); */
       this.messages = res['messages'].reverse();
       console.log(this.messages);
@@ -96,8 +108,10 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     })
   }
   getChatMembers(){
+    console.log(this.roomId);
+    
     this.showLoader = true;
-    this.chatService.getMembers(this.dm._id).subscribe(res=> {
+    this.chatService.getMembers(this.roomId).subscribe(res=> {
       this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
       console.log(res);
       console.log(this.dmUsers);
@@ -142,3 +156,4 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   }
 
 }
+