feat: add chain select cmp

public/i18n/en.json

@@ -22,9 +22,13 @@
       "portuguese": "portuguese"
     },
     "chain": {
+      "chain": "chain",
       "chains": "chains",
       "new_chain": "new chain",
       "edit_chain": "edit chain"
+    },
+    "establishment": {
+      "establishments":"establishments"
     }
   },
   "common": {

public/i18n/es.json

@@ -22,9 +22,13 @@
       "portuguese": "portugués"
     },
     "chain": {
+      "chain": "cadena",
       "chains": "cadenas",
       "new_chain": "nueva cadena",
       "edit_chain": "editar cadena"
+    },
+    "establishment": {
+      "establishments":"establecimientos"
     }
   },
   "common": {

public/i18n/pt.json

@@ -22,9 +22,13 @@
       "portuguese": "portuguese"
     },
     "chain": {
+      "chain": "chain",
       "chains": "chains",
       "new_chain": "new chain",
       "edit_chain": "edit chain"
+    },
+    "establishment": {
+      "establishments":"establishments"
     }
   },
   "common": {

src/app/components/chain-select/chain-select.html

@@ -0,0 +1,11 @@
+<mat-form-field>
+  <mat-label>{{'settings.chain.chain'|translate|upperfirst}}</mat-label>
+  <mat-select
+    [formControl]="control"
+    [compareWith]="compareFn"
+  >
+    @for(chain of chains$|async; track chain.id) {
+      <mat-option [value]="chain">{{chain.name}}</mat-option>
+    }
+  </mat-select>
+</mat-form-field>

src/app/components/chain-select/chain-select.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  width: 100%;
+}

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

@@ -0,0 +1,65 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { MatSelect } from '@angular/material/select';
+import { provideTranslateService } from '@ngx-translate/core';
+import { Chain } from '../../models/Chain';
+import { ChainDAO } from '../../dao/ChainDAO';
+import { ChainSelect } from './chain-select';
+
+@Component({
+  selector: 'app-chain-select-mock',
+  imports: [
+    ChainSelect,
+    ReactiveFormsModule
+  ],
+  template: `
+  <form [formGroup]="form">
+    <app-chain-select formControlName="mock"/>
+  </form>
+
+  `,
+  styleUrl: './chain-select.scss',
+})
+class ChainSelectTestbed {
+  form = new FormGroup({mock: new FormControl()})
+}
+
+describe('ChainSelect', () => {
+  let component: ChainSelectTestbed;
+  let fixture: ComponentFixture<ChainSelectTestbed>;
+
+  let chainDAO: Partial<ChainDAO>;
+  let CHAINS_MOCK: Chain[];
+  beforeEach(async () => {
+    CHAINS_MOCK = [new Chain('Mock 1', '', 1)];
+
+    chainDAO = {
+      findAll: vi.fn().mockResolvedValue(CHAINS_MOCK),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [ChainSelectTestbed],
+      providers: [{ provide: ChainDAO, useValue: chainDAO }, provideTranslateService()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChainSelectTestbed);
+    component = fixture.componentInstance;
+    
+  });
+
+  it('should create', async () => {
+    await fixture.whenStable();
+    expect(component).toBeTruthy();
+  });
+
+  it('should match form chain with chain option', async () => {
+    component.form = new FormGroup({mock: new FormControl(CHAINS_MOCK[0])});
+    await fixture.whenStable();
+    const matSelect: MatSelect = fixture.debugElement.query(By.css('mat-select')).componentInstance;
+    expect(matSelect.value).toEqual(CHAINS_MOCK[0]);
+  });
+
+});

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

@@ -0,0 +1,53 @@
+import { Component, inject, OnInit, Optional, Self } from '@angular/core';
+import { ChainDAO } from '../../dao/ChainDAO';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { AsyncPipe } from '@angular/common';
+import { ControlValueAccessor, FormControl, NgControl, ReactiveFormsModule } from '@angular/forms';
+import { Chain } from '../../models/Chain';
+import { TranslatePipe } from '@ngx-translate/core';
+import { UpperfirstPipe } from "../../pipes/upperfirst-pipe";
+
+@Component({
+  selector: 'app-chain-select',
+  imports: [
+    AsyncPipe,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    TranslatePipe,
+    UpperfirstPipe
+],
+  templateUrl: './chain-select.html',
+  styleUrl: './chain-select.scss',
+})
+export class ChainSelect implements ControlValueAccessor, OnInit {
+  private readonly chainDAO = inject(ChainDAO);
+  protected chains$ = this.chainDAO.findAll();
+  protected control = new FormControl();
+
+  constructor(@Self() @Optional() public controlDir: NgControl) {
+    if (this.controlDir) {
+      this.controlDir.valueAccessor = this;
+    }
+  }
+
+  ngOnInit() {
+    this.control = <FormControl>this.controlDir.control;
+  }
+
+  writeValue(obj: any): void {}
+
+  registerOnChange(onChange: any) {}
+
+  registerOnTouched(fn: any): void {}
+
+  setDisabledState?(isDisabled: boolean): void {}
+
+  compareFn(c1: Chain, c2: Chain) {
+    if (!c1 || !c2) return false;
+    return c1.id === c2.id;
+  }
+}