add drag and drop to rest of lists

src/app/components/module-list/module-list.ts

@@ -1,21 +1,32 @@
-import { Component, inject, model } from '@angular/core';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Component, inject, input, output } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { cloneDeep } from 'lodash-es';
 import { ModuleConfig } from '../../models/config';
 import { SchemaService } from '../../services/schema';
 import { ModuleComponent } from '../module/module';
 
 @Component({
   selector: 'app-module-list',
-  imports: [MatMenuModule, MatIconModule, MatButtonModule, MatTooltipModule, ModuleComponent],
+  imports: [
+    MatMenuModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTooltipModule,
+    ModuleComponent,
+    CdkDrag,
+    CdkDropList,
+  ],
   templateUrl: './module-list.html',
   styleUrl: './module-list.css',
 })
 export class ModuleListComponent {
-  modules = model<ModuleConfig[]>();
+  modules = input<ModuleConfig[]>();
+  updated = output<ModuleConfig[]>();
   public schemaService = inject(SchemaService);
 
   private snackBar = inject(MatSnackBar);
@@ -25,46 +36,52 @@ export class ModuleListComponent {
       console.error('module is undefined, not updating');
       return;
     }
-    this.modules.update((modules) => {
-      if (modules) {
-        modules[index].id = module.id;
-        modules[index].type = module.type;
-        if (module.params !== undefined) {
-          modules[index].params = module.params;
-        }
-        return [...modules];
-      }
-      return modules;
-    });
+    const currentModules = this.modules();
+    if (currentModules === undefined) {
+      console.error('modules is undefined, cannot update');
+      return;
+    }
+    currentModules[index] = cloneDeep(module);
+    this.updated.emit(cloneDeep(currentModules));
   }
 
   addModule(moduleType: string) {
     const moduleTemplate = this.schemaService.getSkeletonForModule(moduleType);
-    this.modules.update((modules) => {
-      if (modules) {
-        if (!modules) {
-          modules = [];
-        }
-        modules?.push(moduleTemplate);
-        return [...modules];
-      }
-      return modules;
-    });
+    const currentModules = this.modules() || [];
+    if (currentModules === undefined) {
+      console.error('modules is undefined, cannot update');
+      return;
+    }
+    currentModules.push(moduleTemplate);
+    this.updated.emit(cloneDeep(currentModules));
     this.snackBar.open('Module Added', 'Dismiss', {
       duration: 3000,
     });
   }
 
   deleteModule(index: number) {
-    this.modules.update((modules) => {
-      if (modules) {
-        modules?.splice(index, 1);
-        return [...modules];
-      }
-      return [];
-    });
+    const currentModules = this.modules();
+    if (currentModules === undefined) {
+      console.error('modules is undefined, cannot delete');
+      return;
+    }
+    currentModules.splice(index, 1);
+    this.updated.emit(cloneDeep(currentModules));
     this.snackBar.open('Module Removed', 'Dismiss', {
       duration: 3000,
     });
   }
+
+  drop(event: CdkDragDrop<ModuleConfig[] | undefined>) {
+    console.log('Drop event:', event);
+    if (event.previousContainer === event.container) {
+      const currentModules = this.modules();
+      if (currentModules === undefined) {
+        console.error('modules is undefined, not updating');
+        return;
+      }
+      moveItemInArray(currentModules, event.previousIndex, event.currentIndex);
+      this.updated.emit(cloneDeep(currentModules));
+    }
+  }
 }