Procedure:
- I identify the variances between two arrays of objects, such as new additions, deletions, or changes. These variations are recorded in
data[1-5] - Based on #1, I generate a text summary (textual representations of objects) for a modal window to inform the user about the identified differences. This summary is saved in
someDataToShowInModal. - Once the differences are detected, the modal displaying the summary must be presented to the user. The user has the option to either approve (by clicking OK) or reject (by clicking CANCEL) the modifications.
INQUIRY: How can I wait for the user to click either the OK or CANCEL button on the modal?
The following code provides two potential solutions, but their implementation process remains unclear:
Encase the modal within a Promise.
Utilize
state.doSaveand find a way to delay until it is altered bymyModalComponent.
Implement the changes when the user selects OK.
Below is pseudo-code illustrating the logic I am trying to enact:
state.js
modalTextSummary = {}
action.js
async myAction ({ state }) {
let modalClosed
let someDataToShowInModal = {}
let data1 = []
let data2 = []
let data3 = []
let data4 = []
let data5 = []
// #1. Record variances in "data[1-5]"
data1.push(xyz1)
data2.push(xyz2)
data3.push(xyz3)
data4.push(xyz4)
data5.push(xyz5)
// #2. Create "someDataToShowInModal" based on data[1-5]
someDataToShowInModal = {xyz}
// #3. Update "state.modalTextSummary" to trigger
// the Modal display ("myModalCompont" watches for "modalTextSummary")
state.modalTextSummary = someDataToShowInModal
// #4. HOW TO WAIT UNTIL USER CLICKS Modal's "OK" or "CANCEL"?
// Version 1:
// something like...
modalClosed = await myModalComponent
// Version 2:
// I could set "state.doSave = ''", which can then be
// modified to either 'OK' or 'CANCEL' by "myModalComponent", but how
// do I monitor state changes in this scenario?
modalClosed = await state.doSave !== ''
// #5. Apply modifications
if (modalCloses === 'OK') {
// ... code implementing changes based on data from data[1-5]
}
}
myModalComponent.js
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState([
'modalTextSummary'
])
},
watch: {
modalTextSummary: function () {
if (this.modalTextSummary !== {}) {
// Bootstrap-vue modal display initiated here
}
}
}
}
</script>
I am familiar with calling a function upon closing a modal using an OK button, but in this situation, temporarily storing data[1-5] in vuex to retrieve them later within the invoked function seems rather complex, thus I am seeking a more straightforward method.