gestion des messages , toast et chargement sur les informations complementaires

This commit is contained in:
styve Lioumba
2025-11-17 18:45:45 +01:00
parent 9669b2b5b4
commit e2aa88c434
3 changed files with 515 additions and 465 deletions

View File

@@ -1,3 +1,20 @@
@if (loading().isLoading) {
@switch (loading().action) {
@case (ActionType.UPDATE) {
<app-loading message="Mise à jour des informations complementaires..." />
}
}
} @else if (sectorLoading().isLoading) {
@switch (sectorLoading().action) {
@case (ActionType.READ) {
<app-loading message="Chargement des informations..." />
}
}
} @else {
<ng-container *ngTemplateOutlet="forms" />
}
<ng-template #forms>
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" class="space-y-8"> <form [formGroup]="profileForm" (ngSubmit)="onSubmit()" class="space-y-8">
<!-- Section CV --> <!-- Section CV -->
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in"> <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in">
@@ -253,7 +270,10 @@
</div> </div>
<!-- GitHub --> <!-- GitHub -->
<div> <div>
<label for="github" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"> <label
for="github"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
>
GitHub GitHub
</label> </label>
<div class="relative"> <div class="relative">
@@ -448,3 +468,4 @@
</button> </button>
</div> </div>
</form> </form>
</ng-template>

View File

@@ -7,8 +7,6 @@ import {
Validators, Validators,
} from '@angular/forms'; } from '@angular/forms';
import { UntilDestroy } from '@ngneat/until-destroy'; import { UntilDestroy } from '@ngneat/until-destroy';
import { NgClass } from '@angular/common';
import { AuthService } from '@app/core/services/authentication/auth.service';
import { MyProfileUpdateCvFormComponent } from '@app/shared/components/my-profile-update-cv-form/my-profile-update-cv-form.component'; import { MyProfileUpdateCvFormComponent } from '@app/shared/components/my-profile-update-cv-form/my-profile-update-cv-form.component';
import { ToastrService } from 'ngx-toastr'; import { ToastrService } from 'ngx-toastr';
import { ProfileViewModel } from '@app/ui/profiles/profile.presenter.model'; import { ProfileViewModel } from '@app/ui/profiles/profile.presenter.model';
@@ -16,21 +14,28 @@ import { ProfileFacade } from '@app/ui/profiles/profile.facade';
import { ActionType } from '@app/domain/action-type.util'; import { ActionType } from '@app/domain/action-type.util';
import { Profile } from '@app/domain/profiles/profile.model'; import { Profile } from '@app/domain/profiles/profile.model';
import { SectorFacade } from '@app/ui/sectors/sector.facade'; import { SectorFacade } from '@app/ui/sectors/sector.facade';
import { NgTemplateOutlet } from '@angular/common';
import { LoadingComponent } from '@app/shared/components/loading/loading.component';
@Component({ @Component({
selector: 'app-my-profile-update-form', selector: 'app-my-profile-update-form',
standalone: true, standalone: true,
imports: [ReactiveFormsModule, NgClass, MyProfileUpdateCvFormComponent], imports: [
ReactiveFormsModule,
MyProfileUpdateCvFormComponent,
NgTemplateOutlet,
LoadingComponent,
],
templateUrl: './my-profile-update-form.component.html', templateUrl: './my-profile-update-form.component.html',
styleUrl: './my-profile-update-form.component.scss', styleUrl: './my-profile-update-form.component.scss',
}) })
@UntilDestroy() @UntilDestroy()
export class MyProfileUpdateFormComponent implements OnInit { export class MyProfileUpdateFormComponent implements OnInit {
private readonly toastrService = inject(ToastrService); private readonly toastrService = inject(ToastrService);
protected readonly ActionType = ActionType;
@Input({ required: true }) profile: ProfileViewModel = {} as ProfileViewModel; @Input({ required: true }) profile: ProfileViewModel = {} as ProfileViewModel;
private readonly formBuilder = inject(FormBuilder); private readonly formBuilder = inject(FormBuilder);
protected readonly authService = inject(AuthService);
profileForm!: FormGroup; profileForm!: FormGroup;
private readonly profileFacade = new ProfileFacade(); private readonly profileFacade = new ProfileFacade();
@@ -44,29 +49,25 @@ export class MyProfileUpdateFormComponent implements OnInit {
protected readonly sectorError = this.sectorFacade.error; protected readonly sectorError = this.sectorFacade.error;
constructor() { constructor() {
let message = '';
effect(() => { effect(() => {
if (!this.loading().isLoading) {
switch (this.loading().action) { switch (this.loading().action) {
case ActionType.UPDATE: case ActionType.UPDATE:
if (!this.loading() && !this.error().hasError) { message = `Vos informations personnelles ont bien été modifier !`;
this.authService.updateUser(); this.customToast(ActionType.UPDATE, message);
break;
this.toastrService.success(
` Vos informations personnelles ont bien été modifier !`,
`Mise à jour`,
{
closeButton: true,
progressAnimation: 'decreasing',
progressBar: true,
}
);
} }
} }
if (!this.sectorLoading().isLoading) {
switch (this.sectorLoading().action) { switch (this.sectorLoading().action) {
case ActionType.READ: case ActionType.READ:
if (!this.sectorLoading() && !this.sectorError().hasError) { if (!this.sectorLoading() && !this.sectorError().hasError) {
this.profileForm.get('secteur')!.setValue(this.sector().id); this.profileForm.get('secteur')!.setValue(this.sector().id);
} }
} }
}
}); });
} }
@@ -125,4 +126,29 @@ export class MyProfileUpdateFormComponent implements OnInit {
this.profileFacade.update(this.profile.id, data); this.profileFacade.update(this.profile.id, data);
} }
private customToast(action: ActionType, message: string): void {
if (this.error().hasError) {
this.toastrService.error(
`Une erreur s'est produite, veuillez réessayer ulterieurement`,
`Erreur`,
{
closeButton: true,
progressAnimation: 'decreasing',
progressBar: true,
}
);
return;
}
this.toastrService.success(
`${message}`,
`${action === ActionType.UPDATE ? 'Mise à jour' : ''}`,
{
closeButton: true,
progressAnimation: 'decreasing',
progressBar: true,
}
);
}
} }

View File

@@ -11,12 +11,14 @@ import { CreateProfileUseCase } from '@app/usecase/profiles/create-profile.useca
import { UpdateProfileUseCase } from '@app/usecase/profiles/update-profile.usecase'; import { UpdateProfileUseCase } from '@app/usecase/profiles/update-profile.usecase';
import { GetProfileUseCase } from '@app/usecase/profiles/get-profile.usecase'; import { GetProfileUseCase } from '@app/usecase/profiles/get-profile.usecase';
import { ProfileDTO } from '@app/domain/profiles/dto/create-profile.dto'; import { ProfileDTO } from '@app/domain/profiles/dto/create-profile.dto';
import { AuthService } from '@app/core/services/authentication/auth.service';
@Injectable({ @Injectable({
providedIn: 'root', providedIn: 'root',
}) })
export class ProfileFacade { export class ProfileFacade {
private profileRepository = inject(PROFILE_REPOSITORY_TOKEN); private profileRepository = inject(PROFILE_REPOSITORY_TOKEN);
protected readonly authService = inject(AuthService);
private listUseCase = new ListProfilesUseCase(this.profileRepository); private listUseCase = new ListProfilesUseCase(this.profileRepository);
private createUseCase = new CreateProfileUseCase(this.profileRepository); private createUseCase = new CreateProfileUseCase(this.profileRepository);
@@ -80,6 +82,7 @@ export class ProfileFacade {
this.updateUseCase.execute(profileId, profile).subscribe({ this.updateUseCase.execute(profileId, profile).subscribe({
next: (profile: Profile) => { next: (profile: Profile) => {
this.profile.set(ProfilePresenter.toViewModel(profile)); this.profile.set(ProfilePresenter.toViewModel(profile));
this.authService.updateUser();
this.handleError(ActionType.UPDATE, false, null, false); this.handleError(ActionType.UPDATE, false, null, false);
}, },
error: (err) => { error: (err) => {