refactor: edit chain to extend settings base add edit class

src/app/components/chain-edit/chain-edit.spec.ts

@@ -3,11 +3,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChainEdit } from './chain-edit';
 import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
-import { Chain } from '../../../../models/Chain';
+import { Chain } from '../../models/Chain';
 import { provideTranslateService } from '@ngx-translate/core';
 import { By } from '@angular/platform-browser';
-import { ImageStorage } from '../../../../services/image-storage';
+import { ImageStorage } from '../../services/image-storage';
-import { ChainSettings } from '../../../../services/chain-settings';
+import { ChainSettings } from '../../services/chain-settings';
 
 const CHAIN_MOCK = new Chain('Mock', '', 1);
 describe('ChainEdit', () => {
@@ -54,8 +54,8 @@ describe('ChainEdit', () => {
   it('should call chainSettings update on chain update', async () => {
     const CHAIN_NAME_UPDATE_MOCK = 'name update mock';
     await fixture.whenStable();
-    const chainNameInput = fixture.debugElement.query(By.css('[formControlName="name"]'));
+    //User updates name input field
-    chainNameInput.triggerEventHandler('input', { target: { value: CHAIN_NAME_UPDATE_MOCK } });
+    component.form.controls.name.patchValue(CHAIN_NAME_UPDATE_MOCK)
     fixture.whenStable();
     const actionBtn = fixture.debugElement.query(By.css('app-action-btn'));
     actionBtn.triggerEventHandler('click');

src/app/components/chain-edit/chain-edit.ts

@@ -1,43 +1,42 @@
-import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
-import { ChainFormGroup } from '../chain-formgroup';
+import { ChainFormGroup } from '../../pages/settings/chains/chain-formgroup';
-import { ChainForm } from '../chain-form/chain-form';
 import { ActivatedRoute } from '@angular/router';
 import { Observable, take, tap } from 'rxjs';
-import { Chain } from '../../../../models/Chain';
+import { Chain } from '../../models/Chain';
-import { ImageStorage } from '../../../../services/image-storage';
+import { ImageStorage } from '../../services/image-storage';
-import { ActionBtn } from '../../../../components/action-btn/action-btn';
+import { ActionBtn } from '../action-btn/action-btn';
 import { TranslatePipe } from '@ngx-translate/core';
-import { UpperfirstPipe } from '../../../../pipes/upperfirst-pipe';
+import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
-import { ChainSettings } from '../../../../services/chain-settings';
+import { ChainSettings } from '../../services/chain-settings';
+import { SettingsBaseAddEdit } from '../settings-base-add-edit/settings-base-add-edit';
 
 @Component({
   selector: 'app-chain-edit',
-  imports: [ChainForm, ActionBtn, TranslatePipe, UpperfirstPipe],
+  imports: [ActionBtn, TranslatePipe, UpperfirstPipe],
-  templateUrl: './chain-edit.html',
+  templateUrl: './../settings-base-add-edit/settings-base-add-edit.html',
-  styleUrl: './chain-edit.scss',
+  styleUrl: './../settings-base-add-edit/settings-base-add-edit.scss',
 })
-export class ChainEdit implements OnInit {
+export class ChainEdit extends SettingsBaseAddEdit implements OnInit {
-  readonly form = new ChainFormGroup();
+
   protected readonly activatedRoute = inject(ActivatedRoute);
-  private readonly cd = inject(ChangeDetectorRef);
-  private chain?: Chain;
   private readonly imageStorage = inject(ImageStorage);
   private readonly chainSettings = inject(ChainSettings);
 
+  private chain?: Chain;
+  btnText = 'common.update';
+  title = 'settings.chain.edit_chain';
+  readonly form = new ChainFormGroup();
+  
   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)),
+        tap((data) => 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);
@@ -46,7 +45,6 @@ export class ChainEdit implements OnInit {
         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);
@@ -54,7 +52,7 @@ export class ChainEdit implements OnInit {
     }
   }
 
-  async update() {
+  async submit() {
     if (this.chain) {
       const updatedName = this.form.controls.name.value;
       const updatedImg = this.form.controls.image.value;

src/app/pages/settings/chains/chain-edit-page/chain-edit-page.html

@@ -0,0 +1,3 @@
+<app-chain-edit #c>
+  <app-chain-form [form]="c.form"/>
+</app-chain-edit>

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

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChainEditPage } from './chain-edit-page';
+import { ActivatedRoute } from '@angular/router';
+
+import { of } from 'rxjs';
+import { Chain } from '../../../../models/Chain';
+import { ChainSettings } from '../../../../services/chain-settings';
+import { provideTranslateService } from '@ngx-translate/core';
+
+describe('ChainEditPage', () => {
+  let component: ChainEditPage;
+  let fixture: ComponentFixture<ChainEditPage>;
+
+  let activatedRoute: Partial<ActivatedRoute>;
+
+  beforeEach(async () => {
+    activatedRoute = {
+      data: of({chain: new Chain('Mock', '', 1)}),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [ChainEditPage],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRoute },
+        { provide: ChainSettings, useValue: {} },
+        provideTranslateService()
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChainEditPage);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ChainEdit } from "../../../../components/chain-edit/chain-edit";
+import { ChainForm } from "../chain-form/chain-form";
+
+@Component({
+  selector: 'app-chain-edit-page',
+  imports: [ChainEdit, ChainForm],
+  templateUrl: './chain-edit-page.html',
+  styleUrl: './chain-edit-page.scss',
+})
+export class ChainEditPage {
+
+}

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

@@ -1,9 +0,0 @@
-<h3>{{'settings.chain.edit_chain'|translate|upperfirst}}</h3>
-<app-chain-form [form]="form"/>
-<app-action-btn
-  (click)="update()"
-  (keydown)="update()"
-  [disabled]="this.disabled"
-  class="top-auto"
-  text="{{'common.update'|translate|upperfirst}}"
-/>

src/app/pages/settings/settings.route.ts

@@ -27,7 +27,7 @@ export const routes: Route[] = [
       },
       {
         path: 'edit/:id',
-        loadComponent: () => import('./chains/chain-edit/chain-edit').then(c => c.ChainEdit),
+        loadComponent: () => import('./chains/chain-edit-page/chain-edit-page').then(c => c.ChainEditPage),
         resolve: {chain: chainResolver}
       }
     ]