refactor: add chain to extend settings base add

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

@@ -3,11 +3,11 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ChainAdd } from './chain-add';
 import { vi } from 'vitest';
 import { provideTranslateService } from '@ngx-translate/core';
-import { ChainFormGroup } from '../chain-formgroup';
+import { ChainFormGroup } from '../../pages/settings/chains/chain-formgroup';
 import { FormControl } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { ChainSettings } from '../../../../services/chain-settings';
+import { ChainSettings } from '../../services/chain-settings';
-import { Chain } from '../../../../models/Chain';
+import { Chain } from '../../models/Chain';
 
 describe('ChainAdd', () => {
   let component: ChainAdd;

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

@@ -0,0 +1,32 @@
+import { Component, inject } from '@angular/core';
+import { Chain } from '../../models/Chain';
+import { ChainFormGroup } from '../../pages/settings/chains/chain-formgroup';
+import { ActionBtn } from '../action-btn/action-btn';
+import { TranslatePipe } from '@ngx-translate/core';
+import { UpperfirstPipe } from '../../pipes/upperfirst-pipe';
+import { ChainSettings } from '../../services/chain-settings';
+import { SettingsBaseAdd } from '../settings-base-add/settings-base-add';
+
+@Component({
+  selector: 'app-chain-add',
+  imports: [
+    ActionBtn,
+    TranslatePipe,
+    UpperfirstPipe,
+  ],
+  templateUrl: './../settings-base-add/settings-base-add.html',
+  styleUrl: './../settings-base-add/settings-base-add.scss',
+})
+export class ChainAdd extends SettingsBaseAdd {
+  private readonly chainSettings = inject(ChainSettings);
+  override readonly form = new ChainFormGroup();
+  override title = 'settings.chain.new_chain';
+
+  async save() {
+    const name = this.form.controls.name.value;
+    const img = this.form.controls.image.value;
+    //TODO: the sqlite bridge can't handle null as param
+    const chain = new Chain(name, '');
+    await this.chainSettings.save(chain, img);
+  }
+}

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

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

src/app/pages/settings/chains/chain-add-page/chain-add-page.scss

@@ -2,10 +2,4 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-}
+}
-
-h3 {
-  margin-top: 0;
-}
-
-

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

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChainAddPage } from './chain-add-page';
+import { ChainSettings } from '../../../../services/chain-settings';
+import { provideTranslateService } from '@ngx-translate/core';
+
+describe('ChainAddPage', () => {
+  let component: ChainAddPage;
+  let fixture: ComponentFixture<ChainAddPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ChainAddPage],
+      providers: [{ provide: ChainSettings, useValue: {} }, provideTranslateService()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChainAddPage);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

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

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

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

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

@@ -1,32 +0,0 @@
-import { Component, inject } from '@angular/core';
-import { Chain } from '../../../../models/Chain';
-import { ChainFormGroup } from '../chain-formgroup';
-import { ChainForm } from '../chain-form/chain-form';
-import { ActionBtn } from '../../../../components/action-btn/action-btn';
-import { TranslatePipe } from '@ngx-translate/core';
-import { UpperfirstPipe } from '../../../../pipes/upperfirst-pipe';
-import { ChainSettings } from '../../../../services/chain-settings';
-
-@Component({
-  selector: 'app-chain-add',
-  imports: [
-    ActionBtn,
-    ChainForm,
-    TranslatePipe,
-    UpperfirstPipe,
-  ],
-  templateUrl: './chain-add.html',
-  styleUrl: './chain-add.scss',
-})
-export class ChainAdd {
-  private readonly chainSettings = inject(ChainSettings);
-  readonly form = new ChainFormGroup();
-
-  async save() {
-    const name = this.form.controls.name.value;
-    const img = this.form.controls.image.value;
-    //TODO: the sqlite bridge can't handle null as param
-    const chain = new Chain(name, '');
-    await this.chainSettings.save(chain, img);
-  }
-}

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

@@ -23,7 +23,7 @@ export const routes: Route[] = [
       },
       {
         path: 'add',
-        loadComponent: () => import('./chains/chain-add/chain-add').then(c => c.ChainAdd)
+        loadComponent: () => import('./chains/chain-add-page/chain-add-page').then(c => c.ChainAddPage)
       },
       {
         path: 'edit/:id',