Add feature to delete member from participant & handle case for removing owner of team(#288)

* delete_member_draft

* delete_member_draft

* trash_icon_only_visible_to_team_leader

* delete_feature_working

* delete_feature_working

* build_fail_corrected

* delete_host_feature_added

* trash_button_and_member_look_updated

* removed_package_file_from_commit

* edited_travis.yml

* removed_extra_files

* made_suggested_changes

* removed_string_based_access_

* removed_deleteMemeberTitle_from_url

* tetsing_build

* testing_build_fix

* testing_build

* removed_changes

* changed_chrome_Driver_version

* changed_chrome_Driver_version

* upgraded_chrome_Driver_version

* upgraded_chrome_Driver_version_to_81

* runing_actual_chrome_browser

* removed_unnecessary_changes

* removed_unnecessary_check

* edited travis.yml

* Revert unnecessary changes

* revert change

Co-authored-by: Rishabh Jain <rishabhjain2018@gmail.com>

Author: Kajol-Kumari

src/app/components/publiclists/teamlist/teamcard/teamcard.component.html

@@ -29,13 +29,17 @@
     </div>
    </div>
     <div class='team-members'>
-    <div class="title">
-      <h6><b>Team Members:</b></h6>
+      <div class="title">
+        <h6><b>Team Members:</b></h6>
+      </div>
+      <div class="col s12 m6" *ngFor="let member of memberArray; let i=index;" class="member-class">
+        <span class="m1">{{member}}</span>
+        <span class="trash-icon"><a (click)="deleteTeamMember($event, memberIdArray[i])"
+            *ngIf="authState.username == teamView['created_by']">
+            <i class="fa fa-trash list-icon text-highlight w-300 left grey-text" aria-hidden="true"></i>
+          </a>
+        </span>
+      </div>
     </div>
-    <div>
-	    {{teamView['members']}}
-    </div>
-      
-    </div>
-</div>
+  </div>
 </div>

src/app/components/publiclists/teamlist/teamcard/teamcard.component.scss

@@ -124,3 +124,12 @@
   height: unset !important;
   border-bottom-style: none !important;
 }
+
+.member-class{
+  display: flex;
+  margin: 2% 0%;
+}
+.trash-icon {
+  margin-left: 80%;
+  position: absolute;
+}

src/app/components/publiclists/teamlist/teamcard/teamcard.component.spec.ts

@@ -7,6 +7,8 @@ import { ApiService } from '../../../../services/api.service';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientModule } from '@angular/common/http';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { AuthService } from '../../../../services/auth.service';
+import { EndpointsService } from '../../../../services/endpoints.service';
 
 describe('TeamcardComponent', () => {
   let component: TeamcardComponent;
@@ -15,7 +17,7 @@ describe('TeamcardComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ TeamcardComponent ],
-      providers: [ GlobalService, ApiService ],
+      providers: [ GlobalService, ApiService, AuthService, EndpointsService ],
       imports: [ RouterTestingModule, HttpClientModule ],
       schemas: [ NO_ERRORS_SCHEMA ]
     })
@@ -29,6 +31,7 @@ describe('TeamcardComponent', () => {
     component.selected = false;
     component.isOnChallengePage = false;
     component.deleteTeamCard = new EventEmitter<any>();
+    component.deleteMemberCard = new EventEmitter<any>();
     component.selectTeamCard = new EventEmitter<any>();
     fixture.detectChanges();
   });

src/app/components/publiclists/teamlist/teamcard/teamcard.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, OnChanges, Input, Output, EventEmitter, SimpleChange
 import { GlobalService } from '../../../../services/global.service';
 import { ApiService } from '../../../../services/api.service';
 import { Router, ActivatedRoute } from '@angular/router';
+import { AuthService } from '../../../../services/auth.service';
 
 /**
  * Component Class
@@ -13,6 +14,16 @@ import { Router, ActivatedRoute } from '@angular/router';
 })
 export class TeamcardComponent implements OnInit, OnChanges {
 
+  /**
+   * Authentication Service subscription
+   */
+  authServiceSubscription: any;
+
+  /**
+   * Current Authentication state
+   */
+  authState: any;
+
   /**
    * Team object
    */
@@ -33,6 +44,11 @@ export class TeamcardComponent implements OnInit, OnChanges {
    */
   @Output() deleteTeamCard = new EventEmitter<any>();
 
+  /**
+   * Delete member event
+   */
+  @Output() deleteMemberCard = new EventEmitter<any>();
+
   /**
    * Select team event
    */
@@ -58,6 +74,16 @@ export class TeamcardComponent implements OnInit, OnChanges {
    */
   teamView = {};
 
+  /**
+   * Team Member Array
+   */
+  memberArray = [];
+
+  /**
+   * Team Member ID Array
+   */
+  memberIdArray = [];
+
   /**
    * Is currently selected
    */
@@ -77,6 +103,7 @@ export class TeamcardComponent implements OnInit, OnChanges {
    */
   constructor(private globalService: GlobalService,
               private apiService: ApiService,
+              public authService: AuthService,
               private router: Router,
               private route: ActivatedRoute) { }
 
@@ -85,6 +112,9 @@ export class TeamcardComponent implements OnInit, OnChanges {
    */
   ngOnInit() {
     this.updateView();
+    this.authServiceSubscription = this.authService.change.subscribe((authState) => {
+      this.authState = authState;
+    });
   }
 
   /**
@@ -132,6 +162,14 @@ export class TeamcardComponent implements OnInit, OnChanges {
     this.deleteTeamCard.emit(this.team['id']);
   }
 
+    /**
+   * Fires delete member event.
+   */
+  deleteTeamMember(e, participantId) {
+    e.stopPropagation();
+    this.deleteMemberCard.emit({teamId: this.team['id'], participantId: participantId});
+  }
+
   /**
    * Fires slect team event.
    */
@@ -155,18 +193,19 @@ export class TeamcardComponent implements OnInit, OnChanges {
       this.isSelected = false;
     }
     const temp = this.team['members'];
-    let memberString = '';
+    this.memberArray = [];
+    this.memberIdArray = [];
     for (let i = 0; i < temp.length; i++) {
       if (temp[i]['member_name']) {
-        memberString = memberString + ', ' + temp[i]['member_name'];
+        this.memberArray.push(temp[i]['member_name']);
+        this.memberIdArray.push(temp[i]['id']);
       } else {
-        memberString = memberString + ', ' + temp[i]['user'];
+        this.memberArray.push(temp[i]['user']);
+        this.memberIdArray.push(temp[i]['id']);
       }
     }
-    if (memberString !== '') {
-      memberString = memberString.slice(2, memberString.length);
-    }
-    this.teamView['members'] = memberString;
+    this.teamView['members'] = this.memberArray;
+    this.teamView['member_ids'] = this.memberIdArray;
   }
 
 }

src/app/components/publiclists/teamlist/teamlist.component.html

@@ -8,7 +8,7 @@
           <ul class="collapsible" data-collapsible="accordion">
             <app-teamcard *ngFor="let team of filteredTeams"
                           [team]="team" [selected]="team['isSelected']" [isOnChallengePage]="isOnChallengePage"
-                          (deleteTeamCard)="deleteTeamWrapper()($event)" (editTeamCard)="editTeamWrapper()($event)" (addMembersTeamCard)="addMembersToTeamWrapper()($event)"
+                          (deleteTeamCard)="deleteTeamWrapper()($event)" (deleteMemberCard)="deleteTeamMemberWrapper()($event)" (editTeamCard)="editTeamWrapper()($event)" (addMembersTeamCard)="addMembersToTeamWrapper()($event)"
             (selectTeamCard)="selectTeamWrapper()($event)">
             </app-teamcard>
           </ul>

src/app/components/publiclists/teamlist/teamlist.component.ts

@@ -114,6 +114,11 @@ export class TeamlistComponent implements OnInit, OnDestroy {
    */
   deleteTeamsPath: any;
 
+  /**
+   * Delete member URL
+   */
+  deleteMembersPath: any;
+
   /**
    * Currently selected team
    */
@@ -227,6 +232,7 @@ export class TeamlistComponent implements OnInit, OnDestroy {
       this.fetchTeamsPath = 'hosts/challenge_host_team';
       this.createTeamsPath = 'hosts/create_challenge_host_team';
       this.deleteTeamsPath = 'hosts/remove_self_from_challenge_host';
+      this.deleteMembersPath = 'hosts/challenge_host_team/<team_id>/challenge_host/';
       this.fetchMyTeams(this.fetchTeamsPath);
       this.teamCreateTitle = 'Create a New Team';
       this.teamSelectTitle = 'Select a Challenge Host Team';
@@ -239,6 +245,7 @@ export class TeamlistComponent implements OnInit, OnDestroy {
       this.fetchTeamsPath = 'participants/participant_team';
       this.createTeamsPath = this.fetchTeamsPath;
       this.deleteTeamsPath = 'participants/remove_self_from_participant_team';
+      this.deleteMembersPath = 'participants/participant_team/<team_id>/participant/';
       this.fetchMyTeams(this.fetchTeamsPath);
       this.teamCreateTitle = 'Create a New Participant Team';
       this.teamSelectTitle = 'My Existing Participant Teams';
@@ -565,4 +572,39 @@ export class TeamlistComponent implements OnInit, OnDestroy {
     };
     this.globalService.showTermsAndConditionsModal(PARAMS);
   }
+
+  /**
+   * Display confirm dialog before deleting a team member.
+   */
+  deleteTeamMemberWrapper() {
+    const SELF = this;
+    const deleteTeamMember = (team) => {
+      const deleteUrl = SELF.deleteMembersPath.replace('<team_id>', team.teamId);
+      SELF.apiCall = (params) => {
+        SELF.apiService.deleteUrl(deleteUrl + team.participantId).subscribe(
+        data => {
+          // Success Message in data.message
+          SELF.globalService.showToast('success', 'Member was removed from the team!', 5);
+          SELF.fetchMyTeams(SELF.fetchTeamsPath);
+          SELF.selectedTeam = null;
+        },
+        err => {
+          SELF.globalService.handleApiError(err);
+        },
+        () => {}
+        );
+      };
+      const PARAMS = {
+        title: 'Would you like to remove this member ?',
+        content: 'Note: This action will remove this member from the team.',
+        confirm: 'Yes',
+        deny: 'Cancel',
+        confirmCallback: SELF.apiCall
+      };
+      SELF.globalService.showConfirm(PARAMS);
+      return false;
+    };
+    return deleteTeamMember;
+  }
+
 }