gestion du chargement et toast des projets user

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 { AuthService } from '@app/core/services/authentication/auth.service';
-import { NgClass } from '@angular/common';
+import { Component, effect, inject, Input, output, signal } from '@angular/core';
+import { NgClass, NgTemplateOutlet } 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();
-
-            this.toastrService.success(
-              `L'aperçu du projet ${this.project!.nom} ont bien été modifier !`,
-              `Mise à jour`,
-              {
-                closeButton: true,
-                progressAnimation: 'decreasing',
-                progressBar: true,
-              }
-            );
-
+            message = `L'aperçu du projet ${this.project!.nom} ont bien été modifier !`;
+            this.customToast(ActionType.UPDATE, message);
+            this.onSubmitted.set(false);
             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,
+      }
+    );
+  }
 }