adjust mat selection

client/src/app/features/recipes/recipe-details/recipe-details.component.html

@@ -72,7 +72,7 @@
           <input
             type="text"
             class="input input-sm input-bordered input-ghost w-full"
-            formControlName="Description"
+            formControlName="description"
           />
         </div>
         <div class="flex items-center">
@@ -96,6 +96,7 @@
         [productCode]="productCode"
         (recipeListFormChange)="onRecipeListFormChange($event)"
       ></app-recipe-list>
+      <div *ngFor=""></div>
     </div>
     <div class="grid grid-cols-2 gap-4 mb-4">
       <div

client/src/app/features/recipes/recipe-details/recipe-details.component.ts

@@ -10,10 +10,12 @@ import { RecipeListComponent } from './recipe-list/recipe-list.component';
 import {
   RecipeDetail,
   RecipeDetailMat,
+  Topping,
 } from 'src/app/core/models/recipe.model';
 import { ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
 import { UserService } from 'src/app/core/services/user.service';
 import { UserPermissions } from 'src/app/core/auth/userPermissions';
+import { ToppingService } from 'src/app/core/services/topping.service';
 
 @Component({
   selector: 'app-recipe-details',
@@ -59,6 +61,7 @@ export class RecipeDetailsComponent implements OnInit {
     private _route: ActivatedRoute,
     private _router: Router,
     private _recipeService: RecipeService,
+    private _toppingService: ToppingService,
     private _userService: UserService
   ) {}
 
@@ -68,7 +71,7 @@ export class RecipeDetailsComponent implements OnInit {
     productCode: '',
     name: '',
     otherName: '',
-    Description: '',
+    description: '',
     otherDescription: '',
     lastModified: new Date(),
     price: 0,
@@ -79,6 +82,8 @@ export class RecipeDetailsComponent implements OnInit {
 
   repl = []
 
+  topping: Topping | null = null;
+
   ngOnInit() {
     this.productCode = this._route.snapshot.params['productCode'];
 
@@ -96,6 +101,11 @@ export class RecipeDetailsComponent implements OnInit {
 
     this.recipeDetailForm.valueChanges.subscribe(this.onRecipeDetailFormChange);
 
+
+    this._toppingService.getToppings(this.department, this._recipeService.getCurrentFile()).subscribe((data) => {
+      this.topping = data;
+    })
+
     // snap recipe detail form value
 
     this.actionRecord.registerOnAddAction((currAction, allAction) => {
@@ -132,7 +142,7 @@ export class RecipeDetailsComponent implements OnInit {
         productCode: this.productCode,
         name: this.recipeDetailForm.getRawValue().name != this.recipeOriginalDetail.name ? this.recipeDetailForm.getRawValue().name : this.recipeOriginalDetail.name,
         otherName: this.recipeDetailForm.getRawValue().otherName != this.recipeOriginalDetail.otherName ? this.recipeDetailForm.getRawValue().otherName : this.recipeOriginalDetail.otherName,
-        Description: this.recipeDetailForm.getRawValue().Description != this.recipeOriginalDetail.Description ? this.recipeDetailForm.getRawValue().Description : this.recipeOriginalDetail.Description,
+        description: this.recipeDetailForm.getRawValue().description != this.recipeOriginalDetail.description ? this.recipeDetailForm.getRawValue().description : this.recipeOriginalDetail.description,
         otherDescription: this.recipeDetailForm.getRawValue().otherDescription != this.recipeOriginalDetail.otherDescription ? this.recipeDetailForm.getRawValue().otherDescription : this.recipeOriginalDetail.otherDescription,
         LastChange: this.recipeDetailForm.getRawValue().lastModified != this.recipeOriginalDetail.lastModified ? this.recipeDetailForm.getRawValue().lastModified : this.recipeOriginalDetail.lastModified,
         price: this.recipeDetailForm.getRawValue().price != this.recipeOriginalDetail.price ? this.recipeDetailForm.getRawValue().price : this.recipeOriginalDetail.price,

client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.html

@@ -23,7 +23,12 @@
         <input type="checkbox" class="toggle" formControlName="isUse" />
       </td>
       <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-        <input type="text" class="input" formControlName="materialPathId" />
+        <input
+          type="text"
+          class="input"
+          formControlName="materialPathId"
+          (click)="openMaterialList(i)"
+        />
       </td>
       <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
         <input type="text" class="input" formControlName="name" />
@@ -55,3 +60,32 @@
     </tr>
   </tbody>
 </table>
+
+<!-- show material selector modal -->
+
+<input
+  type="checkbox"
+  id="material_selector"
+  class="modal-toggle"
+  #checkBox="ngModel"
+  [(ngModel)]="showMaterialSelector"
+/>
+<label for="material_selector" class="modal">
+  <div class="modal-box max-h-[400px] overflow-scroll">
+    <div class="flex flex-row m-2 modal">
+      <p class="font-bold text-lg m-2">Materials</p>
+    </div>
+    <div
+      *ngFor="let material of materialList"
+      class="flex flex-row m-2 overflow-y-scroll"
+    >
+      <button
+        class="btn bg-primary btn-md border-2 text-base text-gray-700"
+        (click)="selectMaterial(currentSelectRecipeList!, material)"
+      >
+        {{ material.materialID }}
+      </button>
+      <h3 class="m-3">{{ material.PackageDescription }}</h3>
+    </div>
+  </div>
+</label>

client/src/app/features/recipes/recipe-details/recipe-list/recipe-list.component.ts

@@ -5,33 +5,44 @@ import {
   FormBuilder,
   FormControl,
   FormGroup,
+  NgModel,
   ReactiveFormsModule,
 } from '@angular/forms';
 import { forEach, isEqual, sortBy } from 'lodash';
 import { first } from 'rxjs';
 import { UserPermissions } from 'src/app/core/auth/userPermissions';
 import {
+  MaterialCode,
   RecipeDetail,
   RecipeDetailMat,
 } from 'src/app/core/models/recipe.model';
+import { MaterialService } from 'src/app/core/services/material.service';
 import { RecipeService } from 'src/app/core/services/recipe.service';
 import { UserService } from 'src/app/core/services/user.service';
 import { Action, ActionRecord } from 'src/app/shared/actionRecord/actionRecord';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
 
 @Component({
   selector: 'app-recipe-list',
   templateUrl: './recipe-list.component.html',
   standalone: true,
-  imports: [NgIf, NgFor, ReactiveFormsModule],
+  imports: [NgIf, NgFor, ReactiveFormsModule, FormsModule],
 })
 export class RecipeListComponent implements OnInit {
   @Input({ required: true }) productCode!: string;
   @Output() recipeListFormChange = new EventEmitter<unknown[]>();
 
+  materialList: MaterialCode[] = [];
+  showMaterialSelector: boolean = false;
+
+  currentSelectRecipeList: number | null = null;
+
   isMatLoaded: boolean = false;
 
   constructor(
     private _recipeService: RecipeService,
+    private _materialService: MaterialService,
     private _formBuilder: FormBuilder,
     private _userService: UserService
   ) {}
@@ -97,6 +108,10 @@ export class RecipeListComponent implements OnInit {
 
 
     });
+
+    this._materialService.getMaterialCodes().subscribe((materials) => {
+      this.materialList = materials;
+    })
   }
 
   get recipeListData(): FormArray {
@@ -106,4 +121,18 @@ export class RecipeListComponent implements OnInit {
   isEditable(){
     return this._userService.getCurrentUser()!.permissions.includes(UserPermissions.EDITOR);
   }
+
+  openMaterialList(i: any){
+    console.log("open material list for ", i);
+    this.showMaterialSelector = true;
+    this.currentSelectRecipeList = i;
+  }
+
+  selectMaterial(i: number, material: MaterialCode){
+
+    this.showMaterialSelector = false;
+
+    this.recipeListData.at(i).get('materialPathId')?.setValue(material.materialID);
+    console.log("set mat ", material.materialID, "to slot", i);
+  }
 }