add topping WIP

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>