diff --git a/src/app/shared/components/project-picture-form/project-picture-form.component.html b/src/app/shared/components/project-picture-form/project-picture-form.component.html index 27a236a..364af42 100644 --- a/src/app/shared/components/project-picture-form/project-picture-form.component.html +++ b/src/app/shared/components/project-picture-form/project-picture-form.component.html @@ -1,82 +1,90 @@ -
-

- Aperçu du projet -

+@if (loading().action === ActionType.UPDATE && loading().isLoading && onSubmitted()) { + +} @else { + +} -
- @if (imagePreviewUrl != null && project != undefined) { - nouveau-projet - } @else if (project != undefined) { - @if (project.fichier) { - {{ project!.nom }} - } @else { + +
+

+ Aperçu du projet +

+ +
+ @if (imagePreviewUrl != null && project != undefined) { nouveau-projet + } @else if (project != undefined) { + @if (project.fichier) { + {{ project!.nom }} + } @else { + nouveau-projet + } + } + + @if (project == undefined) { + nouveau-projet } - } - - @if (project == undefined) { - nouveau-projet - } +
-
- + -@if (file != null || imagePreviewUrl != null) { - -} + @if (file != null || imagePreviewUrl != null) { + + } + diff --git a/src/app/shared/components/project-picture-form/project-picture-form.component.ts b/src/app/shared/components/project-picture-form/project-picture-form.component.ts index c88c646..f7d1cff 100644 --- a/src/app/shared/components/project-picture-form/project-picture-form.component.ts +++ b/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(); 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(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, + } + ); + } } diff --git a/src/app/shared/components/user-avatar-form/user-avatar-form.component.ts b/src/app/shared/components/user-avatar-form/user-avatar-form.component.ts index ae14588..c7d333d 100644 --- a/src/app/shared/components/user-avatar-form/user-avatar-form.component.ts +++ b/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); - - this.onFormSubmitted.emit(''); this.onSubmitted.set(true); } } diff --git a/src/app/ui/projects/project.facade.ts b/src/app/ui/projects/project.facade.ts index de36362..bb98056 100644 --- a/src/app/ui/projects/project.facade.ts +++ b/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) => {