mirror of https://github.com/ghostfolio/ghostfolio
Aaryaman Vyas
4 weeks ago
committed by
GitHub
GitHub
20 changed files with 366 additions and 21 deletions
@ -0,0 +1 @@ |
|||||
|
export * from './localized-number.directive'; |
||||
@ -0,0 +1,147 @@ |
|||||
|
import { Component } from '@angular/core'; |
||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing'; |
||||
|
import { FormControl, ReactiveFormsModule } from '@angular/forms'; |
||||
|
|
||||
|
import { GfLocalizedNumberDirective } from './localized-number.directive'; |
||||
|
|
||||
|
@Component({ |
||||
|
imports: [GfLocalizedNumberDirective, ReactiveFormsModule], |
||||
|
template: ` |
||||
|
<input gfLocalizedNumber [formControl]="control" [locale]="locale" /> |
||||
|
` |
||||
|
}) |
||||
|
class TestHostComponent { |
||||
|
public control = new FormControl<number | null>(null); |
||||
|
public locale = 'en-US'; |
||||
|
} |
||||
|
|
||||
|
describe('GfLocalizedNumberDirective', () => { |
||||
|
let fixture: ComponentFixture<TestHostComponent>; |
||||
|
let host: TestHostComponent; |
||||
|
let input: HTMLInputElement; |
||||
|
|
||||
|
beforeEach(async () => { |
||||
|
await TestBed.configureTestingModule({ |
||||
|
imports: [TestHostComponent] |
||||
|
}).compileComponents(); |
||||
|
|
||||
|
fixture = TestBed.createComponent(TestHostComponent); |
||||
|
host = fixture.componentInstance; |
||||
|
fixture.detectChanges(); |
||||
|
input = fixture.nativeElement.querySelector('input'); |
||||
|
}); |
||||
|
|
||||
|
function typeValue(value: string) { |
||||
|
input.value = value; |
||||
|
input.dispatchEvent(new Event('input')); |
||||
|
fixture.detectChanges(); |
||||
|
} |
||||
|
|
||||
|
it('should force type="text" and inputmode="decimal"', () => { |
||||
|
expect(input.getAttribute('type')).toBe('text'); |
||||
|
expect(input.getAttribute('inputmode')).toBe('decimal'); |
||||
|
}); |
||||
|
|
||||
|
it('should parse English grouped numbers', () => { |
||||
|
host.locale = 'en-US'; |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
typeValue('1,234.50'); |
||||
|
expect(host.control.value).toBe(1234.5); |
||||
|
|
||||
|
typeValue('1234.50'); |
||||
|
expect(host.control.value).toBe(1234.5); |
||||
|
}); |
||||
|
|
||||
|
it('should parse German grouped numbers', () => { |
||||
|
host.locale = 'de-DE'; |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
typeValue('1.234,50'); |
||||
|
expect(host.control.value).toBe(1234.5); |
||||
|
|
||||
|
typeValue('1234,50'); |
||||
|
expect(host.control.value).toBe(1234.5); |
||||
|
|
||||
|
typeValue('12.345.678,90'); |
||||
|
expect(host.control.value).toBe(12345678.9); |
||||
|
}); |
||||
|
|
||||
|
it('should set null for empty or invalid input', () => { |
||||
|
typeValue(''); |
||||
|
expect(host.control.value).toBeNull(); |
||||
|
|
||||
|
typeValue(' '); |
||||
|
expect(host.control.value).toBeNull(); |
||||
|
|
||||
|
typeValue('abc'); |
||||
|
expect(host.control.value).toBeNull(); |
||||
|
}); |
||||
|
|
||||
|
it('should write programmatic values to the input', () => { |
||||
|
host.control.setValue(1234.5); |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
expect(input.value).toBe('1,234.5'); |
||||
|
|
||||
|
host.control.setValue(null); |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
expect(input.value).toBe(''); |
||||
|
}); |
||||
|
|
||||
|
it('should write and parse correctly for German locale (de-DE)', () => { |
||||
|
host.locale = 'de-DE'; |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
host.control.setValue(1234.5); |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
expect(input.value).toBe('1.234,5'); |
||||
|
|
||||
|
typeValue('1.234,5'); |
||||
|
|
||||
|
expect(host.control.value).toBe(1234.5); |
||||
|
}); |
||||
|
|
||||
|
it('should preserve more than 3 fraction digits on write/parse', () => { |
||||
|
host.locale = 'de-DE'; |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
host.control.setValue(12.345678); |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
expect(input.value).toBe('12,345678'); |
||||
|
|
||||
|
typeValue(input.value); |
||||
|
|
||||
|
expect(host.control.value).toBe(12.345678); |
||||
|
}); |
||||
|
|
||||
|
it('should write empty string for non-numeric values', () => { |
||||
|
host.control.setValue('' as unknown as number); |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
expect(input.value).toBe(''); |
||||
|
}); |
||||
|
|
||||
|
it('should keep required validation working', () => { |
||||
|
host.locale = 'de-DE'; |
||||
|
host.control.setValidators([ |
||||
|
(control) => { |
||||
|
return control.value === null || control.value === undefined |
||||
|
? { required: true } |
||||
|
: null; |
||||
|
} |
||||
|
]); |
||||
|
host.control.updateValueAndValidity(); |
||||
|
fixture.detectChanges(); |
||||
|
|
||||
|
typeValue(''); |
||||
|
expect(host.control.hasError('required')).toBe(true); |
||||
|
|
||||
|
typeValue('1.234,50'); |
||||
|
expect(host.control.hasError('required')).toBe(false); |
||||
|
expect(host.control.value).toBe(1234.5); |
||||
|
}); |
||||
|
}); |
||||
@ -0,0 +1,110 @@ |
|||||
|
import { DEFAULT_LOCALE } from '@ghostfolio/common/config'; |
||||
|
import { |
||||
|
extractNumberFromString, |
||||
|
formatNumberForLocale |
||||
|
} from '@ghostfolio/common/helper'; |
||||
|
|
||||
|
import { DOCUMENT } from '@angular/common'; |
||||
|
import { |
||||
|
Directive, |
||||
|
ElementRef, |
||||
|
forwardRef, |
||||
|
inject, |
||||
|
input |
||||
|
} from '@angular/core'; |
||||
|
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; |
||||
|
|
||||
|
@Directive({ |
||||
|
host: { |
||||
|
'(blur)': 'handleBlur()', |
||||
|
'(input)': 'handleInput()', |
||||
|
'[attr.inputmode]': '"decimal"', |
||||
|
'[attr.type]': '"text"' |
||||
|
}, |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => GfLocalizedNumberDirective), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
selector: 'input[gfLocalizedNumber]' |
||||
|
}) |
||||
|
export class GfLocalizedNumberDirective implements ControlValueAccessor { |
||||
|
public readonly locale = input<string>(); |
||||
|
|
||||
|
private readonly document = inject(DOCUMENT); |
||||
|
private readonly elementRef = |
||||
|
inject<ElementRef<HTMLInputElement>>(ElementRef); |
||||
|
|
||||
|
public handleBlur() { |
||||
|
this.onTouched(); |
||||
|
} |
||||
|
|
||||
|
public handleInput() { |
||||
|
const value = this.elementRef.nativeElement.value; |
||||
|
|
||||
|
if (!value?.trim()) { |
||||
|
this.onChange(null); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
// Locale resolution priority:
|
||||
|
// 1. explicit [locale] input from the template
|
||||
|
// 2. document.documentElement.lang — set by Angular i18n to the active
|
||||
|
// language (e.g. 'de' when the app runs under /de/)
|
||||
|
// 3. DEFAULT_LOCALE ('en-US') as the final fallback
|
||||
|
const localeInput = this.locale(); |
||||
|
const documentLang = this.document.documentElement.lang; |
||||
|
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
||||
|
const resolvedLocale = localeInput || documentLang || DEFAULT_LOCALE; |
||||
|
|
||||
|
const parsedNumber = extractNumberFromString({ |
||||
|
locale: resolvedLocale, |
||||
|
value |
||||
|
}); |
||||
|
|
||||
|
this.onChange( |
||||
|
parsedNumber !== undefined && !Number.isNaN(parsedNumber) |
||||
|
? parsedNumber |
||||
|
: null |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
public registerOnChange(fn: (value: number | null) => void) { |
||||
|
this.onChange = fn; |
||||
|
} |
||||
|
|
||||
|
public registerOnTouched(fn: () => void) { |
||||
|
this.onTouched = fn; |
||||
|
} |
||||
|
|
||||
|
public setDisabledState(isDisabled: boolean) { |
||||
|
this.elementRef.nativeElement.disabled = isDisabled; |
||||
|
} |
||||
|
|
||||
|
public writeValue(value: number | null) { |
||||
|
if ( |
||||
|
value === null || |
||||
|
value === undefined || |
||||
|
typeof value !== 'number' || |
||||
|
Number.isNaN(value) |
||||
|
) { |
||||
|
this.elementRef.nativeElement.value = ''; |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
const localeInput = this.locale(); |
||||
|
const documentLang = this.document.documentElement.lang; |
||||
|
// eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
|
||||
|
const resolvedLocale = localeInput || documentLang || DEFAULT_LOCALE; |
||||
|
|
||||
|
this.elementRef.nativeElement.value = formatNumberForLocale({ |
||||
|
locale: resolvedLocale, |
||||
|
value |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private onChange: (value: number | null) => void = () => undefined; |
||||
|
private onTouched: () => void = () => undefined; |
||||
|
} |
||||
Loading…
Reference in new issue