mirror of
https://github.com/The-Low-Code-Foundation/OpenNoodl.git
synced 2026-03-08 01:53:30 +01:00
Finished prototype local backends and expression editor
This commit is contained in:
Richard Osborne
@@ -0,0 +1,107 @@
|
||||
# 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
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,205 @@
|
||||
# TASK-007I: Data Browser Panel - COMPLETE
|
||||
|
||||
## Summary
|
||||
|
||||
Implemented a full-featured data browser panel for viewing and editing records in local backend SQLite tables, providing a spreadsheet-like interface with inline editing, search, pagination, and CRUD operations.
|
||||
|
||||
## Status: ✅ Complete
|
||||
|
||||
## Date: 2026-01-15
|
||||
|
||||
---
|
||||
|
||||
## What Was Implemented
|
||||
|
||||
### 1. Backend IPC Handlers (BackendManager.js)
|
||||
|
||||
Added four new IPC handlers for data operations:
|
||||
|
||||
- **`backend:queryRecords`** - Query records with pagination, sorting, search filters
|
||||
- **`backend:createRecord`** - Create a new record in a table
|
||||
- **`backend:saveRecord`** - Update an existing record (inline edit)
|
||||
- **`backend:deleteRecord`** - Delete a single record
|
||||
|
||||
These handlers wrap the existing LocalSQLAdapter CRUD methods (query, create, save, delete) and expose them to the renderer process.
|
||||
|
||||
### 2. DataBrowser Component (`panels/databrowser/`)
|
||||
|
||||
Created a complete data browser panel with the following components:
|
||||
|
||||
#### DataBrowser.tsx (Main Component)
|
||||
|
||||
- Table selector dropdown
|
||||
- Search input with cross-field text search
|
||||
- Pagination with page navigation (50 records per page)
|
||||
- Bulk selection and delete operations
|
||||
- CSV export functionality
|
||||
- Loading states and error handling
|
||||
- New record modal trigger
|
||||
|
||||
#### DataGrid.tsx (Spreadsheet View)
|
||||
|
||||
- Column headers with type badges (String, Number, Boolean, Date, Object, Array)
|
||||
- System columns (objectId, createdAt, updatedAt) displayed as read-only
|
||||
- Inline editing - click any editable cell to edit
|
||||
- Row selection with checkbox
|
||||
- Select all/none toggle
|
||||
- Delete action per row
|
||||
- Scrollable with sticky header
|
||||
|
||||
#### CellEditor.tsx (Inline Editor)
|
||||
|
||||
- Type-aware input controls:
|
||||
- **String**: Text input
|
||||
- **Number**: Number input with step="any"
|
||||
- **Boolean**: Checkbox with immediate save
|
||||
- **Date**: datetime-local input
|
||||
- **Object/Array**: Multi-line JSON editor with Save/Cancel buttons
|
||||
- Auto-focus and select on mount
|
||||
- Enter to save, Escape to cancel (for simple types)
|
||||
- Validation for numbers and JSON parsing
|
||||
- Error display for invalid input
|
||||
|
||||
#### NewRecordModal.tsx (Create Record Form)
|
||||
|
||||
- Form fields generated from column schema
|
||||
- Type-aware input controls for each field type
|
||||
- Required field validation
|
||||
- Default values based on column defaults or type defaults
|
||||
- Success callback to refresh data grid
|
||||
|
||||
### 3. Styling
|
||||
|
||||
All components use theme CSS variables per UI-STYLING-GUIDE.md:
|
||||
|
||||
- `--theme-color-bg-*` for backgrounds
|
||||
- `--theme-color-fg-*` for text
|
||||
- `--theme-color-border-*` for borders
|
||||
- `--theme-color-primary*` for accents
|
||||
- `--theme-color-success/danger/notice` for status colors
|
||||
|
||||
### 4. Integration
|
||||
|
||||
Added "Data" button to LocalBackendCard (visible when backend is running):
|
||||
|
||||
- Opens DataBrowser in a full-screen portal overlay
|
||||
- Same pattern as Schema panel
|
||||
|
||||
---
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
### Created Files:
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/editor/src/views/panels/databrowser/
|
||||
├── DataBrowser.tsx - Main data browser component
|
||||
├── DataBrowser.module.scss - Styles for DataBrowser
|
||||
├── DataGrid.tsx - Spreadsheet grid component
|
||||
├── DataGrid.module.scss - Styles for DataGrid
|
||||
├── CellEditor.tsx - Inline cell editor
|
||||
├── CellEditor.module.scss - Styles for CellEditor
|
||||
├── NewRecordModal.tsx - Create record modal
|
||||
├── NewRecordModal.module.scss - Styles for modal
|
||||
└── index.ts - Exports
|
||||
```
|
||||
|
||||
### Modified Files:
|
||||
|
||||
```
|
||||
packages/noodl-editor/src/main/src/local-backend/BackendManager.js
|
||||
- Added queryRecords(), createRecord(), saveRecord(), deleteRecord() methods
|
||||
- Added corresponding IPC handlers
|
||||
|
||||
packages/noodl-editor/src/editor/src/views/panels/BackendServicesPanel/LocalBackendCard/LocalBackendCard.tsx
|
||||
- Added DataBrowser import
|
||||
- Added showDataBrowser state
|
||||
- Added "Data" button
|
||||
- Added DataBrowser portal rendering
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## How To Use
|
||||
|
||||
1. Start a local backend from the Backend Services panel
|
||||
2. Click the "Data" button on the running backend card
|
||||
3. Select a table from the dropdown (auto-selects first table if available)
|
||||
4. Browse records with pagination
|
||||
5. Click any editable cell to edit inline
|
||||
6. Use "+ New Record" to add records
|
||||
7. Use checkboxes for bulk selection and delete
|
||||
8. Use "Export CSV" to download current view
|
||||
|
||||
---
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### Query API
|
||||
|
||||
The query API supports:
|
||||
|
||||
```javascript
|
||||
{
|
||||
collection: string, // Table name
|
||||
limit: number, // Max records (default 50)
|
||||
skip: number, // Pagination offset
|
||||
where: object, // Filter conditions ($or, contains, etc.)
|
||||
sort: string[], // Sort order (e.g., ['-createdAt'])
|
||||
count: boolean // Return total count for pagination
|
||||
}
|
||||
```
|
||||
|
||||
### Search Implementation
|
||||
|
||||
Search uses `$or` with `contains` operator across all String columns and objectId. The LocalSQLAdapter converts this to SQLite LIKE queries.
|
||||
|
||||
### Type Handling
|
||||
|
||||
- System fields (objectId, createdAt, updatedAt) are always read-only
|
||||
- Boolean cells save immediately on checkbox toggle
|
||||
- Object/Array cells require explicit Save button due to JSON editing
|
||||
- Dates are stored as ISO8601 strings
|
||||
|
||||
---
|
||||
|
||||
## Future Improvements (Not in scope)
|
||||
|
||||
- Column sorting by clicking headers
|
||||
- Filter by specific field values
|
||||
- Relation/Pointer field expansion
|
||||
- Inline record duplication
|
||||
- Undo for delete operations
|
||||
- Import CSV/JSON
|
||||
|
||||
---
|
||||
|
||||
## Verification Checklist
|
||||
|
||||
- [x] IPC handlers added to BackendManager.js
|
||||
- [x] DataBrowser component created
|
||||
- [x] DataGrid with inline editing
|
||||
- [x] CellEditor with type-aware controls
|
||||
- [x] NewRecordModal for creating records
|
||||
- [x] CSV export functionality
|
||||
- [x] Pagination working
|
||||
- [x] Search functionality
|
||||
- [x] Bulk delete operations
|
||||
- [x] Integration with LocalBackendCard
|
||||
- [x] Theme-compliant styling
|
||||
- [x] No hardcoded colors
|
||||
- [x] JSDoc comments added
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **TASK-007A**: Core SQLite adapter ✅
|
||||
- **TASK-007B**: Workflow integration ✅
|
||||
- **TASK-007C**: Schema management ✅
|
||||
- **TASK-007D**: Backend lifecycle ✅
|
||||
- **TASK-007E**: Express HTTP API ✅
|
||||
- **TASK-007F**: Node integration ✅
|
||||
- **TASK-007G**: UI components ✅
|
||||
- **TASK-007H**: Schema Panel UI ✅
|
||||
- **TASK-007I**: Data Browser ✅ (this task)
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,90 @@
|
||||
# TASK-007J: Schema/Database Management UX - COMPLETE
|
||||
|
||||
## Status: ✅ COMPLETE (with Known Issues)
|
||||
|
||||
## Summary
|
||||
|
||||
Built Schema Manager and Data Browser UI panels with basic CRUD functionality. Uses `id` (UUID v4) as the primary key field to be compatible with Noodl frontend objects/arrays.
|
||||
|
||||
## What Was Built
|
||||
|
||||
### Schema Manager Panel
|
||||
|
||||
- **SchemaPanel** - Main panel for viewing/managing database schemas
|
||||
- **TableRow** - Expandable row showing table name, columns, record count
|
||||
- **CreateTableModal** - Modal for creating new tables with initial columns
|
||||
- **AddColumnForm** - Form for adding columns (type dropdown, required checkbox)
|
||||
|
||||
### Data Browser Panel
|
||||
|
||||
- **DataBrowser** - Main data browsing UI with table selector, search, pagination
|
||||
- **DataGrid** - Spreadsheet-style grid with inline editing
|
||||
- **CellEditor** - Inline cell editor with type-aware input handling
|
||||
- **NewRecordModal** - Modal for creating new records
|
||||
|
||||
### Backend Changes
|
||||
|
||||
- Changed primary key from `objectId` to `id` with UUID v4
|
||||
- QueryBuilder uses `id` field for all operations
|
||||
- LocalSQLAdapter generates RFC 4122 UUIDs
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
### New UI Components
|
||||
|
||||
- `packages/noodl-editor/src/editor/src/views/panels/schemamanager/`
|
||||
|
||||
- `SchemaPanel.tsx`, `SchemaPanel.module.scss`
|
||||
- `TableRow.tsx`, `TableRow.module.scss`
|
||||
- `CreateTableModal.tsx`, `CreateTableModal.module.scss`
|
||||
- `AddColumnForm.tsx`, `AddColumnForm.module.scss`
|
||||
- `index.ts`
|
||||
|
||||
- `packages/noodl-editor/src/editor/src/views/panels/databrowser/`
|
||||
- `DataBrowser.tsx`, `DataBrowser.module.scss`
|
||||
- `DataGrid.tsx`, `DataGrid.module.scss`
|
||||
- `CellEditor.tsx`, `CellEditor.module.scss`
|
||||
- `NewRecordModal.tsx`, `NewRecordModal.module.scss`
|
||||
- `index.ts`
|
||||
|
||||
### Modified Backend Files
|
||||
|
||||
- `packages/noodl-runtime/src/api/adapters/local-sql/QueryBuilder.js`
|
||||
- `packages/noodl-runtime/src/api/adapters/local-sql/LocalSQLAdapter.js`
|
||||
|
||||
## Known Issues (Future Task)
|
||||
|
||||
The following bugs need to be addressed in a follow-up task:
|
||||
|
||||
### Data Browser Bugs
|
||||
|
||||
1. **Object/Array fields don't work** - Can't type into object/array field editors
|
||||
2. **Cell editor focus issues** - Sometimes loses focus unexpectedly
|
||||
3. **Search functionality limited** - Only searches String fields
|
||||
|
||||
### Schema Manager Bugs
|
||||
|
||||
1. **Can't edit existing tables** - Edit button only expands row, no add/remove columns
|
||||
2. **Can't delete tables** - No delete table functionality
|
||||
|
||||
### SQLite/Backend Bugs
|
||||
|
||||
1. **Real SQLite database doesn't work** - Falls back to in-memory mock
|
||||
2. **better-sqlite3 import issues** - Electron compatibility problems
|
||||
3. **Schema persistence** - Schema changes don't persist properly
|
||||
4. **Query filtering** - Complex WHERE clauses may not work correctly
|
||||
|
||||
### UI/UX Issues
|
||||
|
||||
1. **Boolean toggle needs improvement** - Checkbox isn't very intuitive
|
||||
2. **Date picker needed** - Currently just text input for dates
|
||||
3. **Pointer/Relation fields** - No UI for selecting related records
|
||||
4. **File upload** - No file upload/browse functionality
|
||||
|
||||
## Next Steps
|
||||
|
||||
See **TASK-007K-DRAFT.md** for bug fixes and improvements.
|
||||
|
||||
## Completion Date
|
||||
|
||||
January 15, 2026
|
||||
@@ -0,0 +1,260 @@
|
||||
# TASK-007J: Schema & Data Creation UX
|
||||
|
||||
## Status: 📋 Draft
|
||||
|
||||
## Summary
|
||||
|
||||
Add the missing creation UX to the Schema and Data Browser panels - create tables, add/edit/delete columns, and create data records with proper type handling.
|
||||
|
||||
---
|
||||
|
||||
## Problem
|
||||
|
||||
The current implementation (007H + 007I) provides excellent **viewing** and **inline editing** capabilities, but is missing the ability to **create new structures from scratch**:
|
||||
|
||||
- Schema Panel shows tables but no way to create a new table
|
||||
- No way to add/edit/delete columns in existing tables
|
||||
- Data Browser has "+ New Record" but useless without tables
|
||||
- Field types need proper UI for creation (default values, constraints)
|
||||
|
||||
---
|
||||
|
||||
## Dependencies
|
||||
|
||||
**Backend (Already Exists ✅):**
|
||||
|
||||
- `backend:createTable` - IPC handler in BackendManager.js
|
||||
- `backend:addColumn` - IPC handler in BackendManager.js
|
||||
- LocalSQLAdapter has all CRUD methods for schema changes
|
||||
|
||||
**UI Components (Already Exists ✅):**
|
||||
|
||||
- SchemaPanel - just needs buttons and modals wired up
|
||||
- DataBrowser - just needs better empty state
|
||||
|
||||
---
|
||||
|
||||
## Implementation Plan
|
||||
|
||||
### Part 1: Create Table Modal
|
||||
|
||||
**New Component: `CreateTableModal.tsx`**
|
||||
|
||||
Features:
|
||||
|
||||
- Table name input (validated: alphanumeric, no spaces, unique)
|
||||
- Initial columns list with ability to add/remove
|
||||
- For each column:
|
||||
- Name input
|
||||
- Type dropdown (String, Number, Boolean, Date, Object, Array)
|
||||
- Required checkbox
|
||||
- Default value input (type-aware)
|
||||
- "Create Table" button calls `backend:createTable`
|
||||
|
||||
**Supported Field Types:**
|
||||
| Type | SQLite | Default Input |
|
||||
|------|--------|---------------|
|
||||
| String | TEXT | Text input |
|
||||
| Number | REAL | Number input |
|
||||
| Boolean | INTEGER | Checkbox |
|
||||
| Date | TEXT (ISO) | Date picker |
|
||||
| Object | TEXT (JSON) | JSON editor |
|
||||
| Array | TEXT (JSON) | JSON editor |
|
||||
|
||||
**Integration:**
|
||||
|
||||
- Add `showCreateTableModal` state to SchemaPanel
|
||||
- Wire up "+ New Table" button (already in header)
|
||||
- Call `loadSchema()` on success
|
||||
|
||||
### Part 2: Add Column to Existing Table
|
||||
|
||||
**New Component: `AddColumnForm.tsx`**
|
||||
|
||||
Features:
|
||||
|
||||
- Inline form that appears in expanded table view
|
||||
- Column name input
|
||||
- Type dropdown
|
||||
- Required checkbox
|
||||
- Default value (required for non-nullable columns if table has data)
|
||||
- "Add Column" button calls `backend:addColumn`
|
||||
|
||||
**Integration:**
|
||||
|
||||
- Add to TableRow component's expanded view
|
||||
- Add "+ Add Column" button to expanded section
|
||||
- Handles the case where existing records need default values
|
||||
|
||||
### Part 3: Edit Column (Rename/Change Type)
|
||||
|
||||
**Note:** SQLite has limited ALTER TABLE support. Only RENAME COLUMN is safe.
|
||||
|
||||
**Features:**
|
||||
|
||||
- Edit icon next to each column in expanded view
|
||||
- Opens inline editor for column name
|
||||
- Type change is **not supported** (would need table recreation)
|
||||
- Shows tooltip: "Type cannot be changed after creation"
|
||||
|
||||
### Part 4: Delete Column
|
||||
|
||||
**New IPC Handler Needed:** `backend:deleteColumn`
|
||||
|
||||
**Note:** SQLite doesn't support DROP COLUMN directly - needs table recreation.
|
||||
|
||||
**Implementation options:**
|
||||
|
||||
1. **Not supported** - show tooltip "SQLite doesn't support column deletion"
|
||||
2. **Recreate table** - expensive but possible:
|
||||
- Create new table without column
|
||||
- Copy data
|
||||
- Drop old table
|
||||
- Rename new table
|
||||
|
||||
**Recommendation:** Option 1 for MVP, Option 2 as enhancement
|
||||
|
||||
### Part 5: Delete Table
|
||||
|
||||
**New IPC Handler Needed:** `backend:deleteTable` (or use existing drop)
|
||||
|
||||
**Features:**
|
||||
|
||||
- Delete/trash icon on each table row
|
||||
- Confirmation dialog: "Delete table {name}? This will permanently delete all data."
|
||||
- Calls `backend:deleteTable`
|
||||
|
||||
### Part 6: Improved Empty States
|
||||
|
||||
**Schema Panel (when no tables):**
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 🗄️ No tables yet │
|
||||
│ │
|
||||
│ Create your first table to start │
|
||||
│ storing data in your backend. │
|
||||
│ │
|
||||
│ [+ Create Table] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Data Browser (when no tables):**
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ 📊 No tables in database │
|
||||
│ │
|
||||
│ Go to Schema panel to create │
|
||||
│ your first table, then return │
|
||||
│ here to browse and edit data. │
|
||||
│ │
|
||||
│ [Open Schema Panel] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Files to Create/Modify
|
||||
|
||||
### New Files:
|
||||
|
||||
```
|
||||
panels/schemamanager/
|
||||
├── CreateTableModal.tsx - Modal for creating new tables
|
||||
├── CreateTableModal.module.scss
|
||||
├── AddColumnForm.tsx - Inline form for adding columns
|
||||
├── AddColumnForm.module.scss
|
||||
├── ColumnEditor.tsx - Inline column name editor
|
||||
└── ColumnEditor.module.scss
|
||||
```
|
||||
|
||||
### Modified Files:
|
||||
|
||||
```
|
||||
main/src/local-backend/BackendManager.js
|
||||
- Add deleteColumn() if implementing column deletion
|
||||
- Add deleteTable() IPC handler
|
||||
|
||||
panels/schemamanager/SchemaPanel.tsx
|
||||
- Add showCreateTableModal state
|
||||
- Wire up modal
|
||||
|
||||
panels/schemamanager/TableRow.tsx
|
||||
- Add AddColumnForm integration
|
||||
- Add column edit/delete actions
|
||||
- Add table delete action
|
||||
|
||||
panels/databrowser/DataBrowser.tsx
|
||||
- Improve empty state with link to Schema panel
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Estimation
|
||||
|
||||
| Part | Complexity | Time Est |
|
||||
| --------------------- | ---------- | ----------- |
|
||||
| CreateTableModal | Medium | 1-2 hrs |
|
||||
| AddColumnForm | Medium | 1 hr |
|
||||
| ColumnEditor (rename) | Simple | 30 min |
|
||||
| Delete table | Simple | 30 min |
|
||||
| Empty states | Simple | 15 min |
|
||||
| Testing & polish | - | 1 hr |
|
||||
| **Total** | - | **4-5 hrs** |
|
||||
|
||||
---
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] Can create a new table with name and columns
|
||||
- [ ] Can add columns to existing tables
|
||||
- [ ] Can rename columns
|
||||
- [ ] Can delete tables (with confirmation)
|
||||
- [ ] Field types have proper UI controls
|
||||
- [ ] Empty states guide users to create structures
|
||||
- [ ] All actions refresh the panel after success
|
||||
- [ ] Error states for invalid names/constraints
|
||||
- [ ] Theme-compliant styling (no hardcoded colors)
|
||||
|
||||
---
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### Table Name Validation
|
||||
|
||||
```javascript
|
||||
const isValidTableName = (name) => {
|
||||
// Must start with letter, alphanumeric + underscore only
|
||||
// Cannot be SQLite reserved words
|
||||
return /^[a-zA-Z][a-zA-Z0-9_]*$/.test(name) && !SQLITE_RESERVED_WORDS.includes(name.toUpperCase());
|
||||
};
|
||||
```
|
||||
|
||||
### Default Values for Types
|
||||
|
||||
```javascript
|
||||
const getDefaultForType = (type) =>
|
||||
({
|
||||
String: '',
|
||||
Number: 0,
|
||||
Boolean: false,
|
||||
Date: new Date().toISOString(),
|
||||
Object: {},
|
||||
Array: []
|
||||
}[type]);
|
||||
```
|
||||
|
||||
### SQLite Limitations
|
||||
|
||||
- No DROP COLUMN (before SQLite 3.35.0)
|
||||
- No ALTER COLUMN TYPE
|
||||
- RENAME COLUMN supported (SQLite 3.25.0+)
|
||||
|
||||
---
|
||||
|
||||
## Related Tasks
|
||||
|
||||
- **007H**: Schema Panel (viewing) ✅
|
||||
- **007I**: Data Browser (viewing/editing) ✅
|
||||
- **007J**: Schema & Data Creation UX ← This task
|
||||
@@ -0,0 +1,120 @@
|
||||
# TASK-007K: Local Backend Bug Fixes & Polish
|
||||
|
||||
## Status: 📋 DRAFT
|
||||
|
||||
## Overview
|
||||
|
||||
This task addresses the known bugs and UX issues from TASK-007J. The Schema Manager and Data Browser are functional but have rough edges that need polish.
|
||||
|
||||
## Priority 1: Critical Bugs
|
||||
|
||||
### 1.1 Object/Array Field Editor
|
||||
|
||||
**Problem:** Can't type into Object/Array field text areas in CellEditor.
|
||||
|
||||
**Files:** `CellEditor.tsx`
|
||||
|
||||
**Fix:** Review the textarea handling, may need to prevent event bubbling or fix focus management.
|
||||
|
||||
### 1.2 Real SQLite Database
|
||||
|
||||
**Problem:** Falls back to in-memory mock because better-sqlite3 import fails in Electron renderer.
|
||||
|
||||
**Files:** `LocalSQLAdapter.js`, `BackendManager.js`
|
||||
|
||||
**Fix Options:**
|
||||
|
||||
- Move SQLite operations to main process via IPC
|
||||
- Use sql.js (pure JS SQLite) in renderer
|
||||
- Configure better-sqlite3 for Electron properly
|
||||
|
||||
### 1.3 Schema Persistence
|
||||
|
||||
**Problem:** Schema changes (new tables, columns) don't persist across restarts.
|
||||
|
||||
**Files:** `SchemaManager.js`, `LocalBackendServer.js`
|
||||
|
||||
**Fix:** Ensure schema table is properly created and migrations are stored.
|
||||
|
||||
## Priority 2: Missing Features
|
||||
|
||||
### 2.1 Edit Existing Tables
|
||||
|
||||
**Problem:** No UI for adding/removing columns from existing tables.
|
||||
|
||||
**Files:** `SchemaPanel.tsx`, `TableRow.tsx`
|
||||
|
||||
**Add:**
|
||||
|
||||
- "Add Column" button in expanded table row
|
||||
- Delete column button per column
|
||||
- Confirmation for destructive actions
|
||||
|
||||
### 2.2 Delete Tables
|
||||
|
||||
**Problem:** No way to delete a table.
|
||||
|
||||
**Files:** `SchemaPanel.tsx`, `TableRow.tsx`
|
||||
|
||||
**Add:**
|
||||
|
||||
- Delete button in table row
|
||||
- Confirmation dialog
|
||||
- Backend `backend:deleteTable` IPC handler
|
||||
|
||||
### 2.3 Better Boolean Toggle
|
||||
|
||||
**Problem:** Checkbox not intuitive for boolean fields.
|
||||
|
||||
**Files:** `CellEditor.tsx`
|
||||
|
||||
**Add:** Toggle switch component instead of checkbox.
|
||||
|
||||
### 2.4 Date Picker
|
||||
|
||||
**Problem:** Text input for dates is error-prone.
|
||||
|
||||
**Files:** `CellEditor.tsx`
|
||||
|
||||
**Add:** Date picker component (can use core-ui DateInput if available).
|
||||
|
||||
## Priority 3: UX Improvements
|
||||
|
||||
### 3.1 Pointer/Relation Field Editor
|
||||
|
||||
Add dropdown to select from related records.
|
||||
|
||||
### 3.2 File Field Editor
|
||||
|
||||
Add file picker/upload UI.
|
||||
|
||||
### 3.3 Search All Fields
|
||||
|
||||
Extend search to Number, Date fields (not just String).
|
||||
|
||||
### 3.4 Keyboard Navigation
|
||||
|
||||
- Arrow keys to navigate grid
|
||||
- Enter to edit cell
|
||||
- Escape to cancel
|
||||
- Tab to move between cells
|
||||
|
||||
## Estimated Effort
|
||||
|
||||
| Priority | Items | Effort |
|
||||
| --------- | ----- | ------------- |
|
||||
| P1 | 3 | 4-6 hrs |
|
||||
| P2 | 4 | 3-4 hrs |
|
||||
| P3 | 4 | 4-6 hrs |
|
||||
| **Total** | | **11-16 hrs** |
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Core UI components (Toggle, DatePicker)
|
||||
- May need main process changes for SQLite
|
||||
|
||||
## Notes
|
||||
|
||||
- Consider splitting this into multiple sub-tasks if scope is too large
|
||||
- SQLite issue may require significant architecture change
|
||||
- Focus on P1 bugs first for usable MVP
|
||||
@@ -71,13 +71,15 @@
|
||||
|
||||
## Recent Updates
|
||||
|
||||
| Date | Update |
|
||||
| ---------- | --------------------------------------------------------- |
|
||||
| 2026-01-15 | TASK-007 Integrated Backend core infrastructure complete |
|
||||
| 2026-01-07 | Corrected PROGRESS.md to reflect actual completion status |
|
||||
| 2025-12-30 | TASK-002 bug fixes and system table support |
|
||||
| 2025-12-29 | TASK-001 Backend Services Panel completed |
|
||||
| 2025-12-29 | TASK-002 Data Nodes completed |
|
||||
| Date | Update |
|
||||
| ---------- | ----------------------------------------------------------- |
|
||||
| 2026-01-15 | TASK-007J Schema Manager & Data Browser UX complete w/ bugs |
|
||||
| 2026-01-15 | TASK-007K Draft created for bug fixes |
|
||||
| 2026-01-15 | TASK-007 Integrated Backend core infrastructure complete |
|
||||
| 2026-01-07 | Corrected PROGRESS.md to reflect actual completion status |
|
||||
| 2025-12-30 | TASK-002 bug fixes and system table support |
|
||||
| 2025-12-29 | TASK-001 Backend Services Panel completed |
|
||||
| 2025-12-29 | TASK-002 Data Nodes completed |
|
||||
|
||||
---
|
||||
|
||||
@@ -103,7 +105,7 @@
|
||||
|
||||
### TASK-007: Integrated Local Backend ✅
|
||||
|
||||
Zero-config local SQLite backend system - infrastructure complete.
|
||||
Zero-config local SQLite backend system - infrastructure complete with Schema Manager & Data Browser UI.
|
||||
|
||||
**Completed subtasks:**
|
||||
|
||||
@@ -111,6 +113,9 @@ Zero-config local SQLite backend system - infrastructure complete.
|
||||
- TASK-007B: Local Backend Server (Express + IPC handlers)
|
||||
- TASK-007C: WorkflowRunner (Cloud function execution)
|
||||
- TASK-007D: Launcher UI (BackendServicesPanel integration)
|
||||
- TASK-007H: Backend Manager IPC Handlers
|
||||
- TASK-007I: Data Browser Panel (spreadsheet-style grid)
|
||||
- TASK-007J: Schema Manager Panel (create tables, add columns)
|
||||
|
||||
**What's working:**
|
||||
|
||||
@@ -118,12 +123,16 @@ Zero-config local SQLite backend system - infrastructure complete.
|
||||
- Start/stop backend servers via IPC
|
||||
- REST API compatible with Parse Server
|
||||
- Auto-schema (tables/columns created on first write)
|
||||
- Schema Manager: create tables, add columns, view schema
|
||||
- Data Browser: view records, inline editing, create/delete records
|
||||
- UUID `id` field (compatible with Noodl frontend objects)
|
||||
|
||||
**Future work (separate task):**
|
||||
**Known Issues (TASK-007K):**
|
||||
|
||||
- Schema viewer/editor panel for visual data management
|
||||
- Data browser with grid view
|
||||
- Migration/export tools (optional)
|
||||
- Object/Array field editors don't work
|
||||
- Real SQLite falls back to in-memory mock (better-sqlite3 issues)
|
||||
- Can't edit/delete existing tables
|
||||
- Cell editor focus issues
|
||||
|
||||
**Implementation Files:**
|
||||
|
||||
@@ -143,6 +152,20 @@ packages/noodl-editor/src/main/src/local-backend/
|
||||
packages/noodl-editor/src/editor/src/views/panels/BackendServicesPanel/
|
||||
├── hooks/useLocalBackends.ts
|
||||
└── LocalBackendCard/LocalBackendCard.tsx
|
||||
|
||||
packages/noodl-editor/src/editor/src/views/panels/schemamanager/
|
||||
├── SchemaPanel.tsx, SchemaPanel.module.scss
|
||||
├── TableRow.tsx, TableRow.module.scss
|
||||
├── CreateTableModal.tsx, CreateTableModal.module.scss
|
||||
├── AddColumnForm.tsx, AddColumnForm.module.scss
|
||||
└── index.ts
|
||||
|
||||
packages/noodl-editor/src/editor/src/views/panels/databrowser/
|
||||
├── DataBrowser.tsx, DataBrowser.module.scss
|
||||
├── DataGrid.tsx, DataGrid.module.scss
|
||||
├── CellEditor.tsx, CellEditor.module.scss
|
||||
├── NewRecordModal.tsx, NewRecordModal.module.scss
|
||||
└── index.ts
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user