add parameters

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

@@ -40,7 +40,7 @@
       <ion-list class="members-list" *ngFor="let user of members">
         <div class="members-checkbox">
           <ion-checkbox disabled checked color="primary"></ion-checkbox>
-          <p>{{user.name}}</p>
+          <p class="ma-0">{{user.name}}</p>
           <ion-icon  class="{{user.status}}" name="ellipse"></ion-icon>
           <button (click)="deleteMember(user)" class="btn-no-color detele-item-icon">
             <ion-icon color="danger" name="close"></ion-icon>
@@ -49,19 +49,19 @@
       </ion-list>
     </div>
 
-    <ion-virtual-scroll [items]="users " approxItemHeight="70px" [headerFn]="separateLetter">
 
-      <div class="item-divider" *virtualHeader="let header">
-        <ion-label>{{header}}</ion-label>
+    <div *ngFor="let userContainer of userContainer | keyvalue;" >
+
+      <div class="item-divider">
+        <ion-label>{{ userContainer.key }}</ion-label>
       </div>
 
-      <div *virtualItem="let user" class="item-checkbox">
-        <ion-checkbox (ionChange)="selectedContact(user)" color="primary"></ion-checkbox>
-        <ion-label>{{user.name}}</ion-label>
+      <div *ngFor="let user of userContainer.value" class="d-flex px-20 align-center">
+        <ion-checkbox [(ngModel)]="user.isChecked"  color="primary" (click)="selectedContact(user)"></ion-checkbox>
+        <ion-label class="flex-grow-1 px-10">{{user.name}}</ion-label>
         <div class="icon"><ion-icon class="{{user.status}}" name="ellipse"></ion-icon></div>
       </div>
-
-    </ion-virtual-scroll>
+    </div>
 
   </div>
 </ion-content>

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

@@ -36,6 +36,10 @@ export class GroupContactsPage implements OnInit {
   @Input() roomId:string;
   @Output() openGroupMessage:EventEmitter<any> = new EventEmitter<any>();
 
+
+  objectUserSingleStone = []
+  userContainer = {}
+
   constructor(
     private modalController: ModalController,
     private chatService: ChatService,
@@ -168,7 +172,7 @@ export class GroupContactsPage implements OnInit {
     });
   }
 
-  loadUsers(){
+  loadUsers() {
 
     this.chatService.getAllUsers().subscribe((res:any)=>{
 
@@ -192,24 +196,31 @@ export class GroupContactsPage implements OnInit {
       });
       
 
+      for( const user of  this.users) {
+
+        const foundUser = this.objectUserSingleStone.find( e => e.name == user.name)
+
+        if(!foundUser) {
+          this.objectUserSingleStone.push(user)
+        }
+        
+      }
+      
+      for(const user of this.objectUserSingleStone) {
+        const firstLetter = user.name.charAt(0)
+
+        if(!this.userContainer[firstLetter]) {
+          this.userContainer[firstLetter] = [user]
+        } else {
+          this.userContainer[firstLetter].push(user)
+        }
+        
+      }
+
       this.showLoader = false;
     });
   }
 
-  separateLetter(record, recordIndex, records){
-    if(recordIndex == 0){
-      return record.name[0];
-    }
-
-    let first_prev = records[recordIndex - 1].name[0];
-    let first_current = record.name[0];
-
-    if(first_prev != first_current){
-      return first_current;
-    }
-    return null;
-  }
-
   doRefresh(ev){
     ev.target.complete();
   }
@@ -267,6 +278,24 @@ export class GroupContactsPage implements OnInit {
 
     this.users = users
 
+
+    let a = this.objectUserSingleStone.filter( e => e.name.toLowerCase().includes(this.textSearch.toLowerCase()))
+    
+    let b = {}
+    for(const user of a) {
+      const firstLetter = user.name.charAt(0)
+
+      if(!b[firstLetter]) {
+        b[firstLetter] = [user]
+      } else {
+        b[firstLetter].push(user)
+      }
+      
+    }
+
+
+    this.userContainer = b
+
     // console.log('this.users', this.users)
   }
 
@@ -274,18 +303,22 @@ export class GroupContactsPage implements OnInit {
     
   }
 
-  selectedContact(user:any){
-  /*   this.groupName = this.room.name; */
-    user.isChecked = !user.isChecked;
-
-    const userIndex = this.users.findIndex((e) => e._id == user._id)
-    this.users[userIndex] = user 
+  selectedContact(user:any) {
+    /*   this.groupName = this.room.name; */
+    if(user.isChecked != true ) {
+      user.isChecked = false
+    } else {
+      user.isChecked = true
+    }
+     
+    const userIndex = this.objectUserSingleStone.findIndex((e) => e._id == user._id)
+    this.objectUserSingleStone[userIndex].isChecked = user.isChecked
 
   }
 
-  addContacts(roomId:any){
+  addContacts(roomId:any) {
     
-    this.selectedUserList = this.users.filter(function(contact) {
+    this.selectedUserList = this.objectUserSingleStone.filter(function(contact) {
       return contact.isChecked == true;
     });
     

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

@@ -39,7 +39,6 @@
 
       <div class="messages-list-item-wrapper container-width-100"
       *ngFor="let msg of  ChatSystemService.getDmRoom(roomId).messages; index as i; let last = last">
-      
       <div class='message-item incoming-{{msg.u.username!=sessionStore.user.UserName}} max-width-45' *ngIf="msg.msg !=''">
         <div class="message-item-options d-flex justify-content-end">
           <fa-icon [matMenuTriggerFor]="beforeMenu" icon="chevron-down" class="message-options-icon cursor-pointer">