Update to angular 21, switch to signal forms for column editor

package.json

@@ -10,31 +10,31 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^20.3.6",
-    "@angular/common": "^20.3.6",
-    "@angular/compiler": "^20.3.6",
-    "@angular/core": "^20.3.6",
-    "@angular/forms": "^20.3.6",
-    "@angular/platform-browser": "^20.3.6",
-    "@angular/platform-browser-dynamic": "^20.3.6",
-    "@angular/router": "^20.3.6",
+    "@angular/animations": "^21.0.5",
+    "@angular/common": "^21.0.5",
+    "@angular/compiler": "^21.0.5",
+    "@angular/core": "^21.0.5",
+    "@angular/forms": "^21.0.5",
+    "@angular/platform-browser": "^21.0.5",
+    "@angular/platform-browser-dynamic": "^21.0.5",
+    "@angular/router": "^21.0.5",
     "@duckdb/duckdb-wasm": "^1.30.0",
-    "@primeng/themes": "20.2.0",
+    "@primeng/themes": "^21.0.0",
     "@tailwindcss/postcss": "^4.1.15",
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "primeicons": "^7.0.0",
-    "primeng": "20.2.0",
+    "primeng": "^21.0.0",
     "rxjs": "~7.8.2",
     "tailwindcss": "^4.1.15",
-    "tailwindcss-primeui": "0.6.1",
+    "tailwindcss-primeui": "^0.6.1",
     "tslib": "^2.8.1",
-    "zod": "4.1.12"
+    "zod": "^4.1.12"
   },
   "devDependencies": {
-    "@angular/build": "^20.3.6",
-    "@angular/cli": "^20.3.6",
-    "@angular/compiler-cli": "^20.3.6",
+    "@angular/build": "^21.0.3",
+    "@angular/cli": "^21.0.3",
+    "@angular/compiler-cli": "^21.0.5",
     "@tauri-apps/cli": "^2.9.0",
     "@types/jasmine": "~5.1.12",
     "jasmine-core": "~5.12.0",
@@ -43,6 +43,7 @@
     "karma-coverage": "~2.2.1",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "postcss": "^8.5.3",
     "typescript": "~5.9.3"
   }
 }

src/app/column-editor/column-editor.component.ts

@@ -1,15 +1,36 @@
-import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  model,
+  signal,
+} from '@angular/core';
 import { AccordionModule } from 'primeng/accordion';
 import { Column } from '../duckdb.service';
-import { Checkbox, CheckboxChangeEvent } from 'primeng/checkbox';
+import { Checkbox } from 'primeng/checkbox';
 import { FormsModule } from '@angular/forms';
 import { Button } from 'primeng/button';
 import { Tooltip } from 'primeng/tooltip';
+import { Dialog } from 'primeng/dialog';
+import { FloatLabel } from 'primeng/floatlabel';
+import { InputText } from 'primeng/inputtext';
+import { Select } from 'primeng/select';
+import { Field, form } from '@angular/forms/signals';
 
 @Component({
   selector: 'app-column-editor',
   standalone: true,
-  imports: [AccordionModule, Checkbox, FormsModule, Button, Tooltip],
+  imports: [
+    AccordionModule,
+    Checkbox,
+    FormsModule,
+    Button,
+    Tooltip,
+    Dialog,
+    FloatLabel,
+    InputText,
+    Select,
+    Field,
+  ],
   template: `
     <p-accordion [value]="0">
       <p-accordion-panel [value]="0">
@@ -45,12 +66,43 @@ import { Tooltip } from 'primeng/tooltip';
         </p-accordion-content>
       </p-accordion-panel>
     </p-accordion>
+    <p-dialog [(visible)]="editDialogVisible" header="Edit Column">
+      <p-float-label variant="in">
+        <input pInputText id="column-edit-name" [field]="editingColumn.name" />
+        <label for="column-edit-name">Name</label>
+      </p-float-label>
+      <p-float-label variant="in">
+        <p-select
+          inputId="column-edit-type"
+          [field]="editingColumn.type"
+        ></p-select>
+        <label for="column-edit-type">Type</label>
+      </p-float-label>
+      <div class="flex items-center gap-2">
+        <p-check-box
+          [field]="editingColumn.enabled"
+          [binary]="true"
+          inputId="column-edit-enabled"
+        ></p-check-box>
+        <label for="column-edit-enabled">Enabled</label>
+      </div>
+    </p-dialog>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ColumnEditorComponent {
   columns = model<Column[]>();
 
+  protected editDialogVisible = signal(false);
+
+  protected currentColumn = signal<Column>({
+    name: '',
+    enabled: true,
+    type: 'string',
+  });
+
+  protected editingColumn = form(this.currentColumn);
+
   protected checkboxChanged(index: number) {
     this.columns.update((columns) => {
       if (columns) {
@@ -65,5 +117,11 @@ export class ColumnEditorComponent {
     });
   }
 
-  protected editColumn(index: number) {}
+  protected editColumn(index: number) {
+    const columns = this.columns();
+    if (columns) {
+      this.currentColumn.set(columns[index]);
+      this.editDialogVisible.set(true);
+    }
+  }
 }