Taobin-Recipe-Manager/client/src/app/features/toppings/toppings.component.html

<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">
    <!-- 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>
  </div>

  <table class="table w-full" [formGroup]="toppingGroupForm">
    <thead class="text-xs sticky top-12">
      <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 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> -->
        <div class="tooltip" data-tip="Default select id not in group or does not set" *ngIf="!isDefaultInMember(getAttrFromForm(i, 'groupID'), getAttrFromForm(i, 'idDefault'))">
          <p class="text-red-500 text-5xl">⚠️</p>
        </div>
        <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"
              [ngClass]="{
                'button bg-red-200': m == getAttrFromForm(i, 'idDefault')
              }"
              (click)="setDefaultOfToppingGroup(i, m)"
            >
              {{
                returnThisOrElse(
                  getMemberData(getAttrFromForm(i, "groupID"), m).name,
                  ""
                )
              }}
              ({{ m }})
            </button>
            <!-- <button>Edit</button> -->
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</main>