Start adding column edit dialog

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

@@ -1,15 +1,34 @@
-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';
 
 @Component({
   selector: 'app-column-editor',
   standalone: true,
-  imports: [AccordionModule, Checkbox, FormsModule, Button, Tooltip],
+  imports: [
+    AccordionModule,
+    Checkbox,
+    FormsModule,
+    Button,
+    Tooltip,
+    Dialog,
+    FloatLabel,
+    InputText,
+    Select,
+  ],
   template: `
     <p-accordion [value]="0">
       <p-accordion-panel [value]="0">
@@ -45,12 +64,40 @@ import { Tooltip } from 'primeng/tooltip';
         </p-accordion-content>
       </p-accordion-panel>
     </p-accordion>
+    <p-dialog [(visible)]="editDialogVisible" header="Edit Column">
+      @let editingColumn = this.editingColumn();
+      @if (editingColumn) {
+        <p-float-label>
+          <input
+            pInputText
+            id="column-edit-name"
+            [(ngModel)]="editingColumn.name"
+          />
+          <label for="column-edit-name">Name</label>
+        </p-float-label>
+        <p-float-label>
+          <p-select inputId="column-edit-type"></p-select>
+          <label for="column-edit-type">Type</label>
+        </p-float-label>
+        <div class="flex items-center gap-2">
+          <p-check-box
+            [(ngModel)]="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 editingColumn = signal<Column | null>(null);
+
   protected checkboxChanged(index: number) {
     this.columns.update((columns) => {
       if (columns) {
@@ -65,5 +112,11 @@ export class ColumnEditorComponent {
     });
   }
 
-  protected editColumn(index: number) {}
+  protected editColumn(index: number) {
+    const columns = this.columns();
+    if (columns) {
+      this.editingColumn.set(columns[index]);
+      this.editDialogVisible.set(true);
+    }
+  }
 }