From 5d0701b786f87ebc93cfe5b32dbb4bfe484700ab Mon Sep 17 00:00:00 2001 From: irustm Date: Sun, 20 Jun 2021 21:00:09 +0300 Subject: [PATCH] Improve input component --- .../jira-control/input/input.component.html | 5 ++- .../input/input.component.spec.ts | 9 +--- .../app/jira-control/input/input.component.ts | 41 ++++++++++++++----- .../board-filter/board-filter.component.html | 6 +-- .../board-filter/board-filter.component.ts | 21 +++++----- .../search-drawer.component.html | 4 +- 6 files changed, 51 insertions(+), 35 deletions(-) diff --git a/frontend/src/app/jira-control/input/input.component.html b/frontend/src/app/jira-control/input/input.component.html index a3731a19..5774610d 100644 --- a/frontend/src/app/jira-control/input/input.component.html +++ b/frontend/src/app/jira-control/input/input.component.html @@ -7,7 +7,8 @@ - - \ No newline at end of file + diff --git a/frontend/src/app/jira-control/input/input.component.spec.ts b/frontend/src/app/jira-control/input/input.component.spec.ts index cb78076c..ddf8a03f 100644 --- a/frontend/src/app/jira-control/input/input.component.spec.ts +++ b/frontend/src/app/jira-control/input/input.component.spec.ts @@ -6,11 +6,6 @@ describe('InputComponent', () => { beforeEach(() => { component = new InputComponent(); }); - - it('should be able to init', () => { - component.ngOnInit(); - expect(component.control).toBeTruthy(); - }); it('should be able to get icon size', () => { expect(component.iconContainerWidth).toEqual(32); }); @@ -18,9 +13,7 @@ describe('InputComponent', () => { expect(typeof component.isShowClearButton).toEqual('undefined'); }); it('should be able to clear control', () => { - component.ngOnInit(); - spyOn(component.control, 'patchValue').and.callThrough(); component.clear(); - expect(component.control.patchValue).toHaveBeenCalled(); + expect(component.value).toHaveBeenCalled(); }); }); diff --git a/frontend/src/app/jira-control/input/input.component.ts b/frontend/src/app/jira-control/input/input.component.ts index 45b3528d..e090080b 100644 --- a/frontend/src/app/jira-control/input/input.component.ts +++ b/frontend/src/app/jira-control/input/input.component.ts @@ -1,34 +1,55 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { FormControl } from '@angular/forms'; +import {ChangeDetectionStrategy, Component, forwardRef, Input} from '@angular/core'; +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; @Component({ selector: 'j-input', templateUrl: './input.component.html', - styleUrls: ['./input.component.scss'] + styleUrls: ['./input.component.scss'], + providers: [{ + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => InputComponent), + multi: true, + }], }) -export class InputComponent implements OnInit { - @Input() control: FormControl; +export class InputComponent implements ControlValueAccessor { @Input() containerClassName = ''; @Input() icon: string; @Input() iconSize = 16; @Input() placeholder = ''; @Input() enableClearButton: boolean; + public value; + get iconContainerWidth(): number { return this.iconSize * 2; } get isShowClearButton(): boolean { - return this.enableClearButton && this.control?.value; + return this.enableClearButton && this.value; + } + + registerOnChange(fn: any) { + this.onChange = fn; } - constructor() {} + registerOnTouched(fn: () => {}): void { + this.onTouched = fn; + } - ngOnInit(): void { - this.control = this.control ?? new FormControl(''); + writeValue(outsideValue: string) { + this.value = outsideValue; + } + + updateValue(insideValue: string) { + this.value = insideValue; + this.onChange(insideValue); + this.onTouched(); } clear() { - this.control.patchValue(''); + this.updateValue(''); } + + private onChange = (value: any) => {}; + private onTouched = () => {}; } diff --git a/frontend/src/app/project/components/board/board-filter/board-filter.component.html b/frontend/src/app/project/components/board/board-filter/board-filter.component.html index bc6fae7f..dfc3e62c 100644 --- a/frontend/src/app/project/components/board/board-filter/board-filter.component.html +++ b/frontend/src/app/project/components/board/board-filter/board-filter.component.html @@ -1,8 +1,8 @@
+ icon="search" + [formControl]="searchControl">
@@ -39,4 +39,4 @@ (click)="resetAll()">Clear all
-
\ No newline at end of file + diff --git a/frontend/src/app/project/components/board/board-filter/board-filter.component.ts b/frontend/src/app/project/components/board/board-filter/board-filter.component.ts index d385fb1c..cba56a9c 100644 --- a/frontend/src/app/project/components/board/board-filter/board-filter.component.ts +++ b/frontend/src/app/project/components/board/board-filter/board-filter.component.ts @@ -1,16 +1,17 @@ -import { Component, OnInit } from '@angular/core'; -import { FormControl } from '@angular/forms'; -import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy'; -import { FilterQuery } from '@trungk18/project/state/filter/filter.query'; -import { FilterService } from '@trungk18/project/state/filter/filter.service'; -import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; -import { ProjectQuery } from '@trungk18/project/state/project/project.query'; -import { JUser } from '@trungk18/interface/user'; +import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; +import {FormControl} from '@angular/forms'; +import {UntilDestroy, untilDestroyed} from '@ngneat/until-destroy'; +import {FilterQuery} from '@trungk18/project/state/filter/filter.query'; +import {FilterService} from '@trungk18/project/state/filter/filter.service'; +import {distinctUntilChanged} from 'rxjs/operators'; +import {ProjectQuery} from '@trungk18/project/state/project/project.query'; +import {JUser} from '@trungk18/interface/user'; @Component({ selector: 'board-filter', templateUrl: './board-filter.component.html', - styleUrls: ['./board-filter.component.scss'] + styleUrls: ['./board-filter.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush }) @UntilDestroy() export class BoardFilterComponent implements OnInit { @@ -27,7 +28,7 @@ export class BoardFilterComponent implements OnInit { ngOnInit(): void { this.searchControl.valueChanges - .pipe(debounceTime(100), distinctUntilChanged(), untilDestroyed(this)) + .pipe(distinctUntilChanged(), untilDestroyed(this)) .subscribe((term) => { this.filterService.updateSearchTerm(term); }); diff --git a/frontend/src/app/project/components/search/search-drawer/search-drawer.component.html b/frontend/src/app/project/components/search/search-drawer/search-drawer.component.html index 36960e89..11aa41be 100644 --- a/frontend/src/app/project/components/search/search-drawer/search-drawer.component.html +++ b/frontend/src/app/project/components/search/search-drawer/search-drawer.component.html @@ -1,5 +1,5 @@
-
Try again with a different term.
- \ No newline at end of file +