add autogenerated ID to route and processors

Update npm to v12

.github/dependabot.yml

@@ -1,18 +0,0 @@
-version: 2
-updates:
-  - package-ecosystem: 'npm'
-    directory: '/'
-    schedule:
-      interval: 'weekly'
-    groups:
-      angular:
-        applies-to: version-updates
-        patterns:
-          - '@angular*'
-        update-types:
-          - 'minor'
-          - 'patch'
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'weekly'

.nvmrc

@@ -1 +1 @@
-v24.15.0
+24.19.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@showbridge/webui",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -26,36 +26,36 @@
     "dist"
   ],
   "license": "MIT",
-  "packageManager": "npm@11.6.2",
+  "packageManager": "npm@12.0.2",
   "dependencies": {
-    "@angular/cdk": "22.1.0",
-    "@angular/common": "22.1.0",
-    "@angular/compiler": "22.1.0",
-    "@angular/core": "22.1.0",
-    "@angular/forms": "22.1.0",
-    "@angular/material": "22.1.0",
-    "@angular/platform-browser": "22.1.0",
-    "@angular/router": "22.1.0",
+    "@angular/cdk": "22.1.2",
+    "@angular/common": "22.1.2",
+    "@angular/compiler": "22.1.2",
+    "@angular/core": "22.1.2",
+    "@angular/forms": "22.1.2",
+    "@angular/material": "22.1.2",
+    "@angular/platform-browser": "22.1.2",
+    "@angular/router": "22.1.2",
     "ajv": "8.20.0",
-    "js-yaml": "4.2.0",
+    "js-yaml": "5.3.0",
     "lodash-es": "4.18.1",
     "rxjs": "7.8.2",
     "tslib": "2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "22.1.2",
-    "@angular/cli": "22.1.2",
-    "@angular/compiler-cli": "22.1.0",
-    "@playwright/test": "1.60.0",
-    "@tailwindcss/postcss": "4.3.0",
+    "@angular/build": "22.1.4",
+    "@angular/cli": "22.1.4",
+    "@angular/compiler-cli": "22.1.2",
+    "@playwright/test": "1.62.1",
+    "@tailwindcss/postcss": "4.3.3",
     "@types/js-yaml": "4.0.9",
     "@types/lodash-es": "4.17.12",
-    "jsdom": "29.1.1",
-    "playwright-ng-schematics": "21.1.0",
-    "postcss": "8.5.3",
+    "jsdom": "30.0.1",
+    "playwright-ng-schematics": "22.0.3",
+    "postcss": "8.5.26",
     "prettier": "3.9.6",
     "tailwindcss": "4.3.3",
     "typescript": "6.0.3",
-    "vitest": "4.1.8"
+    "vitest": "4.1.11"
   }
 }

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

src/app/components/route-list/route-list.html

@@ -17,7 +17,7 @@
     (cdkDropListDropped)="drop($event)"
     [cdkDropListData]="routes()"
   >
-    @for (route of routes(); track $index + (route.input || ''); let i = $index) {
+    @for (route of routes(); track route.id; let i = $index) {
       <div class="m-2" cdkDrag>
         <app-route
           [id]="listService.pathToId(`routes/${i}`)"

src/app/components/route/route.html

@@ -81,7 +81,7 @@
             (cdkDropListDropped)="drop($event)"
             [cdkDropListData]="route()?.processors"
           >
-            @for (processor of processors(); track $index + processor.type; let i = $index) {
+            @for (processor of processors(); track processor.id; let i = $index) {
               <div cdkDrag>
                 <app-processor
                   [path]="path() + '/processors/' + i"
@@ -237,7 +237,7 @@
               (cdkDropListDropped)="drop($event)"
               [cdkDropListData]="route()?.processors"
             >
-              @for (processor of processors(); track $index + processor.type; let i = $index) {
+              @for (processor of processors(); track processor.id; let i = $index) {
                 <div cdkDrag>
                   <app-processor
                     [path]="path() + '/processors/' + i"

src/app/components/route/route.ts

@@ -1,6 +1,7 @@
 import {
   CdkDrag,
   CdkDragDrop,
+  CdkDragHandle,
   CdkDragPlaceholder,
   CdkDragPreview,
   CdkDropList,
@@ -42,6 +43,7 @@ import { ProcessorComponent } from '../processor/processor';
     ProcessorComponent,
     MatTooltipModule,
     CdkDrag,
+    CdkDragHandle,
     CdkDropList,
     CdkDragPreview,
     CdkDragPlaceholder,

src/app/models/config.ts

@@ -22,11 +22,13 @@ export type ModuleConfig = {
 };
 
 export type RouteConfig = {
+  id: string;
   input?: string;
   processors?: ProcessorConfig[];
 };
 
 export type ProcessorConfig = {
+  id: string;
   type: string;
   params?: Record<string, any>;
 };

src/app/services/schema.ts

@@ -139,12 +139,16 @@ export class SchemaService {
   }
 
   getSkeletonForRoute(): RouteConfig {
-    const template: RouteConfig = {};
+    const template: RouteConfig = {
+      id: crypto.randomUUID(),
+      processors: [],
+    };
     return template;
   }
 
   getSkeletonForProcessor(processorType: string): ProcessorConfig {
     const template: ProcessorConfig = {
+      id: crypto.randomUUID(),
       type: processorType,
     };
     const itemInfo = this.processorTypes.find((itemInfo) => itemInfo.type === processorType);