Merge branch 'master' into improve_coverage_ngx

Author: RishabhJain2018

src/app/components/dashboard/dashboard-content/dashboard-content.component.scss

@@ -3,16 +3,4 @@
   background: -webkit-linear-gradient(#f5ac28, #e07e7e);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  font-size: 26px;
 }
-
-.btn {
-  font-size: 1.2rem;
-  padding-top:.5%;
-  height: 45px;
-}
-
-.text-dark-black {
-  font-size: 3rem;
-}
-

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

@@ -1,33 +1,33 @@
 <div class="team-card-container" [class.selected]='isSelected' [class.noexpand] = 'isHost' [class.expand] = '!isHost'>
 <div class="team-card-container-child">
-  <div class="team-content" (click)='selectToggle()'>
-    <i class="fa fa-circle selectstate" *ngIf='!isSelected && (isHost || isOnChallengePage)'></i>
-    <i class="fa fa-check selectstate" aria-hidden="true" *ngIf='isSelected && (isHost || isOnChallengePage)'></i>
-    <i class="fa fa-users" aria-hidden="true"></i>
-    <div class="team-details">
-      <span class="title toptitle">
-	    Team:
-      </span>
-      <span *ngIf="teamView['team_url']">
-      	<a class="orange-text" target="_blank" href="{{teamView['team_url']}}">{{teamView['team_name']}}</a>
-      </span>
-      <span *ngIf="!teamView['team_url']">
-	    {{teamView['team_name']}}
-      </span>
-      <br>
-      <span class="title">
-	    Created by:
-      </span>
-      <span>
-	    {{teamView['created_by']}}
-      </span>
-    </div>
-    <div class='team-icons'>
-      <a (click)="addMembersToTeam($event)"><i class="fa fa-user-plus list-icon text-highlight w-300 left" aria-hidden="true"></i></a>
-      <a [class.host]="isHost" (click)="editTeam($event)"><i class="fa fa fa-pencil list-icon text-highlight w-300 left grey-text" aria-hidden="true"></i></a>
-      <a (click)="deleteTeam($event)"><i class="fa fa-trash list-icon text-highlight w-300 left grey-text" aria-hidden="true"></i></a>
+    <div class="team-content" (click)='selectTeamContentToggle()'>
+      <input type="radio" class="with-gap selectPhase" name="teamSelection" (click)='selectTeamToggle()' *ngIf="isHost || isOnChallengePage" id="{{teamView['team_name']}}">
+      <label id="teamToggleButton" for="{{teamView['team_name']}}"></label>
+      <i class="fa fa-users" aria-hidden="true" *ngIf='!isHost'></i>
+      <div class="team-details">
+        <span class="title toptitle">
+        Team:
+        </span>
+        <span *ngIf="teamView['team_url']">
+          <a class="orange-text" target="_blank" href="{{teamView['team_url']}}">{{teamView['team_name']}}</a>
+        </span>
+        <span *ngIf="!teamView['team_url']" class="team-detail">
+        {{teamView['team_name']}}
+        </span>
+        <br>
+        <span class="title">
+        Created by:
+        </span>
+        <span class="team-detail">
+        {{teamView['created_by']}}
+        </span>
+      </div>
+      <div class='team-icons'>
+        <a (click)="addMembersToTeam($event)"><i class="fa fa-user-plus list-icon text-highlight w-300 left" aria-hidden="true"></i></a>
+        <a (click)="editTeam($event)"><i class="fa fa fa-pencil list-icon text-highlight w-300 left grey-text" aria-hidden="true"></i></a>
+        <a (click)="deleteTeam($event)"><i class="fa fa-trash list-icon text-highlight w-300 left grey-text" aria-hidden="true"></i></a>
+      </div>
     </div>
-   </div>
     <div class='team-members'>
       <div class="title">
         <h6><b>Team Members:</b></h6>

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

@@ -2,24 +2,17 @@
 @import './mixins.scss';
 
 .team-card-container {
-  font-size: $fs-16;
-  color: $gray-darker;
-  font-weight: $fw-light;
-  overflow: auto;
+  font-size: $fs-14;
   position: relative;
-  text-align: center;
-  padding-bottom: 20px;
   .team-content {
     cursor: pointer;
     @include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
-    width: 90%;
+    width: 100%;
     display: inline-block;
     position: relative;
     background: white;
-    padding: 15px;
-    border-radius: 5px;
-    margin-top: 10px;
-    margin-bottom: 10px;
+    padding: 6px 5px;
+    margin-bottom: 36px;
     z-index: 5;
     overflow: auto;
     text-align: left;
@@ -30,23 +23,28 @@
         color:$gray-dark;
         margin-top:15px;
       }
-      font-size: $fs-24;
+      font-size: $fs-16;
       vertical-align:top;
-      margin-top:10px;
+      margin-top:15px;
     }
     .title {
       &.toptitle {
         margin-bottom: 10px;
       }
+      color: $dark-black;
       display:inline-block;
       font-weight: $fw-bolder;
     }
     .team-details {
       display: inline-block;
-      margin: 0px 10px 0px 10px;
-      max-width: 185px;
+      margin: 2px 10px 0px 10px;
+      max-width: 300px;
       overflow:hidden;
     }
+    .team-detail {
+      color: rgb(22, 21, 21);
+      font-weight: 400;
+    }
     .team-icons {
       display: inline-block;
       position: relative;
@@ -70,26 +68,30 @@
     text-align: left;
     margin: 0 auto;
     margin-top: -25px;
-    margin-bottom: 10px;
-    width: 90%;
+    width: 100%;
     position: relative;
     overflow: hidden;
     border-radius: 0px 0px 5px 5px;
     max-height: 0;
     transition: all 0.5s ease;
     .title {
+      color: black;
       margin-bottom: 10px;
       font-weight: $fw-bolder;
     }
     background:$gray-lighter;
   }
+  .team-members .team-detail {
+    color: rgb(22, 21, 21);
+    font-weight: 400;
+  }
   &.selected {
     &.expand, &.noexpand {
       .team-members {
         @include box-shadow(0px, 0px, 5px, 0px, $overlay-light);
         max-height: 300px;
         transition: all 0.5s ease;
-        padding: 20px 15px 15px 20px;
+        padding: 20px 15px 15px 40px;
       }
     }
     &.noexpand {
@@ -111,24 +113,42 @@
         text-align: center;
         display: block;
         float: unset;
+        font-size: 100px;
       }
     }
     .team-members {
-      width: 95%;
+      width: 100%;
     }
   }
 }
 
-
 .selected {
   height: unset !important;
   border-bottom-style: none !important;
 }
 
+.title.toptitle {
+  margin-bottom: 0px !important;
+}
+
+.fa-users {
+  padding: 0px 3px 0px 8px;
+}
+
+#TeamToggleButton {
+  margin-bottom: 13.4px;
+}
+
+.fa-user-plus, .fa-pencil, .fa-trash {
+  margin: 0px;
+  padding-left: 10px;
+}
+
 .member-class{
   display: flex;
   margin: 2% 0%;
 }
+
 .trash-icon {
   margin-left: 80%;
   position: absolute;

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

@@ -54,6 +54,11 @@ export class TeamcardComponent implements OnInit, OnChanges {
    */
   @Output() selectTeamCard = new EventEmitter<any>();
 
+  /**
+   * Deselect team event
+   */
+  @Output() deselectTeamCard = new EventEmitter<any>();
+
   /**
    * Edit team event
    */
@@ -125,16 +130,22 @@ export class TeamcardComponent implements OnInit, OnChanges {
     this.updateView();
   }
 
+  /**
+   * Select a team content toggle.
+   */
+  selectTeamContentToggle() {
+    this.isSelected = !this.isSelected;
+    this.team['isSelected'] = this.isSelected;
+    this.deselectTeamCard.emit(this.team);
+  }
+
   /**
    * Select a team toggle.
    */
-  selectToggle() {
-    if ((this.isHost && !this.isSelected) || !this.isHost) {
+  selectTeamToggle() {
+    if (this.isHost || this.isOnChallengePage) {
       this.isSelected = !this.isSelected;
-      this.team['isSelected'] = this.isSelected;
-      if (this.isSelected && (this.isHost || this.isOnChallengePage)) {
-        this.selectTeam();
-      }
+      this.selectTeam();
     }
   }
 

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

@@ -9,12 +9,12 @@
             <app-teamcard *ngFor="let team of filteredTeams"
                           [team]="team" [selected]="team['isSelected']" [isOnChallengePage]="isOnChallengePage"
                           (deleteTeamCard)="deleteTeamWrapper()($event)" (deleteMemberCard)="deleteTeamMemberWrapper()($event)" (editTeamCard)="editTeamWrapper()($event)" (addMembersTeamCard)="addMembersToTeamWrapper()($event)"
-            (selectTeamCard)="selectTeamWrapper()($event)">
+            (selectTeamCard)="selectTeamWrapper()($event)" (deselectTeamCard)="deselectTeamWrapper()($event)">
             </app-teamcard>
           </ul>
           <section class="pagination" *ngIf="allTeams.length !== 0">
             <div class="row rm-gut">
-              <div class="col s12 m6 ">
+              <div class="col s12 m6 pagination">
                 <a [class.disabled]="seeMore <= 1" class="btn-floating btn-pagination waves-effect waves-light " (click)="seeLessClicked()">
                   <i class="fa fa-chevron-left"></i>
                 </a>
@@ -33,7 +33,7 @@
       </div>
     </div>
     <div class="col s12 m6">
-      <div class=" ev-card-panel ev-z-depth-5">
+      <div class=" list-card ev-card-panel ev-z-depth-5">
         <div class="ev-md-container ev-panel-title"><strong>{{teamCreateTitle}}</strong></div>
         <div class="ev-md-container ev-card-body new-team-card">
           <form name="createTeamForm" #createTeamForm="ngForm" (ngSubmit)="createTeamSubmit(createTeamForm.valid)">

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

@@ -10,7 +10,7 @@
       }
     }
     li {
-      margin: 20px 0px;
+      margin: 10px 0px;
       min-height: 40px;
       .collapsible-header {
         border-bottom: 0;
@@ -47,7 +47,7 @@
 }
 
 .pagination {
-  margin-top: 20px;
+  margin: 0px;
 }
 
 .pagination-title {
@@ -156,6 +156,22 @@ span.link-team-user {
   color: #9d9d9d;
 }
 
+.ev-panel-title {
+  margin: 10px 0px;
+}
+
+section {
+  margin: 0px 15px;
+}
+
+.input-field label {
+  font-size: 12px;
+}
+
+.fa-chevron-left, .fa-chevron-right {
+  font-size: 12px;
+}
+
 @media only screen and (max-width: 992px) and (min-width: 601px) {
   .team-heading {
     margin-top: 30px;

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

@@ -124,6 +124,11 @@ export class TeamlistComponent implements OnInit, OnDestroy {
    */
   selectedTeam: any = null;
 
+  /**
+   * Currently clicked team
+   */
+  currentlyClickedTeam: any = null;
+
   /**
    * challenge object
    */
@@ -304,6 +309,17 @@ export class TeamlistComponent implements OnInit, OnDestroy {
     const SELF = this;
     const selectTeam = (team) => {
       SELF.selectedTeam = team;
+    };
+    return selectTeam;
+  }
+
+  /**
+   * Unselect a team.
+   */
+  deselectTeamWrapper() {
+    const SELF = this;
+    const selectTeam = (team) => {
+      SELF.currentlyClickedTeam = team;
       SELF.unselectOtherTeams(SELF);
     };
     return selectTeam;
@@ -316,7 +332,7 @@ export class TeamlistComponent implements OnInit, OnDestroy {
     const temp = self.allTeams.slice();
     for (let i = 0; i < temp.length; i++) {
       temp[i]['isSelected'] = false;
-      if (self.selectedTeam['id'] === temp[i]['id']) {
+      if (self.currentlyClickedTeam['id'] === temp[i]['id']) {
         temp[i]['isSelected'] = true;
       }
     }
@@ -399,10 +415,12 @@ export class TeamlistComponent implements OnInit, OnDestroy {
    */
   editTeamWrapper() {
     const SELF = this;
+    let TeamUrl;
     const editTeam = (team) => {
+    TeamUrl = (this.isHost) ? SELF.endpointsService.hostTeamURL(team) : SELF.endpointsService.participantTeamURL(team);
       SELF.apiCall = (params) => {
         const BODY = JSON.stringify(params);
-        SELF.apiService.patchUrl(SELF.endpointsService.participantTeamURL(team), BODY).subscribe(
+        SELF.apiService.patchUrl(TeamUrl, BODY).subscribe(
         data => {
           // Success Message in data.message
           SELF.globalService.showToast('success', 'Team Updated', 5);

src/app/services/endpoints.service.ts

@@ -91,11 +91,17 @@ export class EndpointsService {
   }
 
   /**
-   * Edit Team Name
+   * Edit Participant Team Name
    */
   participantTeamURL(teamId) {
     return `${this.participants}participant_team/${teamId}`;
   }
+/**
+   * Edit Host Team Name
+   */
+  hostTeamURL(teamId) {
+    return `${this.hosts}challenge_host_team/${teamId}`;
+  }
 
   /**
    * Our Team members