Display Challenge Tags

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

@@ -83,6 +83,12 @@
                                         (click)="starToggle(challenge['id'])"><i class="fa fa-star star"></i>
                                         {{challenge.data}}&nbsp;&nbsp;{{stars['count']}}</button>
                                 </div>
+                                <div class="col-lg-3 col-md-3 align-right">
+                                    <ul class="list-unstyled list-inline">
+                                        <li *ngFor="let tag of tags" class="list-inline-item chip green white-text">#{{tag}}
+                                        </li>
+                                    </ul>
+                                </div>
                             </div>
                             <div class="row rm-row-bot card-tab-row">
                                 <div class="col-sm-12">

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

@@ -61,6 +61,11 @@ export class ChallengeComponent implements OnInit {
    */
   stars: any;
 
+  /**
+   * Challenge Tags
+   */
+  tags: any;
+
   /**
    * Is logged in the Challenge
    */
@@ -125,6 +130,7 @@ export class ChallengeComponent implements OnInit {
       });
     });
     this.challengeService.currentStars.subscribe(stars => this.stars = stars);
+    this.challengeService.currentTags.subscribe(tags => this.tags = tags);
     this.challengeService.currentParticipationStatus.subscribe(status => {
       this.isParticipated = status;
     });

src/app/components/publiclists/challengelist/challengecard/challengecard.component.html

@@ -10,6 +10,10 @@
       <br> <strong>{{challenge['start_date'] | date:'medium'}} {{challenge['start_zone']}}</strong></p>
     <p><strong class="text-light-black fs-12">Ends on</strong>
       <br> <strong>{{challenge['end_date'] | date:'medium'}} {{challenge['end_zone']}}</strong></p>
+    <ul class="list-unstyled list-inline">
+      <li *ngFor="let tag of tags" class="list-inline-item chip green white-text">#{{tag}}
+      </li>
+    </ul>
     <div class="margin-top-btm" *ngIf="this.routerPublic.url === myChallengesRoute">
                             <span *ngIf="challenge['approved_by_admin']">
                                 <div class="chip green white-text">Approved</div>

src/app/components/publiclists/challengelist/challengecard/challengecard.component.spec.ts

@@ -33,6 +33,7 @@ describe('ChallengecardComponent', () => {
       terms_and_conditions: 'Officiis dicta debitis expedita corrupti.',
       submission_guidelines: 'Totam ipsa debitis ',
       evaluation_details: 'Dolorem consequatur odio quos',
+      tags: ['AI', 'ML'],
       image: 'https://evalai.s3.amazonaws.com/media/logos/vqa.png',
       start_date: '2017-12-03T03:38:12.655908Z',
       end_date: '2019-07-26T03:38:12.655934Z',

src/app/components/publiclists/challengelist/challengecard/challengecard.component.ts

@@ -58,7 +58,7 @@ export class ChallengecardComponent implements OnInit {
   /**
    * Tag list
    */
-  tags = ['Aritificial Intelligence', 'Machine Learning'];
+  tags: any;
 
   /**
    * Challenge stars
@@ -114,7 +114,7 @@ export class ChallengecardComponent implements OnInit {
     this.startDate = this.globalService.formatDate12Hour(START_DATE);
     this.endDate = this.globalService.formatDate12Hour(END_DATE);
     this.fetchStars();
-
+    this.fetchTags();
   }
 
   /**
@@ -145,6 +145,15 @@ export class ChallengecardComponent implements OnInit {
     });
   }
 
+  /**
+   * Fetch tags for the current challenge card.
+   */
+  fetchTags() {
+    this.challengeService.fetchTags(this.challenge['id'], (data) => {
+      this.tags = data;
+    });
+  }
+
   /**
    * Toggle stars for the current challenge card.
    */

src/app/services/challenge.service.ts

@@ -9,6 +9,7 @@ import { EndpointsService } from './endpoints.service';
 export class ChallengeService {
   private defaultChallenge: any = { 'creator': {}};
   private defaultStars: any = { 'count': 0, 'is_starred': false};
+  private defaultTags: any = [];
   private defaultPublishChallenge: any = {
     'state': 'Not Published',
     'icon': 'fa fa-eye-slash red-text'
@@ -18,6 +19,8 @@ export class ChallengeService {
   currentChallenge = this.challengeSource.asObservable();
   private starSource = new BehaviorSubject(this.defaultStars);
   currentStars = this.starSource.asObservable();
+  private tagsSource = new BehaviorSubject(this.defaultTags);
+  currentTags = this.tagsSource.asObservable();
   private teamsSource = new BehaviorSubject([]);
   currentParticipantTeams = this.teamsSource.asObservable();
   private phasesSource = new BehaviorSubject([]);
@@ -74,6 +77,14 @@ export class ChallengeService {
     this.starSource.next(stars);
   }
 
+  /**
+   *
+   * @param tags Update tags for current challenge.
+   */
+  changeCurrentTags(tags: any) {
+    this.tagsSource.next(tags);
+  }
+
   /**
    * Update current Participant teams.
    * @param teams  new teams.
@@ -127,6 +138,7 @@ export class ChallengeService {
       if (authState['isLoggedIn']) {
         SELF.isLoggedIn = true;
         SELF.fetchStars(id);
+        SELF.fetchTags(id);
         SELF.fetchParticipantTeams(id);
       } else if (!authState['isLoggedIn']) {
         SELF.isLoggedIn = false;
@@ -185,6 +197,31 @@ export class ChallengeService {
     );
   }
 
+  /**
+   * Fetch Challenge Tags
+   * @param id ID of the challenge to fetch tags for
+   * @param callback Retrive Status without update
+   */
+  fetchTags(id, callback = null) {
+    const API_PATH = this.endpointsService.challengeTagsURL(id);
+    const SELF = this;
+    this.apiService.getUrl(API_PATH).subscribe(
+      data => {
+        if (callback) {
+          callback(data);
+        } else {
+          SELF.changeCurrentTags(data);
+        }
+      },
+      err => {
+        SELF.globalService.handleApiError(err);
+      },
+      () => {
+        console.log('Challenge', id, 'tags fetched');
+      }
+    );
+  }
+
   /**
    * Update Stars for a particular challenge
    * @param id  ID of the challenge to be updated

src/app/services/endpoints.service.ts

@@ -150,6 +150,14 @@ export class EndpointsService {
     return `${this.challenges}${id}/`;
   }
 
+  /**
+   * Fetch challenge tags for a given challenge id
+   * @param id
+   */
+  challengeTagsURL(id) {
+    return `${this.challenges}${this.challenge}${id}/tags`;
+  }
+
   /**
    * Challenge participant teams for a given challenge id
    * @param id  challenge id