merge doing topping and re-save file

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

@@ -1,6 +1,15 @@
-<main class="relative overflow-auto max-h-[80%] h-[88vh]">
+<main class="relative overflow-auto max-h-[80%] h-[88vh] bg-stone-100">
+  <div class="w-full m-4 space-x-4 sticky top-0 bg-stone-100 z-10">
+    <button class="btn" (click)="showToppingBuilder = true">
+      <p>New Topping</p>
+    </button>
+    <button class="btn">
+      <p>Save Changes</p>
+    </button>
+  </div>
+
   <table class="table w-full" [formGroup]="toppingGroupForm">
-    <thead class="text-xs sticky top-0">
+    <thead class="text-xs sticky top-12">
       <tr class="bg-primary">
         <th>Is Use</th>
         <th>ID</th>
@@ -12,28 +21,72 @@
       </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>
+    <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 input-bordered"
+            formControlName="groupID"
+          />
+        </td>
+        <td>
+          <input class="input input-sm input-bordered" formControlName="name" />
+        </td>
+        <td>
+          <input
+            class="input input-sm input-bordered"
+            formControlName="otherName"
+          />
+        </td>
+        <td>
+          <input class="input input-sm input-bordered" formControlName="Desc" />
+        </td>
         <!-- <td>{{tpg.idDefault}}</td> -->
-        <td class=" rounded-md">
-          <div *ngFor="let m of getMemberByGroupId(getAttrFromForm(i, 'groupID'))">
+        <td class="grid grid-flow-row grid-cols-3 rounded-md gap-2">
+          <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') }"
+              class="button border-solid border-2 border-black rounded-md p-2"
+              [ngClass]="{
+                'button bg-red-200': m == getAttrFromForm(i, 'idDefault')
+              }"
+              (click)="setDefaultOfToppingGroup(i, m)"
             >
-              {{ returnThisOrElse(getMemberData(getAttrFromForm(i, 'groupID'), m).name, "") }} ({{
-                m
-              }})
+              {{
+                returnThisOrElse(
+                  getMemberData(getAttrFromForm(i, "groupID"), m).name,
+                  ""
+                )
+              }}
+              ({{ m }})
             </button>
+            <!-- <button>Edit</button> -->
           </div>
-
         </td>
       </tr>
     </tbody>
   </table>
 </main>
+
+<!-- modal -->
+<input
+  type="checkbox"
+  id="topping_builder_modal"
+  class="modal-toggle"
+  #checkbox="ngModel"
+  [(ngModel)]="showToppingBuilder"
+/>
+<label for="topping_builder_modal" class="modal">
+  <div class="modal-box max-w-5xl">
+    <h3 class="text-xl font-bold">Topping Builder</h3>
+    <!-- body -->
+
+  </div>
+</label>

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

@@ -16,7 +16,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 @Component({
   selector: 'app-toppings',
   standalone: true,
-  imports: [CommonModule, NgSelectModule,FormsModule, ReactiveFormsModule],
+  imports: [CommonModule, NgSelectModule, FormsModule, ReactiveFormsModule],
   templateUrl: './toppings.component.html',
 })
 export class ToppingsComponent implements OnInit {
@@ -24,10 +24,12 @@ export class ToppingsComponent implements OnInit {
   toppingGroupList: ToppingGroup[] = [];
   toppingLists: ToppingList[] = [];
 
-  groupMemebersMap: { [key: string]: { [key: string]: any } } = {
+  groupMembersMap: { [key: string]: { [key: string]: any } } = {
     '0': { members: [] },
   };
 
+  showToppingBuilder: boolean = false;
+
   // forms
 
   toppingGroupForm = this._formBuilder.group(
@@ -67,7 +69,7 @@ export class ToppingsComponent implements OnInit {
         'topping groups: ',
         this.toppingGroupList,
         'mapper:',
-        this.groupMemebersMap,
+        this.groupMembersMap,
         'length',
         this.toppingGroupList.length
       );
@@ -103,7 +105,7 @@ export class ToppingsComponent implements OnInit {
         'get topping list',
         this.toppingLists,
         'mapper:',
-        this.groupMemebersMap
+        this.groupMembersMap
       );
 
       console.log('undefined name of topping list', this.findUndefinedName());
@@ -116,26 +118,26 @@ export class ToppingsComponent implements OnInit {
   mapMembers = () => {
     this.toppingGroupList.forEach((tpg) => {
       let spl_mem = tpg.idInGroup.split(',');
-      this.groupMemebersMap[tpg.groupID] = { members: spl_mem };
+      this.groupMembersMap[tpg.groupID] = { members: spl_mem };
     });
   };
 
   // get members of group id
   getMemberByGroupId = (id: string) =>
-    this.groupMemebersMap[id]['members'] as string[];
+    this.groupMembersMap[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'];
+        let members = this.groupMembersMap[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;
+          this.groupMembersMap[tpg.groupID][member_id] = member_data;
         });
       });
     }
@@ -143,10 +145,10 @@ export class ToppingsComponent implements OnInit {
 
   // 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];
+    // if (this.groupMembersMap[group][member_id] == undefined) {
+    //   return {};
+    // }
+    return this.groupMembersMap[group][member_id];
   };
 
   // check which list does not have name
@@ -158,11 +160,28 @@ export class ToppingsComponent implements OnInit {
     value == undefined || value == '' ? default_value : value;
 
   // get value from form by given key
-  getAttrFromForm(index: number, key: string){
+  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());
+  comapareFunction = (a: any, b: any) =>
+    a != undefined && b != undefined && a.toString() === b.toString();
+
+  // onclick: set default of topping in the group
+  setDefaultOfToppingGroup = (index: number, member: string) => {
+    // get default of group in form
+    let targetForm = this.toppingGroup.controls.at(index);
+    console.log('get id default', targetForm);
+
+    let targetDefault = targetForm?.get('idDefault');
+
+    // if click on the same index, set 0
+    if (targetDefault?.value == member) {
+      member = '0';
+    }
+
+    targetDefault?.setValue(member);
+  };
 }