From ec5055e8d6316a5baaa2cdc12b79ddb042d4be5b Mon Sep 17 00:00:00 2001
From: Gabriel De Los Rios <gabriel.delosrios@tutamail.com>
Date: Sun, 22 Feb 2026 20:07:03 -0300
Subject: [PATCH] refactor: chain form to use handleImage directive

---
 .../chains/chain-form/chain-form.html         |  6 ++++-
 .../settings/chains/chain-form/chain-form.ts  | 25 +++----------------
 2 files changed, 9 insertions(+), 22 deletions(-)

diff --git a/src/app/pages/settings/chains/chain-form/chain-form.html b/src/app/pages/settings/chains/chain-form/chain-form.html
index 75fa3aa..f582dec 100644
--- a/src/app/pages/settings/chains/chain-form/chain-form.html
+++ b/src/app/pages/settings/chains/chain-form/chain-form.html
@@ -4,5 +4,9 @@
     <mat-label>{{'common.name'|translate|upperfirst}}</mat-label>
     <input matInput formControlName="name"/>
   </mat-form-field>
-  <app-image-uploader (file)="updateFileImage($event)" [fileIn]="form.controls.image.value"></app-image-uploader>
+  <app-image-uploader
+    appImageHandler
+    [imageControl]="form.controls.image" 
+    [fileIn]="form.controls.image.value"
+  />
 </form>
\ No newline at end of file
diff --git a/src/app/pages/settings/chains/chain-form/chain-form.ts b/src/app/pages/settings/chains/chain-form/chain-form.ts
index b0e02c2..4dbaf2f 100644
--- a/src/app/pages/settings/chains/chain-form/chain-form.ts
+++ b/src/app/pages/settings/chains/chain-form/chain-form.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, inject, input, OnDestroy, OnInit } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { ImageUploader } from '../../../../components/image-uploader/image-uploader';
@@ -6,11 +6,12 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { ChainFormGroup } from '../chain-formgroup';
 import { TranslatePipe } from '@ngx-translate/core';
 import { UpperfirstPipe } from '../../../../pipes/upperfirst-pipe';
-import { Subscription } from 'rxjs';
+import { ImageHandler } from '../../../../directives/image-handler';
 
 @Component({
   selector: 'app-chain-form',
   imports: [
+    ImageHandler,
     ImageUploader,
     MatFormFieldModule,
     MatInputModule,
@@ -21,24 +22,6 @@ import { Subscription } from 'rxjs';
   templateUrl: './chain-form.html',
   styles: ``,
 })
-export class ChainForm implements OnInit, OnDestroy {
+export class ChainForm {
   form = input(new ChainFormGroup());
-  private readonly cd = inject(ChangeDetectorRef);
-  private imageSubscription?: Subscription;
-
-  ngOnInit() {
-    this.imageSubscription = this.form().controls.image.valueChanges.subscribe({
-      next: () => this.cd.detectChanges(),
-    });
-  }
-
-  updateFileImage(file: File) {
-    const form = this.form();
-    form.controls.image.patchValue(file);
-    form.controls.image.markAsDirty();
-  }
-
-  ngOnDestroy() {
-    this.imageSubscription?.unsubscribe();
-  }
 }