Merge branch 'develop' into feature#440

CHANGELOG.md

@@ -4,6 +4,27 @@ 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.1.18-RELEASE] 2024-10-30 (feature#439)
+
+- Change breackpoint for Filter Button
+
+### [ita-challenges-frontend-3.1.17-RELEASE]
+
+* Added link to breadcrumb in challenge screen
+
+### [ita-challenges-frontend-3.1.16-RELEASE]
+
+* Included scroll into Challenge Screen [Mobile Version]
+
+### [ita-challenges-frontend-3.1.15-RELEASE]
+
+* Fix TS version over CI
+
+### [ita-challenges-frontend-3.1.13-RELEASE]
+
+* Hide progression filter if user is not logged in
+
 ### [ita-challenges-frontend-3.1.10-RELEASE]
 
 - Capture user solution 

GUIDELINES.md

@@ -303,7 +303,7 @@ All features developed are deployed on the develop server for testing when are a
 - Make sure your feature branch is up to date with the develop branch.
 - Make sure the name of your feature branch is right (feature/#X).
 - Follow semantic versioning (https://semver.org/), and update version number in package.json.
-- Update version number (property MICROSERVICE_VERSION) at file .env.CI.dev as well. Make sure both versions are the same. There should be a white line at the end of the file.
-- Make necesary annotations at file CHANGELOG.md 
+- Update version number (property MICROSERVICE_VERSION) at file **.env.CI.dev** and **package.json** as well. Make sure both versions are the same. There should be a white line at the end of the file.
+- Make necesary annotations at file **CHANGELOG.md** 
 - Push your changes to the remote repository.
 - Create a pull request from your feature branch to the develop branch.

angular.json

@@ -42,8 +42,6 @@
               "node_modules/jquery/dist/jquery.min.js",
               "node_modules/@popperjs/core/dist/umd/popper.min.js",
               "node_modules/bootstrap/dist/js/bootstrap.min.js"
-
-
             ],
             "browser": "src/main.ts",
             "stylePreprocessorOptions": {
@@ -178,4 +176,4 @@
       "@schematics/angular"
     ]
   }
-}
+}

conf/.env.CI.dev

@@ -1,2 +1,2 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=3.1.11-RELEASE
+MICROSERVICE_VERSION=3.1.18-RELEASE

package.json

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

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

@@ -2,3 +2,9 @@
   font-size: 10px;
   margin-right: 0.8rem;
 }
+
+@media screen and (max-width: 768px) {
+  .version {
+  margin-top: -33px;
+}
+}

src/app/core/layout/header/mobile-nav/mobile-nav.component.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-md align-items-center">
+<nav class="navbar navbar-expand-lg align-items-center">
   <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
     aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>

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

@@ -1,6 +1,6 @@
 <!-- <app-header></app-header> -->
 <div id="main-wrapper" class="d-flex container-fluid">
-  <nav class="d-none d-md-block">
+  <nav class="d-none custom-md-block">
     <div id="menu">
       <!-- <div id="logo"></div> -->
       <div>

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

@@ -41,6 +41,10 @@
   app-main-menu {
     height: 100%;
   }
+  #main-container {
+    overflow: auto;
+    scrollbar-width: none;
+  }
 }
 
 .logo {
@@ -50,8 +54,7 @@
 
 @media screen and (max-width: 768px) {
   .container-fluid {
-    padding: 30px 0px;
-    background-color: white;
+    padding: 30px 0px 0px;
 
     main {
       padding: 20px;
@@ -66,3 +69,17 @@
 #main-wrapper {
   height: 100%;
 }
+
+/* Nasconde per schermi con larghezza esattamente 768px */
+@media (max-width: 768px) {
+  .custom-md-block {
+      display: none !important;
+  }
+}
+
+/* Mostra per schermi con larghezza superiore a 768px */
+@media (min-width: 769px) {
+  .custom-md-block {
+      display: block !important;
+  }
+}

src/app/modules/challenge/components/challenge-header/challenge-header.component.html

@@ -1,7 +1,10 @@
 <div>
   <div class="row">
     <div class="col-12 col-md-9">
-      <p class="breadcrumbs">Retos > <span id="color">Detalle</span></p>
+      <p class="breadcrumbs">
+        <a routerLink="/ita-challenge/challenges" id="retos-link">Retos</a> > 
+        <span id="color">Detalle</span>
+      </p>
       <div class="d-flex align-items-start">
         <div class="difficulty">
           <div class="difficulty d-flex" *ngIf="level == 'EASY'">

src/app/modules/modals/filters-modal/filters-modal.component.html

@@ -48,38 +48,43 @@ <h4 class="modal-title fw-bold">{{ "modules.starter.main.section1" | translate }
           </div>
         </div>
       </div>
+    </form>
+  </div>
 
-      <div  formGroupName="progress" class="form">
-        <p class="fw-bold">{{'modules.starter.filters.progress' | translate}}</p>
-        <div class="d-flex flex-wrap">
-          <div class="input-wrapper">
-            <input class="pill-input" type="checkbox" formControlName="noStarted">
-            <label class="input-label">{{'modules.starter.filters.noStarted' | translate}}</label>
-          </div>
-          <div class="input-wrapper">
-            <input class="pill-input" type="checkbox" formControlName="started">
-            <label class="input-label">{{'modules.starter.filters.started' | translate}}</label>
-          </div>
-          <div class="input-wrapper">
-            <input class="pill-input" type="checkbox" formControlName="finished">
-            <label class="input-label">{{'modules.starter.filters.finished' | translate}}</label>
-          </div>
+  <!-- Bloque comentado correctamente -->
+  <!-- 
+  @if (isUserLoggedIn) {
+    <div class="form">
+      <p class="fw-bold">Progreso</p>
+      <div class="d-flex flex-wrap">
+        <div class="input-wrapper">
+          <input class="pill-input" type="checkbox" id="checkNoStarted" name="noStarted" value="noStarted">
+          <label class="input-label">No empezados</label>
+        </div>
+        <div class="input-wrapper">
+          <input class="pill-input" type="checkbox" id="checkStarted" name="started" value="started">
+          <label class="input-label">Falta completar</label>
+        </div>
+        <div class="input-wrapper">
+          <input class="pill-input" type="checkbox" id="checkFinished" name="finished" value="finished">
+          <label class="input-label">Completados</label>
         </div>
       </div>
-    </form>
-  </div>
+    </div>
+  }
+  -->  
 
   <div class="modal-footer mt-4 px-0 gap-3 justify-content-center">
     <button
       type="button"
-      class="btn btn-lg btn-primary btn-change col-11 col-md-5"
+      class="btn btn-lg btn-primary btn-change col-11 col-xl-5"
       (click)="applyFilters()"
     >
       Aplicar
     </button>
     <button
       type="button"
-      class="btn btn-lg col-11 col-md-5"
+      class="btn btn-lg col-11 col-xl-5"
       (click)="d('Cross click')"
     >
       Cancelar

src/app/modules/modals/filters-modal/filters-modal.component.spec.ts

@@ -9,18 +9,25 @@ describe('FiltersModalComponent', () => {
   let component: FiltersModalComponent
   let fixture: ComponentFixture<FiltersModalComponent>
   let mockChallengeService: { getAllLanguages: any }
+  let mockModalService: { open: any, dismissAll: any }
 
   beforeEach(async () => {
     mockChallengeService = {
-      getAllLanguages: () => of({ results: [] })
+      getAllLanguages: () => of(
+        { results: [{ id_language: '1', language_name: 'JavaScript' }, { id_language: '2', language_name: 'Python' }] })
+    }
+
+    mockModalService = {
+      open: jasmine.createSpy('open'),
+      dismissAll: jasmine.createSpy('dismissAll')
     }
 
     await TestBed.configureTestingModule({
       declarations: [FiltersModalComponent],
       imports: [ReactiveFormsModule],
       providers: [
         { provide: ChallengeService, useValue: mockChallengeService },
-        { provide: NgbModal, useValue: { open: () => ({}) } }
+        { provide: NgbModal, useValue: mockModalService }
       ]
     }).compileComponents()
   })
@@ -35,36 +42,42 @@ describe('FiltersModalComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  it('should emit filtersSelected event with correct filters', () => {
-    // Datos simulados para el servicio
-    const mockLanguages = [
-      { id_language: '1', language_name: 'JavaScript' },
-      { id_language: '2', language_name: 'Python' }
-    ]
-    mockChallengeService.getAllLanguages = () => of({ results: mockLanguages })
-
-    // Espiar el EventEmitter
+  it('should process filters correctly when applyFilters is called', () => {
     spyOn(component.filtersSelected, 'emit')
 
-    // Establecer valores del formulario
+    // Simula que se llama a applyFilters, y que la API retorna lenguajes
+    component.applyFilters()
+    fixture.detectChanges()
+
+    // Verifica que los lenguajes se cargaron correctamente
+    expect(component.languages).toEqual({
+      javascript: '1',
+      python: '2'
+    })
+
+    // Simula valores en el formulario
     component.formGroup.setValue({
       languages: { javascript: true, java: false, php: false, python: false },
       levels: { easy: true, medium: false, hard: false },
-      progress: { noStarted: false, started: false, finished: false }
+      progress: { noStarted: true, started: false, finished: false }
     })
 
-    // Aplicar filtros
+    // Llama a processFilters
     component.applyFilters()
     fixture.detectChanges()
 
-    // Valores de filtro esperados
-    const expectedFilter = {
-      languages: ['1'], // ID de JavaScript
+    // Verifica que el evento filtersSelected se emitió con los valores correctos
+    const expectedFilters = {
+      languages: ['1'], // Solo JavaScript seleccionado
       levels: ['EASY'],
-      progress: []
+      progress: [1] // noStarted corresponde al primer valor
     }
+    expect(component.filtersSelected.emit).toHaveBeenCalledWith(expectedFilters)
+    expect(mockModalService.dismissAll).toHaveBeenCalled()
+  })
 
-    // Verificar si el evento fue emitido con los valores correctos
-    expect(component.filtersSelected.emit).toHaveBeenCalledWith(expectedFilter)
+  it('should open modal when open is called', () => {
+    component.open()
+    expect(mockModalService.open).toHaveBeenCalled()
   })
 })

src/app/modules/modals/filters-modal/filters-modal.component.ts

@@ -4,6 +4,7 @@ import { FormBuilder } from '@angular/forms'
 import { type FilterChallenge } from 'src/app/models/filter-challenge.model'
 import { ChallengeService } from 'src/app/services/challenge.service'
 import { type Language } from 'src/app/models/language.model'
+// import { AuthService } from 'src/app/services/auth.service'
 
 @Component({
   selector: 'app-filters-modal',
@@ -93,4 +94,8 @@ export class FiltersModalComponent {
   open (): void {
     this.modalService.open(this.modalContent, { size: 'lg' })
   }
+
+  /* constructor () {
+    this.isUserLoggedIn = this.authService.isUserLoggedIn()
+  } */
 }

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

@@ -33,7 +33,7 @@
       <label class="form-check-label" for="checkHard">{{'modules.starter.filters.hard' | translate}}</label>
     </div>
   </div>
-  <div class="form" formGroupName="progress">
+  <div class="form" formGroupName="progress" *ngIf="isUserLoggedIn">
     <p class="mb-2">{{'modules.starter.filters.progress' | translate}}</p>
     <div class="form-check">
       <input class="form-check-input" type="checkbox" id="checkNoStarted" formControlName="noStarted">

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

@@ -21,6 +21,7 @@ describe('StarterFiltersComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(StarterFiltersComponent)
     component = fixture.componentInstance
+    component.isUserLoggedIn = true
     fixture.detectChanges()
   })
 

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

@@ -4,6 +4,7 @@ import { FormBuilder } from '@angular/forms'
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
 import { ChallengeService } from 'src/app/services/challenge.service'
 import { type Language } from 'src/app/models/language.model'
+import { AuthService } from 'src/app/services/auth.service'
 
 @Component({
   selector: 'app-starter-filters',
@@ -20,6 +21,9 @@ export class StarterFiltersComponent {
   private readonly destroyRef = inject(DestroyRef)
   private readonly fb = inject(FormBuilder)
   private readonly challengeService = inject(ChallengeService)
+  private readonly authService = inject(AuthService)
+
+  public isUserLoggedIn: boolean = false
 
   constructor () {
     this.filtersForm = this.fb.nonNullable.group({
@@ -75,5 +79,6 @@ export class StarterFiltersComponent {
 
       this.filtersSelected.emit(filters)
     })
+    // this.isUserLoggedIn = this.authService.isUserLoggedIn()
   }
 }

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

@@ -1,24 +1,24 @@
 <div class="d-flex starter">
   <!-- FILTERS -->
-  <div id="filters-container" class="d-none d-md-block col-2">
+  <div id="filters-container" class="d-none d-xl-block col-2">
     <h2>{{ "modules.starter.main.section1" | translate }}</h2>
     <app-starter-filters (filtersSelected)="getChallengeFilters($event)"></app-starter-filters>
   </div>
 
   <!-- CHALLENGES -->
-  <div id="challenges-container" class="col-12 col-md-9">
+  <div id="challenges-container" class="col-12 col-xl-9">
     <div class="d-flex justify-content-between align-items-center  pb-2 challenges-filter">
       <!-- TITLE -->
       <h2 class="mb-0">{{ "modules.starter.main.section2.title" | translate }}</h2>
 
       <!-- MOBILE FILTER BTN -->
-      <button class="d-md-none btn btn-outline-primary btnFiltrar" (click)="openModal()">
+      <button class="d-xl-none btn btn-outline-primary btnFiltrar" (click)="openModal()">
         <strong>Filtrar</strong>
       </button>
     </div>
 
     <!-- SORT BY -->
-    <ul id="sortBy" class="d-md-flex justify-content-end gap-2 d-none">
+    <ul id="sortBy" class="d-xl-flex justify-content-end gap-2 d-none">
       <li class="animated"
         [ngClass]="{'selected' : sortBy == 'popularity', 'up': sortBy === 'popularity' && !isAscending}"
         (click)="changeSort('popularity')">
@@ -41,7 +41,7 @@ <h2 class="mb-0">{{ "modules.starter.main.section2.title" | translate }}</h2>
     </div>
 
     <!-- PAGINATION -->
-    <app-pagination class="d-none d-md-block"  (pageEmitter)="getChallengesByPage($event)" [totalPages]="totalPages" [pageNumber]="pageNumber">
+    <app-pagination class="d-none d-xl-block"  (pageEmitter)="getChallengesByPage($event)" [totalPages]="totalPages" [pageNumber]="pageNumber">
     </app-pagination>
   </div>
 </div>

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

@@ -64,7 +64,7 @@ app-starter-filters p {
   font-weight: 700;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1200px) {
   h2 {
     margin: 0.5rem 0 1rem;
   }