add drag and drop to rest of lists

src/app/components/route/route.html

@@ -6,6 +6,14 @@
     }} border-solid w-full"
   >
     <div class="flex items-center justify-end">
+      @if (inDragList()) {
+        <div
+          cdkDragHandle
+          class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+        >
+          <mat-icon>drag_indicator</mat-icon>
+        </div>
+      }
       <div class="flex items-center">
         <mat-icon [style.color]="indicatorColor()" matTooltip="Route Indicator"
           >chevron_right</mat-icon
@@ -66,12 +74,12 @@
           <div
             class="border-2 border-gray-500 m-2"
             cdkDropList
-            [id]="listsService.registerProcessorList(path() + '/processors')"
+            [id]="processorListId()"
             [cdkDropListConnectedTo]="listsService.processorListIds"
             (cdkDropListDropped)="drop($event)"
             [cdkDropListData]="route()?.processors"
           >
-            @for (processor of processors(); track $index; let i = $index) {
+            @for (processor of processors(); track processor; let i = $index) {
               <div cdkDrag>
                 <app-processor
                   [path]="path() + '/processors/' + i"
@@ -115,4 +123,148 @@
       </div>
     }
   </ng-template>
+
+  <div *cdkDragPreview class="flex items-start m-2 w-fit">
+    <div
+      class="flex flex-col bg-gray-800 border-2 {{
+        isInError() ? 'border-red-500' : 'border-gray-600'
+      }} border-solid w-full"
+    >
+      <div class="flex items-center justify-end">
+        @if (inDragList()) {
+          <div
+            cdkDragHandle
+            class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+          >
+            <mat-icon>drag_indicator</mat-icon>
+          </div>
+        }
+        <div class="flex items-center">
+          <mat-icon [style.color]="indicatorColor()" matTooltip="Route Indicator"
+            >chevron_right</mat-icon
+          >
+        </div>
+        <div class="grow text-left ml-2 text-white">Route</div>
+        <div
+          class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
+          (click)="delete.emit()"
+        >
+          <mat-icon class="text-red-500!">close</mat-icon>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div *cdkDragPlaceholder class="flex items-start m-2 w-fit">
+    <div
+      class="flex flex-col bg-gray-800 border-2 {{
+        isInError() ? 'border-red-500' : 'border-gray-600'
+      }} border-solid w-full opacity-30"
+    >
+      <div class="flex items-center justify-end">
+        @if (inDragList()) {
+          <div
+            cdkDragHandle
+            class="flex items-center justify-center bg-transparent hover:bg-gray-700 hover:cursor-move text-blue-400"
+          >
+            <mat-icon>drag_indicator</mat-icon>
+          </div>
+        }
+        <div class="flex items-center">
+          <mat-icon [style.color]="indicatorColor()" matTooltip="Route Indicator"
+            >chevron_right</mat-icon
+          >
+        </div>
+        <div class="grow text-left ml-2 text-white">Route</div>
+        <div
+          class="flex items-center justify-center hover:bg-gray-700 hover:cursor-pointer"
+          (click)="delete.emit()"
+        >
+          <mat-icon class="text-red-500!">close</mat-icon>
+        </div>
+      </div>
+      <hr class="bg-gray-600 h-0.5 border-0" />
+      <div>
+        <form [formGroup]="formGroup">
+          <div class="m-2">
+            <div class="flex items-center m-1">
+              <label class="mr-2 text-white"> Input: </label>
+              <select
+                class="pl-1 border-2 border-gray-200 text-white border-solid rounded-sm w-full"
+                formControlName="input"
+              >
+                @for (option of moduleIds(); track option) {
+                  <option [value]="option">
+                    {{ option }}
+                  </option>
+                }
+              </select>
+              @if (!formGroup.controls['input'].valid) {
+                <!-- TODO(jwetzell): better error displaying -->
+                <div class="ml-2 text-red-500">{{ formGroup.controls['input'].errors | json }}</div>
+              }
+            </div>
+          </div>
+        </form>
+        <div>
+          <div class="flex items-center">
+            @if (schemaService.processorTypes.length > 0) {
+              <div
+                matTooltip="Add Processor"
+                class="flex items-center justify-center w-10 h-10 bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400"
+                [matMenuTriggerFor]="addProcessorMenu"
+              >
+                <mat-icon>add</mat-icon>
+              </div>
+              <mat-menu #addProcessorMenu="matMenu">
+                @for (processorType of schemaService.processorTypes; track processorType) {
+                  <button mat-menu-item (click)="addProcessor(processorType.type)">
+                    <span>{{ processorType.name }}</span>
+                  </button>
+                }
+              </mat-menu>
+            }
+            <div class="text-md text-white text-center">Processors</div>
+          </div>
+          @if (processors() !== undefined && processors()!.length > 0) {
+            <div
+              class="border-2 border-gray-500 m-2"
+              cdkDropList
+              [id]="processorListId()"
+              [cdkDropListConnectedTo]="listsService.processorListIds"
+              (cdkDropListDropped)="drop($event)"
+              [cdkDropListData]="route()?.processors"
+            >
+              @for (processor of processors(); track processor; let i = $index) {
+                <div cdkDrag>
+                  <app-processor
+                    [path]="path() + '/processors/' + i"
+                    (updated)="processorUpdated(i, $event)"
+                    [processor]="processor"
+                    (delete)="deleteProcessor(i)"
+                    [inDragList]="true"
+                  ></app-processor>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      </div>
+      <div>
+        @if (routeConfigErrors().length > 0) {
+          <div class="m-2 p-2 border-2 border-red-500">
+            <div class="flex items-center mb-2 text-red-500">
+              <mat-icon>error</mat-icon>
+              <span class="ml-1">Route Errors</span>
+            </div>
+            @for (error of routeConfigErrors(); track error.index) {
+              <div class="ml-4 mb-1 text-white">
+                {{ error.error }}
+              </div>
+            }
+          </div>
+        }
+      </div>
+    </div>
+  </div>
 }

src/app/components/route/route.ts

@@ -1,4 +1,11 @@
-import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDragPlaceholder,
+  CdkDragPreview,
+  CdkDropList,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
 import { JsonPipe } from '@angular/common';
 import { Component, computed, inject, input, output, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -28,6 +35,8 @@ import { ProcessorComponent } from '../processor/processor';
     MatTooltipModule,
     CdkDrag,
     CdkDropList,
+    CdkDragPreview,
+    CdkDragPlaceholder,
   ],
   templateUrl: './route.html',
   styleUrl: './route.css',
@@ -45,6 +54,7 @@ export class RouteComponent {
     return undefined;
   });
 
+  inDragList = input<boolean>(false);
   route = input<RouteConfig>();
   moduleIds = input<string[]>([]);
   delete = output<void>();
@@ -83,8 +93,14 @@ export class RouteComponent {
   private configService = inject(ConfigService);
   public listsService = inject(ListsService);
 
+  public processorListId = signal<string>('');
+
   indicatorColor = signal<string>('gray');
 
+  ngOnDestroy(): void {
+    this.listsService.removeProcessorList(this.path() + '/processors');
+  }
+
   ngOnInit(): void {
     this.formGroup.patchValue({
       input: this.route()?.input,
@@ -115,6 +131,7 @@ export class RouteComponent {
           this.indicatorColor.set('gray');
         });
     }
+    this.processorListId.set(this.listsService.registerProcessorList(this.path() + '/processors'));
   }
 
   isInError(): boolean {