Browse Source

feat(lib): make currencies an input signal

pull/6402/head
Kenrick Tandrian 1 month ago
parent
commit
a1fa567fd0
  1. 13
      libs/ui/src/lib/currency-selector/currency-selector.component.ts

13
libs/ui/src/lib/currency-selector/currency-selector.component.ts

@ -11,6 +11,7 @@ import {
OnInit, OnInit,
ViewChild, ViewChild,
inject, inject,
input,
viewChild viewChild
} from '@angular/core'; } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@ -66,14 +67,14 @@ export class GfCurrencySelectorComponent
@ViewChild('currencyAutocomplete') @ViewChild('currencyAutocomplete')
public currencyAutocomplete: MatAutocomplete; public currencyAutocomplete: MatAutocomplete;
@Input() private currencies: string[] = [];
@Input() private formControlName: string; @Input() private formControlName: string;
public control = new FormControl<string | null>(null); public control = new FormControl<string | null>(null);
public readonly currencies = input<string[]>([]);
public filteredCurrencies: string[] = []; public filteredCurrencies: string[] = [];
private destroyRef = inject(DestroyRef); private readonly destroyRef = inject(DestroyRef);
private input = viewChild.required(MatInput); private readonly input = viewChild.required(MatInput);
public constructor( public constructor(
public readonly _elementRef: ElementRef, public readonly _elementRef: ElementRef,
@ -112,7 +113,7 @@ export class GfCurrencySelectorComponent
if (control) { if (control) {
this.value = this.value =
this.currencies.find((value) => { this.currencies().find((value) => {
return value === control.value; return value === control.value;
}) ?? null; }) ?? null;
} }
@ -131,7 +132,7 @@ export class GfCurrencySelectorComponent
takeUntilDestroyed(this.destroyRef), takeUntilDestroyed(this.destroyRef),
startWith(''), startWith(''),
map((value) => { map((value) => {
return value ? this.filter(value) : this.currencies.slice(); return value ? this.filter(value) : this.currencies().slice();
}) })
) )
.subscribe((values) => { .subscribe((values) => {
@ -154,7 +155,7 @@ export class GfCurrencySelectorComponent
private filter(value: string) { private filter(value: string) {
const filterValue = value.toLowerCase(); const filterValue = value.toLowerCase();
return this.currencies.filter((currency) => { return this.currencies().filter((currency) => {
return currency.toLowerCase().startsWith(filterValue); return currency.toLowerCase().startsWith(filterValue);
}); });
} }

Loading…
Cancel
Save