addable & removable recipelist | savable topping & material WIP

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

@@ -1,8 +1,112 @@
 <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>
+    <!-- topping builder -->
+    <button class="btn" onclick="topping_builder_modal.showModal()">
+      Create Topping
     </button>
+    <dialog id="topping_builder_modal" class="modal">
+      <div class="modal-box max-w-screen-2xl">
+        <div class="sticky top-0 z-10 bg-stone-200 rounded-md">
+          <div class="flex items-center justify-start space-x-4">
+            <h3 class="text-xl font-bold">Topping Builder</h3>
+
+            <div class="">
+
+            </div>
+
+
+            <div class="modal-action">
+              <form method="dialog">
+                <button class="btn btn-warning">Close</button>
+              </form>
+            </div>
+          </div>
+
+          <div class="divider"></div>
+        </div>
+
+        <!-- body -->
+
+        <div class="flex space-x-2 items-center justify-evenly">
+          <!-- id -->
+          <div class="flex space-x-3">
+            <p class="text-lg font-bold">ID</p>
+            <input
+              type="text"
+              class="input input-sm input-bordered input-ghost w-full"
+            />
+          </div>
+
+          <!-- name -->
+          <div class="flex space-x-3">
+            <p class="text-lg font-bold">Name</p>
+            <input
+              type="text"
+              class="input input-sm input-bordered input-ghost w-full"
+            />
+          </div>
+
+          <!-- productCode -->
+          <div class="flex space-x-3">
+            <p class=" font-bold">Product Code</p>
+            <input
+              type="text"
+              class="input input-sm input-bordered input-ghost w-full"
+            />
+          </div>
+        </div>
+
+        <div class="w-full h-screen">
+          <app-recipe-list
+            [productCode]="productCode!"
+            [noFetch]="true"
+            (recipeListFormChange)="onRecipeListFormChange($event)"
+          ></app-recipe-list>
+        </div>
+
+        <!-- other config -->
+        <!-- [
+    "ExtendID",
+    "OnTOP",
+    "MenuStatus",
+    "cashPrice",
+    "disable",
+    "disable_by_cup",
+    "disable_by_ice",
+    "EncoderCount",
+    "id", ✅
+    "isUse",
+    "isShow",
+    "StringParam",
+    "name", ✅
+    "nonCashPrice",
+    "otherName",
+    "productCode",
+    "recipes",
+    "total_time",
+    "total_weight",
+    "useGram",
+    "weight_float"
+] -->
+      </div>
+    </dialog>
+
+    <!-- group builder -->
+    <button class="btn" onclick="group_editor_modal.showModal()">
+      Group Editor
+    </button>
+    <dialog id="group_editor_modal" class="modal">
+      <div class="modal-box max-w-screen-2xl">
+        <div class="w-full h-screen"></div>
+        <div class="modal-action sticky bottom-0 right-0">
+          <form method="dialog">
+            <button class="btn btn-warning">Close</button>
+          </form>
+        </div>
+      </div>
+    </dialog>
+
+    <!-- TODO: save all changes and send to server -->
     <button class="btn">
       <p>Save Changes</p>
     </button>
@@ -74,19 +178,3 @@
     </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>