fix: replace unit text input with dropdown in document import view#385
fix: replace unit text input with dropdown in document import view#385molloyzak13 wants to merge 4 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
UI update to align the document import “invoice line item unit” editor with the main invoicing UI by replacing free-text entry with a predefined unit dropdown, improving consistency and reducing invalid unit inputs during import review.
Changes:
- Added a local
UNIT_OPTIONSlist for invoice item units. - Replaced the line-item unit
<input>with a<select>dropdown, including a disabled placeholder for missing units.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <select value={li.unit ?? ""} onChange={(e) => updateItem(idx, "unit", e.target.value)} | ||
| className={`w-full px-2 py-1 rounded text-xs bg-bg-card text-primary border ${borderCls("unit", li.unit)} outline-none focus:border-fuchsia-400`}> | ||
| <option value="" disabled>Select unit</option> | ||
| {UNIT_OPTIONS.map((u) => <option key={u} value={u}>{u}</option>)} | ||
| </select> |
| // Main View | ||
| // --------------------------------------------------------------------------- | ||
|
|
||
| const UNIT_OPTIONS = ["hour", "day", "piece", "flat"] as const; |
There was a problem hiding this comment.
Thanks @molloyzak13. Please complete the checklist to get this ready to merge. Especially the screenshot to dem how the UI changes. Please also check the Copilot comments and apply if valid.
…cognized units - Extract UNIT_OPTIONS to ui/src/constants.ts (shared between import + invoicing) - Import from shared constant in both DocumentImportView and InvoicingView - Handle parser-returned unit values not in UNIT_OPTIONS (e.g., "hours") by appending the unrecognized value to the dropdown options - tsc --noEmit clean, npm run build (tsc + vite) passes Review feedback from clstaudt + Copilot suggestions tuttle-dev#385.
|
reply_target: #385 Applied the two Copilot suggestions. Extracted UNIT_OPTIONS to ui/src/constants.ts so it's shared between both views, and added a fallback for unit values the parser returns that aren't in the standard set so the select doesn't render blank. Pushed. tsc and vite build both pass cleanly. |
Without that, your setup is not quite ready yet to contribute. How would you test this from a user perspective without running the app?
Running the test suite and checking that it passes is a requirement for every PR. That |
|
reply_target: #385 Fair point. I ran the TypeScript typecheck and the Vite build locally, both clean. It's a straightforward component swap, so those two cover the types and the bundle. I couldn't get the full Electron app running on this machine though, so no screenshot from me. Happy to set up the full app if you need a screenshot. Just wanted to be upfront about what I checked and what I didn't. |
Summary
The document import view had a free-text
<input>for the unit field on each parsed line item. The invoice parser tries to recognize units from the document text, but when it gets it wrong or the original invoice doesn't specify one clearly, there's no way to fix it without deleting and re-adding the item. The invoicing view already defines a fixed set of units (hour, day, piece, flat), so the import UI should match.Changed the unit
<input>to a<select>dropdown using the same UNIT_OPTIONS values the invoicing view uses (InvoicingView.tsxline 221). Items where the parser couldn't recognize a unit (null/undefined in the data) map to a "Select unit" placeholder option that's disabled so it can't be submitted empty. The data flow throughupdateItem(idx, "unit", e.target.value)is unchanged since<select>elements exposee.target.valuethe same way<input>does.Built with tsc and vite, both pass cleanly. Styling classes preserved exactly from the existing input element.
Fixes #379
(I used AI assistance for drafting and build verification.)
Checklist
just dev).just test).just precommit).tuttle/model.py), I generated and reviewed an Alembic migration (just migrate "<msg>").