Search Added to Product List.

bookie/src/app/product/product-list/product-list-datasource.ts

@@ -8,16 +8,19 @@ import { Product } from '../../core/product';
 export class ProductListDataSource extends DataSource<Product> {
   public data: Product[];
   public filteredData: Product[];
-  public filterValue: string;
+  public search: string;
+  public menuCategory: string;
 
   constructor(
-    private readonly filter: Observable<string>,
+    private readonly searchFilter: Observable<string>,
+    private readonly menuCategoryFilter: Observable<string>,
     private readonly dataObs: Observable<Product[]>,
   ) {
     super();
     this.data = [];
     this.filteredData = [];
-    this.filterValue = '';
+    this.search = '';
+    this.menuCategory = '';
   }
 
   connect(): Observable<Product[]> {
@@ -27,14 +30,19 @@ export class ProductListDataSource extends DataSource<Product> {
           this.data = x;
         }),
       ),
-      this.filter.pipe(
+      this.searchFilter.pipe(
         tap((x) => {
-          this.filterValue = x;
+          this.search = x;
+        }),
+      ),
+      this.menuCategoryFilter.pipe(
+        tap((x) => {
+          this.menuCategory = x;
         }),
       ),
     ];
     return merge(...dataMutations).pipe(
-      map(() => this.getFilteredData(this.data, this.filterValue)),
+      map(() => this.getFilteredData(this.data, this.search, this.menuCategory)),
       tap((x) => {
         this.filteredData = x;
       }),
@@ -43,11 +51,23 @@ export class ProductListDataSource extends DataSource<Product> {
 
   disconnect() {}
 
-  // eslint-disable-next-line class-methods-use-this
+  private getFilteredData(data: Product[], search: string, menuCategory: string): Product[] {
-  private getFilteredData(data: Product[], filter: string): Product[] {
+    return data
-    if (filter === null || filter === undefined || filter === '') {
+      .filter(
-      return data;
+        (x: Product) =>
-    }
+          search === null ||
-    return data.filter((x) => (x.menuCategory as MenuCategory).id === filter);
+          search === undefined ||
+          search === '' ||
+          `${x.name} ${x.units} ${x.saleCategory?.name} ${x.menuCategory?.name}`
+            .toLowerCase()
+            .indexOf(search.toLowerCase()) !== -1,
+      )
+      .filter(
+        (x) =>
+          menuCategory === null ||
+          menuCategory === undefined ||
+          menuCategory === '' ||
+          (x.menuCategory as MenuCategory).id === menuCategory,
+      );
   }
 }

bookie/src/app/product/product-list/product-list.component.html

@@ -1,7 +1,11 @@
 <mat-card>
   <mat-card-title-group>
     <mat-card-title>Products</mat-card-title>
-    <button mat-button (click)="updateSortOrder()" [disabled]="(filter | async) === ''">
+    <button
+      mat-button
+      (click)="updateSortOrder()"
+      [disabled]="(menuCategoryFilter | async) === '' || (searchFilter | async) !== ''"
+    >
       Update Order
     </button>
     <!--    This should check filtered data and not data-->
@@ -22,6 +26,15 @@
         fxLayoutGap="20px"
         fxLayoutGap.lt-md="0px"
       >
+        <mat-form-field fxFlex>
+          <input
+            type="text"
+            matInput
+            placeholder="Filter"
+            formControlName="filter"
+            autocomplete="off"
+          />
+        </mat-form-field>
         <mat-form-field fxFlex>
           <mat-label>Product Type</mat-label>
           <mat-select

bookie/src/app/product/product-list/product-list.component.ts

@@ -1,8 +1,10 @@
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { BehaviorSubject } from 'rxjs';
+import { Observable } from 'rxjs/internal/Observable';
+import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
 
 import { MenuCategory } from '../../core/menu-category';
 import { Product } from '../../core/product';
@@ -12,15 +14,22 @@ import { ProductService } from '../product.service';
 
 import { ProductListDataSource } from './product-list-datasource';
 
+
 @Component({
   selector: 'app-product-list',
   templateUrl: './product-list.component.html',
   styleUrls: ['./product-list.component.css'],
 })
 export class ProductListComponent implements OnInit {
-  filter: BehaviorSubject<string> = new BehaviorSubject('');
+  searchFilter: Observable<string> = new Observable();
+  menuCategoryFilter: BehaviorSubject<string> = new BehaviorSubject('');
   data: BehaviorSubject<Product[]> = new BehaviorSubject<Product[]>([]);
-  dataSource: ProductListDataSource = new ProductListDataSource(this.filter, this.data);
+  dataSource: ProductListDataSource = new ProductListDataSource(
+    this.searchFilter,
+    this.menuCategoryFilter,
+    this.data,
+  );
+
   form: FormGroup;
   list: Product[] = [];
   menuCategories: MenuCategory[] = [];
@@ -43,18 +52,28 @@ export class ProductListComponent implements OnInit {
   ) {
     this.form = this.fb.group({
       menuCategory: '',
+      filter: '',
     });
     this.data.subscribe((data: Product[]) => {
       this.list = data;
     });
+    this.searchFilter = (this.form.get('filter') as FormControl).valueChanges.pipe(
+      startWith(''),
+      debounceTime(150),
+      distinctUntilChanged(),
+    );
   }
 
   filterOn(val: string) {
-    this.filter.next(val);
+    this.menuCategoryFilter.next(val);
   }
 
   ngOnInit() {
-    this.dataSource = new ProductListDataSource(this.filter, this.data);
+    this.dataSource = new ProductListDataSource(
+      this.searchFilter,
+      this.menuCategoryFilter,
+      this.data,
+    );
     this.route.data.subscribe((value) => {
       const data = value as { list: Product[]; menuCategories: MenuCategory[] };
       this.loadData(data.list, data.menuCategories);
@@ -81,11 +100,11 @@ export class ProductListComponent implements OnInit {
   dropTable(event: CdkDragDrop<ProductListDataSource>) {
     const prevIndex = this.dataSource.filteredData.indexOf(event.item.data);
     moveItemInArray(this.dataSource.filteredData, prevIndex, event.currentIndex);
-    if (this.dataSource.filterValue === undefined) {
+    if (this.dataSource.menuCategory === undefined) {
       this.list = this.dataSource.filteredData;
     } else {
       this.list = this.list
-        .filter((x) => (x.menuCategory as MenuCategory).id !== this.dataSource.filterValue)
+        .filter((x) => (x.menuCategory as MenuCategory).id !== this.dataSource.menuCategory)
         .concat(this.dataSource.filteredData);
     }
     this.data.next(this.list);