refacto
This commit is contained in:
@@ -10,14 +10,13 @@ describe('AppComponent', () => {
|
||||
let component: AppComponent;
|
||||
let fixture: ComponentFixture<AppComponent>;
|
||||
|
||||
let mockAuthRepository: jest.Mocked<AuthRepository>;
|
||||
let mockProfileRepo: jest.Mocked<ProfileRepository>;
|
||||
let mockAuthRepository: jest.Mocked<Partial<AuthRepository>>;
|
||||
let mockProfileRepo: jest.Mocked<Partial<ProfileRepository>>;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockAuthRepository = {
|
||||
get: jest.fn(),
|
||||
login: jest.fn(),
|
||||
update: jest.fn(),
|
||||
sendVerificationEmail: jest.fn(),
|
||||
logout: jest.fn(),
|
||||
isAuthenticated: jest.fn(),
|
||||
|
||||
@@ -10,8 +10,8 @@ import { PROFILE_REPOSITORY_TOKEN } from '@app/infrastructure/profiles/profile-r
|
||||
describe('authGuard', () => {
|
||||
let mockRouter: Partial<Router>;
|
||||
|
||||
let mockAuthRepository: jest.Mocked<AuthRepository>;
|
||||
let mockProfileRepo: jest.Mocked<ProfileRepository>;
|
||||
let mockAuthRepository: jest.Mocked<Partial<AuthRepository>>;
|
||||
let mockProfileRepo: jest.Mocked<Partial<ProfileRepository>>;
|
||||
|
||||
const executeGuard: CanActivateFn = (...guardParameters) =>
|
||||
TestBed.runInInjectionContext(() => authGuard(...guardParameters));
|
||||
@@ -24,7 +24,6 @@ describe('authGuard', () => {
|
||||
mockAuthRepository = {
|
||||
get: jest.fn(),
|
||||
login: jest.fn(),
|
||||
update: jest.fn(),
|
||||
sendVerificationEmail: jest.fn(),
|
||||
logout: jest.fn(),
|
||||
isAuthenticated: jest.fn(),
|
||||
|
||||
@@ -57,55 +57,61 @@
|
||||
</div>
|
||||
|
||||
<!-- Avatar et info principale -->
|
||||
<div class="relative -mt-16 md:-mt-20 px-4 md:px-8 pb-6">
|
||||
<div class="relative -mt-16 md:-mt-22 px-4 md:px-8 pb-6">
|
||||
<div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6">
|
||||
<!-- Avatar avec bouton edit -->
|
||||
<div class="relative group animate-slide-up">
|
||||
<div
|
||||
class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300"
|
||||
>
|
||||
<div class="w-full h-full rounded-full overflow-hidden bg-white">
|
||||
@if (user().avatar) {
|
||||
<img
|
||||
alt="{{ user().username }}"
|
||||
class="object-cover w-full h-full"
|
||||
src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{
|
||||
user().avatar
|
||||
}}"
|
||||
/>
|
||||
} @else {
|
||||
<img
|
||||
alt="{{ user().username }}"
|
||||
class="object-cover w-full h-full"
|
||||
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user().username }}"
|
||||
/>
|
||||
}
|
||||
@if (user() != undefined) {
|
||||
<div class="relative group animate-slide-up">
|
||||
<div
|
||||
class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300"
|
||||
>
|
||||
<div class="w-full h-full rounded-full overflow-hidden bg-white">
|
||||
@if (user()!.avatar) {
|
||||
<img
|
||||
alt="{{ user()!.username }}"
|
||||
class="object-cover w-full h-full"
|
||||
src="{{ environment.baseUrl }}/api/files/users/{{ user()!.id }}/{{
|
||||
user()!.avatar
|
||||
}}"
|
||||
/>
|
||||
} @else {
|
||||
<img
|
||||
alt="{{ user()!.username }}"
|
||||
class="object-cover w-full h-full"
|
||||
src="https://api.dicebear.com/9.x/adventurer/svg?seed={{
|
||||
user()!.username
|
||||
}}"
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Nom et titre -->
|
||||
<div
|
||||
class="flex-1 text-center md:text-left mb-4 md:mb-0 animate-slide-up animation-delay-100"
|
||||
>
|
||||
@if (user().name) {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user().name }}
|
||||
</h1>
|
||||
} @else if (user().username) {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user().username }}
|
||||
</h1>
|
||||
} @else {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user().email }}
|
||||
</h1>
|
||||
}
|
||||
@if (user() != undefined) {
|
||||
<div
|
||||
class="flex-1 text-center md:text-left mb-4 mt-4 md:mb-0 animate-slide-up animation-delay-100"
|
||||
>
|
||||
@if (user()!.name) {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user()!.name }}
|
||||
</h1>
|
||||
} @else if (user()!.username) {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user()!.username }}
|
||||
</h1>
|
||||
} @else {
|
||||
<h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
|
||||
{{ user()!.email }}
|
||||
</h1>
|
||||
}
|
||||
|
||||
<p class="text-lg md:text-xl text-indigo-600 dark:text-indigo-400 font-semibold">
|
||||
{{ profile().profession | uppercase }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-lg md:text-xl text-indigo-600 dark:text-indigo-400 font-semibold">
|
||||
{{ profile().profession | uppercase }}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -115,30 +121,32 @@
|
||||
<!-- Sidebar - Informations -->
|
||||
<aside class="lg:col-span-1 space-y-6 animate-slide-up animation-delay-200">
|
||||
<!-- Card Apropos -->
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<h3
|
||||
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
|
||||
@if (profile().apropos) {
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-indigo-500"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
<h3
|
||||
class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
À propos
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
|
||||
{{ profile().apropos }}
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-indigo-500"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
À propos
|
||||
</h3>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
|
||||
{{ profile().apropos }}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Card Bio -->
|
||||
<div
|
||||
@@ -318,7 +326,11 @@
|
||||
<div class="tab-content">
|
||||
@switch (menu().toLowerCase()) {
|
||||
@case ('home') {
|
||||
<app-update-user [user]="user()" />
|
||||
@if (!userLoading().isLoading) {
|
||||
<app-update-user [user]="user()" />
|
||||
} @else {
|
||||
<app-loading message="Chargement encours..." />
|
||||
}
|
||||
}
|
||||
@case ('projects') {
|
||||
<app-my-profile-project-list
|
||||
@@ -334,7 +346,11 @@
|
||||
<app-pdf-viewer [profile]="profile()" />
|
||||
}
|
||||
@default {
|
||||
<app-update-user [user]="user()" />
|
||||
@if (!userLoading().isLoading) {
|
||||
<app-update-user [user]="user()" />
|
||||
} @else {
|
||||
<app-loading message="Chargement encours..." />
|
||||
}
|
||||
}
|
||||
}
|
||||
</div>
|
||||
|
||||
@@ -15,8 +15,8 @@ describe('MyProfileComponent', () => {
|
||||
let fixture: ComponentFixture<MyProfileComponent>;
|
||||
|
||||
let mockProfileRepo: ProfileRepository;
|
||||
let mockUserRepo: UserRepository;
|
||||
let mockToastrService: Partial<ToastrService>;
|
||||
let mockUserRepo: Partial<UserRepository>;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockProfileRepo = {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, computed, inject, OnInit, signal } from '@angular/core';
|
||||
import { Component, inject, OnInit, signal } from '@angular/core';
|
||||
import { ActivatedRoute, RouterOutlet } from '@angular/router';
|
||||
import { User } from '@app/domain/users/user.model';
|
||||
import { Location, UpperCasePipe } from '@angular/common';
|
||||
@@ -11,6 +11,8 @@ import { MyProfileProjectListComponent } from '@app/shared/components/my-profile
|
||||
import { MyProfileUpdateFormComponent } from '@app/shared/components/my-profile-update-form/my-profile-update-form.component';
|
||||
import { PdfViewerComponent } from '@app/shared/features/pdf-viewer/pdf-viewer.component';
|
||||
import { ProfileFacade } from '@app/ui/profiles/profile.facade';
|
||||
import { UserFacade } from '@app/ui/users/user.facade';
|
||||
import { LoadingComponent } from '@app/shared/components/loading/loading.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-my-profile',
|
||||
@@ -24,7 +26,9 @@ import { ProfileFacade } from '@app/ui/profiles/profile.facade';
|
||||
MyProfileUpdateFormComponent,
|
||||
PdfViewerComponent,
|
||||
UpperCasePipe,
|
||||
LoadingComponent,
|
||||
],
|
||||
providers: [UserFacade],
|
||||
templateUrl: './my-profile.component.html',
|
||||
styleUrl: './my-profile.component.scss',
|
||||
})
|
||||
@@ -33,17 +37,14 @@ export class MyProfileComponent implements OnInit {
|
||||
protected readonly environment = environment;
|
||||
protected menu = signal<string>('home');
|
||||
|
||||
protected myProfileQrCode = `${environment.production}`;
|
||||
|
||||
protected location = inject(Location);
|
||||
protected readonly route = inject(ActivatedRoute);
|
||||
|
||||
protected extraData: { user: User } = this.route.snapshot.data['user'];
|
||||
|
||||
protected user = computed(() => {
|
||||
if (this.extraData != undefined) return this.extraData.user;
|
||||
return {} as User;
|
||||
});
|
||||
private readonly userFacade = inject(UserFacade);
|
||||
protected user = this.userFacade.user;
|
||||
protected readonly userLoading = this.userFacade.loading;
|
||||
|
||||
private readonly profileFacade = new ProfileFacade();
|
||||
protected profile = this.profileFacade.profile;
|
||||
@@ -51,7 +52,9 @@ export class MyProfileComponent implements OnInit {
|
||||
protected readonly error = this.profileFacade.error;
|
||||
|
||||
ngOnInit(): void {
|
||||
this.myProfileQrCode = `${this.myProfileQrCode}/profiles/${this.user().id}`;
|
||||
this.profileFacade.loadOne(this.user().id);
|
||||
if (this.extraData != undefined) {
|
||||
this.profileFacade.loadOne(this.extraData.user.id);
|
||||
this.userFacade.loadOne(this.extraData.user.id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,30 +207,32 @@
|
||||
<!-- Colonne droite - À propos et Projets -->
|
||||
<div class="lg:col-span-2 space-y-6 animate-slide-up animation-delay-300">
|
||||
<!-- Card À propos -->
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<h2
|
||||
class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2"
|
||||
@if (profile().apropos) {
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-indigo-500"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
<h2
|
||||
class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
À propos
|
||||
</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
|
||||
{{ profile().apropos }}
|
||||
</p>
|
||||
</div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-indigo-500"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
À propos
|
||||
</h2>
|
||||
<p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
|
||||
{{ profile().apropos }}
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Card Projets -->
|
||||
<div
|
||||
|
||||
@@ -16,11 +16,11 @@ describe('MyProfileUpdateProjectFormComponent', () => {
|
||||
let component: MyProfileUpdateProjectFormComponent;
|
||||
let fixture: ComponentFixture<MyProfileUpdateProjectFormComponent>;
|
||||
|
||||
let mockToastrService: Partial<ToastrService>;
|
||||
let mockProjectRepository: jest.Mocked<ProjectRepository>;
|
||||
let mockToastrService: jest.Mocked<Partial<ToastrService>>;
|
||||
let mockProjectRepository: jest.Mocked<Partial<ProjectRepository>>;
|
||||
|
||||
let mockAuthRepository: jest.Mocked<AuthRepository>;
|
||||
let mockProfileRepo: jest.Mocked<ProfileRepository>;
|
||||
let mockAuthRepository: jest.Mocked<Partial<AuthRepository>>;
|
||||
let mockProfileRepo: jest.Mocked<Partial<ProfileRepository>>;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockToastrService = {
|
||||
@@ -38,7 +38,6 @@ describe('MyProfileUpdateProjectFormComponent', () => {
|
||||
mockAuthRepository = {
|
||||
get: jest.fn(),
|
||||
login: jest.fn(),
|
||||
update: jest.fn(),
|
||||
sendVerificationEmail: jest.fn(),
|
||||
logout: jest.fn(),
|
||||
isAuthenticated: jest.fn(),
|
||||
|
||||
@@ -14,10 +14,10 @@ import { ProfileRepository } from '@app/domain/profiles/profile.repository';
|
||||
describe('NavBarComponent', () => {
|
||||
let component: NavBarComponent;
|
||||
let fixture: ComponentFixture<NavBarComponent>;
|
||||
let mockThemeService: Partial<ThemeService>;
|
||||
let mockThemeService: jest.Mocked<Partial<ThemeService>>;
|
||||
|
||||
let mockAuthRepository: jest.Mocked<AuthRepository>;
|
||||
let mockProfileRepo: jest.Mocked<ProfileRepository>;
|
||||
let mockAuthRepository: jest.Mocked<Partial<AuthRepository>>;
|
||||
let mockProfileRepo: jest.Mocked<Partial<ProfileRepository>>;
|
||||
|
||||
const user: User = {
|
||||
id: 'adbc123',
|
||||
@@ -41,7 +41,6 @@ describe('NavBarComponent', () => {
|
||||
mockAuthRepository = {
|
||||
get: jest.fn(),
|
||||
login: jest.fn(),
|
||||
update: jest.fn(),
|
||||
sendVerificationEmail: jest.fn(),
|
||||
logout: jest.fn(),
|
||||
isAuthenticated: jest.fn(),
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { Component, inject, Input } from '@angular/core';
|
||||
import { JsonPipe } from '@angular/common';
|
||||
import { ThemeService } from '@app/core/services/theme/theme.service';
|
||||
import { UntilDestroy } from '@ngneat/until-destroy';
|
||||
|
||||
@Component({
|
||||
selector: 'app-reseaux',
|
||||
standalone: true,
|
||||
imports: [JsonPipe],
|
||||
imports: [],
|
||||
templateUrl: './reseaux.component.html',
|
||||
styleUrl: './reseaux.component.scss',
|
||||
})
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
<ng-template #content>
|
||||
@if (user) {
|
||||
@if (user != undefined) {
|
||||
<div
|
||||
class="w-40 h-40 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400"
|
||||
>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, effect, inject, Input, output, signal } from '@angular/core';
|
||||
import { Component, effect, inject, Input, signal } from '@angular/core';
|
||||
import { User } from '@app/domain/users/user.model';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { environment } from '@env/environment';
|
||||
@@ -7,21 +7,24 @@ import { ToastrService } from 'ngx-toastr';
|
||||
import { UserFacade } from '@app/ui/users/user.facade';
|
||||
import { ActionType } from '@app/domain/action-type.util';
|
||||
import { LoadingComponent } from '@app/shared/components/loading/loading.component';
|
||||
import { UntilDestroy } from '@ngneat/until-destroy';
|
||||
import { UserViewModel } from '@app/ui/users/user.presenter.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user-avatar-form',
|
||||
standalone: true,
|
||||
providers: [UserFacade],
|
||||
imports: [ReactiveFormsModule, NgClass, NgTemplateOutlet, LoadingComponent],
|
||||
templateUrl: './user-avatar-form.component.html',
|
||||
styleUrl: './user-avatar-form.component.scss',
|
||||
})
|
||||
@UntilDestroy()
|
||||
export class UserAvatarFormComponent {
|
||||
private readonly toastrService = inject(ToastrService);
|
||||
protected readonly environment = environment;
|
||||
private readonly facade = inject(UserFacade);
|
||||
@Input({ required: true }) user: User | undefined = undefined;
|
||||
|
||||
onFormSubmitted = output<any>();
|
||||
@Input({ required: true }) user: UserViewModel | undefined = undefined;
|
||||
|
||||
file: File | null = null; // Variable to store file
|
||||
imagePreviewUrl: string | null = null; // URL for image preview
|
||||
@@ -34,13 +37,13 @@ export class UserAvatarFormComponent {
|
||||
let message = '';
|
||||
|
||||
effect(() => {
|
||||
if (!this.loading().isLoading && this.onSubmitted()) {
|
||||
if (!this.loading().isLoading) {
|
||||
switch (this.loading().action) {
|
||||
case ActionType.UPDATE:
|
||||
message = `Votre photo de profile a bien été modifier !`;
|
||||
this.customToast(ActionType.UPDATE, message);
|
||||
this.onSubmitted.set(false);
|
||||
this.onFormSubmitted.emit('');
|
||||
if (this.onSubmitted()) {
|
||||
this.customToast(ActionType.UPDATE, message);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -52,7 +55,7 @@ export class UserAvatarFormComponent {
|
||||
const formData = new FormData();
|
||||
formData.append('avatar', this.file); // "avatar" est le nom du champ dans PocketBase
|
||||
|
||||
this.facade.update(this.user?.id!, formData as Partial<User>);
|
||||
this.facade.update(this.user!.id, formData as Partial<User>);
|
||||
this.onSubmitted.set(true);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Component, effect, inject, Input, OnInit, output, signal } from '@angular/core';
|
||||
import { Component, effect, inject, Input, OnInit, signal } from '@angular/core';
|
||||
import {
|
||||
FormBuilder,
|
||||
FormControl,
|
||||
@@ -18,6 +18,7 @@ import { NgTemplateOutlet } from '@angular/common';
|
||||
selector: 'app-user-form',
|
||||
standalone: true,
|
||||
imports: [ReactiveFormsModule, LoadingComponent, NgTemplateOutlet],
|
||||
providers: [UserFacade],
|
||||
templateUrl: './user-form.component.html',
|
||||
styleUrl: './user-form.component.scss',
|
||||
})
|
||||
@@ -27,12 +28,12 @@ export class UserFormComponent implements OnInit {
|
||||
private readonly facade = inject(UserFacade);
|
||||
protected readonly ActionType = ActionType;
|
||||
|
||||
@Input({ required: true }) user: User | undefined = undefined;
|
||||
onFormSubmitted = output<any>();
|
||||
@Input({ required: true }) userId: string | undefined = undefined;
|
||||
|
||||
private fb = inject(FormBuilder);
|
||||
protected userForm!: FormGroup;
|
||||
|
||||
protected readonly user = this.facade.user;
|
||||
protected readonly loading = this.facade.loading;
|
||||
protected readonly error = this.facade.error;
|
||||
protected onSubmitted = signal<boolean>(false);
|
||||
@@ -41,23 +42,32 @@ export class UserFormComponent implements OnInit {
|
||||
let message = '';
|
||||
|
||||
effect(() => {
|
||||
if (!this.loading().isLoading && this.onSubmitted()) {
|
||||
if (!this.loading().isLoading) {
|
||||
switch (this.loading().action) {
|
||||
case ActionType.UPDATE:
|
||||
message = `Vos informations personnelles ont bien été modifier !`;
|
||||
this.customToast(ActionType.UPDATE, message);
|
||||
this.onSubmitted.set(false);
|
||||
if (this.onSubmitted()) {
|
||||
this.customToast(ActionType.UPDATE, message);
|
||||
}
|
||||
break;
|
||||
case ActionType.READ:
|
||||
this.userForm.setValue({
|
||||
firstname: this.user().name.split(' ').slice(0, -1).join(' ') ?? '',
|
||||
name: this.user().name.split(' ').slice(-1)[0] ?? '',
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
ngOnInit(): void {
|
||||
if (this.userId !== undefined) {
|
||||
this.facade.loadOne(this.userId!);
|
||||
}
|
||||
|
||||
this.userForm = this.fb.group({
|
||||
firstname: new FormControl(this.user?.name?.split(' ').slice(0, -1).join(' ') ?? '', [
|
||||
Validators.required,
|
||||
]),
|
||||
name: new FormControl(this.user?.name?.split(' ').slice(-1)[0] ?? '', [Validators.required]),
|
||||
firstname: new FormControl('', [Validators.required]),
|
||||
name: new FormControl('', [Validators.required]),
|
||||
});
|
||||
}
|
||||
|
||||
@@ -72,9 +82,7 @@ export class UserFormComponent implements OnInit {
|
||||
name: this.userForm.getRawValue()!.firstname! + ' ' + this.userForm.getRawValue()!.name!,
|
||||
} as User;
|
||||
|
||||
this.facade.update(this.user?.id!, data);
|
||||
|
||||
this.onFormSubmitted.emit(data);
|
||||
this.facade.update(this.userId!, data);
|
||||
this.onSubmitted.set(true);
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,7 @@ import { UserFacade } from '@app/ui/users/user.facade';
|
||||
@Component({
|
||||
selector: 'app-vertical-profile-item',
|
||||
standalone: true,
|
||||
providers: [UserFacade],
|
||||
imports: [ChipsComponent, ReseauxComponent, RouterLink],
|
||||
templateUrl: './vertical-profile-item.component.html',
|
||||
styleUrl: './vertical-profile-item.component.scss',
|
||||
|
||||
@@ -15,8 +15,8 @@ describe('LoginComponent', () => {
|
||||
|
||||
// Mocks des services
|
||||
let mockToastrService: Partial<ToastrService>;
|
||||
let mockAuthRepository: jest.Mocked<AuthRepository>;
|
||||
let mockProfileRepo: jest.Mocked<ProfileRepository>;
|
||||
let mockAuthRepository: jest.Mocked<Partial<AuthRepository>>;
|
||||
let mockProfileRepo: jest.Mocked<Partial<ProfileRepository>>;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockToastrService = {
|
||||
@@ -29,7 +29,6 @@ describe('LoginComponent', () => {
|
||||
mockAuthRepository = {
|
||||
get: jest.fn(),
|
||||
login: jest.fn(),
|
||||
update: jest.fn(),
|
||||
sendVerificationEmail: jest.fn(),
|
||||
logout: jest.fn(),
|
||||
isAuthenticated: jest.fn(),
|
||||
|
||||
@@ -43,10 +43,20 @@ export class LoginComponent {
|
||||
switch (this.loading().action) {
|
||||
case ActionType.READ:
|
||||
if (!this.error().hasError) {
|
||||
if (!this.authResponse()!.isValid && !this.authResponse()?.record.verified) {
|
||||
message = `Vous ne pouvez pas vous connecter sans valider la verification envoyé à cet adresse ${this.authResponse()?.record.email!}`;
|
||||
this.toastrService.warning(`${message}`, `CONNEXION`, {
|
||||
closeButton: true,
|
||||
progressBar: true,
|
||||
disableTimeOut: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.router
|
||||
.navigate(['/my-profile'], { state: { user: this.authResponse()!.record } })
|
||||
.then(() => {
|
||||
message = ` Bienvenue parmi nous!`;
|
||||
message = `Bienvenue parmi nous!`;
|
||||
this.customToast(ActionType.READ, message);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -12,9 +12,9 @@ describe('RegisterComponent', () => {
|
||||
let component: RegisterComponent;
|
||||
let fixture: ComponentFixture<RegisterComponent>;
|
||||
|
||||
let mockToastrService: Partial<ToastrService>;
|
||||
let mockProfileRepo: ProfileRepository;
|
||||
let mockAuthRepository: jest.Mocked<AuthRepository>;
|
||||
let mockToastrService: jest.Mocked<Partial<ToastrService>>;
|
||||
let mockProfileRepo: jest.Mocked<Partial<ProfileRepository>>;
|
||||
let mockAuthRepository: jest.Mocked<Partial<AuthRepository>>;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockProfileRepo = {
|
||||
@@ -33,7 +33,6 @@ describe('RegisterComponent', () => {
|
||||
mockAuthRepository = {
|
||||
get: jest.fn(),
|
||||
login: jest.fn(),
|
||||
update: jest.fn(),
|
||||
sendVerificationEmail: jest.fn(),
|
||||
logout: jest.fn(),
|
||||
isAuthenticated: jest.fn(),
|
||||
|
||||
@@ -28,7 +28,7 @@
|
||||
<div
|
||||
class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in animation-delay-100"
|
||||
>
|
||||
<app-user-form [user]="user" />
|
||||
<app-user-form [userId]="user!.id" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -1,14 +1,34 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { UpdateUserComponent } from './update-user.component';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { UserRepository } from '@app/domain/users/user.repository';
|
||||
import { USER_REPOSITORY_TOKEN } from '@app/infrastructure/users/user-repository.token';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
|
||||
describe('UpdateUserComponent', () => {
|
||||
let component: UpdateUserComponent;
|
||||
let fixture: ComponentFixture<UpdateUserComponent>;
|
||||
|
||||
let mockUserRepo: jest.Mocked<Partial<UserRepository>>;
|
||||
let mockToastrService: jest.Mocked<Partial<ToastrService>>;
|
||||
|
||||
beforeEach(async () => {
|
||||
mockUserRepo = {
|
||||
getUserById: jest.fn(),
|
||||
};
|
||||
mockToastrService = {
|
||||
warning: jest.fn(),
|
||||
success: jest.fn(),
|
||||
error: jest.fn(),
|
||||
};
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [UpdateUserComponent],
|
||||
providers: [
|
||||
provideRouter([]),
|
||||
{ provide: USER_REPOSITORY_TOKEN, useValue: mockUserRepo },
|
||||
{ provide: ToastrService, useValue: mockToastrService },
|
||||
],
|
||||
}).compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(UpdateUserComponent);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Component, Input } from '@angular/core';
|
||||
import { User } from '@app/domain/users/user.model';
|
||||
import { UserFormComponent } from '@app/shared/components/user-form/user-form.component';
|
||||
import { UserAvatarFormComponent } from '@app/shared/components/user-avatar-form/user-avatar-form.component';
|
||||
import { UserViewModel } from '@app/ui/users/user.presenter.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-update-user',
|
||||
@@ -11,5 +11,5 @@ import { UserAvatarFormComponent } from '@app/shared/components/user-avatar-form
|
||||
styleUrl: './update-user.component.scss',
|
||||
})
|
||||
export class UpdateUserComponent {
|
||||
@Input({ required: true }) user: User | undefined = undefined;
|
||||
@Input({ required: true }) user: UserViewModel | undefined = undefined;
|
||||
}
|
||||
|
||||
@@ -48,7 +48,6 @@ export class ProfileFacade {
|
||||
|
||||
loadOne(userId: string) {
|
||||
this.handleError(ActionType.READ, false, null, true);
|
||||
|
||||
this.getUseCase.execute(userId).subscribe({
|
||||
next: (profile: Profile) => {
|
||||
this.profile.set(ProfilePresenter.toViewModel(profile));
|
||||
|
||||
@@ -8,9 +8,7 @@ import { ErrorResponse } from '@app/domain/error-response.util';
|
||||
import { UserViewModel } from '@app/ui/users/user.presenter.model';
|
||||
import { UserPresenter } from '@app/ui/users/user.presenter';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
})
|
||||
@Injectable()
|
||||
export class UserFacade {
|
||||
private readonly userRepository = inject(USER_REPOSITORY_TOKEN);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user