create reusable toggle navigation && change primary color ngPrime for our primary color

Author: Emmanuelle BONOLI

src/app/app.component.scss

@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  white-space: pre-line;
 
   .push-footer {
     flex-grow: 1;

src/app/app.config.ts

@@ -7,7 +7,7 @@ import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
 import { providePrimeNG } from 'primeng/config';
 import { activitiesReducer } from './features/activity/store/activities.reducers';
-import Aura from '@primeng/themes/aura';
+import { myPreset } from './mytheme';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -19,7 +19,7 @@ export const appConfig: ApplicationConfig = {
     provideStoreDevtools({ maxAge: 25 }),
     providePrimeNG({
       theme: {
-        preset: Aura,
+        preset: myPreset,
       },
     }),
   ],

src/app/common/components/toggle-menu/toggle-menu.component.html

@@ -0,0 +1,7 @@
+<p-tabs [(value)]="activeTabValue">
+  <p-tablist>
+    @for (tab of tabs; track $index) {
+      <p-tab [value]="tab" (click)="updateNavigation($index)">{{ tab }}</p-tab>
+    }
+  </p-tablist>
+</p-tabs>

src/app/common/components/toggle-menu/toggle-menu.component.scss

@@ -0,0 +1,12 @@
+p-tablist::ng-deep {
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+p-tab:first-child::ng-deep {
+  border-radius: 5px 0 0 5px;
+}
+
+p-tab:last-child::ng-deep {
+  border-radius: 0 5px 5px 0;
+}

src/app/common/components/toggle-menu/toggle-menu.component.ts

@@ -0,0 +1,22 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Tab, TabList, Tabs } from 'primeng/tabs';
+
+const ZERO: number = 0;
+
+@Component({
+  selector: 'app-toggle-menu',
+  imports: [Tabs, TabList, Tab],
+  templateUrl: './toggle-menu.component.html',
+  styleUrl: './toggle-menu.component.scss',
+})
+export class ToggleMenuComponent {
+  @Input() tabs!: string[];
+  @Output() chosenTab: EventEmitter<string> = new EventEmitter<string>();
+
+  activeTabValue: number = ZERO;
+
+  updateNavigation(tabIndex: number): void {
+    this.activeTabValue = tabIndex;
+    this.chosenTab.emit(this.tabs[tabIndex]);
+  }
+}

…/app/common/Pipes/TruncateString.pipe.ts …/app/common/pipes/TruncateString.pipe.tssrc/app/common/Pipes/TruncateString.pipe.ts renamed to src/app/common/pipes/TruncateString.pipe.ts src/app/common/Pipes/TruncateString.pipe.ts renamed to src/app/common/pipes/TruncateString.pipe.ts

@@ -1,5 +1,20 @@
 <div class="activities-home">
-  @for (activity of activities$ | async; track activity.id) {
-    <app-activity-card [activity]="activity"></app-activity-card>
-  }
+  <div class="search-activities">
+    <!--TODO: rajouter ici composant qui regroupe les input de recherche pour la page activities-->
+  </div>
+
+  <div class="cards-and-map">
+    <div class="cards-activities" [ngClass]="chosenNavigation !== 'Liste' ? 'hidden' : ''">
+      @for (activity of activities$ | async; track activity.id) {
+        <app-activity-card [activity]="activity"></app-activity-card>
+      }
+    </div>
+    <div class="map-activities" [ngClass]="chosenNavigation !== 'Carte' ? 'hidden' : ''">
+      <!--TODO: rajouter ici composant map pour la page activities-->
+    </div>
+  </div>
+
+  <div class="switch-map">
+    <app-toggle-menu [tabs]="navigationItems" (chosenTab)="handleNavigation($event)"></app-toggle-menu>
+  </div>
 </div>

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

@@ -1,6 +1,54 @@
 .activities-home {
   display: flex;
+  flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-around;
   background-color: var(--background-color-light);
+  width: 100vw;
+  height: 80vh;
+  position: relative;
+
+  .search-activities {
+    border: 1px solid black;
+    height: 150px;
+  }
+
+  .cards-and-map {
+    display: flex;
+    width: 100%;
+
+    .cards-activities {
+      width: 50%;
+      display: flex;
+      justify-content: space-around;
+      flex-wrap: wrap;
+    }
+
+    .map-activities {
+      width: 50%;
+      border: 1px solid black;
+      flex-grow: 1;
+      height: 50vh;
+    }
+
+    @media screen and (max-width: 901px) {
+      .hidden {
+        display: none;
+      }
+    }
+  }
+
+  .switch-map {
+    display: none;
+  }
+
+  @media screen and (max-width: 901px) {
+    .switch-map {
+      display: initial;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
 }

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

@@ -3,11 +3,12 @@ import { ActivityCardComponent } from '../../components/activity-card/activity-c
 import { ActivityFacadeService } from '../../services/activity-facade.service';
 import { Activity } from '../../models/activity.model';
 import { Observable } from 'rxjs';
-import { AsyncPipe } from '@angular/common';
+import { AsyncPipe, NgClass } from '@angular/common';
+import { ToggleMenuComponent } from '../../../../common/components/toggle-menu/toggle-menu.component';
 
 @Component({
   selector: 'app-activities-home',
-  imports: [ActivityCardComponent, AsyncPipe],
+  imports: [ActivityCardComponent, AsyncPipe, ToggleMenuComponent, NgClass],
   templateUrl: './activities-home.component.html',
   styleUrl: './activities-home.component.scss',
   standalone: true,
@@ -17,7 +18,14 @@ export class ActivitiesHomeComponent implements OnInit {
 
   activities$: Observable<Activity[]> = this.activityFacadeService.activities$;
 
+  navigationItems: string[] = ['Liste', 'Carte'];
+  chosenNavigation: string = 'Liste';
+
   ngOnInit(): void {
     this.activityFacadeService.getAllActivities();
   }
+
+  handleNavigation(title: string): void {
+    this.chosenNavigation = title;
+  }
 }

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

@@ -3,7 +3,7 @@ header {
   justify-content: space-between;
   align-items: center;
   padding: 0 1% 0 1%;
-  margin-bottom: 4%;
+  margin-bottom: 1%;
   color: var(--primary-dark-color);
   box-shadow: var(--box-shadow);