showbridge-webui/src/app/components/module-list/module-list.html

<div class="flex flex-col">
  <div class="flex items-center">
    @if (schemaService.moduleTypes.length > 0) {
      <div
        matTooltip="Add Module"
        class="flex items-center justify-center w-10 h-10 bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400"
        [matMenuTriggerFor]="addModuleMenu"
        role="button"
        aria-label="Add Module"
      >
        <mat-icon>add</mat-icon>
      </div>
      <mat-menu #addModuleMenu="matMenu">
        @for (moduleType of schemaService.moduleTypes; track moduleType) {
          <button mat-menu-item (click)="addModule(moduleType.type)">
            <span>{{ moduleType.name }}</span>
          </button>
        }
      </mat-menu>
    }
    <div class="text-white">Modules</div>
  </div>
  <div
    class="grow overflow-x-hidden overflow-y-auto gap-1.5"
    cdkDropList
    (cdkDropListDropped)="drop($event)"
    [cdkDropListData]="modules()"
  >
    @for (module of modules(); track module.id; let i = $index) {
      <div class="m-2" cdkDrag>
        <app-module
          [id]="listService.pathToId(`modules/${i}`)"
          [path]="`modules/${i}`"
          [module]="module"
          (updated)="moduleUpdated(i, $event)"
          (delete)="deleteModule(i)"
          [inDragList]="true"
        ></app-module>
      </div>
    }
  </div>
</div>

<ng-template #addModuleMenu>
  @if (schemaService.moduleTypes.length > 0) {
    <div cdkMenu class="context-menu">
      @for (moduleType of schemaService.moduleTypes; track moduleType) {
        <button cdkMenuItem class="context-menu-item" (click)="addModule(moduleType.type)">
          <span>{{ moduleType.name }}</span>
        </button>
      }
    </div>
  }
</ng-template>