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;