addable & removable recipelist | savable topping & material WIP

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

@@ -12,14 +12,25 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
+import { forEach } from 'lodash';
+import { RecipeListComponent } from '../recipes/recipe-details/recipe-list/recipe-list.component';
 
 @Component({
   selector: 'app-toppings',
   standalone: true,
-  imports: [CommonModule, NgSelectModule, FormsModule, ReactiveFormsModule],
   templateUrl: './toppings.component.html',
+  imports: [
+    CommonModule,
+    NgSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RecipeListComponent,
+  ],
 })
 export class ToppingsComponent implements OnInit {
+  onRecipeListFormChange($event: unknown[]) {
+    console.log("recipe list form change",$event);
+  }
   // topping group
   toppingGroupList: ToppingGroup[] = [];
   toppingLists: ToppingList[] = [];
@@ -28,6 +39,9 @@ export class ToppingsComponent implements OnInit {
     '0': { members: [] },
   };
 
+  // topping list keys
+  toppingListKeys: string[] = [];
+
   showToppingBuilder: boolean = false;
 
   // forms
@@ -38,6 +52,8 @@ export class ToppingsComponent implements OnInit {
     },
     { updateOn: 'blur' }
   );
+  productCode: string | undefined;
+  addingNewRecipeList: boolean = false;
 
   get toppingGroup(): FormArray {
     return this.toppingGroupForm.get('toppingGroup') as FormArray;
@@ -101,14 +117,25 @@ export class ToppingsComponent implements OnInit {
       this.toppingLists = data;
       this.mapNameToMember();
 
-      console.log(
-        'get topping list',
-        this.toppingLists,
-        'mapper:',
-        this.groupMembersMap
-      );
+      // push keys to list
+      for (let tpl of this.toppingLists) {
+        let currentKeys = Object.keys(tpl);
+        // console.log(tpl);
+        if (this.toppingListKeys.length == 0) {
+          this.toppingListKeys = currentKeys;
+        }
 
-      console.log('undefined name of topping list', this.findUndefinedName());
+        if (currentKeys.length > this.toppingListKeys.length) {
+          this.toppingListKeys = currentKeys;
+        }
+      }
+
+      console.log(
+        'topping lists: ',
+        this.toppingLists,
+        'keys: ',
+        this.toppingListKeys
+      );
     });
   }
 
@@ -145,9 +172,9 @@ export class ToppingsComponent implements OnInit {
 
   // get member data from group
   getMemberData = (group: string, member_id: string) => {
-    // if (this.groupMembersMap[group][member_id] == undefined) {
-    //   return {};
-    // }
+    if (this.groupMembersMap[group][member_id] == undefined) {
+      return { name: '' };
+    }
     return this.groupMembersMap[group][member_id];
   };
 
@@ -184,4 +211,5 @@ export class ToppingsComponent implements OnInit {
 
     targetDefault?.setValue(member);
   };
+
 }