Merge pull request #8 from RandomSoftwareSL/bugfix/list-does-not-filter-when-typing

fix: 🐛 List does not filter when typing

Author: sachith94-lion

README.md

@@ -59,6 +59,7 @@ export class YourModule {}
 
 example : -
 
+```html
 <form [formGroup]="consumerForm">
   <typeHeadInput
     labelText="Year"
@@ -70,12 +71,15 @@ example : -
     [placeholder]="'Year'"
     [name]="'value'"
     [isNumberInput]="true"
-    [serverSideSearchCallback]="yearCallBackFunction"
     [enableServerSideData]="true"
+    [serverSideSearchCallback]="yearCallBackFunction"
     [customFieldText]="'Year'"
-    (newValue)="changeSelectedText($event)"
+    requiredErrorMessage="Year filed cannot be empty"
+    [autoDisplayFirst]="true"
+    placeholder="Year"
   ></typeHeadInput>
 </form>
+```
 
 # Development
 

projects/consumer/src/app/app.component.html

@@ -9,10 +9,11 @@
     [placeholder]="'Year'"
     [name]="'value'"
     [isNumberInput]="true"
-    [serverSideSearchCallback]="yearCallBackFunction"
     [enableServerSideData]="true"
-    (newValue)="changeSelectedText($event)"
+    [serverSideSearchCallback]="yearCallBackFunction"
     [customFieldText]="'Year'"
     requiredErrorMessage="Year filed cannot be empty"
+    [autoDisplayFirst]="true"
+    placeholder="Year"
   ></typeHeadInput>
 </form>

projects/type-head-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@randomsoftwareltd/type-head-input",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "peerDependencies": {
     "@angular/common": "^17.2.3",
     "@angular/core": "^17.2.3",

projects/type-head-input/src/lib/pipe/value-filter.pipe.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { ValueFilterPipe } from './value-filter.pipe';
+
+describe('Pipe: ValueFiltere', () => {
+  it('create an instance', () => {
+    let pipe = new ValueFilterPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

projects/type-head-input/src/lib/pipe/value-filter.pipe.ts

@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: "valueFilter",
+})
+export class ValueFilterPipe implements PipeTransform {
+  transform(
+    items: any[] | null,
+    filterValue: string,
+    fieldName: string
+  ): any[] {
+    if (!items) {
+      return [];
+    }
+
+    if (!filterValue) {
+      return items;
+    }
+
+    if (typeof filterValue !== "string") {
+      return items;
+    }
+
+    filterValue = filterValue.toLowerCase();
+
+    return items.filter((item) => {
+      const fieldValue = item[fieldName].toString();
+      if (typeof fieldValue === "string") {
+        return fieldValue.toLowerCase().includes(filterValue);
+      }
+      return false;
+    });
+  }
+}

projects/type-head-input/src/lib/type-head-input.component.html

@@ -4,11 +4,12 @@
 >
 <p-dropdown
   #select
-  [options]="enableServerSideData ? (list$ | async)! : items"
-  (onChange)="
-    select.filterValue ? (select.filterValue = $event?.value) : null;
-    onFilterEmitter($event)
+  [options]="
+    enableServerSideData
+      ? ((list$ | async)! | valueFilter : searchValue : 'value')
+      : (items | valueFilter : searchValue : 'value')
   "
+  (onChange)="onFilterEmitter($event)"
   [formControl]="control | formControl"
   [editable]="true"
   [filter]="select?.value?.length > 0 ? true : false"

projects/type-head-input/src/lib/type-head-input.component.ts

@@ -77,6 +77,7 @@ export class TypeHeadInputComponent {
   newValueSource = new BehaviorSubject<any>(null);
   newValueObs$ = this.newValueSource.asObservable();
   isAvailability: boolean = false;
+  searchValue!: string;
 
   constructor() {}
 
@@ -184,31 +185,36 @@ export class TypeHeadInputComponent {
   }
 
   onFilterEmitter(event: any) {
+    this.searchValue =
+      typeof this.select?.value === "object" &&
+      this.select?.value.hasOwnProperty("value")
+        ? this.select?.value?.value
+        : this.select?.value;
     if (this.enableServerSideData) {
       if (this.select?.options === null) {
         this.selectedTypeHeadSource.next(event);
         return;
       }
       this.isAvailability = this.select?.options!.some((item) => {
         return this.isCaseInsensitive
-          ? item.value.toLowerCase() === this.select?.filterValue?.toLowerCase()
-          : item.value === this.select.filterValue;
+          ? item.value?.toLowerCase() === this.searchValue?.toLowerCase()
+          : item?.value === this.searchValue;
       });
     } else {
       this.isAvailability = this.items.some((item) => {
         return this.isCaseInsensitive
-          ? item.value.toLowerCase() === this.select?.filterValue?.toLowerCase()
-          : item.value === this.select.filterValue;
+          ? item?.value?.toLowerCase() === this.searchValue?.toLowerCase()
+          : item?.value === this.searchValue;
       });
     }
   }
 
-
   onClick() {
     if (this.select.overlayVisible) {
       this.select.show();
     } else {
       this.select.hide();
+      this.searchValue = "";
     }
   }
 }

projects/type-head-input/src/lib/type-head-input.module.ts

@@ -10,13 +10,15 @@ import { CommonModule } from "@angular/common";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { FormControlPipe } from "./pipe/form-Control.pipe";
 import { NumbersOnlyDirective } from "./directive/numbers-only.directive";
+import { ValueFilterPipe } from "./pipe/value-filter.pipe";
 @NgModule({
   declarations: [
     TypeHeadInputComponent,
     NgTypeHeadInputItemTemplateDirective,
     NgTypeHeadInputFilterTemplateDirective,
     NumbersOnlyDirective,
     FormControlPipe,
+    ValueFilterPipe,
   ],
   imports: [
     CommonModule,
@@ -33,6 +35,7 @@ import { NumbersOnlyDirective } from "./directive/numbers-only.directive";
     DropdownModule,
     SkeletonModule,
     FormControlPipe,
+    ValueFilterPipe,
   ],
 })
 export class TypeHeadInputModule {}

projects/type-head-input/src/public-api.ts

@@ -8,3 +8,4 @@ export * from "./lib/type-head-input.module";
 export * from "./lib/directive/form-template.directive";
 export * from "./lib/pipe/form-Control.pipe";
 export * from "./lib/directive/numbers-only.directive";
+export * from "./lib/pipe/value-filter.pipe";