gestion du chargement et toast des projets user

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

@@ -1,4 +1,11 @@
-<div class="w-full text-center">
+@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
     </h3>
@@ -40,12 +47,12 @@
         />
       }
     </div>
-</div>
+  </div>
 
-<label
+  <label
     for="uploadFile1"
     class="flex bg-gray-800 hover:bg-gray-700 text-white text-base px-5 py-3 outline-none rounded w-max cursor-pointer mx-auto font-[sans-serif]"
->
+  >
     <svg
       xmlns="http://www.w3.org/2000/svg"
       class="w-4 h-4 mr-2 fill-white inline"
@@ -68,9 +75,9 @@
       accept="image/*"
       (change)="onPictureChange($event)"
     />
-</label>
+  </label>
 
-@if (file != null || imagePreviewUrl != null) {
+  @if (file != null || imagePreviewUrl != null) {
     <button
       type="button"
       [ngClass]="{ 'bg-purple-600': file != null || imagePreviewUrl != null }"
@@ -79,4 +86,5 @@
     >
       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) => {