🐛 Fix bug when typing new image type

src/app/components/config/config.component.html

@@ -50,16 +50,17 @@
           Types d'images autorisés
         </label>
         <div class="space-y-2">
-          <div *ngFor="let imgType of config.allowed_image_types" class="flex items-center">
+          <div *ngFor="let imgType of localImageTypes; let i = index" class="flex items-center">
             <input
               type="text"
               [value]="imgType"
-              [name]="'type_' + imgType"
+              (input)="updateImageType(i, $event)"
+              [name]="'type_' + i"
               class="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
             />
             <button
               type="button"
-              (click)="removeImageType(imgType)"
+              (click)="removeImageType(i)"
               class="ml-2 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
             >
               Supprimer

src/app/components/config/config.component.ts

@@ -21,6 +21,8 @@ export class ConfigComponent implements OnInit {
     max_friends_per_user: 100
   };
 
+  localImageTypes: string[] = [];
+
   constructor(private configService: ConfigService) {}
 
   ngOnInit(): void {
@@ -30,12 +32,15 @@ export class ConfigComponent implements OnInit {
   loadConfig(): void {
     this.configService.loadConfig().subscribe(config => {
       this.config = config;
+      this.localImageTypes = [...config.allowed_image_types];
     });
   }
 
   saveConfig(): void {
+    this.config.allowed_image_types = [...this.localImageTypes];
     this.configService.saveConfig(this.config).subscribe(config => {
       this.config = config;
+      this.localImageTypes = [...config.allowed_image_types];
       alert('Configuration enregistrée avec succès');
     });
   }
@@ -45,13 +50,15 @@ export class ConfigComponent implements OnInit {
   }
 
   addImageType(): void {
-    this.config.allowed_image_types.push('');
+    this.localImageTypes.push('');
+  }
+
+  removeImageType(index: number): void {
+    this.localImageTypes.splice(index, 1);
   }
 
-  removeImageType(type: string): void {
+  updateImageType(index: number, event: Event): void {
-    const index = this.config.allowed_image_types.indexOf(type);
+    const input = event.target as HTMLInputElement;
-    if (index > -1) {
+    this.localImageTypes[index] = input.value;
-      this.config.allowed_image_types.splice(index, 1);
-    }
   }
 }