Analysis/_bmad-output/implementation-artifacts/2-1-edition-de-cellule-validation.md
2026-01-11 22:56:02 +01:00

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

  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

  • Frontend Grid Update (AC: 1, 3, 5)
    • Implement EditableCell component in src/features/smart-grid/components/SmartGrid.tsx.
    • Add onCellEdit logic to the TanStack Table configuration.
  • State Management (AC: 3, 4)
    • Update useGridStore to support a updateCellValue(rowId, colId, value) action.
    • Implement a modifiedCells tracking object in the store to highlight changes.
  • 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-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