start create activity details page

Author: Emmanuelle BONOLI

src/app/app.routes.ts

@@ -1,9 +1,14 @@
 import { Routes } from '@angular/router';
 import { ActivitiesHomeComponent } from './features/activity/pages/activities-home/activities-home.component';
+import { ActivityDetailsComponent } from './features/activity/pages/activity-details/activity-details.component';
 
 export const routes: Routes = [
   {
     path: '',
     component: ActivitiesHomeComponent,
   },
+  {
+    path: 'activity/:id',
+    component: ActivityDetailsComponent,
+  },
 ];

src/app/features/activity/components/activity-card/activity-card.component.html

@@ -1,4 +1,4 @@
-<div class="card">
+<div class="card" [routerLink]="['/activity', activity.id]">
   <img class="activity-image" [src]="apiUrl + activity.image[0]" [alt]="activity.title" />
   <div class="description-card">
     <div class="header-description">

src/app/features/activity/components/activity-card/activity-card.component.ts

@@ -1,14 +1,15 @@
 import { Component, Input } from '@angular/core';
 import { Activity } from '../../models/activity.model';
+import { RouterLink } from '@angular/router';
 import { InscriptionBadgeComponent } from '../inscription-badge/inscription-badge.component';
 import { FavoriteHeartComponent } from '../favorite-heart/favorite-heart.component';
 import { environment } from 'src/environments/environment.development';
-import { TruncatePipe } from '../../../../common/Pipes/TruncateString.pipe';
+import { TruncatePipe } from '../../../../common/pipes/TruncateString.pipe';
 import { DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-activity-card',
-  imports: [InscriptionBadgeComponent, FavoriteHeartComponent, TruncatePipe, DatePipe],
+  imports: [InscriptionBadgeComponent, FavoriteHeartComponent, TruncatePipe, DatePipe, RouterLink],
   templateUrl: './activity-card.component.html',
   styleUrl: './activity-card.component.scss',
   standalone: true,

src/app/features/activity/pages/activity-details/activity-details.component.html

@@ -0,0 +1,8 @@
+<div class="activity-details-page">
+  <div class="activity">
+
+  </div>
+  <div class="association">
+
+  </div>
+</div>

src/app/features/activity/pages/activity-details/activity-details.component.scss

@@ -0,0 +1,14 @@
+.activity-details-page {
+  display: flex;
+  height: 80vh;
+
+  .activity {
+    width: 50%;
+    border: 1px solid black;
+  }
+
+  .association {
+    width: 50%;
+
+  }
+}

src/app/features/activity/pages/activity-details/activity-details.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActivityDetailsComponent } from './activity-details.component';
+
+describe('ActivityDetailsComponent', () => {
+  let component: ActivityDetailsComponent;
+  let fixture: ComponentFixture<ActivityDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ActivityDetailsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ActivityDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/activity/pages/activity-details/activity-details.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-activity-details',
+  imports: [],
+  templateUrl: './activity-details.component.html',
+  styleUrl: './activity-details.component.scss'
+})
+export class ActivityDetailsComponent {
+
+}