Improve input component, Change to ControlValueAccessor

frontend/src/app/jira-control/input/input.component.html

@@ -7,7 +7,8 @@
         </svg-icon>
     </div>
 
-    <input [formControl]="control"
+    <input [value]="value"
+           (input)="updateValue($event.target.value)"
            [placeholder]="placeholder"
            [ngClass]="['input', 'form-input']"
            [style.padding-left.px]="icon ? iconContainerWidth : 0"
@@ -21,4 +22,4 @@
            nzTheme="outline"
            (click)="clear()"></i>
     </div>
-</div>
+</div>

frontend/src/app/jira-control/input/input.component.spec.ts

@@ -6,21 +6,14 @@ 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);
   });
   it('should be able to get return  is Show Clear Button', () => {
     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();
   });
 });

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 = () => {};
 }

frontend/src/app/project/components/board/board-filter/board-filter.component.html

@@ -1,8 +1,8 @@
 <div class="flex items-center mt-6">
     <form class="w-40 mr-4">
         <j-input aria-label="search"
-                 icon="search"                 
-                 [control]="searchControl">
+                 icon="search"
+                 [formControl]="searchControl">
         </j-input>
     </form>
     <div class="flex flex-row mr-3">
@@ -39,4 +39,4 @@
                   (click)="resetAll()">Clear all
         </j-button>
     </div>
-</div>
+</div>

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);
       });

frontend/src/app/project/components/search/search-drawer/search-drawer.component.html

@@ -1,5 +1,5 @@
 <div class="mb-10">
-    <j-input [control]="searchControl"
+    <j-input [formControl]="searchControl"
              containerClassName="flat text-textMedium"
              icon="search"
              [iconSize]="26"
@@ -38,4 +38,4 @@
         </div>
         <div class="pt-2 text-15">Try again with a different term.</div>
     </div>
-</ng-template>
+</ng-template>