* Extract symbol search to component (#2003) * Update changelogpull/2071/head
Arghya Ghosh
2 years ago
committed by
GitHub
parent
f5a50a95de
commit
fce3b2084e
@ -0,0 +1,178 @@
|
||||
import { FocusMonitor } from '@angular/cdk/a11y';
|
||||
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
||||
import {
|
||||
Component,
|
||||
DoCheck,
|
||||
ElementRef,
|
||||
HostBinding,
|
||||
HostListener,
|
||||
Input,
|
||||
OnDestroy
|
||||
} from '@angular/core';
|
||||
import { ControlValueAccessor, NgControl } from '@angular/forms';
|
||||
import { MatFormFieldControl } from '@angular/material/form-field';
|
||||
import { Subject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
template: ''
|
||||
})
|
||||
export abstract class AbstractMatFormField<T>
|
||||
implements ControlValueAccessor, DoCheck, MatFormFieldControl<T>, OnDestroy
|
||||
{
|
||||
@HostBinding()
|
||||
public id = `${this.controlType}-${AbstractMatFormField.nextId++}`;
|
||||
|
||||
@HostBinding('attr.aria-describedBy') public describedBy = '';
|
||||
|
||||
public readonly autofilled: boolean;
|
||||
public errorState: boolean;
|
||||
public focused = false;
|
||||
public readonly stateChanges = new Subject<void>();
|
||||
public readonly userAriaDescribedBy: string;
|
||||
|
||||
protected onChange?: (value: T) => void;
|
||||
protected onTouched?: () => void;
|
||||
|
||||
private static nextId: number = 0;
|
||||
|
||||
protected constructor(
|
||||
protected _elementRef: ElementRef,
|
||||
protected _focusMonitor: FocusMonitor,
|
||||
public readonly ngControl: NgControl
|
||||
) {
|
||||
if (this.ngControl) {
|
||||
this.ngControl.valueAccessor = this;
|
||||
}
|
||||
|
||||
_focusMonitor
|
||||
.monitor(this._elementRef.nativeElement, true)
|
||||
.subscribe((origin) => {
|
||||
this.focused = !!origin;
|
||||
this.stateChanges.next();
|
||||
});
|
||||
}
|
||||
|
||||
private _controlType: string;
|
||||
|
||||
public get controlType(): string {
|
||||
return this._controlType;
|
||||
}
|
||||
|
||||
protected set controlType(value: string) {
|
||||
this._controlType = value;
|
||||
this.id = `${this._controlType}-${AbstractMatFormField.nextId++}`;
|
||||
}
|
||||
|
||||
private _value: T;
|
||||
|
||||
public get value(): T {
|
||||
return this._value;
|
||||
}
|
||||
|
||||
public set value(value: T) {
|
||||
this._value = value;
|
||||
|
||||
if (this.onChange) {
|
||||
this.onChange(value);
|
||||
}
|
||||
}
|
||||
|
||||
public get empty(): boolean {
|
||||
return !this._value;
|
||||
}
|
||||
|
||||
public _placeholder: string = '';
|
||||
|
||||
public get placeholder() {
|
||||
return this._placeholder;
|
||||
}
|
||||
|
||||
@Input()
|
||||
public set placeholder(placeholder: string) {
|
||||
this._placeholder = placeholder;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
|
||||
public _required: boolean = false;
|
||||
|
||||
public get required() {
|
||||
return this._required;
|
||||
}
|
||||
|
||||
@Input()
|
||||
public set required(required: any) {
|
||||
this._required = coerceBooleanProperty(required);
|
||||
this.stateChanges.next();
|
||||
}
|
||||
|
||||
public _disabled: boolean = false;
|
||||
|
||||
public get disabled() {
|
||||
if (this.ngControl && this.ngControl.disabled !== null) {
|
||||
return this.ngControl.disabled;
|
||||
}
|
||||
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
@Input()
|
||||
public set disabled(disabled: any) {
|
||||
this._disabled = coerceBooleanProperty(disabled);
|
||||
|
||||
if (this.focused) {
|
||||
this.focused = false;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
}
|
||||
|
||||
public abstract focus(): void;
|
||||
|
||||
public get shouldLabelFloat(): boolean {
|
||||
return this.focused || !this.empty;
|
||||
}
|
||||
|
||||
public ngDoCheck(): void {
|
||||
if (this.ngControl) {
|
||||
this.errorState = this.ngControl.invalid && this.ngControl.touched;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
}
|
||||
|
||||
public ngOnDestroy(): void {
|
||||
this.stateChanges.complete();
|
||||
this._focusMonitor.stopMonitoring(this._elementRef.nativeElement);
|
||||
}
|
||||
|
||||
public registerOnChange(fn: (_: T) => void): void {
|
||||
this.onChange = fn;
|
||||
}
|
||||
|
||||
public registerOnTouched(fn: () => void): void {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
|
||||
public setDescribedByIds(ids: string[]): void {
|
||||
this.describedBy = ids.join(' ');
|
||||
}
|
||||
|
||||
public writeValue(value: T): void {
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
@HostListener('focusout')
|
||||
public onBlur() {
|
||||
this.focused = false;
|
||||
|
||||
if (this.onTouched) {
|
||||
this.onTouched();
|
||||
}
|
||||
|
||||
this.stateChanges.next();
|
||||
}
|
||||
|
||||
public onContainerClick(): void {
|
||||
if (!this.focused) {
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
export * from './symbol-autocomplete.module';
|
||||
@ -0,0 +1,34 @@
|
||||
<input
|
||||
autocapitalize="off"
|
||||
autocomplete="off"
|
||||
matInput
|
||||
[formControl]="control"
|
||||
[matAutocomplete]="symbolAutocomplete"
|
||||
/>
|
||||
|
||||
<mat-autocomplete
|
||||
#symbolAutocomplete="matAutocomplete"
|
||||
[displayWith]="displayFn"
|
||||
(optionSelected)="onUpdateSymbol($event)"
|
||||
>
|
||||
<ng-container *ngIf="!isLoading">
|
||||
<mat-option
|
||||
*ngFor="let lookupItem of filteredLookupItems"
|
||||
class="line-height-1"
|
||||
[value]="lookupItem"
|
||||
>
|
||||
<span
|
||||
><b>{{ lookupItem.name }}</b></span
|
||||
>
|
||||
<br />
|
||||
<small class="text-muted"
|
||||
>{{ lookupItem.symbol | gfSymbol }} · {{ lookupItem.currency }}</small
|
||||
>
|
||||
</mat-option>
|
||||
</ng-container>
|
||||
</mat-autocomplete>
|
||||
<mat-spinner
|
||||
*ngIf="isLoading"
|
||||
class="position-absolute"
|
||||
[diameter]="20"
|
||||
></mat-spinner>
|
||||
@ -0,0 +1,8 @@
|
||||
:host {
|
||||
display: block;
|
||||
|
||||
.mat-mdc-progress-spinner {
|
||||
right: 0;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,169 @@
|
||||
import { FocusMonitor } from '@angular/cdk/a11y';
|
||||
import {
|
||||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ElementRef,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { FormControl, NgControl, Validators } from '@angular/forms';
|
||||
import {
|
||||
MatAutocomplete,
|
||||
MatAutocompleteSelectedEvent
|
||||
} from '@angular/material/autocomplete';
|
||||
import { MatFormFieldControl } from '@angular/material/form-field';
|
||||
import { MatInput } from '@angular/material/input';
|
||||
import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
|
||||
import { DataService } from '@ghostfolio/client/services/data.service';
|
||||
import { isString } from 'lodash';
|
||||
import { Observable, Subject, of, tap } from 'rxjs';
|
||||
import {
|
||||
debounceTime,
|
||||
distinctUntilChanged,
|
||||
filter,
|
||||
switchMap
|
||||
} from 'rxjs/operators';
|
||||
|
||||
import { AbstractMatFormField } from './abstract-mat-form-field';
|
||||
|
||||
@Component({
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
host: {
|
||||
'[attr.aria-describedBy]': 'describedBy',
|
||||
'[id]': 'id'
|
||||
},
|
||||
selector: 'gf-symbol-autocomplete',
|
||||
styleUrls: ['./symbol-autocomplete.component.scss'],
|
||||
templateUrl: 'symbol-autocomplete.component.html',
|
||||
providers: [
|
||||
{
|
||||
provide: MatFormFieldControl,
|
||||
useExisting: SymbolAutocompleteComponent
|
||||
}
|
||||
]
|
||||
})
|
||||
export class SymbolAutocompleteComponent
|
||||
extends AbstractMatFormField<LookupItem>
|
||||
implements OnInit, OnDestroy
|
||||
{
|
||||
@Input() public isLoading = false;
|
||||
|
||||
@ViewChild(MatInput, { static: false }) private input: MatInput;
|
||||
|
||||
@ViewChild('symbolAutocomplete') public symbolAutocomplete: MatAutocomplete;
|
||||
|
||||
public control = new FormControl();
|
||||
public filteredLookupItems: LookupItem[] = [];
|
||||
public filteredLookupItemsObservable: Observable<LookupItem[]> = of([]);
|
||||
|
||||
private unsubscribeSubject = new Subject<void>();
|
||||
|
||||
public constructor(
|
||||
public readonly _elementRef: ElementRef,
|
||||
public readonly _focusMonitor: FocusMonitor,
|
||||
public readonly changeDetectorRef: ChangeDetectorRef,
|
||||
public readonly dataService: DataService,
|
||||
public readonly ngControl: NgControl
|
||||
) {
|
||||
super(_elementRef, _focusMonitor, ngControl);
|
||||
|
||||
this.controlType = 'symbol-autocomplete';
|
||||
}
|
||||
|
||||
public ngOnInit() {
|
||||
super.required = this.ngControl.control?.hasValidator(Validators.required);
|
||||
|
||||
if (this.disabled) {
|
||||
this.control.disable();
|
||||
}
|
||||
|
||||
this.control.valueChanges
|
||||
.pipe(
|
||||
debounceTime(400),
|
||||
distinctUntilChanged(),
|
||||
filter((query) => {
|
||||
return isString(query) && query.length > 1;
|
||||
}),
|
||||
tap(() => {
|
||||
this.isLoading = true;
|
||||
this.changeDetectorRef.markForCheck();
|
||||
}),
|
||||
switchMap((query: string) => {
|
||||
return this.dataService.fetchSymbols(query);
|
||||
})
|
||||
)
|
||||
.subscribe((filteredLookupItems) => {
|
||||
this.filteredLookupItems = filteredLookupItems;
|
||||
this.isLoading = false;
|
||||
|
||||
this.changeDetectorRef.markForCheck();
|
||||
});
|
||||
}
|
||||
|
||||
public displayFn(aLookupItem: LookupItem) {
|
||||
return aLookupItem?.symbol ?? '';
|
||||
}
|
||||
|
||||
public get empty() {
|
||||
return this.input?.empty;
|
||||
}
|
||||
|
||||
public focus() {
|
||||
this.input.focus();
|
||||
}
|
||||
|
||||
public isValueInOptions(value: string) {
|
||||
return this.filteredLookupItems.some((item) => {
|
||||
return item.symbol === value;
|
||||
});
|
||||
}
|
||||
|
||||
public ngDoCheck() {
|
||||
if (this.ngControl) {
|
||||
this.validateRequired();
|
||||
this.validateSelection();
|
||||
this.errorState = this.ngControl.invalid && this.ngControl.touched;
|
||||
this.stateChanges.next();
|
||||
}
|
||||
}
|
||||
|
||||
public onUpdateSymbol(event: MatAutocompleteSelectedEvent) {
|
||||
super.value = {
|
||||
dataSource: event.option.value.dataSource,
|
||||
symbol: event.option.value.symbol
|
||||
} as LookupItem;
|
||||
}
|
||||
|
||||
public set value(value: LookupItem) {
|
||||
this.control.setValue(value);
|
||||
super.value = value;
|
||||
}
|
||||
|
||||
public ngOnDestroy() {
|
||||
super.ngOnDestroy();
|
||||
|
||||
this.unsubscribeSubject.next();
|
||||
this.unsubscribeSubject.complete();
|
||||
}
|
||||
|
||||
private validateRequired() {
|
||||
const requiredCheck = super.required
|
||||
? !super.value?.dataSource || !super.value?.symbol
|
||||
: false;
|
||||
if (requiredCheck) {
|
||||
this.ngControl.control.setErrors({ invalidData: true });
|
||||
}
|
||||
}
|
||||
|
||||
private validateSelection() {
|
||||
const error =
|
||||
!this.isValueInOptions(this.input?.value) ||
|
||||
this.input?.value !== super.value?.symbol;
|
||||
if (error) {
|
||||
this.ngControl.control.setErrors({ invalidData: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||
import { MatInputModule } from '@angular/material/input';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
|
||||
import { SymbolAutocompleteComponent } from '@ghostfolio/ui/symbol-autocomplete/symbol-autocomplete.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [SymbolAutocompleteComponent],
|
||||
exports: [SymbolAutocompleteComponent],
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule,
|
||||
GfSymbolModule,
|
||||
MatAutocompleteModule,
|
||||
MatFormFieldModule,
|
||||
MatInputModule,
|
||||
MatProgressSpinnerModule,
|
||||
ReactiveFormsModule
|
||||
],
|
||||
schemas: [CUSTOM_ELEMENTS_SCHEMA]
|
||||
})
|
||||
export class GfSymbolAutocompleteModule {}
|
||||
Loading…
Reference in new issue