mirror of
https://github.com/johndoe6345789/metabuilder.git
synced 2026-04-26 06:44:58 +00:00
1475 lines
49 KiB
JSON
1475 lines
49 KiB
JSON
[
|
|
{
|
|
"id": "schema_editor",
|
|
"type": "Card",
|
|
"name": "SchemaEditor",
|
|
"description": "Main schema editor with table list and editor panel for database schema management",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"className": "schema-editor"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_header",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 3,
|
|
"borderBottom": 1,
|
|
"borderColor": "divider"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_title_row",
|
|
"type": "Flex",
|
|
"props": {
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"sx": { "mb": 2 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "h5",
|
|
"fontWeight": "bold",
|
|
"text": "Schema Editor"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "schema_editor_version_chip",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "v{{state.schema.version}}",
|
|
"color": "info",
|
|
"size": "small",
|
|
"variant": "outlined"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "schema_editor_dirty_indicator",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "Unsaved Changes",
|
|
"color": "warning",
|
|
"size": "small",
|
|
"visible": "{{state.isDirty}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_schema_name",
|
|
"type": "TextField",
|
|
"props": {
|
|
"label": "Schema Name",
|
|
"value": "{{state.schema.name}}",
|
|
"onChange": "updateSchemaName",
|
|
"disabled": "{{props.readonly}}",
|
|
"size": "small",
|
|
"sx": { "minWidth": 250 }
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_body",
|
|
"type": "Grid",
|
|
"props": {
|
|
"container": true,
|
|
"sx": { "minHeight": 500 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_table_list_panel",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"md": 4,
|
|
"lg": 3,
|
|
"sx": {
|
|
"borderRight": 1,
|
|
"borderColor": "divider"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_table_list_header",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 2,
|
|
"borderBottom": 1,
|
|
"borderColor": "divider",
|
|
"backgroundColor": "action.hover"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_tables_title",
|
|
"type": "Flex",
|
|
"props": {
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_tables_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"text": "Tables"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "schema_editor_add_table_button",
|
|
"type": "IconButton",
|
|
"props": {
|
|
"icon": "Add",
|
|
"size": "small",
|
|
"color": "primary",
|
|
"onClick": "addTable",
|
|
"disabled": "{{props.readonly}}",
|
|
"title": "Add Table"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_table_list",
|
|
"type": "List",
|
|
"props": {
|
|
"dense": true,
|
|
"sx": { "overflowY": "auto", "maxHeight": 400 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_table_list_item_template",
|
|
"type": "ListItem",
|
|
"props": {
|
|
"button": true,
|
|
"selected": "{{state.selectedTable === item.name}}",
|
|
"onClick": "selectTable",
|
|
"divider": true
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_table_icon",
|
|
"type": "ListItemIcon",
|
|
"props": {},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_table_icon_svg",
|
|
"type": "Icon",
|
|
"props": { "name": "TableChart" },
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_table_item_text",
|
|
"type": "ListItemText",
|
|
"props": {
|
|
"primary": "{{item.name}}",
|
|
"secondary": "{{item.columns.length}} columns"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "schema_editor_delete_table_button",
|
|
"type": "IconButton",
|
|
"props": {
|
|
"icon": "Delete",
|
|
"size": "small",
|
|
"color": "error",
|
|
"onClick": "deleteTable",
|
|
"disabled": "{{props.readonly}}",
|
|
"edge": "end"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_detail_panel",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"md": 8,
|
|
"lg": 9
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_no_selection",
|
|
"type": "Box",
|
|
"props": {
|
|
"visible": "{{!state.selectedTable}}",
|
|
"sx": {
|
|
"display": "flex",
|
|
"alignItems": "center",
|
|
"justifyContent": "center",
|
|
"height": "100%",
|
|
"p": 4
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_no_selection_text",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body1",
|
|
"color": "text.secondary",
|
|
"text": "Select a table to edit or create a new one"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_table_editor_container",
|
|
"type": "Box",
|
|
"props": {
|
|
"visible": "{{state.selectedTable}}",
|
|
"sx": { "p": 2 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_table_editor_ref",
|
|
"type": "ComponentRef",
|
|
"props": {
|
|
"ref": "table_editor",
|
|
"bindTable": "{{state.selectedTableData}}",
|
|
"bindReadonly": "{{props.readonly}}",
|
|
"bindOnSave": "saveTable",
|
|
"bindOnCancel": "cancelTableEdit"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_relations_panel",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 2,
|
|
"borderTop": 1,
|
|
"borderColor": "divider"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_relations_header",
|
|
"type": "Flex",
|
|
"props": {
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"sx": { "mb": 2 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_relations_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"text": "Relations"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "schema_editor_add_relation_button",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"startIcon": "Add",
|
|
"onClick": "addRelation",
|
|
"disabled": "{{props.readonly}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_relations_list",
|
|
"type": "Stack",
|
|
"props": {
|
|
"direction": "row",
|
|
"spacing": 2,
|
|
"sx": { "flexWrap": "wrap" }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_relation_chip_template",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "{{item.sourceTable}} → {{item.targetTable}}",
|
|
"variant": "outlined",
|
|
"color": "{{item.type === 'many-to-many' ? 'secondary' : 'primary'}}",
|
|
"onDelete": "{{props.readonly ? null : 'deleteRelation'}}",
|
|
"size": "small"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_footer",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 2,
|
|
"borderTop": 1,
|
|
"borderColor": "divider",
|
|
"display": "flex",
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_validation_status",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": { "display": "flex", "gap": 1, "alignItems": "center" }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_error_count",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "{{state.validation.errors.length}} errors",
|
|
"color": "error",
|
|
"size": "small",
|
|
"visible": "{{state.validation.errors.length > 0}}"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "schema_editor_warning_count",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "{{state.validation.warnings.length}} warnings",
|
|
"color": "warning",
|
|
"size": "small",
|
|
"visible": "{{state.validation.warnings.length > 0}}"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "schema_editor_valid_indicator",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "Valid",
|
|
"color": "success",
|
|
"size": "small",
|
|
"visible": "{{state.validation.valid}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "schema_editor_action_buttons",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": { "display": "flex", "gap": 2 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "schema_editor_cancel_button",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"color": "secondary",
|
|
"onClick": "handleCancel",
|
|
"disabled": "{{!state.isDirty}}"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "schema_editor_save_button",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"onClick": "handleSave",
|
|
"disabled": "{{!state.isDirty || !state.validation.valid || props.readonly}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"scripts": {
|
|
"init": "schema.initialize",
|
|
"updateSchemaName": "schema.updateName",
|
|
"addTable": "tables.create",
|
|
"selectTable": "tables.select",
|
|
"deleteTable": "tables.delete",
|
|
"saveTable": "tables.save",
|
|
"cancelTableEdit": "tables.cancelEdit",
|
|
"addRelation": "relations.create",
|
|
"deleteRelation": "relations.delete",
|
|
"handleSave": "schema.save",
|
|
"handleCancel": "schema.cancel"
|
|
}
|
|
},
|
|
{
|
|
"id": "table_editor",
|
|
"type": "Card",
|
|
"name": "TableEditor",
|
|
"description": "Editor for a single database table/model with field list and configuration",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"className": "table-editor"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_header",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 2,
|
|
"borderBottom": 1,
|
|
"borderColor": "divider",
|
|
"backgroundColor": "action.hover"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_title_row",
|
|
"type": "Grid",
|
|
"props": {
|
|
"container": true,
|
|
"spacing": 2,
|
|
"alignItems": "center"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_name_field",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6,
|
|
"md": 4
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_name_input",
|
|
"type": "TextField",
|
|
"props": {
|
|
"label": "Table Name",
|
|
"value": "{{state.table.name}}",
|
|
"onChange": "updateTableName",
|
|
"disabled": "{{props.readonly}}",
|
|
"size": "small",
|
|
"fullWidth": true,
|
|
"required": true
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table_editor_schema_field",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6,
|
|
"md": 4
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_schema_input",
|
|
"type": "TextField",
|
|
"props": {
|
|
"label": "Schema",
|
|
"value": "{{state.table.schema || 'public'}}",
|
|
"onChange": "updateTableSchema",
|
|
"disabled": "{{props.readonly}}",
|
|
"size": "small",
|
|
"fullWidth": true,
|
|
"placeholder": "public"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table_editor_comment_field",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"md": 4
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_comment_input",
|
|
"type": "TextField",
|
|
"props": {
|
|
"label": "Description",
|
|
"value": "{{state.table.comment}}",
|
|
"onChange": "updateTableComment",
|
|
"disabled": "{{props.readonly}}",
|
|
"size": "small",
|
|
"fullWidth": true,
|
|
"placeholder": "Table description..."
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table_editor_columns_section",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": { "p": 2 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_columns_header",
|
|
"type": "Flex",
|
|
"props": {
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"sx": { "mb": 2 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_columns_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"text": "Columns"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_add_column_button",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"startIcon": "Add",
|
|
"onClick": "addColumn",
|
|
"disabled": "{{props.readonly}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table_editor_columns_list",
|
|
"type": "Stack",
|
|
"props": {
|
|
"spacing": 1
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_column_item_template",
|
|
"type": "Card",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"sx": {
|
|
"p": 1,
|
|
"backgroundColor": "{{item.primaryKey ? 'action.selected' : 'background.paper'}}"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_column_row",
|
|
"type": "Flex",
|
|
"props": {
|
|
"alignItems": "center",
|
|
"gap": 2
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_column_drag_handle",
|
|
"type": "IconButton",
|
|
"props": {
|
|
"icon": "DragIndicator",
|
|
"size": "small",
|
|
"disabled": "{{props.readonly}}",
|
|
"sx": { "cursor": "grab" }
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_column_name",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"fontWeight": "{{item.primaryKey ? 'bold' : 'normal'}}",
|
|
"sx": { "minWidth": 120 }
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_column_type_chip",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "{{item.type}}",
|
|
"size": "small",
|
|
"variant": "outlined",
|
|
"color": "info"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_column_pk_indicator",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "PK",
|
|
"size": "small",
|
|
"color": "primary",
|
|
"visible": "{{item.primaryKey}}"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_column_nullable_indicator",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "NULL",
|
|
"size": "small",
|
|
"variant": "outlined",
|
|
"visible": "{{item.nullable}}"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_column_unique_indicator",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "UQ",
|
|
"size": "small",
|
|
"color": "secondary",
|
|
"visible": "{{item.unique}}"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_column_fk_indicator",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "FK → {{item.references.table}}",
|
|
"size": "small",
|
|
"color": "warning",
|
|
"visible": "{{item.references}}"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_column_spacer",
|
|
"type": "Box",
|
|
"props": { "sx": { "flexGrow": 1 } },
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_edit_column_button",
|
|
"type": "IconButton",
|
|
"props": {
|
|
"icon": "Edit",
|
|
"size": "small",
|
|
"onClick": "editColumn",
|
|
"disabled": "{{props.readonly}}"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_delete_column_button",
|
|
"type": "IconButton",
|
|
"props": {
|
|
"icon": "Delete",
|
|
"size": "small",
|
|
"color": "error",
|
|
"onClick": "deleteColumn",
|
|
"disabled": "{{props.readonly || item.primaryKey}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table_editor_indexes_section",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 2,
|
|
"borderTop": 1,
|
|
"borderColor": "divider"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_indexes_header",
|
|
"type": "Flex",
|
|
"props": {
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"sx": { "mb": 2 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_indexes_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "subtitle1",
|
|
"fontWeight": "bold",
|
|
"text": "Indexes"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "table_editor_add_index_button",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"size": "small",
|
|
"startIcon": "Add",
|
|
"onClick": "addIndex",
|
|
"disabled": "{{props.readonly}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table_editor_indexes_list",
|
|
"type": "Stack",
|
|
"props": {
|
|
"direction": "row",
|
|
"spacing": 1,
|
|
"sx": { "flexWrap": "wrap" }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_index_chip_template",
|
|
"type": "Chip",
|
|
"props": {
|
|
"label": "{{item.name}} ({{item.columns.join(', ')}})",
|
|
"variant": "{{item.unique ? 'filled' : 'outlined'}}",
|
|
"color": "{{item.unique ? 'primary' : 'default'}}",
|
|
"size": "small",
|
|
"onDelete": "{{props.readonly ? null : 'deleteIndex'}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table_editor_no_indexes",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"color": "text.secondary",
|
|
"text": "No indexes defined",
|
|
"visible": "{{state.table.indexes.length === 0}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "table_editor_field_editor_dialog",
|
|
"type": "Dialog",
|
|
"props": {
|
|
"open": "{{state.editingColumn !== null}}",
|
|
"onClose": "closeFieldEditor",
|
|
"maxWidth": "md",
|
|
"fullWidth": true
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_dialog_content",
|
|
"type": "Box",
|
|
"props": {},
|
|
"children": [
|
|
{
|
|
"id": "table_editor_field_editor_ref",
|
|
"type": "ComponentRef",
|
|
"props": {
|
|
"ref": "field_editor",
|
|
"bindField": "{{state.editingColumn}}",
|
|
"bindReadonly": "{{props.readonly}}",
|
|
"bindOnSave": "saveColumn",
|
|
"bindOnCancel": "closeFieldEditor"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"scripts": {
|
|
"init": "tables.initEditor",
|
|
"updateTableName": "tables.updateName",
|
|
"updateTableSchema": "tables.updateSchema",
|
|
"updateTableComment": "tables.updateComment",
|
|
"addColumn": "fields.create",
|
|
"editColumn": "fields.edit",
|
|
"deleteColumn": "fields.delete",
|
|
"saveColumn": "fields.save",
|
|
"closeFieldEditor": "fields.closeEditor",
|
|
"addIndex": "tables.addIndex",
|
|
"deleteIndex": "tables.deleteIndex"
|
|
}
|
|
},
|
|
{
|
|
"id": "field_editor",
|
|
"type": "Card",
|
|
"name": "FieldEditor",
|
|
"description": "Editor for a single column/field with type, validation, and constraint configuration",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"className": "field-editor"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_header",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 2,
|
|
"borderBottom": 1,
|
|
"borderColor": "divider",
|
|
"backgroundColor": "primary.main",
|
|
"color": "primary.contrastText"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "h6",
|
|
"text": "{{state.isNew ? 'New Column' : 'Edit Column'}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_basic_section",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": { "p": 3 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_basic_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "subtitle2",
|
|
"fontWeight": "bold",
|
|
"color": "text.secondary",
|
|
"text": "BASIC INFORMATION",
|
|
"sx": { "mb": 2 }
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_basic_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"container": true,
|
|
"spacing": 2
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_name_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_name_input",
|
|
"type": "TextField",
|
|
"props": {
|
|
"label": "Column Name",
|
|
"value": "{{state.field.name}}",
|
|
"onChange": "updateFieldName",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"required": true,
|
|
"helperText": "Use snake_case for column names"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_type_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_type_select",
|
|
"type": "Select",
|
|
"props": {
|
|
"label": "Data Type",
|
|
"value": "{{state.field.type}}",
|
|
"onChange": "updateFieldType",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"required": true,
|
|
"options": [
|
|
{ "value": "string", "label": "String (VARCHAR)" },
|
|
{ "value": "text", "label": "Text (TEXT)" },
|
|
{ "value": "integer", "label": "Integer (INT)" },
|
|
{ "value": "float", "label": "Float (DECIMAL)" },
|
|
{ "value": "boolean", "label": "Boolean (BOOL)" },
|
|
{ "value": "date", "label": "Date (DATE)" },
|
|
{ "value": "datetime", "label": "DateTime (TIMESTAMP)" },
|
|
{ "value": "json", "label": "JSON (JSONB)" }
|
|
]
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_comment_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_comment_input",
|
|
"type": "TextField",
|
|
"props": {
|
|
"label": "Description",
|
|
"value": "{{state.field.comment}}",
|
|
"onChange": "updateFieldComment",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"multiline": true,
|
|
"rows": 2,
|
|
"placeholder": "Describe this column..."
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_constraints_section",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 3,
|
|
"borderTop": 1,
|
|
"borderColor": "divider"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_constraints_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "subtitle2",
|
|
"fontWeight": "bold",
|
|
"color": "text.secondary",
|
|
"text": "CONSTRAINTS",
|
|
"sx": { "mb": 2 }
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_constraints_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"container": true,
|
|
"spacing": 2
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_primary_key_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 6,
|
|
"sm": 3
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_primary_key_switch",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 1 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_pk_switch",
|
|
"type": "Switch",
|
|
"props": {
|
|
"checked": "{{state.field.primaryKey}}",
|
|
"onChange": "togglePrimaryKey",
|
|
"disabled": "{{props.readonly}}",
|
|
"color": "primary"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_pk_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"text": "Primary Key"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_unique_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 6,
|
|
"sm": 3
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_unique_switch",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 1 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_uq_switch",
|
|
"type": "Switch",
|
|
"props": {
|
|
"checked": "{{state.field.unique}}",
|
|
"onChange": "toggleUnique",
|
|
"disabled": "{{props.readonly}}",
|
|
"color": "secondary"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_uq_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"text": "Unique"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_nullable_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 6,
|
|
"sm": 3
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_nullable_switch",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 1 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_null_switch",
|
|
"type": "Switch",
|
|
"props": {
|
|
"checked": "{{state.field.nullable}}",
|
|
"onChange": "toggleNullable",
|
|
"disabled": "{{props.readonly || state.field.primaryKey}}",
|
|
"color": "default"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_null_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"text": "Nullable"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_auto_increment_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 6,
|
|
"sm": 3
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_auto_switch",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": { "display": "flex", "alignItems": "center", "gap": 1 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_ai_switch",
|
|
"type": "Switch",
|
|
"props": {
|
|
"checked": "{{state.field.autoIncrement}}",
|
|
"onChange": "toggleAutoIncrement",
|
|
"disabled": "{{props.readonly || state.field.type !== 'integer'}}",
|
|
"color": "info"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_ai_label",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "body2",
|
|
"text": "Auto Increment"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_default_section",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 3,
|
|
"borderTop": 1,
|
|
"borderColor": "divider"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_default_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "subtitle2",
|
|
"fontWeight": "bold",
|
|
"color": "text.secondary",
|
|
"text": "DEFAULT VALUE",
|
|
"sx": { "mb": 2 }
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_default_input",
|
|
"type": "TextField",
|
|
"props": {
|
|
"label": "Default Value",
|
|
"value": "{{state.field.default}}",
|
|
"onChange": "updateDefault",
|
|
"disabled": "{{props.readonly || state.field.autoIncrement}}",
|
|
"fullWidth": true,
|
|
"placeholder": "Leave empty for no default",
|
|
"helperText": "Use NOW() for timestamps, NULL for null values"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_foreign_key_section",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 3,
|
|
"borderTop": 1,
|
|
"borderColor": "divider"
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_fk_header",
|
|
"type": "Flex",
|
|
"props": {
|
|
"justifyContent": "space-between",
|
|
"alignItems": "center",
|
|
"sx": { "mb": 2 }
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_fk_title",
|
|
"type": "Text",
|
|
"props": {
|
|
"variant": "subtitle2",
|
|
"fontWeight": "bold",
|
|
"color": "text.secondary",
|
|
"text": "FOREIGN KEY REFERENCE"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_fk_toggle",
|
|
"type": "Switch",
|
|
"props": {
|
|
"checked": "{{state.field.references !== null}}",
|
|
"onChange": "toggleForeignKey",
|
|
"disabled": "{{props.readonly}}",
|
|
"size": "small"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_fk_config",
|
|
"type": "Box",
|
|
"props": {
|
|
"visible": "{{state.field.references !== null}}"
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_fk_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"container": true,
|
|
"spacing": 2
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_ref_table_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_ref_table_select",
|
|
"type": "Select",
|
|
"props": {
|
|
"label": "Referenced Table",
|
|
"value": "{{state.field.references.table}}",
|
|
"onChange": "updateRefTable",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"options": "{{state.availableTables}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_ref_column_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_ref_column_select",
|
|
"type": "Select",
|
|
"props": {
|
|
"label": "Referenced Column",
|
|
"value": "{{state.field.references.column}}",
|
|
"onChange": "updateRefColumn",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"options": "{{state.availableColumns}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_on_delete_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_on_delete_select",
|
|
"type": "Select",
|
|
"props": {
|
|
"label": "On Delete",
|
|
"value": "{{state.field.references.onDelete}}",
|
|
"onChange": "updateOnDelete",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"options": [
|
|
{ "value": "CASCADE", "label": "CASCADE" },
|
|
{ "value": "SET NULL", "label": "SET NULL" },
|
|
{ "value": "RESTRICT", "label": "RESTRICT" },
|
|
{ "value": "NO ACTION", "label": "NO ACTION" },
|
|
{ "value": "SET DEFAULT", "label": "SET DEFAULT" }
|
|
]
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_on_update_grid",
|
|
"type": "Grid",
|
|
"props": {
|
|
"item": true,
|
|
"xs": 12,
|
|
"sm": 6
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_on_update_select",
|
|
"type": "Select",
|
|
"props": {
|
|
"label": "On Update",
|
|
"value": "{{state.field.references.onUpdate}}",
|
|
"onChange": "updateOnUpdate",
|
|
"disabled": "{{props.readonly}}",
|
|
"fullWidth": true,
|
|
"options": [
|
|
{ "value": "CASCADE", "label": "CASCADE" },
|
|
{ "value": "SET NULL", "label": "SET NULL" },
|
|
{ "value": "RESTRICT", "label": "RESTRICT" },
|
|
{ "value": "NO ACTION", "label": "NO ACTION" },
|
|
{ "value": "SET DEFAULT", "label": "SET DEFAULT" }
|
|
]
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"id": "field_editor_footer",
|
|
"type": "Box",
|
|
"props": {
|
|
"sx": {
|
|
"p": 2,
|
|
"borderTop": 1,
|
|
"borderColor": "divider",
|
|
"display": "flex",
|
|
"justifyContent": "flex-end",
|
|
"gap": 2
|
|
}
|
|
},
|
|
"children": [
|
|
{
|
|
"id": "field_editor_cancel_button",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "outlined",
|
|
"color": "secondary",
|
|
"onClick": "handleCancel"
|
|
},
|
|
"children": []
|
|
},
|
|
{
|
|
"id": "field_editor_save_button",
|
|
"type": "Button",
|
|
"props": {
|
|
"variant": "contained",
|
|
"color": "primary",
|
|
"onClick": "handleSave",
|
|
"disabled": "{{!state.field.name || !state.field.type || props.readonly}}"
|
|
},
|
|
"children": []
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"scripts": {
|
|
"init": "fields.initEditor",
|
|
"updateFieldName": "fields.updateName",
|
|
"updateFieldType": "fields.updateType",
|
|
"updateFieldComment": "fields.updateComment",
|
|
"togglePrimaryKey": "fields.togglePrimaryKey",
|
|
"toggleUnique": "fields.toggleUnique",
|
|
"toggleNullable": "fields.toggleNullable",
|
|
"toggleAutoIncrement": "fields.toggleAutoIncrement",
|
|
"updateDefault": "fields.updateDefault",
|
|
"toggleForeignKey": "fields.toggleForeignKey",
|
|
"updateRefTable": "fields.updateRefTable",
|
|
"updateRefColumn": "fields.updateRefColumn",
|
|
"updateOnDelete": "fields.updateOnDelete",
|
|
"updateOnUpdate": "fields.updateOnUpdate",
|
|
"handleSave": "fields.save",
|
|
"handleCancel": "fields.cancel"
|
|
}
|
|
}
|
|
]
|