search

icefoganalytics / travel-authorization

0 stars 0 forks source link

Fix Race Condition In Approve Modal Caused By Global State Of Use Files #177

Closed klondikemarlen closed 2 months ago

klondikemarlen commented 2 months ago

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

Relates to:

Context

Describe the bug When clicking approve in approve modal, the page refreshes, and the modal reopens in a crashed state.

To Reproduce Steps to reproduce the behavior:

  1. Create a travel authorization.
  2. Fill it in.
  3. Generate an estimate.
  4. Submit it to yourself as the supervisor.
  5. In the to drop down nav go to the "Manger View".
  6. In the top left widget, click on your new travel approval request.
  7. Scroll to the button and approve the travel request.

Expected behavior Modal closes after clicking approve.

Screenshots image

Additional context The "Approve" button click in web/src/modules/travel-authorizations/components/manage-travel-authorization-details-page/ApproveTravelRequestDialogButton.vue triggers the global isLoading state of useTravelAuthorization to toggle. This triggers a page refresh in web/src/modules/travel-authorizations/layouts/ManageTravelAuthorizationLayout.vue.

This is caused by use of global state in useTravelAuthorization.

Implementation

Replace page overlay with page loader to avoid Vue excessive render changes 3x+ screen size. Drop global use file helper and make all use files local by default. Current user is still global as it is a special case.

I haven't noticed anything breaking as a result of switching back to non-global use files.

Screenshots

N/A as weird UI bug not doesn't happen.

Testing Instructions

  1. Create a travel authorization.
  2. Fill it in.
  3. Generate an estimate.
  4. Submit it to yourself as the supervisor.
  5. In the to drop down nav go to the "Manger View".
  6. In the top left widget, click on your new travel approval request.
  7. Scroll to the button and approve the travel request.
  8. Go back to the travel authorization under "My Travel Authorizations" then picking it from the list.
  9. Go to the Expense tab and prefill the expenses.
  10. Upload all the receipts.
  11. Add the codings.
  12. Submit to the supervisor again.