Merge branch 'develop' into feature#436c

CHANGELOG.md

@@ -4,6 +4,10 @@ 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.13-RELEASE]
+
+* Hide progression filter if user is not logged in
+
 ### [ita-challenges-frontend-3.1.10-RELEASE]
 
 - Capture user solution 
@@ -52,6 +56,7 @@ and this project adheres to
 
 - Optimized size and build process.
 
+
 ### [ita-challenges-frontend-3.0.3-RELEASE]
 
 - Ugraded to Angular 18

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.10-RELEASE
+MICROSERVICE_VERSION=3.1.13-RELEASE

package.json

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

src/app/models/challenge.model.ts

@@ -29,3 +29,17 @@ export class Challenge {
     })
   }
 }
+
+export class ChallengeResponse {
+  count: number
+  limit: number
+  offset: number
+  results: Challenge[]
+
+  constructor (data: any) {
+    this.count = data.count
+    this.limit = data.limit
+    this.offset = data.offset
+    this.results = data.results.map((item: any) => new Challenge(item))
+  }
+}

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

@@ -48,26 +48,31 @@ <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

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.spec.ts

@@ -33,7 +33,7 @@ describe('StarterComponent', () => {
   })
 
   it('should call getAllChallenges when sortBy is not empty', (done) => {
-    const mockResponse = { challenge: 'challenge' }
+    const mockResponse = { results: [{ challenge: 'challenge' }] }
     component.sortBy = 'creation_date'
     spyOn(starterService, 'getAllChallenges').and.returnValue(of(mockResponse))
 
@@ -43,20 +43,20 @@ describe('StarterComponent', () => {
   })
 
   it('should set listChallenges correctly when sortBy is empty', () => {
-    const mockResponse = { challenge: 'challenge' }
+    const mockResponse = { results: [{ challenge: 'challenge' }] }
     spyOn(starterService, 'getAllChallengesOffset').and.returnValue(of(mockResponse))
     component.sortBy = ''
     component.getChallengesByPage(1)
-    expect(component.listChallenges).toBe(mockResponse)
+    expect(component.listChallenges).toBe(mockResponse.results)
   })
 
   it('should set listChallenges correctly when sortBy is not empty', () => {
-    const mockResponse = [{ challenge: 'challenge' }]
+    const mockResponse = { results: [{ challenge: 'challenge' }] }
     spyOn(starterService, 'getAllChallenges').and.returnValue(of(mockResponse))
     spyOn(starterService, 'orderBySortAscending').and.returnValue(of(mockResponse))
     component.sortBy = 'creation_date'
     component.getChallengesByPage(1)
-    expect(component.listChallenges).toStrictEqual(mockResponse)
+    expect(component.listChallenges).toStrictEqual(mockResponse.results)
   })
 
   // changeSort

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

@@ -59,12 +59,12 @@ export class StarterComponent implements OnInit {
       const challengesObservable = this.sortBy !== ''
         ? this.starterService.getAllChallenges()
         : this.starterService.getAllChallengesOffset(getChallengeOffset, this.pageSize)
-
       this.challengesSubs$ = challengesObservable.subscribe(resp => {
         if (this.sortBy !== '') {
-          this.getAndSortChallenges(getChallengeOffset, resp)
+          this.getAndSortChallenges(getChallengeOffset, resp.results)
         } else {
-          this.listChallenges = resp
+          this.listChallenges = resp.results
+          console.log('Respuesta del servicio:', resp.results)
           this.totalPages = Math.ceil(22 / this.pageSize) // Cambiar 22 por el valor de challenge.count
         }
       })
@@ -97,7 +97,7 @@ export class StarterComponent implements OnInit {
 
       this.challengesSubs$ = challengesObservable.subscribe(resp => {
         if ((this.filters.languages.length > 0 && this.filters.languages.length < 4) || (this.filters.levels.length > 0 && this.filters.levels.length < 3) || (this.filters.progress.length > 0 && this.filters.progress.length < 3)) {
-          const respArray: Challenge[] = Array.isArray(resp) ? resp : [resp]
+          const respArray: Challenge[] = Array.isArray(resp.results) ? resp.results : [resp.results]
           this.starterService.getAllChallengesFiltered(this.filters, respArray)
             .subscribe((filteredResp: Challenge[]) => {
               if (this.sortBy !== '') {
@@ -116,7 +116,7 @@ export class StarterComponent implements OnInit {
               }
             })
         } else {
-          this.listChallenges = resp
+          this.listChallenges = resp.results
           this.totalPages = Math.ceil(22 / this.pageSize) // Cambiar 22 por el valor de challenge.count
         }
       })

src/app/services/starter.service.ts

@@ -3,30 +3,29 @@ import { Observable, map, of } from 'rxjs'
 import { environment } from '../../environments/environment'
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'
 import { type FilterChallenge } from '../models/filter-challenge.model'
-import { type Challenge } from '../models/challenge.model'
-
+import { type Challenge, type ChallengeResponse } from '../models/challenge.model'
 @Injectable({
   providedIn: 'root'
 })
 export class StarterService {
   constructor (@Inject(HttpClient) private readonly http: HttpClient) {}
 
-  getAllChallenges (): Observable<Challenge[]> {
+  getAllChallenges (): Observable<ChallengeResponse> {
     const headers = new HttpHeaders({
       'Content-Type': 'application/json'
     })
-    return this.http.get<Challenge[]>(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ALL_CHALLENGES_URL}`, {
+    return this.http.get<ChallengeResponse>(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ALL_CHALLENGES_URL}`, {
       headers
     })
   }
 
-  getAllChallengesOffset (pageOffset: number, pageLimit: number): Observable<Challenge[]> {
+  getAllChallengesOffset (pageOffset: number, pageLimit: number): Observable<ChallengeResponse> {
     const params = new HttpParams().set('offset', pageOffset.toString()).set('limit', pageLimit.toString())
 
     const headers = new HttpHeaders({
       'Content-Type': 'application/json'
     })
-    return this.http.get<Challenge[]>(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ALL_CHALLENGES_URL}`, {
+    return this.http.get<ChallengeResponse>(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ALL_CHALLENGES_URL}`, {
       headers,
       params
     })