add filter with material

client/src/app/app-routing.module.ts

@@ -81,7 +81,7 @@ const routes: Routes = [
         path: 'recipes',
         loadComponent: () =>
           import('./features/recipes/recipes.component').then(
-            (m) => m.DashboardComponent
+            (m) => m.RecipesComponent
           ),
         canActivate: [authGuard],
       },

client/src/app/core/services/material.service.ts

@@ -17,8 +17,8 @@ export class MaterialService {
       `${environment.api}/materials/code`,
       {
         params: {
-          country: country || '',
-          filename: filename || '',
+          country: country || this.getCurrentCountry(),
+          filename: filename || this.getCurrentFile(),
           mat_ids: matIds?.join(',') || '',
         },
         withCredentials: true,
@@ -35,11 +35,29 @@ export class MaterialService {
       `${environment.api}/materials/setting/${id}`,
       {
         params: {
-          country: country || '',
-          filename: filename || '',
+          country: country || this.getCurrentCountry(),
+          filename: filename || this.getCurrentFile(),
         },
         withCredentials: true,
       }
     );
   }
+
+  getCurrentFile(): string {
+    const currentRecipeFile = localStorage.getItem('currentRecipeFile');
+    if (currentRecipeFile) {
+      return currentRecipeFile;
+    }
+
+    return 'coffeethai02_580.json';
+  }
+
+  getCurrentCountry(): string {
+    const currentRecipeCountry = localStorage.getItem('currentRecipeCountry');
+    if (currentRecipeCountry) {
+      return currentRecipeCountry;
+    }
+
+    return 'Thailand';
+  }
 }

client/src/app/core/services/recipe.service.ts

@@ -8,6 +8,7 @@ import { RecipeMetaData } from 'src/app/shared/types/recipe';
 interface RecipeParams {
   filename: string;
   country: string;
+  materialIds: number[];
   offset: number;
   take: number;
   search: string;
@@ -31,6 +32,7 @@ export class RecipeService {
       search: '',
       country: this.getCurrentCountry(),
       filename: this.getCurrentFile(),
+      materialIds: [],
     }
   ): Observable<{
     fileName: string;
@@ -48,6 +50,7 @@ export class RecipeService {
         search: params.search,
         country: params.country,
         filename: params.filename,
+        material_ids: params.materialIds.join(','),
       },
       withCredentials: true,
       responseType: 'json',

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;

client/src/styles.css

@@ -2,4 +2,15 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://fonts.googleapis.com/css?family=Kanit');
+@import url('https://fonts.googleapis.com/css?family=Kanit');
+@import "~@ng-select/ng-select/themes/default.theme.css";
+
+.ng-select-container {
+  max-width: 400px;
+  font-family: 'Kanit', sans-serif;
+  height: 48px;
+}
+
+.ng-value-container {
+  overflow-y: auto;
+}