[FR] Limit the textbox input when editing a cell to whatever the specified data type is for that column.

[modelorona]

trafficstars

When editing a cell, currently I see that it's free text. It would be convenient to limit the user to be able to type in only whatever is the data type for that cell.

So if I'm editing a column that's only numbers, then I should be able to type in only numbers.

[hkdeman]

Great suggestion! We will add this to our backlog. :)

[hkdeman]

@claude can you add this feature in the Add, Edit row logic and create a PR, also add it to the add storage unit as well

[claude[bot]]

Claude finished @hkdeman's task —— View job • claude/issue-62-20250904-1222 • Create PR ➔

---

Completed Implementation

I've successfully implemented input validation based on column data types for WhoDB. Here's what was done:

Todo List

• [x] Read CLAUDE.md for repo-specific instructions
• [x] Research current row editing implementation
• [x] Find where column data types are available
• [x] Implement input validation for Add row
• [x] Implement input validation for Edit row
• [x] Implement input validation for Add storage unit (not applicable - uses dropdowns)
• [x] Run tests and linting
• [x] Commit and push changes

Changes Made

1. Created input validation utility (frontend/src/utils/input-validation.ts):

   • Type detection for integers, floats, dates, UUIDs, etc.
   • Real-time validation functions
   • Keyboard input filtering
   • Contextual placeholders

2. Updated Add Row functionality (explore-storage-unit.tsx):

   • Added type-based input validation
   • Prevents invalid characters during typing
   • Shows helpful placeholders (e.g., "Enter integer (e.g., 123)")

3. Updated Edit Row functionality (table.tsx):

   • Same validation applied to row editing
   • Works for both Input and TextArea components

Features

• Numeric fields: Only allow numbers, decimal points (for floats), and minus sign (for signed types)
• Integer fields: Block decimal points
• UUID fields: Validate UUID format or allow gen_random_uuid()
• Date/DateTime fields: Use appropriate HTML5 input types
• Boolean fields: Validate true/false values
• Smart placeholders: Show format hints based on data type

The validation is non-intrusive - it prevents invalid input in real-time rather than showing error messages, providing a smooth user experience.