feat: add chain select cmp

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;
+  }
+}