show already selected members of the group chat

- filter list of available members to group chat

src/app/pages/chat/group-messages/group-contacts/group-contacts.page.html

@@ -26,7 +26,19 @@
       </ion-refresher-content>
     </ion-refresher>
     
+      
+      
+
   <div class="main-content">
+    <ion-label class="members-label">Contactos selecção:</ion-label>
+    <ion-list class="members-list" *ngFor="let user of members">
+      <div class="members-checkbox">
+        <ion-checkbox checked color="primary"></ion-checkbox>
+         <p>{{user.name}}</p>
+        <ion-icon name="ellipse"></ion-icon>
+      </div>
+    </ion-list>
+
     <ion-virtual-scroll [items]="users | filter:textSearch: 'name'" approxItemHeight="70px" [headerFn]="separateLetter">
   
       <div class="item-divider" *virtualHeader="let header">

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

@@ -84,14 +84,28 @@
    background-color: #fff;
    overflow:auto;
    padding: 0 0 0 0;
- 
-     .item-divider{
-       background: #ebebeb;
-       font-size: 15px;
-       margin: 10px 0 10px 0;
-       padding:5px 0 5px 20px;
+
+    .members-label{
+      margin: 10px 20px 10px 20px !important;
+      /* font-size: 15px; */
+      font-weight: bold;
+    }
+
+    .members-checkbox{
+      display: flex;
+      margin: .5px 20px .5px 20px !important;
+      overflow: auto;
+      align-items: center;
+
+    }
+    
+    .item-divider{
+      background: #ebebeb;
+      font-size: 15px;
+      margin: 10px 0 10px 0;
+      padding:5px 0 5px 20px;
   
-     }
+    }
  
      .item-checkbox{
        display: flex;
@@ -101,13 +115,13 @@
  
      }
  
-     .item-checkbox ion-checkbox{
+     .item-checkbox ion-checkbox, .members-checkbox ion-checkbox{
          --border-color: #0d89d1;
          --background-checked:#0d89d1;
          float: left;
      }
  
-     .item-checkbox p{
+     .item-checkbox p, .members-checkbox p{
          display: block;
          margin: 0 !important;
          width: 330px;
@@ -116,7 +130,7 @@
          color: #0d89d1;
          float: left;
      }
-     .item-checkbox ion-icon{
+     .item-checkbox ion-icon, .members-checkbox ion-icon{
        font-size: 10px;
        float: left;
        color:#99e47b;

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

@@ -1,6 +1,7 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { ModalController, NavParams } from '@ionic/angular';
+import * as _ from 'lodash';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
 import { NewGroupPage } from '../../new-group/new-group.page';
@@ -24,6 +25,7 @@ export class GroupContactsPage implements OnInit {
   contacts: any;
   textSearch:string;
   room:any;
+  members:any;
   dm:any;
   isGroupCreated:boolean;
   groupName:string;
@@ -46,6 +48,7 @@ export class GroupContactsPage implements OnInit {
     this.isGroupCreated = this.navParams.get('isCreated');
     this.groupName = this.navParams.get('name');
     this.room = this.navParams.get('room');
+    this.members = this.navParams.get('members');
   }
 
   ngOnInit() {
@@ -59,21 +62,7 @@ export class GroupContactsPage implements OnInit {
       headers: this.headers,
     };
     this.chatService.getAllUsers().subscribe((res:any)=>{
-      console.log(res.users);
-      res.users.forEach(user =>{
-        let usr = {
-          "_id": user._id,
-          "username": user.username,
-          "name":user.name,
-          "isChecked": false,
-        }
-        if(this.listContacts == null){
-          this.listContacts = new Array();
-        }
-        this.listContacts.push(usr);
-      });
-
-      this.contacts = this.listContacts.filter(data => data.username != this.loggedUser.me.username);
+      this.contacts =  res.users.filter(f => !this.members.some(item => item._id === f._id));
       this.users = this.contacts.sort((a,b) => {
         if(a.name < b.name){
           return -1;

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

@@ -152,12 +152,16 @@ export class GroupMessagesPage implements OnInit {
     return await popover.present();
   }
   async addContacts(){
+    console.log(this.members);
+    
     this.close();
     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

src/app/pages/login/login.page.ts

@@ -22,9 +22,6 @@ export class LoginPage implements OnInit {
   password: string = environment.defaultuserpwd;
   userattempt: User;
 
-  public body = {"user": this.username,"password": this.password};
-  public postData = {"user": this.username,"password": this.password};
-
   constructor(
     private router: Router, 
     private authService: AuthService,
@@ -56,11 +53,18 @@ export class LoginPage implements OnInit {
   }
 
   loginRocketChat(){
-    this.authService.loginChat(this.postData).subscribe((res: any) =>{
+    
+    let postData = {
+      "user": this.username,
+      "password": this.password
+    }
+    this.authService.loginChat(postData).subscribe((res: any) =>{
       this.storageService.store(AuthConnstants.AUTH, res.data);
+      console.log('Logged user \n'+res.data);
       console.log('Login to Rocket chat OK');
    },(error:any) =>{
       console.log('Network error');
+      this.presentAlert('Network error '+error);
     });
   }
     
@@ -78,6 +82,8 @@ export class LoginPage implements OnInit {
           BasicAuthKey: ""
         }
         if (await this.authService.login(this.userattempt)){
+          console.log(this.userattempt);
+          
           this.loginRocketChat();
           this.router.navigate(['/home/events']);
         }