project refactoring en clean archi

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

@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProjectPictureFormComponent } from './project-picture-form.component';
 import { provideRouter } from '@angular/router';
-import { ProjectService } from '@app/core/services/project/project.service';
 import { ToastrService } from 'ngx-toastr';
 import { AuthService } from '@app/core/services/authentication/auth.service';
 
@@ -10,16 +9,10 @@ describe('ProjectPictureFormComponent', () => {
   let component: ProjectPictureFormComponent;
   let fixture: ComponentFixture<ProjectPictureFormComponent>;
 
-  let mockProjectService: Partial<ProjectService>;
   let mockToastrService: Partial<ToastrService>;
   let mockAuthService: Partial<AuthService>;
 
   beforeEach(async () => {
-    mockProjectService = {
-      updateProject: jest.fn().mockReturnValue({
-        subscribe: jest.fn(),
-      }),
-    };
     mockToastrService = {
       success: jest.fn(),
       error: jest.fn(),
@@ -33,7 +26,6 @@ describe('ProjectPictureFormComponent', () => {
       imports: [ProjectPictureFormComponent],
       providers: [
         provideRouter([]),
-        { provide: ProjectService, useValue: mockProjectService },
         { provide: ToastrService, useValue: mockToastrService },
         { provide: AuthService, useValue: mockAuthService },
       ],

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

@@ -1,10 +1,11 @@
-import { Component, inject, Input, output } from '@angular/core';
+import { Component, effect, inject, Input, output } from '@angular/core';
 import { AuthService } from '@app/core/services/authentication/auth.service';
-import { Project } from '@app/shared/models/project';
-import { ProjectService } from '@app/core/services/project/project.service';
 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';
 
 @Component({
   selector: 'app-project-picture-form',
@@ -14,37 +15,50 @@ import { ToastrService } from 'ngx-toastr';
   styleUrl: './project-picture-form.component.scss',
 })
 export class ProjectPictureFormComponent {
-  @Input({ required: true }) project: Project | undefined = undefined;
+  @Input({ required: true }) project: ProjectViewModel | undefined = undefined;
 
   onFormSubmitted = output<any>();
-  private readonly projectService = inject(ProjectService);
   private readonly toastrService = inject(ToastrService);
 
+  private readonly projectFacade = new ProjectFacade();
+  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
 
+  constructor() {
+    effect(() => {
+      if (!this.loading().isLoading) {
+        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,
+              }
+            );
+
+            this.onFormSubmitted.emit('');
+            break;
+        }
+      }
+    });
+  }
+
   onSubmit() {
     if (this.file != null) {
       const formData = new FormData();
       formData.append('fichier', this.file); // "fichier" est le nom du champ dans PocketBase
 
-      this.projectService.updateProject(this.project?.id!, formData).subscribe((value) => {
-        this.authService.updateUser();
-
-        this.toastrService.success(
-          `L'aperçu du projet ${value.nom} ont bien été modifier !`,
-          `Mise à jour`,
-          {
-            closeButton: true,
-            progressAnimation: 'decreasing',
-            progressBar: true,
-          }
-        );
-      });
-
-      this.onFormSubmitted.emit('');
+      this.projectFacade.update(this.project?.id!, formData);
     }
   }