add topping WIP

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

@@ -141,10 +141,17 @@ const routes: Routes = [
       {
         path: 'materials',
         loadComponent: () =>
-          import('./features/material-settings/material-settings.component').then(
-            (m) => m.MaterialSettingsComponent
+          import(
+            './features/material-settings/material-settings.component'
+          ).then((m) => m.MaterialSettingsComponent),
+      },
+      {
+        path: 'toppings',
+        loadComponent: () =>
+          import('./features/toppings/toppings.component').then(
+            (t) => t.ToppingsComponent
           ),
-      }
+      },
     ],
   },
   {

client/src/app/core/layout/layout.component.ts

@@ -34,15 +34,15 @@ export class LayoutComponent implements OnInit, OnDestroy {
       icon_url: 'assets/icons/recipes.svg',
       link: '/' + this.current_department + '/recipes',
     },
-    {
-      name: 'Log',
-      icon_url: 'assets/icons/logs.svg',
-      link: '/' + this.current_department + '/log',
-    },
     {
       name: 'Materials',
       icon_url: '',
       link: '/' + this.current_department + '/materials',
+    },
+    {
+      name: 'Toppings',
+      icon_url: '',
+      link: '/' + this.current_department + '/toppings'
     }
   ];
   date = new Date();

client/src/app/core/models/recipe.model.ts

@@ -113,7 +113,7 @@ export interface ToppingGroup {
   groupID: string;
   idDefault: string;
   idInGroup: string;
-  inUse: string;
+  inUse: boolean;
   name: string;
   otherName: string;
 }

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

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable, count } from 'rxjs';
 import { environment } from 'src/environments/environment';
-import { Topping, ToppingSet } from '../models/recipe.model';
+import { Topping, ToppingGroup, ToppingList, ToppingSet } from '../models/recipe.model';
 import { RecipeService } from './recipe.service';
 import { getCountryMapSwitcher } from 'src/app/shared/helpers/recipe';
 
@@ -10,13 +10,19 @@ import { getCountryMapSwitcher } from 'src/app/shared/helpers/recipe';
   providedIn: 'root',
 })
 export class ToppingService {
-  constructor(private _httpClient: HttpClient, private _recipeService: RecipeService) {}
+  constructor(
+    private _httpClient: HttpClient,
+    private _recipeService: RecipeService
+  ) {}
 
-  async getToppings(country: string, filename: string): Promise<Observable<Topping>> {
-    console.log("getToppings", country);
+  async getToppings(
+    country: string,
+    filename: string
+  ): Promise<Observable<Topping>> {
+    console.log('getToppings', country);
     let asyncCountry = await this._recipeService.getCurrentCountry();
     country = getCountryMapSwitcher(asyncCountry);
-    console.log("getToppingsPreFetch", country, asyncCountry);
+    console.log('getToppingsPreFetch', country, asyncCountry);
     return this._httpClient.get<Topping>(
       `${environment.api}/recipes/${country}/${filename}/toppings`,
       {
@@ -24,16 +30,20 @@ export class ToppingService {
           country: country,
           filename: filename,
         },
-        withCredentials: true
+        withCredentials: true,
       }
     );
   }
 
-  async getToppingsOfRecipe(country: string, filename: string, productCode: string): Promise<Observable<ToppingSet[]>> {
-    console.log("getToppingsOfRecipe", country);
+  async getToppingsOfRecipe(
+    country: string,
+    filename: string,
+    productCode: string
+  ): Promise<Observable<ToppingSet[]>> {
+    console.log('getToppingsOfRecipe', country);
     let asyncCountry = await this._recipeService.getCurrentCountry();
     country = country || asyncCountry;
-    console.log("getToppingsOfRecipePreFetch", country, asyncCountry);
+    console.log('getToppingsOfRecipePreFetch', country, asyncCountry);
     return this._httpClient.get<ToppingSet[]>(
       `${environment.api}/recipes/${country}/${filename}/${productCode}/toppings`,
       {
@@ -41,8 +51,49 @@ export class ToppingService {
           country: country,
           filename: filename,
         },
-        withCredentials: true
+        withCredentials: true,
       }
     );
   }
+
+  async getToppingGroups(
+    country: string,
+    filename: string
+  ): Promise<Observable<ToppingGroup[]>> {
+    console.log('fetching topping group');
+    let asyncCountry = await this._recipeService.getCurrentCountry();
+    country = getCountryMapSwitcher(asyncCountry);
+
+    return this._httpClient.get<ToppingGroup[]>(
+      `${environment.api}/toppings/groups/${country}/${filename}`,
+      {
+        params:{
+          country: country,
+          filename: filename
+        },
+        withCredentials: true,
+      }
+    );
+  }
+
+  async getToppingLists(
+    country: string,
+    filename: string
+  ): Promise<Observable<ToppingList[]>> {
+    console.log('fetching topping list');
+    let asyncCountry = await this._recipeService.getCurrentCountry();
+    country = getCountryMapSwitcher(asyncCountry);
+
+    return this._httpClient.get<ToppingList[]>(
+      `${environment.api}/toppings/lists/${country}/${filename}`,
+      {
+        params:{
+          country: country,
+          filename: filename
+        },
+        withCredentials: true,
+      }
+    );
+  }
+
 }

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());
+}