add filter with material

client/src/app/features/recipes/recipes.component.html

@@ -122,10 +122,25 @@
                   (input)="setSearch($event)"
                   (keydown.enter)="search($event)"
                 />
+                <ng-select
+                  [items]="materialList"
+                  class="join-item text-base"
+                  bindLabel="name"
+                  bindValue="id"
+                  [multiple]="true"
+                  [closeOnSelect]="false"
+                  [(ngModel)]="selectMaterialFilter"
+                >
+                  <ng-template ng-option-tmp let-item="item">
+                    <p class="text-xs">{{ item.name }}</p>
+                    <small class="text-xs text-gray-500">{{ item.id }}</small>
+                  </ng-template>
+                </ng-select>
                 <button class="btn join-item" (click)="search($event)">
                   Search
                 </button>
               </div>
+
               <div class="flex gap-2">
                 <button class="btn rounded-lg" (click)="openJsonTab()">
                   View JSON

client/src/app/features/recipes/recipes.component.ts

@@ -5,27 +5,37 @@ import {
   OnInit,
   ViewChild,
 } from '@angular/core';
-import { UserService } from 'src/app/core/services/user.service';
-import { User } from 'src/app/core/models/user.model';
-import { DatePipe, NgFor, NgIf } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { environment } from 'src/environments/environment';
 import { RecipeModalComponent } from 'src/app/shared/modal/recipe-details/recipe-modal.component';
-import { BehaviorSubject, Subject, Subscriber, Subscription } from 'rxjs';
+import { BehaviorSubject, Subscription, map } from 'rxjs';
 import * as lodash from 'lodash';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { RouterLink } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule } from '@angular/forms';
+import { MaterialService } from 'src/app/core/services/material.service';
 
 @Component({
   selector: 'app-recipes',
   standalone: true,
-  imports: [RouterLink, NgIf, NgFor, DatePipe, RecipeModalComponent],
+  imports: [
+    CommonModule,
+    RouterLink,
+    DatePipe,
+    RecipeModalComponent,
+    NgSelectModule,
+    FormsModule,
+  ],
   templateUrl: './recipes.component.html',
 })
-export class DashboardComponent implements OnInit, OnDestroy {
+export class RecipesComponent implements OnInit, OnDestroy {
   recipes: Recipe | null = null;
   recipes01: Recipe01[] | null = null;
   currentFile: string = '';
+  selectMaterialFilter: number[] | null = null;
+  materialList: { id: number; name: string | number }[] | null = null;
 
   tableHeads: string[] = [
     'Product Code',
@@ -68,6 +78,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
               search: this.oldSearchStr,
               filename: this._recipeService.getCurrentFile(),
               country: this._recipeService.getCurrentCountry(),
+              materialIds: this.selectMaterialFilter || [],
             })
             .subscribe(({ recipes, hasMore, fileName }) => {
               const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -91,7 +102,10 @@ export class DashboardComponent implements OnInit, OnDestroy {
     );
   }
 
-  constructor(private _recipeService: RecipeService) {}
+  constructor(
+    private _recipeService: RecipeService,
+    private _materialService: MaterialService
+  ) {}
 
   ngOnInit(): void {
     this._recipeService
@@ -101,6 +115,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         search: this.oldSearchStr,
         filename: this._recipeService.getCurrentFile(),
         country: this._recipeService.getCurrentCountry(),
+        materialIds: this.selectMaterialFilter || [],
       })
       .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -119,6 +134,20 @@ export class DashboardComponent implements OnInit, OnDestroy {
         this.isHasMore = hasMore;
       });
 
+    this._materialService
+      .getMaterialCodes()
+      .pipe(
+        map((mat) =>
+          mat.map((m) => ({
+            id: m.materialID,
+            name: m.PackageDescription || m.materialID,
+          }))
+        )
+      )
+      .subscribe((materials) => {
+        this.materialList = materials;
+      });
+
     this.initRecipeSelection();
   }
 
@@ -136,6 +165,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         search: this.searchStr,
         filename: this._recipeService.getCurrentFile(),
         country: this._recipeService.getCurrentCountry(),
+        materialIds: this.selectMaterialFilter || [],
       })
       .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
@@ -268,6 +298,7 @@ export class DashboardComponent implements OnInit, OnDestroy {
         search: this.oldSearchStr,
         filename: recipeFileName,
         country: this.selectedCountry!,
+        materialIds: this.selectMaterialFilter || [],
       })
       .subscribe(({ recipes, hasMore, fileName }) => {
         const { Recipe01, ...recipesWithoutRecipe01 } = recipes;