swipe-delete button

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

@@ -3,7 +3,9 @@
     <div class="main-header">
       <div class="title-content">
         <div class="back-icon">
-          <ion-icon (click)="close()" slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+          <button class="btn-no-color" (click)="close()">
+            <ion-icon slot="end" src='assets/images/icons-arrow-arrow-left.svg'></ion-icon>
+          </button>
         </div>
         <div class="div-title">
           <ion-label class="title">Contactos</ion-label>
@@ -33,11 +35,16 @@
     <div *ngIf="members">
       <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 class="{{user.status}}" name="ellipse"></ion-icon>
-        </div>
+        <ion-item-sliding>
+          <ion-item lines="none" class="members-checkbox ion-no-border ion-no-padding">
+            <ion-checkbox checked color="primary"></ion-checkbox>
+            <p>{{user.name}}</p>
+            <ion-icon class="{{user.status}}" name="ellipse"></ion-icon>
+          </ion-item>
+          <ion-item-options (click)="deleteMember(user)" class="members-options" side="end">
+            <ion-item-option color="danger">Apagar</ion-item-option>
+          </ion-item-options>
+      </ion-item-sliding>
       </ion-list>
     </div>
 

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

@@ -93,10 +93,15 @@
 
     .members-checkbox{
       display: flex;
-      margin: .5px 20px .5px 20px !important;
+      margin: 0px 20px 0px 20px !important;
       overflow: auto;
       align-items: center;
+      border-bottom: 1px solid #ebebeb;
+    }
 
+    .members-options{
+      margin: 0px 20px 0px 19px !important;
+      overflow: auto;
     }
     
     .item-divider{
@@ -114,11 +119,17 @@
        align-items: center;
  
      }
+
+     .members-checkbox ion-checkbox{
+      --border-color: #0d89d1;
+      --background-checked:#0d89d1;
+      float: left;
+  }
  
-     .item-checkbox ion-checkbox, .members-checkbox ion-checkbox{
+     .item-checkbox ion-checkbox{
          --border-color: #0d89d1;
          --background-checked:#0d89d1;
-         float: left;
+         float: left;  
      }
  
      .item-checkbox p, .members-checkbox p{

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

@@ -57,6 +57,28 @@ export class GroupContactsPage implements OnInit {
     console.log(this.isGroupCreated);
   }
 
+  deleteMember(data:any){
+    let body = {
+      "roomId": this.room._id,
+      "userId": data._id,
+    }
+    console.log(this.room);
+    
+    console.log(body);
+    if(this.room.t == "p"){
+      this.chatService.removeGroupMember(body).subscribe(res=>{
+        console.log(res);
+        this.loadUsers();
+      });
+    }
+    else if(this.room.t == "c"){
+      this.chatService.removeChannelMember(body).subscribe(res=>{
+        console.log(res);
+        this.loadUsers();
+      });
+    }
+  }
+
   loadUsers(){
     this.options = { 
       headers: this.headers,