feat: create inscription badge

Author: SebastienDechand

public/activities/tempActivitiesData.json

@@ -69,7 +69,7 @@
     "location": "Marseille",
     "date": "2024-12-15",
     "participants": {
-      "current": 3,
+      "current": 10,
       "max": 10
     },
     "theme": ["Nature"],

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

@@ -3,7 +3,9 @@
   <div class="description-card">
     <div class="header-description">
       <h3>{{ activity.title }}</h3>
-      <div>Badge volonteers</div>
+      @if (activity) {
+        <app-inscription-badge [activity]="activity"></app-inscription-badge>
+      }
       <!-- TODO: changer pour le composant réutilisable -->
     </div>
     <div>

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

@@ -12,6 +12,7 @@
     .header-description {
       display: flex;
       justify-content: space-between;
+      align-items: center;
     }
 
     .info-asso {

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

@@ -1,11 +1,13 @@
 import { Component, Input } from '@angular/core';
 import { Activity } from '../../models/activity.model';
+import { InscriptionBadgeComponent } from '../inscription-badge/inscription-badge.component';
 
 @Component({
   selector: 'app-activity-card',
-  imports: [],
+  imports: [InscriptionBadgeComponent],
   templateUrl: './activity-card.component.html',
   styleUrl: './activity-card.component.scss',
+  standalone: true,
 })
 export class ActivityCardComponent {
   @Input() activity!: Activity;

src/app/features/activity/components/inscription-badge/inscription-badge.component.html

@@ -0,0 +1,9 @@
+@if (activity && activity.participants) {
+  <div class="badge-container">
+    @if (activity.participants.current === activity.participants.max) {
+      <p class="badge full">Complet</p>
+    } @else {
+      <p class="badge">{{ activity.participants.current }} / {{ activity.participants.max }} pers.</p>
+    }
+  </div>
+}

src/app/features/activity/components/inscription-badge/inscription-badge.component.scss

@@ -0,0 +1,21 @@
+.badge-container {
+  width: 75px;
+  height: 30px;
+  .badge {
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: auto;
+    text-align: center;
+    width: 75px;
+    height: 30px;
+    background-color: var(--secondaryValidateColor);
+    color: white;
+    font-size: var(--fontSizePMini);
+    font-family: var(--fontFamilyP);
+    &.full {
+      background-color: var(--secondaryCompleteColor);
+    }
+  }
+}

src/app/features/activity/components/inscription-badge/inscription-badge.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { Activity } from '../../models/activity.model';
+
+@Component({
+  selector: 'app-inscription-badge',
+  standalone: true,
+  imports: [],
+  templateUrl: './inscription-badge.component.html',
+  styleUrl: './inscription-badge.component.scss',
+})
+export class InscriptionBadgeComponent {
+  @Input() activity!: Activity;
+}

src/app/features/activity/models/activity.model.ts

@@ -19,7 +19,7 @@ export class Activity {
   organization: Organization = { name: '', logo: '', isFollow: false };
   location: string = '';
   date: Date = new Date();
-  participant: Participant = { current: 0, max: 10 };
+  participants: Participant = { current: 0, max: 10 };
   theme: Theme[];
   isFavorite: boolean = false;
 
@@ -31,7 +31,7 @@ export class Activity {
     this.organization = data.organization || { name: '', logo: '', isFollow: false };
     this.location = data.location || '';
     this.date = data.date || new Date();
-    this.participant = data.participant || { current: 0, max: 10 };
+    this.participants = data.participants || { current: 0, max: 10 };
     this.theme = data.theme || [];
     this.isFavorite = data.isFavorite || false;
   }

src/app/features/activity/pages/activities-home/activities-home.component.ts

@@ -10,6 +10,7 @@ import { AsyncPipe } from '@angular/common';
   imports: [ActivityCardComponent, AsyncPipe],
   templateUrl: './activities-home.component.html',
   styleUrl: './activities-home.component.scss',
+  standalone: true,
 })
 export class ActivitiesHomeComponent implements OnInit {
   activityFacadeService: ActivityFacadeService = inject(ActivityFacadeService);

src/app/features/activity/services/activities-api.service.ts

@@ -1,6 +1,6 @@
-import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable, tap } from 'rxjs';
+import { Injectable, inject } from '@angular/core';
+import { Observable } from 'rxjs';
 import { Activity } from '../models/activity.model';
 
 @Injectable({
@@ -11,6 +11,6 @@ export class ActivitiesApiService {
 
   getAllActivities(): Observable<Activity[]> {
     // return this._http.get<Activity[]>("/activities");
-    return this._http.get<Activity[]>('/activities/tempActivitiesData.json').pipe(tap((activities: Activity[]) => console.log(activities)));
+    return this._http.get<Activity[]>('/activities/tempActivitiesData.json');
   }
 }