* 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