make processors drag and droppable within their own route

src/app/components/processor/processor.html

@@ -6,6 +6,14 @@
       }} border-solid w-fit h-full"
     >
       <div class="flex items-center justify-center">
+        @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="grow ml-1 mr-3 text-white">
           {{ schema()?.title || processor()?.type }}
         </div>
@@ -28,4 +36,40 @@
       }
     </div>
   </div>
+
+  <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-fit h-full"
+    >
+      <div class="flex items-center justify-center">
+        @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="grow ml-1 mr-3 text-white">
+          {{ schema()?.title || processor()?.type }}
+        </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-dotted w-fit h-full"
+    >
+      <div class="flex items-center justify-center">
+        <div class="grow ml-1 mr-3 text-transparent">
+          {{ schema()?.title || processor()?.type }}
+        </div>
+      </div>
+    </div>
+  </div>
 }

src/app/components/processor/processor.ts

@@ -4,10 +4,18 @@ import { SchemaService } from '../../services/schema';
 import { MatIconModule } from '@angular/material/icon';
 import { ParamsFormComponent } from '../params-form/params-form';
 import { ReactiveFormsModule } from '@angular/forms';
+import { CdkDragHandle, CdkDragPlaceholder, CdkDragPreview } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'app-processor',
-  imports: [MatIconModule, ParamsFormComponent, ReactiveFormsModule],
+  imports: [
+    MatIconModule,
+    ParamsFormComponent,
+    ReactiveFormsModule,
+    CdkDragHandle,
+    CdkDragPreview,
+    CdkDragPlaceholder,
+  ],
   templateUrl: './processor.html',
   styleUrl: './processor.css',
 })
@@ -16,6 +24,8 @@ export class ProcessorComponent {
   processor = model<ProcessorConfig>();
   delete = output<void>();
 
+  inDragList = input<boolean>(false);
+
   params = computed(() => this.processor()!.params);
 
   schema = computed(() => {

src/app/components/route/route.html

@@ -63,7 +63,11 @@
           <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">
+          <div class="border-2 border-gray-500 m-2"
+          cdkDropList
+          (cdkDropListDropped)="drop($event)"
+          [cdkDropListData]="route()?.processors"
+          >
             @for (processor of processors(); track $index; let i = $index) {
               <div cdkDrag>
                 <app-processor
@@ -71,6 +75,7 @@
                   (processorChange)="processorUpdated(i, $event)"
                   [processor]="processor"
                   (delete)="deleteProcessor(i)"
+                  [inDragList]="true"
                 ></app-processor>
               </div>
             }

src/app/components/route/route.ts

@@ -1,17 +1,24 @@
+import {
+  CdkDrag,
+  CdkDragDrop,
+  CdkDropList,
+  moveItemInArray
+} from '@angular/cdk/drag-drop';
+import { JsonPipe } from '@angular/common';
 import { Component, computed, inject, input, model, output, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-import { ProcessorConfig, RouteConfig } from '../../models/config';
-import { SchemaService } from '../../services/schema';
-import { JsonPipe } from '@angular/common';
-import { ProcessorComponent } from '../processor/processor';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { EventsService } from '../../services/events';
 import { debounceTime, tap } from 'rxjs';
+import { ProcessorConfig, RouteConfig } from '../../models/config';
 import { ConfigService } from '../../services/config';
+import { EventsService } from '../../services/events';
+import { ListsService } from '../../services/lists';
+import { SchemaService } from '../../services/schema';
+import { ProcessorComponent } from '../processor/processor';
 
 @Component({
   selector: 'app-route',
@@ -23,6 +30,8 @@ import { ConfigService } from '../../services/config';
     JsonPipe,
     ProcessorComponent,
     MatTooltipModule,
+    CdkDrag,
+    CdkDropList,
   ],
   templateUrl: './route.html',
   styleUrl: './route.css',
@@ -69,6 +78,7 @@ export class RouteComponent {
   private snackBar = inject(MatSnackBar);
   private eventsService = inject(EventsService);
   private configService = inject(ConfigService);
+  public listsService = inject(ListsService);
 
   indicatorColor = signal<string>('gray');
 
@@ -167,4 +177,23 @@ export class RouteComponent {
       duration: 3000,
     });
   }
+
+  drop(event: CdkDragDrop<ProcessorConfig[] | undefined>) {
+    // TODO(jwetzell): support moving between routes
+    if (event.previousContainer === event.container) {
+      const processors = this.route()?.processors;
+      if (processors !== undefined) {
+        moveItemInArray(processors, event.previousIndex, event.currentIndex);
+        this.route.update((route) => {
+          if (route) {
+            return {
+              ...route,
+              processors: [...processors],
+            };
+          }
+          return route;
+        });
+      }
+    }
+  }
 }