gestion du chargement et toast des projets user

src/app/shared/components/project-picture-form/project-picture-form.component.html

@@ -1,3 +1,10 @@
+@if (loading().action === ActionType.UPDATE && loading().isLoading && onSubmitted()) {
+  <app-loading message="Mise à jour de l'image de couverture..." />
+} @else {
+  <ng-container *ngTemplateOutlet="content" />
+}
+
+<ng-template #content>
   <div class="w-full text-center">
     <h3 class="font-ubuntu w-full text-start font-bold text-xl uppercase dark:text-white mb-4">
       Aperçu du projet
@@ -80,3 +87,4 @@
       Mettre à jour ma photo de projet
     </button>
   }
+</ng-template>

src/app/shared/components/project-picture-form/project-picture-form.component.ts

@@ -1,21 +1,23 @@
-import { Component, effect, inject, Input, output } from '@angular/core';
+import { Component, effect, inject, Input, output, signal } from '@angular/core';
-import { AuthService } from '@app/core/services/authentication/auth.service';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
-import { NgClass } from '@angular/common';
 import { environment } from '@env/environment';
 import { ToastrService } from 'ngx-toastr';
 import { ProjectViewModel } from '@app/ui/projects/project.presenter.model';
 import { ProjectFacade } from '@app/ui/projects/project.facade';
 import { ActionType } from '@app/domain/action-type.util';
+import { LoadingComponent } from '@app/shared/components/loading/loading.component';
 
 @Component({
   selector: 'app-project-picture-form',
   standalone: true,
-  imports: [NgClass],
+  imports: [NgClass, LoadingComponent, NgTemplateOutlet],
   templateUrl: './project-picture-form.component.html',
   styleUrl: './project-picture-form.component.scss',
 })
 export class ProjectPictureFormComponent {
   @Input({ required: true }) project: ProjectViewModel | undefined = undefined;
+  protected readonly environment = environment;
+  protected readonly ActionType = ActionType;
 
   onFormSubmitted = output<any>();
   private readonly toastrService = inject(ToastrService);
@@ -24,28 +26,19 @@ export class ProjectPictureFormComponent {
   protected readonly loading = this.projectFacade.loading;
   protected readonly error = this.projectFacade.error;
 
-  private readonly authService = inject(AuthService);
-
   file: File | null = null; // Variable to store file
   imagePreviewUrl: string | null = null; // URL for image preview
+  protected onSubmitted = signal<boolean>(false);
 
   constructor() {
+    let message = '';
     effect(() => {
-      if (!this.loading().isLoading) {
+      if (!this.loading().isLoading && this.onSubmitted()) {
         switch (this.loading().action) {
           case ActionType.UPDATE:
-            this.authService.updateUser();
+            message = `L'aperçu du projet ${this.project!.nom} ont bien été modifier !`;
-
+            this.customToast(ActionType.UPDATE, message);
-            this.toastrService.success(
+            this.onSubmitted.set(false);
-              `L'aperçu du projet ${this.project!.nom} ont bien été modifier !`,
-              `Mise à jour`,
-              {
-                closeButton: true,
-                progressAnimation: 'decreasing',
-                progressBar: true,
-              }
-            );
-
             this.onFormSubmitted.emit('');
             break;
         }
@@ -59,6 +52,7 @@ export class ProjectPictureFormComponent {
       formData.append('fichier', this.file); // "fichier" est le nom du champ dans PocketBase
 
       this.projectFacade.update(this.project?.id!, formData);
+      this.onSubmitted.set(true);
     }
   }
 
@@ -78,5 +72,28 @@ export class ProjectPictureFormComponent {
     reader.readAsDataURL(file);
   }
 
-  protected readonly environment = environment;
+  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,
+      }
+    );
+  }
 }

src/app/shared/components/user-avatar-form/user-avatar-form.component.ts

@@ -40,6 +40,7 @@ export class UserAvatarFormComponent {
             message = `Votre photo de profile a bien été modifier !`;
             this.customToast(ActionType.UPDATE, message);
             this.onSubmitted.set(false);
+            this.onFormSubmitted.emit('');
             break;
         }
       }
@@ -52,8 +53,6 @@ export class UserAvatarFormComponent {
       formData.append('avatar', this.file); // "avatar" est le nom du champ dans PocketBase
 
       this.facade.update(this.user?.id!, formData as Partial<User>);
-
-      this.onFormSubmitted.emit('');
       this.onSubmitted.set(true);
     }
   }

src/app/ui/projects/project.facade.ts

@@ -11,12 +11,14 @@ import { CreateProjectDto } from '@app/domain/projects/dto/create-project.dto';
 import { ErrorResponse } from '@app/domain/error-response.util';
 import { ActionType } from '@app/domain/action-type.util';
 import { LoaderAction } from '@app/domain/loader-action.util';
+import { AuthService } from '@app/core/services/authentication/auth.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ProjectFacade {
   private readonly projectRepo = inject(PROJECT_REPOSITORY_TOKEN);
+  private readonly authService = inject(AuthService);
 
   private readonly createUseCase = new CreateProjectUseCase(this.projectRepo);
   private readonly listUseCase = new ListProjectUseCase(this.projectRepo);
@@ -84,6 +86,7 @@ export class ProjectFacade {
     this.UpdateUseCase.execute(userId, data).subscribe({
       next: (project: Project) => {
         this.project.set(this.projectPresenter.toViewModel(project));
+        this.authService.updateUser();
         this.handleError(ActionType.UPDATE, false, null, false);
       },
       error: (err) => {