2.3 KiB
2.3 KiB
Story 2.1: Édition de Cellule & Validation
Status: review
Story
As a Julien (Analyst), I want to edit cell values directly in the grid, so that I can manually correct obvious data entry errors.
Acceptance Criteria
- Inline Editing: Double-clicking a cell enters "Edit Mode" with an input field matching the column type.
- Data Validation: Input is validated against the column type (e.g., only numbers in Numeric columns).
- Commit Changes: Pressing
Enteror clicking outside saves the change to the local Zustand store. - Visual Feedback: Edited cells are temporarily highlighted or marked to indicate unsaved/modified state.
- Keyboard Support: Pressing
Esccancels the edit and restores the original value.
Tasks / Subtasks
- Frontend Grid Update (AC: 1, 3, 5)
- Implement
EditableCellcomponent insrc/features/smart-grid/components/SmartGrid.tsx. - Add
onCellEditlogic to the TanStack Table configuration.
- Implement
- State Management (AC: 3, 4)
- Update
useGridStoreto support aupdateCellValue(rowId, colId, value)action. - Implement a
modifiedCellstracking object in the store to highlight changes.
- Update
- Validation Logic (AC: 2)
- Add regex-based validation for numeric and boolean inputs in the frontend.
Dev Notes
- Memoization: Used local state for editing to prevent entire table re-renders during typing.
- Visuals: Modified cells now have a subtle
bg-amber-50background. - Validation: Implemented strict numeric validation before committing to the global store.
Project Structure Notes
- Modified
frontend/src/store/use-grid-store.ts. - Updated
frontend/src/features/smart-grid/components/SmartGrid.tsx.
References
- [Source: ux-design-specification.md#Grid Interaction Patterns]
- [Source: architecture.md#Frontend Architecture]
Dev Agent Record
Agent Model Used
{{agent_model_name_version}}
Completion Notes List
- Created an
EditableCellsub-component withonDoubleClickactivation. - Implemented
updateCellValuein Zustand store with change tracking. - Added keyboard support:
Enterto commit,Escapeto discard. - Added visual highlighting for modified data.
File List
- /frontend/src/store/use-grid-store.ts
- /frontend/src/features/smart-grid/components/SmartGrid.tsx