mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 01:53:30 +01:00
108 lines
3.2 KiB
Markdown
108 lines
3.2 KiB
Markdown
# TASK-007H: Schema Manager UI - COMPLETE
|
|
|
|
## Summary
|
|
|
|
Implemented a Schema Manager UI panel for viewing and managing database schemas in local SQLite backends.
|
|
|
|
## Files Created
|
|
|
|
### Schema Manager Panel Components
|
|
|
|
- `packages/noodl-editor/src/editor/src/views/panels/schemamanager/SchemaPanel.tsx` - Main panel showing tables list
|
|
- `packages/noodl-editor/src/editor/src/views/panels/schemamanager/SchemaPanel.module.scss` - Panel styles
|
|
- `packages/noodl-editor/src/editor/src/views/panels/schemamanager/TableRow.tsx` - Expandable table row with columns
|
|
- `packages/noodl-editor/src/editor/src/views/panels/schemamanager/TableRow.module.scss` - Table row styles
|
|
- `packages/noodl-editor/src/editor/src/views/panels/schemamanager/index.ts` - Module exports
|
|
|
|
## Files Modified
|
|
|
|
### BackendManager.js
|
|
|
|
Added IPC handlers for schema operations:
|
|
|
|
- `backend:getSchema` - Get full schema for a backend
|
|
- `backend:getTableSchema` - Get single table schema
|
|
- `backend:getRecordCount` - Get record count for a table
|
|
- `backend:createTable` - Create a new table
|
|
- `backend:addColumn` - Add column to existing table
|
|
|
|
### LocalBackendCard.tsx
|
|
|
|
- Added "Schema" button (shows when backend is running)
|
|
- Added schema panel overlay state
|
|
- Integrated SchemaPanel component
|
|
|
|
### LocalBackendCard.module.scss
|
|
|
|
- Added `.SchemaPanelOverlay` styles for full-screen modal:
|
|
- Uses React Portal (`createPortal`) to render at `document.body`
|
|
- `z-index: 9999` ensures overlay above all UI elements
|
|
- Dark backdrop (`rgba(0, 0, 0, 0.85)`)
|
|
- Centered modal with max-width 900px
|
|
- Proper border-radius, shadow, and background styling
|
|
|
|
## Features Implemented
|
|
|
|
### SchemaPanel
|
|
|
|
- Shows list of all tables in the backend
|
|
- Displays table count in header
|
|
- Refresh button to reload schema
|
|
- Empty state with "Create First Table" prompt (placeholder)
|
|
- Close button to dismiss panel
|
|
|
|
### TableRow
|
|
|
|
- Collapsible rows with expand/collapse toggle
|
|
- Table icon with "T" badge
|
|
- Shows field count and record count
|
|
- Expanded view shows:
|
|
- System columns (objectId, createdAt, updatedAt)
|
|
- User-defined columns with type badges
|
|
- Required indicator
|
|
- Default value display
|
|
- Type badges with color-coded data types:
|
|
- String (primary)
|
|
- Number (success/green)
|
|
- Boolean (notice/yellow)
|
|
- Date (purple)
|
|
- Object (pink)
|
|
- Array (indigo)
|
|
- Pointer/Relation (red)
|
|
- GeoPoint (teal)
|
|
- File (orange)
|
|
|
|
## Usage
|
|
|
|
1. Create and start a local backend
|
|
2. Click "Schema" button on the backend card
|
|
3. View tables and expand rows to see columns
|
|
4. Click "Refresh" to reload schema
|
|
5. Click "Close" to dismiss panel
|
|
|
|
## Future Enhancements (Deferred)
|
|
|
|
The following were scoped but not implemented in this initial version:
|
|
|
|
- CreateTableModal - For creating new tables
|
|
- ColumnEditor - For editing column definitions
|
|
- SchemaEditor - Full table editor
|
|
- ExportDialog - Export schema to SQL formats (handlers exist in BackendManager)
|
|
|
|
These can be added incrementally as needed.
|
|
|
|
## Verification
|
|
|
|
The implementation follows project patterns:
|
|
|
|
- ✅ Uses theme tokens (no hardcoded colors)
|
|
- ✅ Uses IPC pattern from useLocalBackends
|
|
- ✅ Proper TypeScript types
|
|
- ✅ JSDoc documentation
|
|
- ✅ Module SCSS with CSS modules
|
|
- ✅ Follows existing component structure
|
|
|
|
---
|
|
|
|
Completed: 15/01/2026
|