add filter with material

client/package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^16.2.0",
         "@angular/platform-browser-dynamic": "^16.2.0",
         "@angular/router": "^16.2.0",
+        "@ng-select/ng-select": "^11.2.0",
         "jwt-decode": "^3.1.2",
         "lodash": "^4.17.21",
         "rxjs": "~7.8.0",
@@ -2925,6 +2926,23 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
       "dev": true
     },
+    "node_modules/@ng-select/ng-select": {
+      "version": "11.2.0",
+      "resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-11.2.0.tgz",
+      "integrity": "sha512-lTyw93kFdKGecp9eKmOP0PQSCaAJS8DCt4D60ns055+ixvRSp2fuXAuJUvn1e3gAsvpZor37osmYlOJ4LYwYIA==",
+      "dependencies": {
+        "tslib": "^2.3.1"
+      },
+      "engines": {
+        "node": ">= 16",
+        "npm": ">= 8"
+      },
+      "peerDependencies": {
+        "@angular/common": "^16.0.0",
+        "@angular/core": "^16.0.0",
+        "@angular/forms": "^16.0.0"
+      }
+    },
     "node_modules/@ngtools/webpack": {
       "version": "16.2.2",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-16.2.2.tgz",

client/package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
+    "@ng-select/ng-select": "^11.2.0",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "rxjs": "~7.8.0",

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 || '',
+          country: country || this.getCurrentCountry(),
-          filename: filename || '',
+          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 || '',
+          country: country || this.getCurrentCountry(),
-          filename: filename || '',
+          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 { CommonModule, DatePipe } from '@angular/common';
-import { User } from 'src/app/core/models/user.model';
-import { DatePipe, NgFor, NgIf } 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

@@ -3,3 +3,14 @@
 @tailwind components;
 @tailwind utilities;
 @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;
+}

server/routers/recipe.go

@@ -50,6 +50,16 @@ func (rr *RecipeRouter) Route(r chi.Router) {
 
 			country := r.URL.Query().Get("country")
 			filename := r.URL.Query().Get("filename")
+			materialIds := r.URL.Query().Get("material_ids")
+
+			var materialIdsUint []uint64
+			for _, v := range strings.Split(materialIds, ",") {
+				materialIdUint, err := strconv.ParseUint(v, 10, 64)
+				if err != nil || materialIdUint == 0 {
+					continue
+				}
+				materialIdsUint = append(materialIdsUint, materialIdUint)
+			}
 
 			countryID, err := rr.data.GetCountryIDByName(country)
 
@@ -72,6 +82,20 @@ func (rr *RecipeRouter) Route(r chi.Router) {
 				}
 			}
 
+			if len(materialIdsUint) > 0 {
+				resultFilter := []models.Recipe01{}
+				for _, v := range recipe.Recipe01 {
+					for _, matID := range materialIdsUint {
+						for _, recipe := range v.Recipes {
+							if recipe.IsUse && uint64(recipe.MaterialPathId) == matID {
+								resultFilter = append(resultFilter, v)
+							}
+						}
+					}
+				}
+				recipe.Recipe01 = resultFilter
+			}
+
 			isHasMore := len(recipe.Recipe01) >= int(take+offset)
 			if isHasMore {
 				recipe.Recipe01 = recipe.Recipe01[offset : take+offset]