Added settings

src/app/components/setting-form/setting-form.html

@@ -1,16 +1,21 @@
-<form nz-form nzLayout="horizontal" [formGroup]="settingForm" (ngSubmit)="submitForm()">
+<form nz-form nzLayout="horizontal" [formGroup]="settingForm">
 
     <!-- Logo -->
     <div class="row">
         <div class="row-left">
-            <img [src]="setting.logo" alt="logo">
+            @if (settings().logo) {
+                <img [src]="'data:image/jpeg;base64,' + settings().logo" alt=""/>
+            } @else {
+                <img [src]="setting.logo" alt="logo">
+            }
         </div>
 
         <div class="row-right">
             <nz-form-item>
                 <nz-form-label nzSpan="9">Logo</nz-form-label>
-                <nz-form-control nzSpan="25">
-                    <input nz-input type="file" formControlName="logo"/>
+                <nz-form-control nzErrorTip="Ce champ est requis">
+                    <input #fileInputLogo nz-input type="file" placeholder="Déposer"
+                           (change)="onFileChange('logo', fileInputLogo.files)">
                 </nz-form-control>
             </nz-form-item>
         </div>
@@ -19,17 +24,21 @@
     <!-- Signature -->
     <div class="row">
         <div class="row-left">
-            <img [src]="setting.signature" alt="logo">
+            @if (settings().electronicSignature) {
+                <img [src]="'data:image/jpeg;base64,' + settings().electronicSignature" alt=""/>
+            } @else {
+                <img [src]="setting.electronicSignature" alt="logo">
+            }
         </div>
 
         <div class="row-right">
             <nz-form-item>
                 <nz-form-label nzSpan="9">Signature</nz-form-label>
-                <nz-form-control nzSpan="25">
-                    <input nz-input type="file" formControlName="signature"/>
+                <nz-form-control nzErrorTip="Ce champ est requis">
+                    <input #fileInputSignature nz-input type="file" placeholder="Déposer"
+                           (change)="onFileChange('electronicSignature', fileInputSignature.files)">
                 </nz-form-control>
             </nz-form-item>
         </div>
     </div>
-
 </form>

src/app/components/setting-form/setting-form.ts

@@ -1,9 +1,13 @@
-import {Component} from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {NzColDirective} from "ng-zorro-antd/grid";
 import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
 import {NzInputDirective} from "ng-zorro-antd/input";
 import {SettingInfo} from "../../interfaces/setting.interface";
+import {firstValueFrom} from "rxjs";
+import {GetSettingDto, SettingsService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import imageCompression from "browser-image-compression";
 
 @Component({
     selector: 'app-setting-form',
@@ -15,30 +19,68 @@ import {SettingInfo} from "../../interfaces/setting.interface";
         NzFormItemComponent,
         NzFormLabelComponent,
         NzInputDirective,
-        ReactiveFormsModule
+        ReactiveFormsModule,
     ],
     templateUrl: './setting-form.html',
     styleUrl: './setting-form.css',
 })
-export class SettingForm {
-    settingForm: FormGroup = new FormGroup({
-        logo: new FormControl<string>(null),
-        signature: new FormControl<string>(null)
-    })
+export class SettingForm implements OnInit {
+    private settingsService = inject(SettingsService);
+    private notificationService = inject(NzNotificationService);
 
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.settingForm.invalid) return;
-
-        // Pour obtenir la valeur du formulaire
-        console.log(this.settingForm.getRawValue())
-
-        // Pour vider le formulaire
-        this.settingForm.reset()
-    }
+    settings = signal<GetSettingDto>({});
 
     setting: SettingInfo = {
         logo: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png',
-        signature: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png'
+        electronicSignature: 'https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png'
+    }
+
+    settingForm: FormGroup = new FormGroup({
+        logo: new FormControl<string>(null),
+        electronicSignature: new FormControl<string>(null)
+    })
+
+    async ngOnInit() {
+        await this.fetchSettings();
+    }
+
+    async fetchSettings() {
+        try {
+            const settingsPicture = await firstValueFrom(this.settingsService.getSettingEndpoint());
+            this.settings.set(settingsPicture);
+        } catch {
+            this.notificationService.error(
+                'Erreur',
+                'Aucun paramètre défini'
+            )
+        }
+    }
+
+    async onFileChange(control: string, files?: FileList | null) {
+        if (!files?.length) return;
+
+        const file = files[0];
+
+        const options = {
+            maxSizeMB: 1,
+            maxWidthOrHeight: 1080,
+            useWebWorker: true,
+            fileType: 'image/jpeg'
+        }
+
+        const compressed = await imageCompression(file, options);
+
+        try {
+            if (control === 'logo') {
+                await firstValueFrom(this.settingsService.patchSettingLogoEndpoint(compressed));
+            } else {
+                await firstValueFrom(this.settingsService.patchSettingElectronicSignatureEndpoint(compressed));
+            }
+            await this.fetchSettings();
+        } catch {
+            this.notificationService.error('Erreur', "Erreur de communication avec l'API");
+        }
+
+        this.settingForm.reset();
     }
 }