[WIP]Inviting participant to participate in the challenge by Host

src/app/components/challenge/challengesettings/challengesettings.component.html

@@ -31,6 +31,30 @@
           <span>Update</span>
         </div>
       </div>
+    </div> <br>
+    <div class="row settings-section">
+      <div class="col-lg-3 col-md-4 col-sm-3 col-xs-3">
+        <span class="fw-regular">Invite Participant using emails Id:</span>
+      </div>
+      <div class="col-lg-7 col-md-7 col-sm-9 col-xs-9">
+        <mat-form-field class="example-chip-list">
+          <mat-chip-list #invitechipList>
+            <mat-chip *ngFor="let email of invitedEmailIds" [selectable]="selectable"
+              [removable]="removable" (removed)="removefromInvite(email)">
+              {{email}}
+              <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
+            </mat-chip>
+            <input [matChipInputFor]="invitechipList"
+              [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+              [matChipInputAddOnBlur]="addOnBlur"
+              (matChipInputTokenEnd)="invite($event)">
+          </mat-chip-list>
+        </mat-form-field>
+        <div class="error-message" *ngIf="isValidationError">{{message}}</div>
+        <div class="btn btn-waves-effect waves-dark grad-btn grad-btn-dark fs-14" [class.disabled]="isValidationError" (click)="reflectInviteParticipantChange()">
+          <span>Invite</span>
+        </div>
+      </div>
     </div>
   </div>
 </div>

src/app/components/challenge/challengesettings/challengesettings.component.ts

@@ -1,10 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { ChallengeService } from '../../../services/challenge.service';
 import { EndpointsService } from '../../../services/endpoints.service';
 import { ApiService } from '../../../services/api.service';
 import { GlobalService } from '../../../services/global.service';
-import {COMMA, ENTER} from '@angular/cdk/keycodes';
-import {MatChipInputEvent} from '@angular/material/chips';
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import { MatChipInputEvent } from '@angular/material/chips';
 
 @Component({
   selector: 'app-challengesettings',
@@ -23,6 +23,16 @@ export class ChallengesettingsComponent implements OnInit {
    */
   bannedEmailIds: string[];
 
+  /**
+   * Participants invited emails ids
+   */
+  invitedEmailIds: string[];
+
+  /**
+ * Former participants invited emails ids
+ */
+  formerInvitedEmailIds: string[];
+
   /**
    * Former participants banned emails ids
    */
@@ -56,22 +66,32 @@ export class ChallengesettingsComponent implements OnInit {
    */
   isBannedEmailInputVisible: boolean;
 
+  /**
+  * Input to edit the invited participants emails
+  */
+  isInvitedEmailInputVisible: boolean;
+
   constructor(private challengeService: ChallengeService, private globalService: GlobalService,
-              private apiService: ApiService, private endpointsService: EndpointsService) { }
+    private apiService: ApiService, private endpointsService: EndpointsService) { }
 
   ngOnInit() {
     this.challengeService.currentChallenge.subscribe(
       challenge => {
         this.challenge = challenge;
         this.updateView();
-    });
+        this.updateInviteList();
+      });
   }
 
   updateView() {
     this.bannedEmailIds = this.challenge.banned_email_ids || [];
     this.formerBannedEmailIds = this.bannedEmailIds.concat(); // Creating deep copy
   }
 
+  updateInviteList() {
+    this.invitedEmailIds = this.challenge.emails || [];
+    this.formerInvitedEmailIds = this.invitedEmailIds.concat(); // Creating deep copy
+  }
   /**
    * Add banned email chip
    * @param event current event
@@ -120,7 +140,7 @@ export class ChallengesettingsComponent implements OnInit {
       return true;
     }
     const regex = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
-    return String(email).search (regex) !== -1;
+    return String(email).search(regex) !== -1;
   }
 
   reflectChange() {
@@ -142,17 +162,88 @@ export class ChallengesettingsComponent implements OnInit {
       SELF.endpointsService.editChallengeDetailsURL(SELF.challenge.creator.id, SELF.challenge.id),
       BODY
     ).subscribe(
-        data => {
-          SELF.challenge.banned_email_ids = data.banned_email_ids;
-          SELF.isBannedEmailInputVisible = false;
-          SELF.globalService.showToast('success', 'Banned participant emails are successfully updated!', 5);
-          this.formerBannedEmailIds = this.bannedEmailIds.concat(); // Creating deep copy
-        },
-        err => {
-          SELF.globalService.handleApiError(err, true);
-          SELF.globalService.showToast('error', err);
-        },
-        () => {}
-      );
+      data => {
+        SELF.challenge.banned_email_ids = data.banned_email_ids;
+        SELF.isBannedEmailInputVisible = false;
+        SELF.globalService.showToast('success', 'Banned participant emails are successfully updated!', 5);
+        this.formerBannedEmailIds = this.bannedEmailIds.concat(); // Creating deep copy
+      },
+      err => {
+        SELF.globalService.handleApiError(err, true);
+        SELF.globalService.showToast('error', err);
+      },
+      () => { }
+    );
+  }
+
+  /**
+   * Add invite email chip
+   * @param event current event
+   */
+  invite(event: MatChipInputEvent): void {
+    const SELF = this;
+    const input = event.input;
+    const value = event.value;
+    SELF.isValidationError = false;
+    SELF.message = '';
+
+    if ((value || '').trim()) {
+      if (!SELF.validateEmail(value.trim())) {
+        SELF.isValidationError = true;
+        SELF.message = 'Please enter a valid email!';
+      } else {
+        SELF.invitedEmailIds.push(value.trim());
+      }
+    }
+
+    // Reset the input value
+    if (input && !SELF.isValidationError) {
+      input.value = '';
+    }
+  }
+
+  removefromInvite(email): void {
+    const SELF = this;
+    const index = SELF.invitedEmailIds.indexOf(email);
+
+    if (index >= 0) {
+      SELF.invitedEmailIds.splice(index, 1);
+    }
+    SELF.updateInvitedEmailList();
+  }
+
+  reflectInviteParticipantChange() {
+    if (this.invitedEmailIds.toString() === this.formerInvitedEmailIds.toString()) {
+      this.globalService.showToast('error', 'No change to reflect!');
+    } else if (this.isValidationError) {
+      this.globalService.showToast('error', 'Please enter a valid email!');
+    } else {
+      this.globalService.startLoader('Inviting to the Challenge!');
+      this.updateInvitedEmailList();
+    }
+  }
+
+  updateInvitedEmailList() {
+    const SELF = this;
+    const BODY = JSON.stringify({
+      emails : SELF.invitedEmailIds
+    });
+    SELF.apiService.postUrl(
+      SELF.endpointsService.inviteParticipanttoChallenegURL(SELF.challenge.id),
+      BODY
+    ).subscribe(
+      data => {
+        SELF.challenge.emails = data.valid_emails;
+        SELF.isInvitedEmailInputVisible = false;
+        SELF.globalService.showToast('success', 'Invited participant emails are successfully updated!', 5);
+        this.formerInvitedEmailIds = this.invitedEmailIds.concat(); // Creating deep copy
+      },
+      err => {
+        SELF.globalService.stopLoader();
+        SELF.globalService.handleApiError(err, true);
+        SELF.globalService.showToast('error', err);
+      },
+      () => { }
+    );
   }
 }

src/app/services/endpoints.service.ts

@@ -300,6 +300,14 @@ ${phase}/submission?participant_team__team_name=${participantTeamName}`;
     return `${this.challenges}challenge_host_team/${hostTeam}/${this.challenge}${challenge}`;
   }
 
+  /**
+   * Invite participant to the challenge
+   * @param challenge challenge id
+   */
+  inviteParticipanttoChallenegURL(challenge) {
+    return `${this.challenges}${challenge}/send-invitation/`;
+  }
+
   /**
    * Delete challenge
    * @param challenge challenge id