feat: add chain management components

src/app/pages/settings/chains/chain-edit/chain-edit.ts

@@ -0,0 +1,81 @@
+import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
+import { ChainFormGroup } from '../chain-formgroup';
+import { ChainForm } from '../chain-form/chain-form';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable, take, tap } from 'rxjs';
+import { Chain } from '../../../../models/Chain';
+import { ImageStorage } from '../../../../services/image-storage';
+import { ActionBtn } from '../../../../components/action-btn/action-btn';
+import { ChainDAO } from '../../../../dao/ChainDAO';
+import { TranslatePipe } from '@ngx-translate/core';
+import { UpperfirstPipe } from "../../../../pipes/upperfirst-pipe";
+
+@Component({
+  selector: 'app-chain-edit',
+  imports: [ChainForm, ActionBtn, TranslatePipe, UpperfirstPipe],
+  templateUrl: './chain-edit.html',
+  styleUrl: './chain-edit.scss',
+})
+export class ChainEdit implements OnInit {
+  readonly form = new ChainFormGroup();
+  protected readonly activatedRoute = inject(ActivatedRoute);
+  private readonly cd = inject(ChangeDetectorRef);
+  private chain?: Chain;
+  private readonly chainDAO = inject(ChainDAO);
+  private readonly imageStorage = inject(ImageStorage);
+  private readonly router = inject(Router);
+
+  ngOnInit() {
+    (<Observable<{ chain: Chain }>>this.activatedRoute.data)
+      .pipe(
+        take(1),
+        tap((data) => (this.chain = new Chain(data.chain.name, data.chain.image, data.chain.id))),
+        tap(async (data) => await this.patchForm(data.chain)),
+      )
+      .subscribe();
+  }
+
+  get disabled() {
+    return (this.form.invalid || this.form.pristine)
+  }
+  
+  async patchForm(chain: Chain) {
+    try {
+      this.form.controls.name.patchValue(chain.name);
+      if (chain.image) {
+        const imgName = chain.image;
+        const blob = await this.imageStorage.getImage(imgName);
+        const file = new File([blob], imgName, { type: blob.type });
+        this.form.controls.image.patchValue(file);
+        this.cd.detectChanges();
+      }
+    } catch (e) {
+      console.error(e);
+       //TODO: reportar error
+    }
+  }
+
+  async update() {
+    try {
+      if (this.chain) {
+        this.chain.name = this.form.controls.name.value;
+        const formImgFile = this.form.controls.image.value;
+        let imgName = this.chain.name;
+        if (formImgFile) {
+          if (formImgFile.name !== imgName) {
+            imgName = await this.imageStorage.saveImage(formImgFile);
+            if (this.chain.image) {
+              this.imageStorage.deleteImage(this.chain.image);
+            }
+            this.chain.image = imgName;
+          }
+        }
+        await this.chainDAO.update(this.chain, { id: this.chain.id });
+        this.router.navigate(['settings', 'chains']);
+      }
+    } catch (e) {
+      console.error(e);
+      //TODO: reportar error
+    }
+  }
+}