implemented

- get groups contacts
-get messages contacts
-order group conversation list to most recent
-send message in group.

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

@@ -112,14 +112,14 @@
               <div class="item-icon">
                 <ion-icon class="icon" slot="start" src="assets/images/icons-chat-group-chat-40.svg"></ion-icon>
               </div>
-              <div (click)="openGroupMessages()" class="item-content">
+              <div (click)="openGroupMessages(group)" class="item-content">
                 <div class="item-title-time">
                   <div class="item-title">
                     <ion-label>{{group.name}}</ion-label>
                   </div>
-                  <div class="item-date">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
+                  <div class="item-date" *ngIf="group.lastMessage">{{group.lastMessage._updatedAt | date: 'HH:mm'}}</div>
                 </div>
-                <div class="item-description">
+                <div class="item-description" *ngIf="group.lastMessage">
                   <ion-label>{{group.lastMessage.u.name}}: {{group.lastMessage.msg}}</ion-label>
                 </div>
               </div>

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

@@ -72,17 +72,7 @@ export class ChatPage implements OnInit {
       this.getGroups();
     }, 2000);
   }
-  getGroups(){
-    this.showLoader = true;
-    this.result = this.chatService.getAllPrivateGroups().subscribe((res:any)=>{
-      this.privateGroups = res.groups;
-      this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
-      this.publicGroups = res.channels;
-      this.allGroups = this.privateGroups.concat(this.publicGroups);
-      this.showLoader = false;
-    });
-    }); 
-  }
+  
   getDirectMessages(){
     this.showLoader = true;
     
@@ -93,7 +83,7 @@ export class ChatPage implements OnInit {
       this.userDirectMessages = res.ims.sort((a,b)=>{
         var dateA = new Date(a.lastMessage._updatedAt).getTime();
         var dateB = new Date(b.lastMessage._updatedAt).getTime();
-        return dateB - dateB;
+        return dateB - dateA;
       });
       console.log(this.userDirectMessages);
       
@@ -107,6 +97,24 @@ export class ChatPage implements OnInit {
       console.log(this.dmUsers); */
     });
   }
+  getGroups(){
+    this.showLoader = true;
+    this.result = this.chatService.getAllPrivateGroups().subscribe((res:any)=>{
+      this.privateGroups = res.groups;
+      this.result = this.chatService.getAllUserChannels().subscribe((res:any)=>{
+      this.publicGroups = res.channels;
+      let all = this.privateGroups.concat(this.publicGroups); 
+      this.allGroups = all.sort((a,b)=>{
+        var dateA = new Date(a.lastMessage._updatedAt).getTime();
+        var dateB = new Date(b.lastMessage._updatedAt).getTime();
+        return dateB - dateA;
+      });
+      console.log(this.allGroups);
+      
+      this.showLoader = false;
+    });
+    }); 
+  }
   /* getConnectedChannels(){
     this.showLoader = true;
     
@@ -183,13 +191,15 @@ export class ChatPage implements OnInit {
     await modal.present();
     modal.onDidDismiss();
   }
-  async openGroupMessages(user:any){
+  async openGroupMessages(room:any){
+    console.log(room);
+    
     const modal = await this.modalController.create({
       component: GroupMessagesPage,
       cssClass: 'group-messages',
       backdropDismiss: false,
       componentProps: {
-        user: user,
+        room: room,
       },
     });
     await modal.present();

src/app/pages/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">Grupo de Trabalho A</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>
@@ -15,8 +15,8 @@
           <ion-icon (click)="addContacts()" src="assets/icon/icons-user.svg"></ion-icon>
         </div>
         <div class="header-bottom-contacts">
-          <ion-label *ngFor="let contact of contacts" >
-            {{contact}}
+          <ion-label *ngFor="let member of members" >
+            {{member.name}},
           </ion-label>
         </div>
       </div>
@@ -31,7 +31,16 @@
     <ion-label>A conversa original mantêm-se como chat individual</ion-label>
   </div>
   <div class="messages">
-    <div class="incoming">
+    <div *ngFor="let msg of messages" class='incoming-{{msg.u.username!=loggedUser.me.username}}'>
+      <div class="title">
+        <ion-label>{{msg.u.username}}</ion-label>
+        <span class="time">{{msg._updatedAt | date: 'HH:mm' }}</span>
+      </div>
+      <div>
+        <ion-label>{{msg.msg}}</ion-label>
+      </div>
+    </div>
+    <!-- <div class="incoming">
       <div class="title">
         <ion-label>Secretário Assuntos sociais</ion-label>
         <span class="time">14:23</span>
@@ -85,7 +94,7 @@
       <div>
         <ion-label>Caros colegas, partilho o momento de confraternização do presidente Filipe Nyusi e de dua excelência, o presidente da república</ion-label>
       </div>
-    </div>
+    </div> -->
   </div>
 
 </ion-content>
@@ -106,7 +115,7 @@
       <ion-col size="2">
         <!-- [disabled]="message === ''" -->
         <ion-label>
-          <ion-icon class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
+          <ion-icon (click)="sendMessage()" class="chat-icon-send" src="assets/icon/icons-chat-send.svg"></ion-icon>
         </ion-label>
       </ion-col>
     </ion-row>

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

@@ -95,20 +95,19 @@
     font-family: Roboto;
     overflow: auto;
 
-    .incoming, .outgoing{
+    .incoming-true, .incoming-false{
       width: 305px;
        padding: 15px 20px;
        border-radius: 10px;
     }
 
-     .incoming{
+    .incoming-true{
       margin: 10px 75px 10px 20px;
        background: #ebebeb;
        float: left;
-       
        }
      }
-     .outgoing{
+     .incoming-false{
       margin: 10px 20px 10px 75px;
        background: #e4f4fe;
        float: right;

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

@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { ActionSheetController, MenuController, ModalController, PopoverController } from '@ionic/angular';
+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 { ContactsPage } from '../new-group/contacts/contacts.page';
@@ -11,8 +13,11 @@ import { NewGroupPage } from '../new-group/new-group.page';
   styleUrls: ['./group-messages.page.scss'],
 })
 export class GroupMessagesPage implements OnInit {
-
+  loggedUser: any;
   message:any;
+  messages:any;
+  room:any;
+  members:any;
   contacts: string[] = [" Ana M.", "Andre F.", "Bruno G.", "Catarina T", "Tiago"];
 
   constructor(
@@ -20,9 +25,67 @@ export class GroupMessagesPage implements OnInit {
     private modalController: ModalController,
     private actionSheetController: ActionSheetController,
     public popoverController: PopoverController,
-  ) { }
+    private chatService: ChatService,
+    private navParams: NavParams,
+    private authService: AuthService,
+  ) { 
+    this.room = this.navParams.get('room');
+  }
 
   ngOnInit() {
+    this.authService.userData$.subscribe((res:any)=>{
+      this.loggedUser=res;
+      console.log(this.loggedUser); 
+    });
+    this.getGroupContacts();
+    this.loadGroupMessages()
+  }
+  getGroupContacts(){
+    //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'];
+      });
+    }
+    //Otherwise call getChannelMembers for públic groups
+    else{
+      this.chatService.getChannelMembers(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.members = res['members'];
+      });
+    }
+  }
+  loadGroupMessages(){
+    
+    //If group is private call getGroupMembers
+    if(this.room.t === 'p'){
+      this.chatService.getPrivateGroupMessages(this.room._id).subscribe(res=>{
+        console.log(res);
+        this.messages = res['messages'].reverse();
+      });
+    }
+    //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 actionSheet() {

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

@@ -116,14 +116,12 @@
       width: 305px;
        padding: 15px 20px;
        border-radius: 10px;
-
     }
 
      .incoming-true{
       margin: 10px 75px 10px 20px;
        background: #ebebeb;
        float: left;
-       
        }
      }
      .incoming-false{