60 lines
2.3 KiB
Markdown
60 lines
2.3 KiB
Markdown
# 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
|
|
|
|
1. **Inline Editing:** Double-clicking a cell enters "Edit Mode" with an input field matching the column type.
|
|
2. **Data Validation:** Input is validated against the column type (e.g., only numbers in Numeric columns).
|
|
3. **Commit Changes:** Pressing `Enter` or clicking outside saves the change to the local Zustand store.
|
|
4. **Visual Feedback:** Edited cells are temporarily highlighted or marked to indicate unsaved/modified state.
|
|
5. **Keyboard Support:** Pressing `Esc` cancels the edit and restores the original value.
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [x] **Frontend Grid Update** (AC: 1, 3, 5)
|
|
- [x] Implement `EditableCell` component in `src/features/smart-grid/components/SmartGrid.tsx`.
|
|
- [x] Add `onCellEdit` logic to the TanStack Table configuration.
|
|
- [x] **State Management** (AC: 3, 4)
|
|
- [x] Update `useGridStore` to support a `updateCellValue(rowId, colId, value)` action.
|
|
- [x] Implement a `modifiedCells` tracking object in the store to highlight changes.
|
|
- [x] **Validation Logic** (AC: 2)
|
|
- [x] 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-50` background.
|
|
- **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 `EditableCell` sub-component with `onDoubleClick` activation.
|
|
- Implemented `updateCellValue` in Zustand store with change tracking.
|
|
- Added keyboard support: `Enter` to commit, `Escape` to discard.
|
|
- Added visual highlighting for modified data.
|
|
|
|
### File List
|
|
- /frontend/src/store/use-grid-store.ts
|
|
- /frontend/src/features/smart-grid/components/SmartGrid.tsx |