diff --git a/trailbase-core/js/admin/src/components/tables/CreateAlterColumnForm.tsx b/trailbase-core/js/admin/src/components/tables/CreateAlterColumnForm.tsx index fb54a804..cc4a06cb 100644 --- a/trailbase-core/js/admin/src/components/tables/CreateAlterColumnForm.tsx +++ b/trailbase-core/js/admin/src/components/tables/CreateAlterColumnForm.tsx @@ -96,7 +96,7 @@ function columnTypeField( return ( Type} - disabled={fk() !== undefined} + disabled={disabled || fk() !== undefined} options={columnDataTypes} value={field().state.value} onChange={field().handleChange} @@ -567,6 +567,143 @@ export function ColumnSubForm(props: { ); } +export function PrimaryKeyColumnSubForm(props: { + form: FormApiT; + colIndex: number; + column: Column; + allTables: Table[]; + disabled: boolean; +}): JSX.Element { + const disabled = () => props.disabled; + const [name, setName] = createWritableMemo(() => props.column.name); + const [expanded, setExpanded] = createWritableMemo( + () => props.column.name !== "id", + ); + + const [fk, setFk] = createSignal(); + + const Header = () => ( +
+

{name()}

+ +
+ Primary Key + + +
+
+ ); + + return ( + + + + +
+ + + + + +
+ {/* Column presets */} + {!disabled() && ( +
+ + +
+ + {([name, preset]) => ( + { + const columns = [ + ...props.form.state.values.columns, + ]; + const column = columns[props.colIndex]; + + const v = preset(column.name); + + column.data_type = v.data_type; + column.options = v.options; + + props.form.setFieldValue("columns", columns); + }} + > + {name} + + )} + +
+
+ )} + + {/* Column name field */} + { + setName(value ?? ""); + return value ? undefined : "Column name missing"; + }, + }} + > + {buildTextFormField({ + label: () => Name, + disabled: disabled(), + })} + + + {/* Column type field */} + + + {/* Column options: pk, not null, ... */} + { + return ( + + ); + }} + /> +
+
+
+ + + ); +} + function L(props: { children: JSX.Element }) { return
{props.children}
; } @@ -578,6 +715,32 @@ type Preset = { options: ColumnOption[]; }; +export const primaryKeyPresets: [string, (colName: string) => Preset][] = [ + [ + "UUIDv7", + (colName: string) => { + return { + data_type: "Blob", + options: [ + { Unique: { is_primary: true } }, + { Check: `is_uuid_v7(${colName})` }, + { Default: "(uuid_v7())" }, + "NotNull", + ], + }; + }, + ], + [ + "INTEGER", + (_colName: string) => { + return { + data_type: "Integer", + options: [{ Unique: { is_primary: true } }, "NotNull"], + }; + }, + ], +]; + const presets: [string, (colName: string) => Preset][] = [ [ "Default", diff --git a/trailbase-core/js/admin/src/components/tables/CreateAlterTable.tsx b/trailbase-core/js/admin/src/components/tables/CreateAlterTable.tsx index 4d2784b8..2b407979 100644 --- a/trailbase-core/js/admin/src/components/tables/CreateAlterTable.tsx +++ b/trailbase-core/js/admin/src/components/tables/CreateAlterTable.tsx @@ -1,4 +1,4 @@ -import { createMemo, createSignal, Index } from "solid-js"; +import { createMemo, createSignal, Index, Switch, Match } from "solid-js"; import type { Accessor } from "solid-js"; import { createForm } from "@tanstack/solid-form"; @@ -21,7 +21,11 @@ import { buildTextFormField, } from "@/components/FormFields"; import { SheetContainer } from "@/components/SafeSheet"; -import { ColumnSubForm } from "@/components/tables/CreateAlterColumnForm"; +import { + PrimaryKeyColumnSubForm, + ColumnSubForm, + primaryKeyPresets, +} from "@/components/tables/CreateAlterColumnForm"; import { invalidateConfig } from "@/lib/config"; import type { Column } from "@bindings/Column"; @@ -96,14 +100,7 @@ export function CreateAlterTableForm(props: { columns: [ { name: "id", - data_type: "Blob", - // Column constraints: https://www.sqlite.org/syntax/column-constraint.html - options: [ - { Unique: { is_primary: true } }, - { Check: "is_uuid_v7(id)" }, - { Default: "(uuid_v7())" }, - "NotNull", - ], + ...primaryKeyPresets[0][1]("id"), }, newDefaultColumn(1), ] satisfies Column[], @@ -151,7 +148,7 @@ export function CreateAlterTableForm(props: { "STRICT typing" })} + children={buildBoolFormField({ label: () => "STRICT (type-safe)" })} /> {/* columns */} @@ -162,14 +159,28 @@ export function CreateAlterTableForm(props: {
- {(c: Accessor, i) => ( - + {(c: Accessor, i: number) => ( + + + + + + + + + )}