Merge pull request #777 from IT-Academy-BCN/feature/231-style-tag-chips-from-filters-treigger

PR 2/2 - feat(challenge-filters): add styles to the tags on the filters trigger component

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.34.0-RELEASE] - 2026-03-07
+
+### Added
+- Applied styles to the `challengeFiltersTriggerComponent` tags
+
 ### [itachallenge-challenge-3.33.0-RELEASE] - 2026-02-22
 
 ### Added

conf/.env.CI.dev

@@ -1,2 +1,2 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=3.33.0-RELEASE
+MICROSERVICE_VERSION=3.34.0-RELEASE

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ita-challenges-frontend",
-  "version": "3.33.0-RELEASE",
+  "version": "3.34.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,18 +86,23 @@
         <legend class="h6 m-0 fw-bold">{{ 'modules.starter.challengeFiltersTrigger.tagsTitle' | translate }}</legend>
         <div class="d-flex gap-2"></div>
 
-        <div *ngFor="let group of displayTags">
-          <strong>{{ group.language }}</strong>
+        <div *ngIf="displayTags.length === 0">
+          {{ 'modules.starter.challengeFiltersTrigger.noTagsFound' | translate }}
+        </div>
+
+        <div class="d-flex flex-column gap-1" *ngFor="let group of displayTags">
+          <span>{{ group.language }}</span>
           <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_tag)"
-                (change)="toggleTag(tag.id_tag)"
-              />
+            <button
+              *ngFor="let tag of group.tags"
+              type="button"
+              class="btn rounded-pill"
+              [attr.aria-pressed]="isTagSelected(tag.id_tag)"
+              [ngClass]="isTagSelected(tag.id_tag) ? 'btn-dark' : 'btn-outline-dark'"
+              (click)="toggleTag(tag.id_tag)"
+            >
               {{ tag.tag_name }}
-            </label>
+            </button>
           </div>
         </div>
       </fieldset>

src/assets/i18n/ca.json

@@ -146,6 +146,7 @@
                 "closeAriaLabel": "Tancar",
                 "difficultyTitle": "Dificultat",
                 "tagsTitle": "Etiquetes",
+                "noTagsFound": "No s'han trobat etiquetes, seleccioneu almenys un llenguatge",
                 "searchTagsPlaceholder": "Cercar etiquetes",
                 "statusTitle": "Estat",
                 "statusNotStarted": "Nous",

src/assets/i18n/en.json

@@ -146,6 +146,7 @@
                 "closeAriaLabel": "Close",
                 "difficultyTitle": "Difficulty",
                 "tagsTitle": "Tags",
+                "noTagsFound": "No tags found, please select at least one language first",
                 "searchTagsPlaceholder": "Search tags",
                 "statusTitle": "Status",
                 "statusNotStarted": "New",

src/assets/i18n/es.json

@@ -146,6 +146,7 @@
                 "closeAriaLabel": "Cerrar",
                 "difficultyTitle": "Dificultad",
                 "tagsTitle": "Tags",
+                "noTagsFound": "No se han encontrado tags, seleccione al menos un lenguaje",
                 "searchTagsPlaceholder": "Buscar tags",
                 "statusTitle": "Estado",
                 "statusNotStarted": "Nuevos",