add topping WIP

client/src/app/features/material-settings/material-settings.component.html

@@ -39,7 +39,7 @@
     <div class="modal-box max-w-5xl">
       <p>Material Settings</p>
 
-      <input type="checkbox" [value]="currentMaterialSettings.isUse == 'true' ? true : false">
+      <input type="checkbox" value="{{currentMaterialSettings.isUse == 'true' ? true : false}}">
 
 
       <p>{{ currentMaterialSettings.materialName }}</p>

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

@@ -0,0 +1,39 @@
+<main class="relative overflow-auto max-h-[80%] h-[88vh]">
+  <table class="table w-full" [formGroup]="toppingGroupForm">
+    <thead class="text-xs sticky top-0">
+      <tr class="bg-primary">
+        <th>Is Use</th>
+        <th>ID</th>
+        <th>Name</th>
+        <th>Other Name</th>
+        <th>Desciption</th>
+        <!-- <th>Default</th> -->
+        <th>Default</th>
+      </tr>
+    </thead>
+
+    <tbody formArrayName="toppingGroup"  *ngFor="let tpg of toppingGroup.controls; let i = index">
+      <tr formGroupName="{{i}}">
+        <td><input class="toggle" type="checkbox" formControlName="inUse"></td>
+        <td><input class="input input-sm" formControlName="groupID"></td>
+        <td><input class="input input-sm" formControlName="name"></td>
+        <td><input class="input input-sm" formControlName="otherName"></td>
+        <td><input class="input input-sm" formControlName="Desc"></td>
+        <!-- <td>{{tpg.idDefault}}</td> -->
+        <td class=" rounded-md">
+          <div *ngFor="let m of getMemberByGroupId(getAttrFromForm(i, 'groupID'))">
+            <button
+              class="button border-solid border-2 border-black rounded-md p-2 hover:bg-yellow-300"
+              [ngClass]="{ 'button bg-red-200': m == getAttrFromForm(i, 'idDefault') }"
+            >
+              {{ returnThisOrElse(getMemberData(getAttrFromForm(i, 'groupID'), m).name, "") }} ({{
+                m
+              }})
+            </button>
+          </div>
+
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</main>

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

@@ -0,0 +1,168 @@
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { ToppingService } from 'src/app/core/services/topping.service';
+import { ToppingGroup, ToppingList } from 'src/app/core/models/recipe.model';
+import { RecipeService } from 'src/app/core/services/recipe.service';
+import {
+  FormArray,
+  FormBuilder,
+  FormGroup,
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+
+@Component({
+  selector: 'app-toppings',
+  standalone: true,
+  imports: [CommonModule, NgSelectModule,FormsModule, ReactiveFormsModule],
+  templateUrl: './toppings.component.html',
+})
+export class ToppingsComponent implements OnInit {
+  // topping group
+  toppingGroupList: ToppingGroup[] = [];
+  toppingLists: ToppingList[] = [];
+
+  groupMemebersMap: { [key: string]: { [key: string]: any } } = {
+    '0': { members: [] },
+  };
+
+  // forms
+
+  toppingGroupForm = this._formBuilder.group(
+    {
+      toppingGroup: this._formBuilder.array([]),
+    },
+    { updateOn: 'blur' }
+  );
+
+  get toppingGroup(): FormArray {
+    return this.toppingGroupForm.get('toppingGroup') as FormArray;
+  }
+
+  // ----------------------------------------------------------------------------
+
+  constructor(
+    private _httpClient: HttpClient,
+    private _recipeService: RecipeService,
+    private _toppingService: ToppingService,
+    private _formBuilder: FormBuilder
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    // initialize
+    (
+      await this._toppingService.getToppingGroups(
+        await this._recipeService.getCurrentCountry(),
+        this._recipeService.getCurrentFile()
+      )
+    ).subscribe((data) => {
+      // sort by group id
+      data.sort((a, b) => parseInt(a.groupID) - parseInt(b.groupID));
+
+      this.toppingGroupList = data;
+      this.mapMembers();
+      console.log(
+        'topping groups: ',
+        this.toppingGroupList,
+        'mapper:',
+        this.groupMemebersMap,
+        'length',
+        this.toppingGroupList.length
+      );
+
+      // do push to form
+      data.forEach((tg) => {
+        this.toppingGroup.push(
+          this._formBuilder.group({
+            Desc: tg.Desc,
+            name: tg.name,
+            otherName: tg.otherName,
+            groupID: tg.groupID,
+            idInGroup: tg.idInGroup,
+            idDefault: tg.idDefault,
+            inUse: tg.inUse,
+          })
+        );
+      });
+
+      console.log('create topping group form', this.toppingGroup);
+    });
+
+    (
+      await this._toppingService.getToppingLists(
+        await this._recipeService.getCurrentCountry(),
+        this._recipeService.getCurrentFile()
+      )
+    ).subscribe((data) => {
+      this.toppingLists = data;
+      this.mapNameToMember();
+
+      console.log(
+        'get topping list',
+        this.toppingLists,
+        'mapper:',
+        this.groupMemebersMap
+      );
+
+      console.log('undefined name of topping list', this.findUndefinedName());
+    });
+  }
+
+  // -------------------------------------- Functions -------------------------------------------
+
+  // mapping member to group
+  mapMembers = () => {
+    this.toppingGroupList.forEach((tpg) => {
+      let spl_mem = tpg.idInGroup.split(',');
+      this.groupMemebersMap[tpg.groupID] = { members: spl_mem };
+    });
+  };
+
+  // get members of group id
+  getMemberByGroupId = (id: string) =>
+    this.groupMemebersMap[id]['members'] as string[];
+
+  // match name to member
+  mapNameToMember = () => {
+    if (this.toppingLists.length > 0) {
+      this.toppingGroupList.forEach((tpg) => {
+        let members = this.groupMemebersMap[tpg.groupID]['members'];
+        members.forEach((member_id: string) => {
+          // do get member data from topping list
+          let member_data = this.toppingLists.find(
+            (v) => v.id.toString() == member_id.toString()
+          );
+          // set data to group
+          this.groupMemebersMap[tpg.groupID][member_id] = member_data;
+        });
+      });
+    }
+  };
+
+  // get member data from group
+  getMemberData = (group: string, member_id: string) => {
+    if (this.groupMemebersMap[group][member_id] == undefined) {
+      return {};
+    }
+    return this.groupMemebersMap[group][member_id];
+  };
+
+  // check which list does not have name
+  findUndefinedName = () =>
+    this.toppingLists.filter((tl) => tl.name == '' || tl.name == undefined);
+
+  // get with default value
+  returnThisOrElse = (value: any, default_value: any) =>
+    value == undefined || value == '' ? default_value : value;
+
+  // get value from form by given key
+  getAttrFromForm(index: number, key: string){
+    let x = this.toppingGroup.controls.at(index) as any;
+    return x.value[key];
+  }
+
+  // diff and find matched
+  comapareFunction = (a: any, b: any) => ( a != undefined && b != undefined)&& (a.toString() === b.toString());
+}