Move in 'setSliderValuesCallback' 'slotOnNextClick' as 'buttonSliderCallback' into 'sliderSettings'

This commit is contained in:
Wolfgang Huß 2021-02-27 18:04:23 +01:00
parent e3bf47679e
commit 0022ea7365
6 changed files with 33 additions and 41 deletions

View File

@ -36,7 +36,7 @@
filled filled
:loading="false" :loading="false"
:disabled="!sliderData.sliders[sliderIndex].validated" :disabled="!sliderData.sliders[sliderIndex].validated"
@click="onClick" @click="onNextClick"
> >
{{ sliderData.sliders[sliderIndex].button.title }} {{ sliderData.sliders[sliderIndex].button.title }}
</base-button> </base-button>
@ -59,10 +59,10 @@ export default {
}, },
}, },
methods: { methods: {
async onClick() { async onNextClick() {
let success = true let success = true
if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) { if (this.sliderData.sliders[this.sliderIndex].button.sliderCallback) {
success = await this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick() success = await this.sliderData.sliders[this.sliderIndex].button.sliderCallback()
} }
success = success && this.sliderData.sliders[this.sliderIndex].button.callback(success) success = success && this.sliderData.sliders[this.sliderIndex].button.callback(success)
if (success && this.sliderIndex < this.sliderData.sliders.length - 1) { if (success && this.sliderIndex < this.sliderData.sliders.length - 1) {

View File

@ -227,8 +227,9 @@ export default {
: false : false
this.sendValidation() this.sendValidation()
// Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick) this.sliderData.setSliderValuesCallback(this.valid, {
this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick) sliderSettings: { buttonSliderCallback: this.onNextClick },
})
}) })
}, },
computed: { computed: {

View File

@ -133,11 +133,12 @@ export default {
: '' : ''
this.sendValidation() this.sendValidation()
this.sliderData.setSliderValuesCallback( this.sliderData.setSliderValuesCallback(this.validInput, {
this.validInput, sliderSettings: {
this.buttonValues(), ...this.buttonValues().sliderSettings,
this.onNextClick, buttonSliderCallback: this.onNextClick,
) },
})
}) })
}, },
watch: { watch: {

View File

@ -57,7 +57,9 @@ export default {
: '' : ''
this.sendValidation() this.sendValidation()
this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick) this.sliderData.setSliderValuesCallback(this.validInput, {
sliderSettings: { buttonSliderCallback: this.onNextClick },
})
}) })
}, },
computed: { computed: {

View File

@ -62,7 +62,9 @@ export default {
this.sendValidation() this.sendValidation()
// Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick) // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick)
this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick) this.sliderData.setSliderValuesCallback(this.valid, {
sliderSettings: { buttonSliderCallback: this.onNextClick },
})
}) })
}, },
computed: { computed: {

View File

@ -92,7 +92,7 @@ export default {
title: 'Next', // Wolle title: 'Next', // Wolle
icon: 'arrow-right', icon: 'arrow-right',
callback: this.buttonCallback, callback: this.buttonCallback,
slotOnNextClick: null, // optional set by slot sliderCallback: null, // optional set by slot
}, },
}, },
{ {
@ -104,7 +104,7 @@ export default {
title: '', // set by slider component title: '', // set by slider component
icon: '', // set by slider component icon: '', // set by slider component
callback: this.buttonCallback, callback: this.buttonCallback,
slotOnNextClick: null, // optional set by slot sliderCallback: null, // optional set by slot
}, },
}, },
{ {
@ -116,7 +116,7 @@ export default {
title: 'Confirm', // Wolle title: 'Confirm', // Wolle
icon: 'arrow-right', icon: 'arrow-right',
callback: this.buttonCallback, callback: this.buttonCallback,
slotOnNextClick: null, // optional set by slot sliderCallback: null, // optional set by slot
}, },
}, },
{ {
@ -129,7 +129,7 @@ export default {
title: 'Create', // Wolle title: 'Create', // Wolle
icon: 'check', icon: 'check',
callback: this.buttonCallback, callback: this.buttonCallback,
slotOnNextClick: null, // optional set by slot sliderCallback: null, // optional set by slot
}, },
}, },
] ]
@ -186,18 +186,9 @@ export default {
}, },
}, },
methods: { methods: {
// Wolle enterEmailButtonTitle(emailSend) {
// // return emailSend ? 'Resend e-mail' : 'Send e-mail'
// return emailSend ? 'Skip resend' : 'Send e-mail' // Wolle
// },
// enterEmailButtonIcon(emailSend) {
// // return emailSend ? 'Resend e-mail' : 'Send e-mail'
// return emailSend ? 'arrow-right' : 'envelope' // Wolle
// },
setSliderValuesCallback( setSliderValuesCallback(
isValid, isValid,
{ collectedInputData, sliderData, sliderSettings }, { collectedInputData, sliderData, sliderSettings }, // sliderCallback = null,
slotOnNextClick = null,
) { ) {
this.sliderData.sliders[this.sliderIndex].validated = isValid this.sliderData.sliders[this.sliderIndex].validated = isValid
@ -220,37 +211,32 @@ export default {
} }
} }
if (sliderSettings) { if (sliderSettings) {
const { buttonTitle, buttonIcon } = sliderSettings const { buttonTitle, buttonIcon, buttonSliderCallback } = sliderSettings
if (buttonTitle) { if (buttonTitle) {
this.sliderData.sliders[this.sliderIndex].button.title = buttonTitle this.sliderData.sliders[this.sliderIndex].button.title = buttonTitle
} }
if (buttonIcon) { if (buttonIcon) {
this.sliderData.sliders[this.sliderIndex].button.icon = buttonIcon this.sliderData.sliders[this.sliderIndex].button.icon = buttonIcon
} }
if (buttonSliderCallback) {
this.sliderData.sliders[this.sliderIndex].button.sliderCallback = buttonSliderCallback
}
} }
if (slotOnNextClick) { // Wolle if (sliderCallback) {
this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick = slotOnNextClick // this.sliderData.sliders[this.sliderIndex].button.sliderCallback = sliderCallback
} // }
}, },
sliderSelectorCallback(selectedIndex) { sliderSelectorCallback(selectedIndex) {
if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) { if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) {
// Wolle if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
// this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
// this.sliderData.collectedInputData.emailSend,
// )
// this.sliderData.sliders[this.sliderIndex].button.icon = this.enterEmailButtonIcon(
// this.sliderData.collectedInputData.emailSend,
// )
// }
this.sliderData.sliderIndex = selectedIndex this.sliderData.sliderIndex = selectedIndex
} }
}, },
buttonCallback(success) { buttonCallback(success) {
// Wolle // Wolle
// if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') { // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') {
// // if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) { // // if (this.sliderData.sliders[this.sliderIndex].button.sliderCallback) {
// // this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick() // // this.sliderData.sliders[this.sliderIndex].button.sliderCallback()
// // } // // }
// this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle( // this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle(
// this.sliderData.collectedInputData.emailSend, // this.sliderData.collectedInputData.emailSend,