Created
February 1, 2017 05:40
-
-
Save CGastrell/cd3ad456aab215b4966d22c32a5a6bb5 to your computer and use it in GitHub Desktop.
descriptive user decision path with a modal and unsaved data confirmation nested confirm modal
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
click: function (event) { | |
event.stopPropagation() | |
this.form = new EditFormView({ model: this.model, availableCustomers: this.availableCustomers }) | |
// the created form eliminates the class, dunno why | |
this.form.el.classList.add('form-horizontal') | |
const originalData = merge({}, this.form.data) | |
const modal = bootbox.form( | |
{ | |
message: this.form.el, | |
title: 'Edit user' | |
}, | |
save => { | |
// scenarios: | |
if (!save) { | |
// user pressed cancel/close | |
console.log('user tries to cancel operation') | |
if (!isEqual(originalData, this.form.data)) { // here you could check for form.valid | |
console.log('but form data has changed!') | |
// form invalid, ask to close anyways | |
bootbox.confirm('Unsaved data will be discarded, continue?', confirm => { | |
if (confirm) { | |
console.log('user is a strong one and escapes anyway') | |
modal.modal('hide') | |
console.log('THE END') | |
} else { | |
// user is strongly decided to discard de modal, do nothing | |
console.log('so user hesitates and goes back to modal') | |
console.log('THE END') | |
} | |
}) | |
// this is to recover from dissapearing modal and be able to escape again | |
// .on('blur', () => modal.focus()) | |
// and this is to go to the first input | |
.on('blur', () => modal.firstInput.focus()) | |
console.log('TO BE CONTINUED...') | |
return false | |
} else { | |
// form is valid, seems like nothing has changed | |
// dev should be able to not return a value and close anyways | |
console.log('... and succeeds') | |
console.log('THE END') | |
} | |
} else { | |
// user wants to save modal form | |
console.log('user tries to save model') | |
if (!this.form.valid) { | |
console.log('but form is invalid and gets no response from nobody. he is alone in the dark') | |
console.log('THE END') | |
return false | |
} else { | |
console.log('and form is VALID!') | |
} | |
console.log('so he saves the data and he is the hero of the day') | |
console.log('THE END') | |
} | |
} | |
) | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment