From cf3aea320e6583efd1d98b38fc6d45dc7e211709 Mon Sep 17 00:00:00 2001
From: sanchezvem <mathys.sanchezvende@gmail.com>
Date: Wed, 15 Apr 2026 19:17:24 +0100
Subject: [PATCH] Create a modal window to open a new horizontal window
 providing access to the selected settings.

---
 src/app/components/modal/modal.component.html |  3 +
 src/app/components/modal/modal.component.scss |  8 ++
 src/app/components/modal/modal.component.ts   | 14 +++
 .../settings-options.component.html           |  9 +-
 .../settings-options.component.ts             | 25 ++----
 src/app/pages/home/home.component.html        | 88 +++++++++++++++----
 src/app/pages/home/home.component.ts          | 15 +++-
 7 files changed, 121 insertions(+), 41 deletions(-)
 create mode 100644 src/app/components/modal/modal.component.html
 create mode 100644 src/app/components/modal/modal.component.scss
 create mode 100644 src/app/components/modal/modal.component.ts

diff --git a/src/app/components/modal/modal.component.html b/src/app/components/modal/modal.component.html
new file mode 100644
index 0000000..ee932a3
--- /dev/null
+++ b/src/app/components/modal/modal.component.html
@@ -0,0 +1,3 @@
+<div class="fixed inset-0 z-50 bg-[#f7f6f2] animate-slide-in ion-padding">
+    <ng-content></ng-content>
+</div>
\ No newline at end of file
diff --git a/src/app/components/modal/modal.component.scss b/src/app/components/modal/modal.component.scss
new file mode 100644
index 0000000..aa798b2
--- /dev/null
+++ b/src/app/components/modal/modal.component.scss
@@ -0,0 +1,8 @@
+@keyframes slide-in {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+.animate-slide-in {
+  animation: slide-in 0.3s ease-out;
+}
\ No newline at end of file
diff --git a/src/app/components/modal/modal.component.ts b/src/app/components/modal/modal.component.ts
new file mode 100644
index 0000000..976dd2f
--- /dev/null
+++ b/src/app/components/modal/modal.component.ts
@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {IonicModule} from "@ionic/angular";
+
+@Component({
+    selector: 'app-modal',
+    templateUrl: './modal.component.html',
+    styleUrls: ['./modal.component.scss'],
+    imports: [
+        IonicModule
+    ]
+})
+export class ModalComponent {
+
+}
diff --git a/src/app/components/settings-options/settings-options.component.html b/src/app/components/settings-options/settings-options.component.html
index 186700d..e597db2 100644
--- a/src/app/components/settings-options/settings-options.component.html
+++ b/src/app/components/settings-options/settings-options.component.html
@@ -10,28 +10,29 @@
             } @else {
                 @switch (n) {
                     @case (1) {
-                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]">
+                        <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
+                                  (click)="navigate.emit('gallery')">
                             <p class="text-sm text-gray-600">Ma galerie</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>
                     }
                     @case (2) {
                         <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
-                                  (click)="updateProfileState(true)">
+                                  (click)="navigate.emit('profile')">
                             <p class="text-sm text-gray-600">Modifier mes informations</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>
                     }
                     @case (3) {
                         <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
-                                  (click)="updatePasswordState(true)">
+                                  (click)="navigate.emit('password')">
                             <p class="text-sm text-gray-600">Modifier mon mot de passe</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>
                     }
                     @case (4) {
                         <ion-item lines="full" class="transition-all duration-200 active:[--background:#DBD8D7]"
-                                  (click)="updateDesignationState(true)">
+                                  (click)="navigate.emit('designation')">
                             <p class="text-sm text-gray-600">Changer de désignation</p>
                             <ion-icon slot="end" class="text-xl text-gray-400" name="chevron"></ion-icon>
                         </ion-item>
diff --git a/src/app/components/settings-options/settings-options.component.ts b/src/app/components/settings-options/settings-options.component.ts
index e8f203c..95f990a 100644
--- a/src/app/components/settings-options/settings-options.component.ts
+++ b/src/app/components/settings-options/settings-options.component.ts
@@ -1,8 +1,9 @@
-import {Component, inject, signal} from '@angular/core';
+import {Component, inject, output} from '@angular/core';
 import {IonicModule, LoadingController, NavController} from "@ionic/angular";
 import {logOutOutline, chevronForwardOutline, chevronBack} from "ionicons/icons";
 import {addIcons} from "ionicons";
 import {AuthManageService} from "../../services/auth-manage";
+import {ModalComponent} from "../modal/modal.component";
 
 addIcons({
     'logout': logOutOutline,
@@ -15,7 +16,7 @@ addIcons({
     templateUrl: './settings-options.component.html',
     styleUrls: ['./settings-options.component.scss'],
     imports: [
-        IonicModule
+        IonicModule,
     ]
 })
 export class SettingsOptionsComponent {
@@ -25,23 +26,9 @@ export class SettingsOptionsComponent {
 
     options = [1, 2, 3, 4, 5];
 
-    profileState = signal<boolean>(false);
-    passwordState = signal<boolean>(false);
-    designationState = signal<boolean>(false);
+    navigate = output<'profile' | 'password' | 'designation' | 'gallery'>();
 
-    updateProfileState(state: boolean) {
-        this.profileState.set(state);
-    }
-
-    updatePasswordState(state: boolean) {
-        this.passwordState.set(state);
-    }
-
-    updateDesignationState(state: boolean) {
-        this.designationState.set(state);
-    }
-
-    async logOut(){
+    async logOut() {
         const loading = await this.loadCtrl.create({
             message: 'Déconnexion en cours...',
             spinner: 'lines-sharp-small'
@@ -53,4 +40,4 @@ export class SettingsOptionsComponent {
 
         await loading.dismiss();
     }
-}
+}
\ No newline at end of file
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 63ed2e7..a4f6601 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -38,28 +38,82 @@
     <ng-template>
         <ion-header>
             <ion-toolbar>
-                <ion-buttons slot="start" style="--ion-color-primary: #0054E9;">
-                    <ion-back-button default-href="" (click)="setOpen(false)"></ion-back-button>
+                <ion-buttons slot="start">
+                    <ion-button fill="clear" (click)="view == 'menu' ? setOpen(false) : backToMenu()">
+                        <ion-icon name="chevron-back"></ion-icon>
+                    </ion-button>
                 </ion-buttons>
-                <ion-title>Profil</ion-title>
+                <ion-title>
+                    @switch (view) {
+                        @case ('profile') {
+                            Modifier mon profil
+                        }
+                        @case ('password') {
+                            Mot de passe
+                        }
+                        @case ('designation') {
+                            Changer mon titre
+                        }
+                        @case ('gallery') {
+                            Ma Galerie
+                        }
+                        @default {
+                            Profil
+                        }
+                    }
+                </ion-title>
             </ion-toolbar>
         </ion-header>
-        <ion-content class="ion-padding m-1" style="--background: #f7f6f2;">
-            <app-generic-user-info [userInfo]="user()"></app-generic-user-info>
-            <div class="mt-4">
-                <app-title-part textInfo="Mes participations"></app-title-part>
-                <app-challenges-accomplished [userChallenges]="userChallenge()"></app-challenges-accomplished>
-            </div>
 
-            <div class="mt-4">
-                <app-title-part textInfo="Succès"></app-title-part>
-                <app-user-achievements [achievements]="userAchievement()"></app-user-achievements>
-            </div>
+        <ion-content class="ion-padding" style="--background: #f7f6f2;">
+            @switch (view) {
+                @case ('menu') {
+                    <app-generic-user-info [userInfo]="user()"></app-generic-user-info>
+                    <div class="mt-4">
+                        <app-title-part textInfo="Mes participations"></app-title-part>
+                        <app-challenges-accomplished
+                                [userChallenges]="userChallenge()"></app-challenges-accomplished>
+                    </div>
 
-            <div class="mt-4">
-                <app-title-part textInfo="Paramètres de compte"></app-title-part>
-                <app-settings-options></app-settings-options>
-            </div>
+                    <div class="mt-4">
+                        <app-title-part textInfo="Succès"></app-title-part>
+                        <app-user-achievements [achievements]="userAchievement()"></app-user-achievements>
+                    </div>
+
+                    <div class="mt-4">
+                        <app-title-part textInfo="Paramètres de compte"></app-title-part>
+                        <app-settings-options (navigate)="setView($event)"></app-settings-options>
+                    </div>
+                }
+                @case ('profile') {
+                    <app-modal>
+                        <div class="p-4">
+                            <p>Formulaire profil</p>
+                        </div>
+                    </app-modal>
+                }
+                @case ('password') {
+                    <app-modal>
+                        <div class="p-4">
+                            <p>Formulaire password</p>
+                        </div>
+                    </app-modal>
+                }
+                @case ('designation') {
+                    <app-modal>
+                        <div class="p-4">
+                            <p>Formulaire designation</p>
+                        </div>
+                    </app-modal>
+                }
+                @case ('gallery') {
+                    <app-modal>
+                        <div class="p-4">
+                            <p>Photos</p>
+                        </div>
+                    </app-modal>
+                }
+            }
         </ion-content>
     </ng-template>
 </ion-modal>
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index 66f346e..22430b7 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -20,6 +20,7 @@ import {
     ChallengesAccomplishedComponent
 } from "../../components/challenges-accomplished/challenges-accomplished.component";
 import {UserAchievementsComponent} from "../../components/user-achievements/user-achievements.component";
+import {ModalComponent} from "../../components/modal/modal.component";
 
 addIcons({
     'profile': personOutline,
@@ -27,6 +28,8 @@ addIcons({
     'settings': settingsOutline,
 });
 
+type View = 'menu' | 'profile' | 'password' | 'designation' | 'gallery';
+
 @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
@@ -38,7 +41,8 @@ addIcons({
         SettingsOptionsComponent,
         GenericUserInfoComponent,
         ChallengesAccomplishedComponent,
-        UserAchievementsComponent
+        UserAchievementsComponent,
+        ModalComponent
     ]
 })
 export class HomeComponent implements OnInit {
@@ -54,6 +58,15 @@ export class HomeComponent implements OnInit {
     userAchievement = signal<GetAchievementDto[]>([])
 
     isModalOpen = false;
+    view: View = 'menu';
+
+    setView(choice: View) {
+        this.view = choice;
+    }
+
+    backToMenu() {
+        this.view = 'menu';
+    }
 
     async ngOnInit() {
         try {