search

icefoganalytics / travel-authorization

0 stars 0 forks source link

Simplify and Centralize Travel Authorization Tab (Wizard) Logic #201

Closed klondikemarlen closed 2 weeks ago

klondikemarlen commented 2 weeks ago

Fixes https://github.com/icefoganalytics/travel-authorization/issues/189

Relates to:

Context

Is your feature request related to a problem? Please describe.

I have a tab page component that submits a "travel desk travel request", and once submission occurs, it redirects the user the the "read" view of the page. However, this doesn't naturally update the "tab" path, so clicking on the tab would send you back to the "edit" page. One example of a solution is https://github.com/icefoganalytics/travel-authorization/commit/630dcd273997b7509c18d403741cc1bb7d731288.

Note that the https://github.com/icefoganalytics/internal-data-portal/blob/main/web/src/layouts/DatasetLayout.vue in the Internal Data Portal suffers from the same problem.

Describe the solution you'd like

After some consideration, and consulting outside sources, I've determined that I need a better pattern to handle reactive tab logic.

Conclusions:

  1. The tab state is effectively a variation on the "wizard" pattern.
  2. The logic needs to be centralized, so that only one fetch is needed to update the available steps.
  3. The display and business logic should be separated, instead of merged the way the current tab components operate.

Proposed solution:

  1. create a new component location to store wizard type information?
  2. compute all tab content in one location
  3. Use serialized policy logic to determine tab wherever possible
  4. Either use a refresh option for tab state, or watch the route.name and refresh on every route change.

Implementation

Move tab render to computed component props.

Thoughts

I should definitely always direct the user to the Read view of the page via the tabs, and support navigating the the "edit" view via and "edit" button. This would make the experience less confusing, especially when you are an admin.

Screenshots

Same as before image

Testing Instructions

  1. Run the test suite via dev test (or dev test_api)
  2. Boot the app via dev up
  3. Log in to the app at http://localhost:8080
  4. Go to the My Travel Requests page via the to drop down nav.
  5. Create a new travel authorization.
  6. Check that the "Request" and "Expense" tabs are initially locked.
  7. Fill out the Details tab and Generate Estimate.
  8. Submit to another user account you control (not your account this time)
  9. Log in as the other account and go to the "Manager View" from the top left drop down nav.
  10. Find your request under the "Pending Approvals" card.
  11. Click on it and scroll to the bottom to approve.
  12. Approve the request.
  13. Log back in as your original account and go back to the travel authorization.
  14. Go to the Request tab and fill it in.
  15. At the bottom submit the request.
  16. Check that you are redirected to the "read" view of the page

    read view is a stub

  17. Check that the tab url updates to only reference the read view.
  18. Go back to the My Travel Requests table.
  19. Check that the "action" for the travel authorization is now "submit expense claim" and takes you to the correct tab.