Skip to content

[FE] Add the logic to manage the language of the tags selected #232

@otrocadev

Description

@otrocadev

PR IT-Academy-BCN/ita-challenges-frontend#768

Context

The new challenge filters modal (challenge-filters-trigger) has no support for tag-based filtering. After analysing the current implementation, we have noticed that tags depend on the selected languages, but there is no mechanism to fetch tags per language, resolve language IDs to display names, or allow users to select/deselect individual tags.

Important

This is the first step of the parent task #230 , this first task will prepare the logic to complete the task, as per styles, they will be included here #231

Objective

Enable dynamic tag filtering in the challenge-filters-triggercomponent, where available tags are fetched per selected language (the ones that the component receive as an input) and displayed as selectable checkboxes grouped by language name. Selected tag IDs are emitted to the parent component for challenge filtering.

Scope

  • Emit a full language ID→name map from LanguageFilterComponent on initial load.
  • Wire the language map through ChallengeListFiltersComponent to ChallengeFiltersTriggerComponent.
  • Fetch tags per selected language in ChallengeFiltersTriggerComponent using the already existent function ChallengeFormService.getTagsByLanguage().
  • Display tag checkboxes grouped by language name; track selected tag IDs in draftFilters.tags.
  • Emit selected tag IDs to the parent on Apply.

Out of Scope

  • No persistence of filter state across sessions.
  • No styling/design polish of the tag checkboxes (handled separately on the next step).

Acceptance Criteria (DoD)

  • Tags are fetched dynamically based on selected languages when the filter modal opens.
  • Tags are displayed as checkboxes grouped by language name (not ID).
  • Selected tags are tracked by ID and emitted to the parent via filtersApplied.
    Previously selected tags are pre-checked when the modal reopens.

Result before implementing the styles

Screen.Recording.2026-02-26.at.10.56.14.mov

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions