Merge pull request #753 from IT-Academy-BCN/feature/#115-update-challenge-card-element

Feature/#115 update challenge card element

Author: ivilarop

CHANGELOG.md

@@ -4,6 +4,11 @@ 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.22.0-RELEASE] - 2026-02-11
+
+### Changed
+- Changed the challenge card layout and style to fit the new design
+
 ### [ita-challenges-frontend-3.21.0-RELEASE] - 2026-02-12
 
 ### Added

conf/.env.CI.dev

@@ -1,2 +1,2 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=3.21.0-RELEASE
+MICROSERVICE_VERSION=3.22.0-RELEASE

package.json

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

src/app/core/layout/main/main.component.scss

@@ -57,6 +57,10 @@
     width: 100%;
     height: calc(100% - 20px) !important;
     padding: 0px 40px 20px 40px;
+    background-color: $gray-4;
+    overflow-y: scroll;
+    display: flex;
+    flex-direction: column;
   }
 
   app-main-menu {

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

@@ -52,16 +52,23 @@ <h2>{{ "modules.starter.main.section2.title" | translate }}</h2>
 
   <main id="challenges-container" class="col-12 col-xl-8">
 
-    <div class="d-flex flex-column gap-3" id="challenges" #challenge>
+    <div id="challenges" #challenge>
       <ng-container *ngIf="(challenges?.length || 0) > 0; else noResultsTpl">
-        <app-challenge-card *ngFor="let challenge of challenges; let i = index"
-          [title]="challenge.challenge_title  | dynamicTranslate" [creation_date]="challenge.creation_date"
-          [level]="challenge.level" [popularity]="challenge.popularity" [languages]="challenge.languages"
-          [id]="challenge.id_challenge" [favorites_count]="challenge.timesFavorite || 0"
+        <app-challenge-card
+          *ngFor="let challenge of challenges; let i = index"
+          [title]="challenge.challenge_title | dynamicTranslate"
+          [description]="challenge.detail.description | dynamicTranslate"
+          [languages]="challenge.languages"
+          [creation_date]="challenge.creation_date"
+          [level]="challenge.level"
+          [popularity]="challenge.popularity"
+          [id]="challenge.id_challenge"
+          [favorites_count]="challenge.timesFavorite || 0"
           [challenge_timesSolved]="challenge.timesSolved || timesSolved"
           [isFavorite]="isFavoriteChallenge(challenge.id_challenge)"
           [isBookmarked]="isBookmarkedChallenge(challenge.id_challenge)"
-          [solutionStatus]="solutionStatusMap[challenge.id_challenge]">
+          [solutionStatus]="solutionStatusMap[challenge.id_challenge]"
+        >
         </app-challenge-card>
       </ng-container>
     </div>

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

@@ -5,9 +5,8 @@
 .starter {
   display: flex;
   flex-direction: column;
-  height: 100%;
   width: 100%;
-  margin-top: 1rem;
+  padding: 2rem;
 }
 
 h2 {
@@ -92,34 +91,22 @@ app-starter-filters p {
    }
 }
 
-/* On desktop, let the filters column shrink to content instead of fixed grid width */
-@media (min-width: 1200px) {
-  #filters-container.col-3 {
-    flex: 0 0 auto; /* don't force a 25% column width */
-    width: auto;    /* shrink-wrap to its contents */
-    max-width: 100%;
-    margin-right: 20px; /* add spacing between filters and challenges */
-  }
-  /* Let challenges area take the remaining space on xl and above */
-  #challenges-container.col-xl-8 {
-    flex: 1 1 auto; /* grow to fill leftover width */
-    width: auto;    /* unset fixed 8/12 width from grid */
-    max-width: 100%;
-   }
-}
-
 #challenges-container {
   height: 100%;
+  width: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  padding-top: 2rem;
 }
 
 #challenges {
-  flex: 1;
+  padding-top: 1rem;
   overflow-y: auto;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
+  gap: 1rem;
 }
 
 #challenges::-webkit-scrollbar {

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

@@ -362,4 +362,63 @@ describe('ChallengeService', () => {
       req.flush(null, mockError);
     });
   });
-})
+
+  describe('getChallengeTags', () => {
+    const mockChallengeId = '5caa6142-a49e-4415-a8fc-439669777d1d';
+    const mockTagResponse = {
+      offset: 0,
+      limit: 3,
+      count: 3,
+      results: [
+        { id_tag: 'tag-1', tag_name: 'Arrays', tag_description: 'Array challenges' },
+        { id_tag: 'tag-2', tag_name: 'Loops', tag_description: 'Loop challenges' },
+        { id_tag: 'tag-3', tag_name: 'Logic', tag_description: 'Logic challenges' }
+      ]
+    };
+
+    it('should fetch challenge tags successfully', (done) => {
+      service.getChallengeTags(mockChallengeId).subscribe(response => {
+        expect(response).toEqual(mockTagResponse);
+        expect(response.results.length).toBe(3);
+        done();
+      });
+
+      const req = httpMock.expectOne(
+        `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ITA_CHALLENGE_TAGS}/${mockChallengeId}`
+      );
+      expect(req.request.method).toBe('GET');
+      expect(req.request.headers.get('Content-Type')).toBe('application/json');
+      req.flush(mockTagResponse);
+    });
+
+    it('should handle empty results', (done) => {
+      const emptyResponse = { offset: 0, limit: 0, count: 0, results: [] };
+
+      service.getChallengeTags(mockChallengeId).subscribe(response => {
+        expect(response.results).toEqual([]);
+        expect(response.count).toBe(0);
+        done();
+      });
+
+      const req = httpMock.expectOne(
+        `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ITA_CHALLENGE_TAGS}/${mockChallengeId}`
+      );
+      req.flush(emptyResponse);
+    });
+
+    it('should handle HTTP errors', (done) => {
+      service.getChallengeTags(mockChallengeId).subscribe({
+        next: () => fail('should have failed with 404 error'),
+        error: (error) => {
+          expect(error.status).toBe(404);
+          done();
+        }
+      });
+
+      const req = httpMock.expectOne(
+        `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ITA_CHALLENGE_TAGS}/${mockChallengeId}`
+      );
+      req.flush(null, { status: 404, statusText: 'Not Found' });
+    });
+  });
+})

src/app/services/challenge.service.ts

@@ -9,6 +9,7 @@ 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 CreateChallenge } from '../models/create-challenge.interface'
 import { CookieService } from 'ngx-cookie-service'
 import { AuthService } from './auth.service'
@@ -202,32 +203,41 @@ export class ChallengeService {
 
 
   getRelatedChallenges(challengeId: string): Observable<Challenge[]> {
-  const headers = {
-    'Content-Type': 'application/json',
-    ...this.authService.getAuthHeaders()
-  };
-
-  const url = `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}/challenge/challenges/${challengeId}/related`;
-
-  return this.http.get<{results: Challenge[] }>(url, { headers }).pipe(
-    map(response => response.results),
-    catchError((error: HttpErrorResponse) => {
-      console.error('Error fetching related challenges:', error);
-      return throwError(() => error);
-    })
-  );
-}
+    const headers = {
+      'Content-Type': 'application/json',
+      ...this.authService.getAuthHeaders()
+    };
 
-editChallenge(challengeId: string, challenge: Partial<Challenge>): Observable<Challenge> {
-  const url = `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_EDIT_CHALLENGE_URL}/${challengeId}/update`;
+    const url = `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}/challenge/challenges/${challengeId}/related`;
 
-  const headers = {
-    'Content-Type': 'application/json',
-    ...this.authService.getAuthHeaders() 
-  };
+    return this.http.get<{results: Challenge[] }>(url, { headers }).pipe(
+      map(response => response.results),
+      catchError((error: HttpErrorResponse) => {
+        console.error('Error fetching related challenges:', error);
+        return throwError(() => error);
+      })
+    );
+  }
 
-  return this.http.put<Challenge>(url, challenge, { headers });
-}
+  editChallenge(challengeId: string, challenge: Partial<Challenge>): Observable<Challenge> {
+    const url = `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_EDIT_CHALLENGE_URL}/${challengeId}/update`;
 
+    const headers = {
+      'Content-Type': 'application/json',
+      ...this.authService.getAuthHeaders() 
+    };
+
+    return this.http.put<Challenge>(url, challenge, { headers });
+  }
+
+  getChallengeTags(challengeId: string): Observable<TagResponse> {
+    const url = `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ITA_CHALLENGE_TAGS}/${challengeId}`
+    
+     const headers = {
+      'Content-Type': 'application/json',
+    };
+
+    return this.http.get<TagResponse>(url, { headers })
+  }
 
 }

src/app/services/starter.service.ts

@@ -4,12 +4,16 @@ import { environment } from '../../environments/environment'
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { type FilterChallenge } from '../models/filter-challenge.model'
 import { type Challenge, type ChallengeResponse } from '../models/challenge.model'
+import { type Tag, type TagResponse } from '../models/tag-response.interface'
+
 @Injectable({
   providedIn: 'root'
 })
+
 export class StarterService {
   constructor (@Inject(HttpClient) private readonly http: HttpClient) {}
   cachedChallenges: ChallengeResponse | null = null
+  cachedTags: TagResponse | null = null
 
   private readonly refreshSubject = new Subject<void>()
   readonly refresh$ = this.refreshSubject.asObservable()
@@ -35,7 +39,7 @@ export class StarterService {
     }).pipe(
       tap((response) => {
         this.cachedChallenges = response
-      }))
+    }))
   }
 
   getAllChallengesOffset (pageOffset: number, pageLimit: number): Observable<ChallengeResponse> {