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

<div class="flex sticky top-10 p-2 space-x-2 items-center">
  <p class="m-4 font-bold text-lg">Material Settings</p>
  <button class="btn m-4">New Category</button>
</div>

<div class="overflow-auto h-[80vh] w-[85vw]">
  <div class="m-4 w-[90%]" *ngFor="let cat of getCategories()">
    <details class="bg-stone-300 p-4 collapse collapse-arrow">
      <summary class="font-bold text-lg collapse-title">
        {{ cat }}
      </summary>

      <div class="collapse-content">
        <button class="btn">New {{ cat }} material</button>

        <div class="divider"></div>

        <div class="grid grid-flow-row grid-cols-7 gap-4">
          <div
            class="m-1"
            *ngFor="let material of allMaterialsGroupedByTypes[cat]"
          >
            <button
              class="bg-slate-100 p-2 rounded-md w-44"
              (click)="openMaterialSettingModal(material.id)"
            >
              <p>{{ material.name }} ({{ material.id }})</p>
            </button>
            <dialog
              id="material_settings_modal_{{ material.id }}"
              class="modal"
            >
              <div class="modal-box max-w-5xl">

                <div *ngIf="currentMaterialSettings != null" [formGroup]="materialSettingForm">
                  <p>Material Settings</p>

                  <!-- TODO: add form -->

                  <div class="divider"></div>
                  <div formArrayName="materialSetting" *ngFor="let material of materialSetting.controls; let i = index">
                    <!-- only show the current form matched by index -->
                    <div formGroupName="{{i}}">
                      <div class="" *ngIf="i == currentFormIndex">

                        <!-- <p>Form at {{i}}</p> -->

                        <table class="table">
                          <thead>
                            <tr>
                              <th>Is Use</th>
                              <th>ID</th>
                              <th>ID Alternate</th>
                              <th>Name</th>
                              <th>Other Name</th>

                            </tr>
                          </thead>
                          <tbody>
                            <tr>

                              <td>
                                <input class="toggle" type="checkbox" formControlName="isUse" />
                              </td>

                              <td>
                                <input class="input input-sm input-bordered" formControlName="id" />
                              </td>

                              <td>
                                <input class="input input-sm input-bordered" formControlName="idAlternate" />
                              </td>


                              <td>
                                <input class="input input-sm input-bordered" formControlName="materialName" />
                              </td>

                              <td>
                                <input class="input input-sm input-bordered" formControlName="materialOtherName" />
                              </td>
                            </tr>
                          </tbody>
                        </table>


                        <!-- <input class="input input-sm input-bordered" formControlName="RawMaterialUnit" />
                        <input class="input input-sm input-bordered" formControlName="MaterialParameter" />
                        <input class="input input-sm input-bordered" formControlName="id" />
                        <input class="input input-sm input-bordered" formControlName="idAlternate" />
                        <input class="input input-sm input-bordered" formControlName="pay_rettry_max_count" />
                        <input class="input input-sm input-bordered" formControlName="feed_mode" />
                        <input class="input input-sm input-bordered" formControlName="MaterialStatus" /> -->

                        <div class="divider"></div>

                        <!-- channels -->

                        <div class="bg-stone-500 p-2 rounded-md text-white">

                          <div class="flex space-x-2 justify-evenly">
                            <div class="justify-center">
                              <p class="font-bold">Powder</p>
                              <input class="checkbox checkbox-info" type="checkbox" formControlName="PowderChannel" />
                            </div>

                            <div class="justify-center">
                              <p class="font-bold">Syrup</p>
                              <input class="checkbox checkbox-info" type="checkbox" formControlName="SyrupChannel" />
                            </div>

                            <div class="justify-center">
                              <p class="font-bold">Bean</p>
                              <input class="checkbox checkbox-info" type="checkbox" formControlName="BeanChannel" />
                            </div>

                            <div class="justify-center">
                              <p class="font-bold">Soda</p>
                              <input class="checkbox checkbox-info" type="checkbox" formControlName="SodaChannel" />
                            </div>

                            <div class="justify-center">
                              <p class="font-bold">Equipment</p>
                              <input class="checkbox checkbox-info" type="checkbox" formControlName="IsEquipment" />
                            </div>

                            <div class="justify-center">
                              <p class="font-bold">Leaves</p>
                              <input class="checkbox checkbox-info" type="checkbox" formControlName="LeavesChannel" />
                            </div>

                            <div class="justify-center">
                              <p class="font-bold">Ice Cream</p>
                              <input class="checkbox checkbox-info" type="checkbox" formControlName="IceScreamBingsuChannel" />
                            </div>
                          </div>

                        </div>






                        <!-- <input class="input input-sm input-bordered" formControlName="StringParam" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="AlarmIDWhenOffline" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="CanisterType" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="DrainTimer" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="LowToOffline" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="MaterialStatus" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="RefillUnitGram" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="RefillUnitMilliliters" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="RefillUnitPCS" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="ScheduleDrainType" /> -->
                        <!-- <input class="input input-sm input-bordered" formControlName="StockAdjust" /> -->

                      </div>
                    </div>
                  </div>

                </div>

                <div class="modal-action sticky bottom-0 right-0">
                  <form method="dialog">
                    <button class="btn btn-warning">Close</button>
                  </form>
                </div>
              </div>
            </dialog>
          </div>
        </div>
      </div>
    </details>
  </div>
</div>

<!-- 0: "StringParam"1: "AlarmIDWhenOffline"2: "BeanChannel"3: "CanisterType"4: "DrainTimer"5: "IceScreamBingsuChannel"6: "IsEquipment"7: "LeavesChannel"8: "LowToOffline"9: "MaterialStatus"10: "PowderChannel"11: "RefillUnitGram"12: "RefillUnitMilliliters"13: "RefillUnitPCS"14: "ScheduleDrainType"15: "SodaChannel"16: "StockAdjust"17: "SyrupChannel"18: "id"19: "idAlternate"20: "isUse"21: "pay_rettry_max_count"22: "feed_mode"23: "MaterialParameter"24: "materialName"25: "materialOtherName"26: "RawMaterialUnit" -->