Merge branch 'feature#396' into develop

conf/.env.CI.dev

@@ -1,2 +1,2 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=3.0.4-RELEASE
+MICROSERVICE_VERSION=3.0.5-RELEASE

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ita-challenges-frontend",
-  "version": "3.0.4-RELEASE",
+  "version": "3.0.5-RELEASE",
   "sideEffects": [
     "node_modules/@angular/localize"
   ],
@@ -77,6 +77,6 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
     "jest": "^29.5.0",
-    "typescript": "^5.4.4"
+    "typescript": "^5.4.5"
   }
 }

src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core'
+import { LOCALE_ID, NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
@@ -17,6 +17,15 @@ import { AuthService } from './services/auth.service'
 // TODO - pending execution over secure environment
 // import { CookieEncryptionHelper } from './helpers/cookie-encryption.helper'
 
+import localeEs from '@angular/common/locales/es'
+import localeCa from '@angular/common/locales/ca'
+import localeEn from '@angular/common/locales/en'
+import { registerLocaleData } from '@angular/common'
+
+registerLocaleData(localeEs, 'es')
+registerLocaleData(localeCa, 'ca')
+registerLocaleData(localeEn, 'en')
+
 export function HttpLoaderFactory (http: HttpClient): any {
   return new TranslateHttpLoader(http)
 }
@@ -46,7 +55,8 @@ export function HttpLoaderFactory (http: HttpClient): any {
   providers: [
     AuthService, // CookieEncryptionHelper
 
-    provideHttpClient(withInterceptorsFromDi())
+    provideHttpClient(withInterceptorsFromDi()),
+    { provide: LOCALE_ID, useValue: 'ca' } // Establecemos Catalán como idioma por defecto.
   ]
 })
 export class AppModule { }

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

@@ -39,7 +39,7 @@ <h3 class="ms-2">{{title | dynamicTranslate}}</h3>
         </span>
         <span class="stat">
           <img src="assets/img/icon/clock.svg" alt="Date">
-          {{ formattedDate }}
+          {{creation_date | date:'mediumDate':'':currentLang}}
         </span>
       </div>
     </div>

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

@@ -1,64 +1,45 @@
-import { Component, Input, type OnInit, type OnDestroy, inject } from '@angular/core'
+import { Component, Input, inject } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { SendSolutionModalComponent } from './../../../modals/send-solution-modal/send-solution-modal.component'
 import { RestrictedModalComponent } from './../../../modals/restricted-modal/restricted-modal.component'
 import { SolutionService } from '../../../../services/solution.service'
 import { AuthService } from 'src/app/services/auth.service'
-import { type Subscription } from 'rxjs'
 import { Router } from '@angular/router'
-import { DateFormatterService } from 'src/app/services/date-formatter.service'
 import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'app-challenge-header',
   templateUrl: './challenge-header.component.html',
   styleUrls: ['./challenge-header.component.scss']
 })
-export class ChallengeHeaderComponent implements OnInit, OnDestroy {
+export class ChallengeHeaderComponent {
   private readonly modalService = inject(NgbModal)
   private readonly solutionService = inject(SolutionService)
   private readonly authService = inject(AuthService)
   private readonly router = inject(Router)
-  private readonly dateFormatter = inject(DateFormatterService)
   private readonly translate = inject(TranslateService)
-  private translateSubscription!: Subscription
-  formattedDate: string = ''
-  private _creation_date: string | Date | null = null
-
-  @Input()
-  set creation_date (value: Date | string) {
-    this._creation_date = value
-    this.updateFormattedDate()
-  }
-
-  get creation_date (): string | Date | null {
-    return this._creation_date
-  }
 
   @Input() title = ''
+  @Input() creation_date!: Date
   @Input() level = ''
   @Input() activeId!: number
 
+  challenge_title: string | undefined = ''
+  challenge_date: Date | undefined
+  challenge_level: string | undefined
+
   isLogged: boolean = false
   solutionSent: boolean = false
-  private solutionSentSubscription!: Subscription
 
-  ngOnInit (): void {
+  async ngOnInit (): Promise<void> {
+    this.challenge_title = this.title
+    this.challenge_date = this.creation_date
+    this.challenge_level = this.level
     this.isLogged = this.authService.isUserLoggedIn()
-    this.solutionSentSubscription = this.solutionService.solutionSent$.subscribe((value) => {
+
+    this.solutionService.solutionSent$.subscribe((value) => {
       this.solutionSent = value
     })
-    this.updateFormattedDate()
-    this.translateSubscription = this.translate.onLangChange.subscribe(() => {
-      this.updateFormattedDate()
-    })
-  }
-
-  ngOnDestroy (): void {
-    if (this.solutionSentSubscription !== null && this.solutionSentSubscription !== undefined) {
-      this.solutionSentSubscription.unsubscribe()
-    }
-    this.translateSubscription.unsubscribe()
   }
 
   openSendSolutionModal (): void {
@@ -70,35 +51,16 @@ export class ChallengeHeaderComponent implements OnInit, OnDestroy {
 
   clickSendButton (): void {
     if (!this.isLogged) {
-      this.openRestrictedModal()
+      this.modalService.open(RestrictedModalComponent, {
+        centered: true,
+        size: 'lg'
+      })
     } else {
-      this.solutionService.sendSolution('')
+      this.solutionService.sendSolution('') // Puedes pasar la solución como argumento si es necesario
     }
   }
 
-  private openRestrictedModal (): void {
-    this.modalService.open(RestrictedModalComponent, {
-      centered: true,
-      size: 'lg'
-    })
-  }
-
-  updateFormattedDate (): void {
-    if (this._creation_date instanceof Date) {
-      this.formattedDate = this.dateFormatter.format(this._creation_date)
-    } else if (typeof this._creation_date === 'string' && this._creation_date.trim() !== '') {
-      const date = new Date(this._creation_date)
-      if (!isNaN(date.getTime())) {
-        this.formattedDate = this.dateFormatter.format(date)
-      } else {
-        console.warn('ChallengeHeaderComponent.updateFormattedDate: creation_date is an invalid string')
-        this.formattedDate = ''
-      }
-    } else if (this._creation_date === null) {
-    // Manejar explícitamente el caso null sin emitir una advertencia.
-      this.formattedDate = ''
-    } else {
-    // Opcional: Manejar otros casos inesperados, si los hay.
-    }
+  get currentLang (): string {
+    return this.translate.currentLang
   }
 }

src/app/modules/profile/components/profile/profile.component.spec.ts

@@ -7,7 +7,6 @@ import { ProfileHeaderComponent } from '../profile-header/profile-header.compone
 import { SharedComponentsModule } from '../../../../shared/components/shared-components.module'
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
 import { TranslateModule } from '@ngx-translate/core'
-import { DateFormatterService } from 'src/app/services/date-formatter.service'
 
 describe('ProfileComponent', () => {
   let component: ProfileComponent
@@ -27,14 +26,7 @@ describe('ProfileComponent', () => {
       ],
       providers: [
         provideHttpClient(withInterceptorsFromDi()),
-        provideHttpClientTesting(),
-        // Mockea DateFormatterService y su método format para evitar el error de fecha inválida
-        {
-          provide: DateFormatterService,
-          useValue: {
-            format: () => 'Mocked Date' // Retorna un valor mockeado para la fecha
-          }
-        }
+        provideHttpClientTesting()
       ]
     })
     fixture = TestBed.createComponent(ProfileComponent)

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

@@ -25,7 +25,7 @@ <h2 class="mb-0">{{ "modules.starter.main.section2.title" | translate }}</h2>
     </ul>
     <div class="d-flex flex-column gap-3" id="challenges">
       <app-challenge-card *ngFor="let challenge of listChallenges, let i = index"
-        [title]="challenge.challenge_title  | dynamicTranslate" [creation_date]="challenge.creation_date | formatDate"
+        [title]="challenge.challenge_title  | dynamicTranslate" [creation_date]="challenge.creation_date"
         [level]="challenge.level" [popularity]="challenge.popularity" [languages]="challenge.languages"
         [id]="challenge.id_challenge">
       </app-challenge-card>

src/app/modules/starter/starter.module.ts

@@ -11,7 +11,6 @@ import { ChallengeService } from 'src/app/services/challenge.service'
 import { TranslateModule } from '@ngx-translate/core'
 import { ModalsModule } from '../modals/modals.module'
 import { DynamicTranslatePipe } from 'src/app/pipes/dynamic-translate.pipe'
-import { FormatDatePipe } from 'src/app/pipes/format-date.pipe'
 
 @NgModule({
   declarations: [
@@ -28,8 +27,7 @@ import { FormatDatePipe } from 'src/app/pipes/format-date.pipe'
     SharedComponentsModule,
     TranslateModule,
     ModalsModule,
-    DynamicTranslatePipe,
-    FormatDatePipe
+    DynamicTranslatePipe
   ],
   providers: [
     ChallengeService