Create a modal window to open a new horizontal window providing access to the selected settings.
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
<div class="fixed inset-0 z-50 bg-[#f7f6f2] animate-slide-in ion-padding">
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user