search

icefoganalytics / elcc-data-management

Data Management application for Education's Early Learning Child Centre
Apache License 2.0
0 stars 0 forks source link

ELCC26: Navigation Enhancement #86

Closed klondikemarlen closed 1 month ago

klondikemarlen commented 1 month ago

Fixes https://yg-hpw.atlassian.net/browse/ELCC-26

Context

Is there an easier way to move down to the next cell to fill? Tab you have to go through est first, enter and arrows don’t work.

It sounds like there are limited ways of moving in and out of cells (TAB). Is it possible to enable the ability to use enter and arrows to navigate? Currently it is taking a considerable amount of time to navigate screens to enter data.

Implementation

  1. Add listeners for Enter, Shift+Enter, ArrowUp, ArrowDown, ArrowRight, and ArrowLeft events to Worksheet inputs. See screenshot for key functions enabled.
  2. Split some worksheet components into smaller components.
  3. Standardize some component locations.
  4. Fix linting in /web directory (front-end)
  5. Pull dev edit-pr <github-pr-url> helper from Travel Auth project to get AI auto-completion as I type PR instructions.

Screenshots

Keyboard Shortcuts Modal image

Testing Instructions

  1. Boot the app via dev up
  2. Check that the app complies, and that you can log in at http://localhost:8080.
  3. Click on the Education is Currently Funding card.
  4. Double click on a Child Care Centre to go to the edit page.
  5. Click on the Worksheets tab.
  6. Add worksheets if there aren't any available.
  7. Click on the keyboard icon at the top right of any section header to see the list of shortcuts.
  8. Click on the first row of the table.
  9. Press Enter to move down the column, selecting the text each time.
  10. Press Enter until you jump to the next section.
  11. Press Shift+Enter to move up the column, selecting the text each time.
  12. Note that wehn you reach the top of the column, it stops changing selected input.
  13. Try the same thing with ArrowUp, ArrowDown.
  14. Enter some content in the first cell.
  15. Press ArrowRight to move to the next column.
  16. Note that the text is selected.
  17. Press ArrowLeft to move to the start of the input.
  18. Press ArrowLeft again to move to the previous column. Note that the text is selected.
  19. Press ArrowRight to change input to end of selected text.
  20. Note that Tab and Shift+Tab still work as expected.