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

Convert the "updating" overlay to use Vuex actions with a slight delay #207

Open
wants to merge 11 commits into
base: ab_migrate
Choose a base branch
from

Conversation

luthian
Copy link
Contributor

@luthian luthian commented Jul 9, 2024

This PR moves the overlay/spinner combo to the IFXPageHeader component as this component is in more pages than IFXPageActionBar, especially pages that don't use the action bar. In addition, the z-index is set to 300 to have the overlay appear over dialog boxes.

There is also add a new Vuex module containing the submitting state variable; this is set/clear via a Vuex action, setSubmitting which takes a true or false. To prevent any quick flashes of the overlay, the action will wait 1/3 second before commiting the change. Should a new request to set the state variable to true come in, we will clear the current timer and start a new one; requests to set the state variable to false take effect immediately.

The previous method of passing state into IFXPageActionBar has been removed; now the submitSave and saveUpdate functions use the action to set/clear the state.

To use this in other pages, first map the Vuex action with and then call the action with the appropriate payload:

...mapActions(['submit/setSubmitting'])
   .
   .
   .
this.$store.dispatch('submit/setSubmitting', true) // Display overlay in 1/3 second

Since we’re often mapping showMessage anyway, this can be combined as
...mapActions(['showMessage', 'submit/setSubmitting'])

- This replaces the prop passed in to `IFXPageActionBar`
- If we’re using Vuex, the prop isn’t needed.
- It is available on pages that don’t use `IFXPageActionBar`. These are often pages that do their own submits.
- Gives us some tolerance for instant connections.
- This lets us use a timer to wait 1/3 of a second before committing the value. So there is less chance of a flash
- using the `getters.getTimer` returned the function, not the timer!
# Conflicts:
#	src/components/item/IFXItemCreateEditMixin.js
#	src/components/item/IFXItemEditableDetailMixin.js
#	src/components/page/IFXPageActionBar.vue
@luthian luthian changed the title WIP: Convert the "updating" overlay to use Vuex actions with a slight delay Convert the "updating" overlay to use Vuex actions with a slight delay Jul 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant