technostrea/trouvetonprofile
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refacto page mon profile

Browse Source
This commit is contained in:
styve Lioumba
2025-11-15 17:30:09 +01:00
parent 620b781219
commit b669190bce
29 changed files with 1702 additions and 743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/app/shared/features/update-user/update-user.component.html
View File

@@ -1,38 +1,53 @@
<div class="flex w-full justify-between items-center mb-6">
<span
(click)="isCancelEditMode.emit(true)"
class="cursor-pointer px-3 py-3 text-white bg-purple-600 w-max flex space-x-2 items-center rounded-full justify-center"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
fill-rule="evenodd"
d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
clip-rule="evenodd"
/>
</svg>
<small>Terminer</small>
</span>
<span
(click)="isCancelEditMode.emit(true)"
class="cursor-pointer px-3 py-3 text-white bg-red-600 w-max flex space-x-2 items-center rounded-full justify-center"
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
fill-rule="evenodd"
d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm2.78-4.22a.75.75 0 0 1-1.06 0L8 9.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 0 1 1.06-1.06L8 6.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L9.06 8l1.72 1.72a.75.75 0 0 1 0 1.06Z"
clip-rule="evenodd"
/>
</svg>
<small>Annuler</small>
</span>
</div>
@if (user != undefined) {
<div class="w-full flex flex-col space-y-4">
<app-user-avatar-form [user]="user" />
<app-user-form [user]="user" />
<div class="space-y-6">
<!-- Section Avatar -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in">
<div class="flex items-center gap-3 mb-6">
<div
class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-indigo-600 dark:text-indigo-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
clip-rule="evenodd"
/>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Photo de profil</h3>
</div>
<app-user-avatar-form [user]="user" />
</div>
<!-- Section Informations utilisateur -->
<div
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in animation-delay-100"
>
<div class="flex items-center gap-3 mb-6">
<div
class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="w-6 h-6 text-purple-600 dark:text-purple-400"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
clip-rule="evenodd"
/>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Informations personnelles</h3>
</div>
<app-user-form [user]="user" />
</div>
</div>
}

30
src/app/shared/features/update-user/update-user.component.scss
View File

@@ -0,0 +1,30 @@
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.6s ease-out;
}
.animation-delay-100 {
animation-delay: 0.1s;
opacity: 0;
animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

4
src/app/shared/features/update-user/update-user.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input, output } from '@angular/core';
import { Component, Input } from '@angular/core';
import { User } from '@app/shared/models/user';
import { UserFormComponent } from '@app/shared/components/user-form/user-form.component';
import { UserAvatarFormComponent } from '@app/shared/components/user-avatar-form/user-avatar-form.component';
@@ -12,6 +12,4 @@ import { UserAvatarFormComponent } from '@app/shared/components/user-avatar-form
})
export class UpdateUserComponent {
@Input({ required: true }) user: User | undefined = undefined;
onFormSubmitted = output<any>();
isCancelEditMode = output<boolean>();
}