PR 1/2 - feat(challenge-filters): add logic to manage language tags selected filters

CHANGELOG.md

@@ -4,7 +4,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.28.0-RELEASE] - 2026-02-16
+
+### Added
+- Enable dynamic tag filtering in the `challengeFiltersTriggerComponent`
+- Selectable checkboxes grouped by language name
+- Selected tag IDs are emitted to the parent component for challenge filtering
+
 ### [ita-challenges-frontend-3.27.0-RELEASE] - 2026-02-16
+
 ### Added
 - Feedback to user when saving solution.
 

conf/.env.CI.dev

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

package.json

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

src/app/modules/starter/components/challenge-filters-trigger/challenge-filters-trigger.component.html

@@ -86,14 +86,19 @@
         <legend class="h6 m-0 fw-bold">{{ 'modules.starter.challengeFiltersTrigger.tagsTitle' | translate }}</legend>
         <div class="d-flex gap-2"></div>
 
-        <div class="input-group">
-          <span class="input-group-text bg-white" aria-hidden="true">
-            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="11" cy="11" r="7" />
-              <path d="M20 20l-3.5-3.5" />
-            </svg>
-          </span>
-          <input type="text" class="form-control" [placeholder]="('modules.starter.challengeFiltersTrigger.searchTagsPlaceholder' | translate)" />
+        <div *ngFor="let group of displayTags">
+          <strong>{{ group.language }}</strong>
+          <div class="d-flex flex-wrap gap-2 mt-1 mb-2">
+            <label *ngFor="let tag of group.tags" class="form-check">
+              <input
+                type="checkbox"
+                class="form-check-input"
+                [checked]="isTagSelected(tag.id)"
+                (change)="toggleTag(tag.id)"
+              />
+              {{ tag.name }}
+            </label>
+          </div>
         </div>
       </fieldset>
 

src/app/modules/starter/components/challenge-filters-trigger/challenge-filters-trigger.component.spec.ts

@@ -4,6 +4,7 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core'
 import { of } from 'rxjs'
 import { ChallengeFiltersTriggerComponent } from './challenge-filters-trigger.component'
 import { SolutionStatus } from 'src/app/models/user-solution-status.enum'
+import { ChallengeFormService } from 'src/app/services/challenge-form.service'
 
 class TranslateLoaderStub implements TranslateLoader {
   getTranslation() {
@@ -36,6 +37,12 @@ describe('ChallengeFiltersTriggerComponent', () => {
         {
           provide: NgbModal,
           useValue: modalStub
+        },
+        {
+          provide: ChallengeFormService,
+          useValue: {
+            getTagsByLanguage: jest.fn().mockReturnValue(of({ offset: 0, limit: 0, count: 0, results: [] }))
+          }
         }
       ]
     }).compileComponents()
@@ -137,6 +144,112 @@ describe('ChallengeFiltersTriggerComponent', () => {
     )
   })
 
+  it('should toggle tags in draft state', () => {
+    const fixture = TestBed.createComponent(ChallengeFiltersTriggerComponent)
+    const component = fixture.componentInstance
+
+    component.initialFilters = { languages: [], levels: [], progress: [], tags: [] }
+    component.open()
+
+    expect(component.isTagSelected('tag-id-1')).toBe(false)
+
+    component.toggleTag('tag-id-1')
+    expect(component.isTagSelected('tag-id-1')).toBe(true)
+
+    component.toggleTag('tag-id-2')
+    expect(component.isTagSelected('tag-id-2')).toBe(true)
+
+    component.toggleTag('tag-id-1')
+    expect(component.isTagSelected('tag-id-1')).toBe(false)
+    expect(component.isTagSelected('tag-id-2')).toBe(true)
+  })
+
+  it('should include selected tags in emitted filters on apply', () => {
+    const fixture = TestBed.createComponent(ChallengeFiltersTriggerComponent)
+    const component = fixture.componentInstance
+
+    component.initialFilters = { languages: [], levels: [], progress: [], tags: [] }
+    component.open()
+
+    component.toggleTag('tag-id-1')
+    component.toggleTag('tag-id-2')
+
+    let emittedValue: unknown
+    component.filtersApplied.subscribe((value) => {
+      emittedValue = value
+    })
+
+    component.onApply()
+
+    expect(emittedValue).toEqual({
+      levels: [],
+      tags: ['tag-id-1', 'tag-id-2'],
+      progress: []
+    })
+  })
+
+  it('should pre-select tags from initialFilters when modal opens', () => {
+    const fixture = TestBed.createComponent(ChallengeFiltersTriggerComponent)
+    const component = fixture.componentInstance
+
+    component.initialFilters = { languages: [], levels: [], progress: [], tags: ['tag-id-1', 'tag-id-3'] }
+    component.open()
+
+    expect(component.isTagSelected('tag-id-1')).toBe(true)
+    expect(component.isTagSelected('tag-id-3')).toBe(true)
+    expect(component.isTagSelected('tag-id-2')).toBe(false)
+  })
+
+  it('should fetch tags and populate displayTags with language names', () => {
+    const mockService = TestBed.inject(ChallengeFormService) as jest.Mocked<ChallengeFormService>
+    mockService.getTagsByLanguage = jest.fn().mockImplementation((langId: string) => {
+      if (langId === 'lang-1') {
+        return of({ offset: 0, limit: 0, count: 2, results: [
+          { id_tag: 'tag-1', tag_name: 'Arrays', tag_description: '' },
+          { id_tag: 'tag-2', tag_name: 'Loops', tag_description: '' }
+        ]})
+      }
+      return of({ offset: 0, limit: 0, count: 1, results: [
+        { id_tag: 'tag-3', tag_name: 'Decorators', tag_description: '' }
+      ]})
+    })
+
+    const fixture = TestBed.createComponent(ChallengeFiltersTriggerComponent)
+    const component = fixture.componentInstance
+
+    component.initialFilters = { languages: ['lang-1', 'lang-2'], levels: [], progress: [], tags: [] }
+    component.languageMap = { 'lang-1': 'Javascript', 'lang-2': 'Python' }
+
+    component.open()
+
+    expect(component.displayTags.length).toBe(2)
+    expect(component.displayTags[0]).toEqual({
+      language: 'Javascript',
+      tags: [{ id: 'tag-1', name: 'Arrays' }, { id: 'tag-2', name: 'Loops' }]
+    })
+    expect(component.displayTags[1]).toEqual({
+      language: 'Python',
+      tags: [{ id: 'tag-3', name: 'Decorators' }]
+    })
+  })
+
+  it('should fall back to language ID when languageMap has no entry', () => {
+    const mockService = TestBed.inject(ChallengeFormService) as jest.Mocked<ChallengeFormService>
+    mockService.getTagsByLanguage = jest.fn().mockReturnValue(
+      of({ offset: 0, limit: 0, count: 0, results: [] })
+    )
+
+    const fixture = TestBed.createComponent(ChallengeFiltersTriggerComponent)
+    const component = fixture.componentInstance
+
+    component.initialFilters = { languages: ['unknown-lang-id'], levels: [], progress: [], tags: [] }
+    component.languageMap = {}
+
+    component.open()
+
+    expect(component.displayTags[0].language).toBe('unknown-lang-id')
+  })
+
   it('should position the dialog next to the trigger button after open', fakeAsync(() => {
     const fixture = TestBed.createComponent(ChallengeFiltersTriggerComponent)
     const component = fixture.componentInstance

src/app/modules/starter/components/challenge-filters-trigger/challenge-filters-trigger.component.ts

@@ -4,9 +4,12 @@ import { NgbModal, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
 import { TranslateModule } from '@ngx-translate/core'
 import { type FilterChallenge } from 'src/app/models/filter-challenge.model'
 import { SolutionStatus } from 'src/app/models/user-solution-status.enum'
+import { ChallengeFormService } from 'src/app/services/challenge-form.service'
 
 type ModalFilters = Pick<FilterChallenge, 'levels' | 'tags' | 'progress'>
 type Level = NonNullable<FilterChallenge['levels']>[number]
+type TagItem = { id: string; name: string }
+type LanguageTags = { language: string; tags: TagItem[] }
 
 @Component({
   selector: 'app-challenge-filters-trigger',
@@ -17,10 +20,13 @@ type Level = NonNullable<FilterChallenge['levels']>[number]
 })
 
 export class ChallengeFiltersTriggerComponent {
-
+  private readonly challengeFormService = inject(ChallengeFormService)
   protected readonly SolutionStatus = SolutionStatus
 
+  displayTags: LanguageTags[] = []
+
   @Input() initialFilters: FilterChallenge = { languages: [], levels: [], progress: [], tags: [] }
+  @Input() languageMap: Record<string, string> = {}
   @Output() filtersApplied = new EventEmitter<ModalFilters>()
   @ViewChild('modal') private readonly modalTemplate!: TemplateRef<unknown>
   @ViewChild('triggerBtn') private readonly triggerBtn!: ElementRef<HTMLButtonElement>
@@ -58,6 +64,28 @@ export class ChallengeFiltersTriggerComponent {
       progress: this.toggleInArray(this.draftFilters.progress, status)
     }
   }
+
+  isTagSelected(tag: string): boolean {
+    return (this.draftFilters.tags ?? []).includes(tag)
+  }
+
+  toggleTag(tag: string): void {
+    this.draftFilters = {
+      ...this.draftFilters,
+      tags: this.toggleInArray(this.draftFilters.tags ?? [], tag)
+    }
+  }
+
+  fetchTags(): void {
+    this.displayTags = []
+    for (const language of this.initialFilters.languages) {
+      this.challengeFormService.getTagsByLanguage(language).subscribe((tags) => {
+        const tagItems = tags.results.map((tag) => ({ id: tag.id_tag, name: tag.tag_name }))
+        const languageName = this.languageMap[language] ?? language
+        this.displayTags.push({ language: languageName, tags: tagItems })
+      })
+    }
+  }
 
   open(): void {
     this.draftFilters = {
@@ -66,6 +94,8 @@ export class ChallengeFiltersTriggerComponent {
       progress: [...this.initialFilters.progress]
     }
 
+    this.fetchTags()
+
     this.modalService.open(this.modalTemplate, {
       windowClass: 'challenge-filters-trigger-modal',
       backdrop: 'static',

src/app/modules/starter/components/challenge-list-filters/challenge-list-filters.component.html

@@ -1,5 +1,5 @@
 <div id="challenge-list-filters">
-    <div><app-language-filter></app-language-filter></div>
+    <div><app-language-filter (languageMapChanged)="languageMap = $event"></app-language-filter></div>
     <div class="space-divider"></div>
     <app-sort-select
       [sortBy]="sortBy"
@@ -10,6 +10,7 @@
     <div>
         <app-challenge-filters-trigger
             [initialFilters]="initialFilters"
+            [languageMap]="languageMap"
             (filtersApplied)="onModalFiltersApplied($event)">
         </app-challenge-filters-trigger>
     </div>

src/app/modules/starter/components/challenge-list-filters/challenge-list-filters.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NO_ERRORS_SCHEMA } from '@angular/core'
 
 import { ChallengeListFiltersComponent } from './challenge-list-filters.component'
 
@@ -8,7 +9,8 @@ describe('ChallengeListFiltersComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ChallengeListFiltersComponent]
+      declarations: [ChallengeListFiltersComponent],
+      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents()
 
     fixture = TestBed.createComponent(ChallengeListFiltersComponent)

src/app/modules/starter/components/challenge-list-filters/challenge-list-filters.component.ts

@@ -15,6 +15,7 @@ export class ChallengeListFiltersComponent {
   @Output() orderSelected = new EventEmitter<boolean>()
   sortBy: string = 'popularity'
   isAscending: boolean = false
+  languageMap: Record<string, string> = {}
 
   protected onModalFiltersApplied (filters: ModalFilters): void {
     this.filtersApplied.emit(filters)

src/app/modules/starter/components/language-filter/language-filter.component.spec.ts

@@ -14,7 +14,7 @@ const mockLanguages: Language[] = mockLanguagesImported
 
   const apiLanguages: Language[] = [
     { id_language: '5', language_name: 'TypeScript' },
-    { id_language: '6', language_name: 'Go' },
+    { id_language: '6', language_name: 'C++' },
   ];
 
   beforeEach(async () => {
@@ -68,6 +68,46 @@ const mockLanguages: Language[] = mockLanguagesImported
       done();
     }, 100); });
 
+  // Language Map Emission
+  it('should emit full language map on initialization with mock languages', () => {
+    const emittedMaps: Record<string, string>[] = [];
+    component.languageMapChanged.subscribe((map: Record<string, string>) => {
+      emittedMaps.push(map);
+    });
+
+    // The constructor already emitted the map for mock languages.
+    // Calling createFormFromLanguages again to capture it via subscription.
+    (component as any).languageNameToIdMap = {};
+    component.languageForm = component.createFormFromLanguages(mockLanguages);
+
+    expect(emittedMaps.length).toBeGreaterThan(0);
+    const emittedMap = emittedMaps[emittedMaps.length - 1];
+    expect(emittedMap['1']).toBe('Javascript');
+    expect(emittedMap['2']).toBe('Python');
+    expect(emittedMap['3']).toBe('Java');
+    expect(emittedMap['4']).toBe('Php');
+  });
+
+  it('should emit full language map with API languages after load', (done) => {
+    mockChallengeService.getAllLangugesCreateForm.mockReturnValue(
+      of({ results: apiLanguages })
+    );
+
+    let emittedMap: Record<string, string> | undefined;
+    component.languageMapChanged.subscribe((map: Record<string, string>) => {
+      emittedMap = map;
+    });
+
+    fixture.detectChanges();
+
+    setTimeout(() => {
+      expect(emittedMap).toBeDefined();
+      expect(emittedMap!['5']).toBe('Typescript');
+      expect(emittedMap!['6']).toBe('C++');
+      done();
+    }, 100);
+  });
+
   // Emission Tests
   it('should emit language IDs when checkboxes are selected', (done) => {
     mockChallengeService.getAllLangugesCreateForm.mockReturnValue(

src/app/modules/starter/components/language-filter/language-filter.component.ts

@@ -3,14 +3,13 @@ import { FormBuilder, FormGroup, FormControl } from "@angular/forms";
 import { Language } from "src/app/models/language.model";
 import { ChallengeFormService } from "src/app/services/challenge-form.service";
 
-
-
 export const mockLanguages: Language[] = [
   { id_language: "1", language_name: "JavaScript" },
   { id_language: "2", language_name: "Python" },
   { id_language: "3", language_name: "Java" },
   { id_language: "4", language_name: "PHP" },
 ];
+
 @Component({
   selector: "app-language-filter",
   templateUrl: "./language-filter.component.html",
@@ -21,6 +20,7 @@ export class LanguageFilterComponent implements OnInit {
 
   languages: Language[] = mockLanguages;
   @Output() languageSelected = new EventEmitter<string[]>();
+  @Output() languageMapChanged = new EventEmitter<Record<string, string>>();
 
   languageForm: FormGroup;
 
@@ -63,6 +63,8 @@ export class LanguageFilterComponent implements OnInit {
 
       this.emitSelectedLanguages(form);
     });
+
+    this.emitFullLanguageMap();
 
     return form;
   }
@@ -74,4 +76,12 @@ export class LanguageFilterComponent implements OnInit {
 
     this.languageSelected.emit(selectedLanguages);
   }
+
+  private emitFullLanguageMap(): void {
+    const map: Record<string, string> = {};
+    Object.entries(this.languageNameToIdMap).forEach(([name, id]) => {
+      map[id] = name.charAt(0).toUpperCase() + name.slice(1);
+    });
+    this.languageMapChanged.emit(map);
+  }
 }