100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
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, 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);
|
|
|
|
private readonly projectFacade = new ProjectFacade();
|
|
protected readonly loading = this.projectFacade.loading;
|
|
protected readonly error = this.projectFacade.error;
|
|
|
|
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 && this.onSubmitted()) {
|
|
switch (this.loading().action) {
|
|
case ActionType.UPDATE:
|
|
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;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
onSubmit() {
|
|
if (this.file != null) {
|
|
const formData = new FormData();
|
|
formData.append('fichier', this.file); // "fichier" est le nom du champ dans PocketBase
|
|
|
|
this.projectFacade.update(this.project?.id!, formData);
|
|
this.onSubmitted.set(true);
|
|
}
|
|
}
|
|
|
|
onPictureChange($event: Event) {
|
|
const target: HTMLInputElement = $event.target as HTMLInputElement;
|
|
if (target?.files?.[0]) {
|
|
this.file = target.files[0];
|
|
this.readFile(this.file);
|
|
}
|
|
}
|
|
|
|
private readFile(file: File) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
this.imagePreviewUrl = e.target?.result as string;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
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,
|
|
}
|
|
);
|
|
}
|
|
}
|