Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ELCC26: Navigation Enhancement #86

Merged
merged 25 commits into from
Oct 4, 2024
Merged

Conversation

klondikemarlen
Copy link
Member

@klondikemarlen klondikemarlen commented Oct 4, 2024

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.

I'm not sure why this works. I copied this from https://github.com/icefoganalytics/wrap
and seems to make VSCode happy.
What? The FundingSubmissionLineJson model has a "virtual" field for "lines".
Pattern is pages/url/segment/ComponentName.vue

e.g.
/child-care-centres/1/2024-25/worksheets/may
->
pages/child-care-centres/fiscal-years/worksheets/MonthlyWorksheetPage.vue

Note:
/child-care-centres/1/2024-25/worksheets/may
should probably be
/child-care-centres/some-center-slug/fiscal-years/2024-25/worksheets/may
…age.

Why? To make it easier to find page components.
My linter now tells me about this kind of stuff 🎉!
Move component to a model based location for easier re-use.
NOTE: navigation only triggers when at the beginning or end of input text.
NOTE: this only works for "enter" due to the nature of the arrow events.
Arrow navigation on a selected text now drops the selection and moves to the beginning or end of the text.
@klondikemarlen klondikemarlen added the enhancement New feature or request label Oct 4, 2024
@klondikemarlen klondikemarlen self-assigned this Oct 4, 2024
This style was missed when splitting the edit sheet out from the main page.
Why? To make it easier for users to figure out the keyboard shortcuts available.
It's good for modals state and table queries stored in the url.
Why? Accessibility and ease of debugging and texting.
@klondikemarlen klondikemarlen force-pushed the elcc-26/navigation-enhancement branch from 02d576e to e2a14a8 Compare October 4, 2024 23:43
@klondikemarlen klondikemarlen marked this pull request as ready for review October 4, 2024 23:50
@klondikemarlen klondikemarlen merged commit e296e38 into main Oct 4, 2024
@klondikemarlen klondikemarlen deleted the elcc-26/navigation-enhancement branch October 4, 2024 23:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant