Merge branch 'develop' into feature/#92-4

package.json

@@ -47,7 +47,6 @@
     "@types/jest": "^29.5.1",
     "@types/node": "^18.16.3",
     "jest": "^29.5.0",
-    "typescript": "~4.9.4",
-    "cypress": "latest"
+    "typescript": "~4.9.4"
   }
 }

src/app/app.module.ts

@@ -11,6 +11,7 @@ import {ChallengeModule} from "./modules/challenge/challenge.module";
 import { I18nModule } from '../assets/i18n/i18n.module';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { ProfileModule } from './modules/profile/profile.module';
 
 
 export function HttpLoaderFactory(http: HttpClient) {
@@ -33,6 +34,7 @@ export function HttpLoaderFactory(http: HttpClient) {
     HttpClientModule,
     StarterModule,
     ChallengeModule,
+    ProfileModule,
     I18nModule,
     TranslateModule.forRoot({
       defaultLanguage: 'es',

src/app/core/core-routing.module.ts

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 import { MainComponent } from "./layout/main/main.component";
 import { StarterComponent } from "../modules/starter/components/starter/starter.component";
 import { ChallengeComponent } from '../modules/challenge/components/challenge/challenge.component';
-import { BreadcrumbComponent } from '../shared/components/breadcrumb/breadcrumb.component';
+import { ProfileComponent } from '../modules/profile/components/profile/profile.component';
 
 const routes: Routes = [
     {
@@ -12,20 +12,21 @@ const routes: Routes = [
         children: [
             {
                 path: 'challenges',
-                data: { breadcrumb: 'Retos'},
                 children:[
                     {
                         path: '',  
                         component: StarterComponent,
-                        data: { breadcrumb: null}
                     },
                     {
                         path: ':idChallenge', 
                         component: ChallengeComponent, 
-                        data: { breadcrumb: 'Reto'}
                     },
                 ]
             },
+            {
+                path: 'profile',
+                component: ProfileComponent,
+            }
         ]
     }
 ];

src/app/core/core.module.ts

@@ -9,7 +9,6 @@ import { ModalsModule } from '../modules/modals/modals.module';
 import { I18nModule } from 'src/assets/i18n/i18n.module';
 import { TranslateModule } from '@ngx-translate/core';
 import { MobileNavComponent } from './layout/header/mobile-nav/mobile-nav.component';
-import { SharedComponentsModule } from '../shared/components/shared-components.module';
 
 
 @NgModule({
@@ -30,7 +29,6 @@ import { SharedComponentsModule } from '../shared/components/shared-components.m
         ModalsModule,
         I18nModule, 
         TranslateModule,
-        SharedComponentsModule
     ]
 })
 export class CoreModule { }

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

@@ -7,7 +7,6 @@
     </div>
     </nav>
     <main>
-        <app-breadcrumb class="d-block mb-3"></app-breadcrumb>
         <router-outlet></router-outlet>
     </main>
 </div>

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

@@ -1,6 +1,7 @@
 <div>
     <div class="row">
         <div class="col-12 col-md-7">
+            <p>Retos > <span id="color">Detalle</span></p>
             <div class="d-flex align-items-start">
                 <div class="difficulty">
                     <div class="difficulty" *ngIf="level == 'EASY'">

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

@@ -1,5 +1,5 @@
 <!---Nav tabs-->
-<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" (navChange)="onNavChange($event)" class="nav-tabs">
+<ul ngbNav #nav="ngbNav" [(activeId)]="activeId" class="nav-tabs">
   <!--DETAILS TAB-->
   <li [ngbNavItem]="1">
     <a href="#details" ngbNavLink>{{

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

@@ -6,8 +6,7 @@ import { ChallengeService } from '../../../../services/challenge.service';
 import { Subscription } from 'rxjs';
 import {DataChallenge} from "../../../../models/data-challenge.model";
 import { Challenge } from "../../../../models/challenge.model";
-import { NgbNav, NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap';
-import { ActivatedRoute, Router } from '@angular/router';
+import { NgbNav } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-challenge-info',
@@ -16,7 +15,7 @@ import { ActivatedRoute, Router } from '@angular/router';
   providers: [ChallengeService]
 })
 export class ChallengeInfoComponent {
-  constructor(private challengeService: ChallengeService, private router: Router, private route: ActivatedRoute){}
+  constructor(private challengeService: ChallengeService){}
   @ViewChild('nav') nav!: NgbNav;
 
   @Input() related: any = [];
@@ -35,13 +34,6 @@ export class ChallengeInfoComponent {
   isLogged = true;
   activeId = 1;
 
-    tabNames: any = {
-  1: 'Detalles',
-  2: 'Soluciones',
-  3: 'Recursos',
-  4: 'Relacionados'
-};
-
   idChallenge!: string | any;
   params$!: Subscription;
   jsonData: Challenge[] = [];
@@ -57,10 +49,7 @@ export class ChallengeInfoComponent {
   related_languages: Language[] = [];
   related_id = this.related;
 
-  ngOnInit() {
-      if (!this.route.snapshot!.queryParams['tab']) {
-      this.navigateToQueryParams("Detalles");
-    }
+  ngOnInit(){
     this.loadRelatedChallenge(this.related_id);
   }
 
@@ -89,18 +78,5 @@ ngAfterViewInit() {
     });
   }
 
-    onNavChange(changeEvent: NgbNavChangeEvent) {
-    this.navigateToQueryParams( this.tabNames[changeEvent.nextId]);
-  }
-
-  navigateToQueryParams(paramValue:string) {
-    this.router.navigate([], { queryParams: { tab: paramValue }});
-  }
-
-getTabId(tabName: string): number {
-  const tabId = Object.keys(this.tabNames).find(key => this.tabNames[key] === tabName);
-  return tabId ? Number(tabId) : this.activeId;
-}
-
 
 }

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

@@ -0,0 +1,32 @@
+<div class="user gap-3 row mt-4">
+    <span class="image col-3">
+        <img src="../../../../assets/img/users/user-1.png" alt="User" class="">
+    </span>
+    <span class="col-9">
+        <p>Bienvenid@ de nuevo,</p>
+        <h2>Ona Costa</h2>
+    </span>
+
+</div>
+
+<div class="stats gap-3">
+    <span class="stat">
+        <img src="../../../../assets/img/icon/badge.svg" alt="Badge">
+        12 retos
+    </span>
+    <span class="stat" ngbTooltip="Empezado y finalizado">  
+        <img src="../../../../assets/img/icon/bullseye-pointer.svg" alt="Bullseye pointer">           
+        95% finalizados
+    </span>
+    <span class="stat" ngbTooltip="Veces guardado">
+        <img src="../../../../assets/img/icon/chart-pie-slice.svg" alt="Chart pie slice">     
+        65% progreso
+    </span>
+    <span class="stat" ngbTooltip="Fecha creación">     
+        <img src="../../../../assets/img/icon/folder-upload.svg" alt="Folder Upload" id="folder">
+        1 reto subido
+    </span> 
+    <span class="progress">
+        <span class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></span>
+    </span>
+</div>

src/app/modules/profile/components/profile-header/profile-header.component.scss

@@ -0,0 +1,61 @@
+@import "src/styles/colors";
+
+
+.user{
+    display: flex;
+    align-items: center;
+    color: $black-1;
+    .image{
+        background-color: $gray-4;
+        border-radius: 100%;
+        padding: .2rem 2rem .6rem 2rem;
+        width: 2rem;
+        height: 4rem;
+        display: flex;
+        justify-content: center;
+
+        img{
+            width: 5rem;
+            height:3rem;
+        }
+    }
+}
+
+.col-9{
+    padding: 0;
+    margin: 0;
+    p{
+        margin: 0;
+        color: $gray-3;
+    }
+    h2{
+        margin: 0;
+    }
+}
+.stats{
+    color: $gray-1;
+    font-weight: bold;
+    margin-top: 2rem;
+    img{
+        width: 1.2rem;
+
+    }  
+    #folder{
+            width: 1.1rem;
+        }
+    .stat{
+        margin-right: 1rem;
+    }
+    .progress{
+    width: 80%;
+    height: .8rem;
+    margin-top: 1rem;
+
+        .progress-bar{
+            background-color: $primary;
+            border-radius: 10px;
+            width: 65%;
+        }
+
+    }
+}

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

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProfileHeaderComponent } from './profile-header.component';
+
+describe('ProfileHeaderComponent', () => {
+  let component: ProfileHeaderComponent;
+  let fixture: ComponentFixture<ProfileHeaderComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ProfileHeaderComponent]
+    });
+    fixture = TestBed.createComponent(ProfileHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-profile-header',
+  templateUrl: './profile-header.component.html',
+  styleUrls: ['./profile-header.component.scss']
+})
+export class ProfileHeaderComponent {
+
+}

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

@@ -0,0 +1,27 @@
+<app-profile-header></app-profile-header>
+<div>
+    <div class="d-flex justify-content-between">
+        <h3 class="mt-5">Retos realizados</h3>
+        <div>
+            <img src="../../../../assets/img/icon/arrow_left.svg" alt="Arrow Left">
+            <img src="../../../../assets/img/icon/arrow_right.svg" alt="Arrow Right">
+        </div>
+    </div>
+    <!---- TO DO NGFOR ----->
+    <app-challenge-card></app-challenge-card>
+    <app-challenge-card></app-challenge-card>
+    <app-challenge-card></app-challenge-card>
+</div>
+<div>
+    <div class="d-flex justify-content-between">
+        <h3 class="mt-5">Retos guardados</h3>
+        <div>
+            <img src="../../../../assets/img/icon/arrow_left.svg" alt="Arrow Left"  class="m-0 p-0">
+            <img src="../../../../assets/img/icon/arrow_right.svg" alt="Arrow Right"  class="m-0 p-0">
+        </div>
+    </div>
+    <!---- TO DO NGFOR ----->
+    <app-challenge-card></app-challenge-card>
+    <app-challenge-card></app-challenge-card>
+    <app-challenge-card></app-challenge-card>
+</div>

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

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
+import {RouterTestingModule} from "@angular/router/testing";
+
+import { ProfileComponent } from './profile.component';
+import { ProfileHeaderComponent } from '../profile-header/profile-header.component';
+import { SharedComponentsModule } from '../../../../shared/components/shared-components.module';
+
+describe('ProfileComponent', () => {
+  let component: ProfileComponent;
+  let fixture: ComponentFixture<ProfileComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        ProfileComponent,
+        ProfileHeaderComponent
+      ],
+      imports: [
+        SharedComponentsModule,
+        HttpClientTestingModule,
+        RouterTestingModule,
+      ]
+    });
+    fixture = TestBed.createComponent(ProfileComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss']
+})
+export class ProfileComponent {
+
+}

src/app/modules/profile/profile-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [];
+
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProfileRoutingModule { }

src/app/modules/profile/profile.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ProfileComponent } from './components/profile/profile.component';
+import { ProfileHeaderComponent } from './components/profile-header/profile-header.component';
+import { RouterModule } from '@angular/router';
+import { SharedComponentsModule } from 'src/app/shared/components/shared-components.module';
+
+
+@NgModule({
+  declarations: [
+    ProfileComponent,
+    ProfileHeaderComponent
+  ],
+  imports: [
+    CommonModule, 
+    RouterModule,
+    SharedComponentsModule
+  ]
+})
+export class ProfileModule { }