Merge pull request #773 from IT-Academy-BCN/feature/185-show-tags-on-card

refactor(Vania):  Feature/185 show tags on card (185 ITChallanges project)

Author: ivilarop

CHANGELOG.md

@@ -3,6 +3,15 @@
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+### [ita-challenges-frontend-3.29.0-RELEASE] - 2026-02-23
+### Added
+- tagMap() signal to challenge service.
+
+### Changed
+- resolvedTags() method to challenge card component.
+- tagIds input to challenge card component now display correctly.
+
 ### [ita-challenges-frontend-3.28.0-RELEASE] - 2026-02-19
 ### Added
 - Bookmark button UI in challenge card component
@@ -27,7 +36,6 @@ and this project adheres to
 ### Fixed
 - Fixed environment.ts and environment.prod.ts route for solution submission and retrieval.
 
-
 ### [ita-challenges-frontend-3.27.0-RELEASE] - 2026-02-16
 
 ### Added

conf/.env.CI.dev

@@ -1,2 +1,3 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=3.28.0-RELEASE
+MICROSERVICE_VERSION=3.29.0-RELEASE
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ita-challenges-frontend",
-  "version": "3.28.0-RELEASE",
+  "version": "3.29.0-RELEASE",
    "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.dev.json",

src/app/models/challenge.model.ts

@@ -12,6 +12,7 @@ export class Challenge {
   saved_count: number
   timesFavorite: number
   detail: ChallengeDetails
+  tags: string[] = []
   languages: Language[] = []
   solutions: Solution[] = []
   timesSolved: number
@@ -29,6 +30,7 @@ export class Challenge {
     this.timesSolved = element.timesSolved || 0
     this.bookmarked = element.bookmarked || false
     this.detail = element.detail
+    this.tags = element.tags || []
 
     element.languages.forEach((language: Language) => {
       this.languages.push(language)

src/app/modules/starter/components/starter/starter.component.html

@@ -65,6 +65,7 @@ <h2>{{ "modules.starter.main.section2.title" | translate }}</h2>
           [isFavorite]="isFavoriteChallenge(challenge.id_challenge)"
           [isBookmarked]="isBookmarkedChallenge(challenge.id_challenge)"
           [solutionStatus]="solutionStatusMap[challenge.id_challenge]"
+          [tagIds]="challenge.tags"
         >
         </app-challenge-card>
       </ng-container>

src/app/modules/starter/components/starter/starter.component.spec.ts

@@ -53,10 +53,12 @@ describe('StarterComponent', () => {
   let getUserBookmarksSpy: jasmine.Spy;
   let getUserFavoritesSpy: jasmine.Spy;
   let fetchUserSolutionSpy: jasmine.Spy;
+  let fetchAndCacheAllTagsSpy: jasmine.Spy
 
   const mockChallenges$: Challenge[] = mockChallenges.map((challenge: any) => ({
     ...challenge,
     creation_date: new Date(`${challenge.creation_date}`),
+    tags: [],
     timesFavorite: typeof challenge.timesFavorite === 'number' ? challenge.timesFavorite : 0,
     solutions: challenge.solutions.map((solution: any) => ({
       id_solution: solution.idSolution,
@@ -75,10 +77,12 @@ describe('StarterComponent', () => {
     }
     getUserBookmarksSpy = jasmine.createSpy().and.returnValue(of(['id-1', 'id-2']))
     getUserFavoritesSpy = jasmine.createSpy().and.returnValue(of([]))
+    fetchAndCacheAllTagsSpy = jasmine.createSpy('fetchAndCacheAllTags').and.returnValue(of(undefined))
 
     const challengeServiceMock = {
       getUserBookmarks: getUserBookmarksSpy,
-      getUserFavorites: getUserFavoritesSpy
+      getUserFavorites: getUserFavoritesSpy,
+      fetchAndCacheAllTags: fetchAndCacheAllTagsSpy
     };
 
     fetchUserSolutionSpy = jasmine.createSpy().and.returnValue(of([]));
@@ -227,6 +231,10 @@ describe('StarterComponent', () => {
 
     expect(consoleErrorSpy).toHaveBeenCalledWith('Error fetching user solutions:', jasmine.any(Error));
   });
+
+  it('should call fetchAndCacheAllTags on init', () => {
+    expect(fetchAndCacheAllTagsSpy).toHaveBeenCalled()
+  })
 });
 
 describe('Progress filtering behavior', () => {
@@ -247,7 +255,8 @@ describe('Progress filtering behavior', () => {
 
     const challengeServiceMock = {
       getUserBookmarks: jasmine.createSpy().and.returnValue(of([])),
-      getUserFavorites: jasmine.createSpy().and.returnValue(of([]))
+      getUserFavorites: jasmine.createSpy().and.returnValue(of([])),
+      fetchAndCacheAllTags: jasmine.createSpy().and.returnValue(of(undefined))
     };
 
     fetchUserSolutionSpy = jasmine.createSpy().and.returnValue(of([]));
@@ -272,9 +281,9 @@ describe('Progress filtering behavior', () => {
   });
 
   it('should filter challenges by progress using solutionStatusMap', () => {
-    const ch1: any = { id_challenge: 'c1', creation_date: new Date(), timesFavorite: 0, solutions: [], languages: [], level: 'EASY' };
-    const ch2: any = { id_challenge: 'c2', creation_date: new Date(), timesFavorite: 0, solutions: [], languages: [], level: 'EASY' };
-    const ch3: any = { id_challenge: 'c3', creation_date: new Date(), timesFavorite: 0, solutions: [], languages: [], level: 'EASY' };
+    const ch1: any = { id_challenge: 'c1', creation_date: new Date(), timesFavorite: 0, solutions: [], languages: [], level: 'EASY', tags: [] }
+    const ch2: any = { id_challenge: 'c2', creation_date: new Date(), timesFavorite: 0, solutions: [], languages: [], level: 'EASY', tags: [] }
+    const ch3: any = { id_challenge: 'c3', creation_date: new Date(), timesFavorite: 0, solutions: [], languages: [], level: 'EASY', tags: [] }
 
     component.listChallenges = [ch1, ch2, ch3];
 

src/app/modules/starter/components/starter/starter.component.ts

@@ -62,6 +62,7 @@ export class StarterComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    this.challengeService.fetchAndCacheAllTags().subscribe()
     this.getChallenge()
 
     // Listen for refresh notifications (e.g., after create)

src/app/services/challenge.service.spec.ts

@@ -322,7 +322,8 @@ describe('ChallengeService', () => {
       languages: [],
       solutions: [],
       timesSolved: 1,
-      bookmarked: false
+      bookmarked: false,
+      tags: []
     };
 
     it('should update a challenge successfully', () => {
@@ -421,4 +422,58 @@ describe('ChallengeService', () => {
       req.flush(null, { status: 404, statusText: 'Not Found' });
     });
   });
+
+  describe('tagMap signal and fetchAndCacheAllTags', () => {
+    it('should have an empty initial tagMap', () => {
+      expect(service.tagMap()).toEqual({})
+    })
+
+    it('should fetch languages and then tags per language to populate tagMap', () => {
+      const mockLanguages = { results: [{ id_language: 'lang1' }, { id_language: 'lang2' }] }
+      const mockTags1 = { results: [{ id_tag: 't1', tag_name: 'Tag1', tag_description: 'D1' }] }
+      const mockTags2 = { results: [{ id_tag: 't2', tag_name: 'Tag2', tag_description: 'D2' }] }
+
+      service.fetchAndCacheAllTags().subscribe()
+
+      // First call: Get languages
+      const langReq = httpMock.expectOne(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ALL_LANGUAGE_URL}`)
+      expect(langReq.request.method).toBe('GET')
+      langReq.flush(mockLanguages)
+
+      // Subsequent calls: Get tags for each language
+      const tagsReq1 = httpMock.expectOne(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ITA_CHALLENGE_TAGS}/lang1`)
+      expect(tagsReq1.request.method).toBe('GET')
+      tagsReq1.flush(mockTags1)
+
+      const tagsReq2 = httpMock.expectOne(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ITA_CHALLENGE_TAGS}/lang2`)
+      expect(tagsReq2.request.method).toBe('GET')
+      tagsReq2.flush(mockTags2)
+
+      // Verify tagMap is updated
+      const finalMap = service.tagMap()
+      expect(finalMap['t1']).toEqual(mockTags1.results[0])
+      expect(finalMap['t2']).toEqual(mockTags2.results[0])
+    })
+
+    it('should handle empty languages list gracefully', () => {
+      service.fetchAndCacheAllTags().subscribe()
+
+      const langReq = httpMock.expectOne(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ALL_LANGUAGE_URL}`)
+      langReq.flush({ results: [] })
+
+      expect(service.tagMap()).toEqual({})
+    })
+
+    it('should handle error in language fetching', () => {
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {})
+      service.fetchAndCacheAllTags().subscribe()
+
+      const langReq = httpMock.expectOne(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ALL_LANGUAGE_URL}`)
+      langReq.error(new ProgressEvent('error'))
+
+      expect(service.tagMap()).toEqual({})
+      expect(consoleSpy).toHaveBeenCalled()
+      consoleSpy.mockRestore()
+    })
+  })
 })

src/app/services/challenge.service.ts

@@ -1,16 +1,17 @@
 /* eslint-disable padded-blocks */
 /* eslint-disable @typescript-eslint/semi */
-import { Inject, Injectable, inject } from '@angular/core'
-import { Observable, catchError, BehaviorSubject, of, throwError } from 'rxjs'
-import { delay, map } from 'rxjs/operators'
+import { Inject, Injectable, inject, signal } from '@angular/core'
+import { Observable, catchError, BehaviorSubject, of, throwError, forkJoin, switchMap } from 'rxjs'
+import { delay, map, tap } from 'rxjs/operators'
 import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http'
 import { type Itinerary } from '../models/itinerary.interface'
 import { environment } from 'src/environments/environment'
 import { type Challenge } from '../models/challenge.model'
 import { type Language } from '../models/language.model'
 import { type FavoriteResponse } from '../models/favorite-response.interface'
-import { type TagResponse } from '../models/tag-response.interface'
+import { type Tag, type TagResponse } from '../models/tag-response.interface'
 import { type CreateChallenge } from '../models/create-challenge.interface'
+import { ChallengeFormService } from './challenge-form.service'
 import { CookieService } from 'ngx-cookie-service'
 import { AuthService } from './auth.service'
 
@@ -22,6 +23,9 @@ export class ChallengeService {
   private readonly challengeStartedSubject = new BehaviorSubject<boolean>(this.getChallengeStartedFromStorage())
   private readonly cookieService = inject(CookieService)
   private readonly authService = inject(AuthService)
+  private readonly challengeFormService = inject(ChallengeFormService)
+
+  public readonly tagMap = signal<Record<string, Tag>>({})
 
   constructor (@Inject(HttpClient) private readonly http: HttpClient) {
     this.checkChallengeStartedFromStorage()
@@ -240,4 +244,40 @@ export class ChallengeService {
     return this.http.get<TagResponse>(url, { headers })
   }
 
-}
+
+  fetchAndCacheAllTags (): Observable<void> {
+    if (Object.keys(this.tagMap()).length > 0) return of(undefined)
+
+    return this.challengeFormService.getAllLangugesCreateForm ().pipe(
+      map(response => response.results),
+      catchError(error => {
+        console.error('Error fetching languages for tags cache:', error)
+        return of([])
+      }),
+      switchMap(languages => {
+        if (languages.length === 0) return of([])
+
+        const tagRequests = languages.map(lang =>
+          this.challengeFormService.getTagsByLanguage(lang.id_language).pipe(
+            map(res => res.results),
+            catchError( () => of([]))
+          )
+        )
+        return forkJoin(tagRequests)
+      }),
+      tap(allTagsResults => {
+        if (allTagsResults.length === 0) return
+
+        const dictionary: Record<string, Tag> = {}
+        allTagsResults.forEach(tags => {
+          tags.forEach(tag => {
+            dictionary[tag.id_tag] = tag
+          })
+        })
+        this.tagMap.set(dictionary)
+      }),
+      map(() => undefined)
+    )
+  }
+
+}

src/app/shared/components/challenge-card/challenge-card.component.html

@@ -39,7 +39,7 @@
   </button>
     <div class="title">{{ title }}</div>
     <div class="description">{{ descriptionPreview }}</div>
-  <app-tags [tags]="tags"></app-tags>
+  <app-tags [tags]="resolvedTags()"></app-tags>
     <!-- STATS WRAPPER -->
     <div class="stats-info-wrapper">
       <!-- DIFFICULTY LEVEL -->