From 091ed52b5468d0d12a332f0cdfcefb8b10cb0bc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Sat, 27 Feb 2021 15:39:05 +0100 Subject: [PATCH] Refactor to 'setSliderValuesCallback' --- .../ComponentSlider/ComponentSlider.vue | 14 +++- .../RegistrationItemCreateUserAccount.vue | 10 ++- .../RegistrationItemEnterEmail.vue | 52 +++++++++---- .../RegistrationItemEnterInvite.vue | 20 +++-- .../RegistrationItemEnterNonce.vue | 21 +++-- .../Registration/RegistrationSlider.story.js | 2 +- .../Registration/RegistrationSlider.vue | 76 +++++++++++++------ 7 files changed, 140 insertions(+), 55 deletions(-) diff --git a/webapp/components/ComponentSlider/ComponentSlider.vue b/webapp/components/ComponentSlider/ComponentSlider.vue index 6a1111f54..eb9918565 100644 --- a/webapp/components/ComponentSlider/ComponentSlider.vue +++ b/webapp/components/ComponentSlider/ComponentSlider.vue @@ -36,7 +36,7 @@ filled :loading="false" :disabled="!sliderData.sliders[sliderIndex].validated" - @click="sliderData.sliders[sliderIndex].button.callback" + @click="onClick" > {{ sliderData.sliders[sliderIndex].button.title }} @@ -58,6 +58,18 @@ export default { return this.sliderData.sliderIndex // have a shorter notation }, }, + methods: { + async onClick() { + let success = true + if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) { + success = await this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick() + } + // this.sliderData.sliders[this.sliderIndex].button.callback() + if (success && this.sliderIndex < this.sliderData.sliders.length - 1) { + this.sliderData.sliderSelectorCallback(this.sliderIndex + 1) + } + }, + }, } diff --git a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue index f76dfba98..1bc8c5a39 100644 --- a/webapp/components/Registration/RegistrationItemCreateUserAccount.vue +++ b/webapp/components/Registration/RegistrationItemCreateUserAccount.vue @@ -226,6 +226,9 @@ export default { ? this.sliderData.collectedInputData.noPolitical : false this.sendValidation() + + // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick) + this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick) }) }, computed: { @@ -271,7 +274,7 @@ export default { noPolitical, } = this const locale = this.$i18n.locale() - const value = { + const values = { name, about, password, @@ -286,7 +289,7 @@ export default { } // Wolle validate in backend // toaster - this.sliderData.validateCallback(this.valid, value) + this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values }, {}) }, async handleInput() { this.sendValidation() @@ -324,6 +327,9 @@ export default { this.response = 'error' } }, + onNextClick() { + return true + }, }, } diff --git a/webapp/components/Registration/RegistrationItemEnterEmail.vue b/webapp/components/Registration/RegistrationItemEnterEmail.vue index 12219633e..ae9431425 100644 --- a/webapp/components/Registration/RegistrationItemEnterEmail.vue +++ b/webapp/components/Registration/RegistrationItemEnterEmail.vue @@ -43,6 +43,21 @@ {{ $t('components.registration.signup.form.submit') }} --> + + + + +
@@ -108,6 +123,7 @@ export default { message: this.$t('common.validations.email'), }, }, + sendEmailAgain: false, // Wolle disabled: true, data: null, error: null, @@ -120,6 +136,8 @@ export default { ? this.sliderData.collectedInputData.email : '' this.sendValidation() + + this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick) }) }, computed: { @@ -140,9 +158,9 @@ export default { this.formData.email = normalizeEmail(this.formData.email) } const { email } = this.formData - const value = { email } + const values = { email } - this.sliderData.validateCallback(this.validInput, value) + this.sliderData.setSliderValuesCallback(this.validInput, { collectedInputData: values }, {}) }, async handleInput() { this.sendValidation() @@ -150,30 +168,33 @@ export default { async handleInputValid() { this.sendValidation() }, - async handleSubmitVerify() { + async onNextClick() { const mutation = this.token ? SignupByInvitationMutation : SignupMutation const { token } = this const { email } = this.formData const variables = { email, token } + // Wolle test for resend if ( !this.sliderData.sliders[this.sliderIndex].data.request || - !this.sliderData.sliders[this.sliderIndex].data.request.variables || + (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) || (this.sliderData.sliders[this.sliderIndex].data.request && this.sliderData.sliders[this.sliderIndex].data.request.variables && - !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables)) + !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables) ) { - this.sliderData.sliders[this.sliderIndex].data = { - ...this.sliderData.sliders[this.sliderIndex].data, - request: { variables }, - } + // this.sliderData.sliders[this.sliderIndex].data = { + // ...this.sliderData.sliders[this.sliderIndex].data, + // request: { variables }, + // } + this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } }) try { const response = await this.$apollo.mutate({ mutation, variables }) // e-mail is send in emailMiddleware of backend - this.sliderData.sliders[this.sliderIndex].data = { - ...this.sliderData.sliders[this.sliderIndex].data, - response: response.data, - } + // this.sliderData.sliders[this.sliderIndex].data = { + // ...this.sliderData.sliders[this.sliderIndex].data, + // response: response.data, + // } + this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } }) if (this.sliderData.sliders[this.sliderIndex].data.response) { this.sliderData.collectedInputData.emailSend = true @@ -184,8 +205,10 @@ export default { this.$t('components.registration.email.form.success', { email: respnseEmail }), ) } + return true } catch (err) { - this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null } + // this.sliderData.sliders[this.sliderIndex].data = { request: null, response: null } + this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: null, response: null } }) this.sliderData.collectedInputData.emailSend = false const { message } = err @@ -203,6 +226,7 @@ export default { if (!this.error) { this.$toast.error(message) } + return false } } }, diff --git a/webapp/components/Registration/RegistrationItemEnterInvite.vue b/webapp/components/Registration/RegistrationItemEnterInvite.vue index 6ee90c02c..7ed4541bd 100644 --- a/webapp/components/Registration/RegistrationItemEnterInvite.vue +++ b/webapp/components/Registration/RegistrationItemEnterInvite.vue @@ -56,6 +56,8 @@ export default { ? this.sliderData.collectedInputData.inviteCode : '' this.sendValidation() + + this.sliderData.setSliderValuesCallback(this.validInput, {}, this.onNextClick) }) }, computed: { @@ -76,7 +78,7 @@ export default { await this.handleSubmitVerify() validated = this.sliderData.sliders[this.sliderIndex].data.response.isValidInviteCode } - this.sliderData.validateCallback(validated, values) + this.sliderData.setSliderValuesCallback(validated, { collectedInputData: values }) }, async handleInput() { this.sendValidation() @@ -90,17 +92,19 @@ export default { if ( !this.sliderData.sliders[this.sliderIndex].data.request || - !this.sliderData.sliders[this.sliderIndex].data.request.variables || + (this.sliderData.sliders[this.sliderIndex].data.request && !this.sliderData.sliders[this.sliderIndex].data.request.variables) || (this.sliderData.sliders[this.sliderIndex].data.request && this.sliderData.sliders[this.sliderIndex].data.request.variables && - !this.sliderData.sliders[this.sliderIndex].data.request.variables.is(variables)) + !this.sliderData.sliders[this.sliderIndex].data.request.variables === variables) ) { // this.sliderData.sliders[this.sliderIndex].data.request.variables = variables - this.sliderData.sliders[this.sliderIndex].data.request = { variables } + // this.sliderData.sliders[this.sliderIndex].data.request = { variables } + this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { request: { variables }, response: null } }) try { const response = await this.$apollo.query({ query: isValidInviteCodeQuery, variables }) - this.sliderData.sliders[this.sliderIndex].data.response = response.data + // this.sliderData.sliders[this.sliderIndex].data.response = response.data + this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: response.data } }) if ( this.sliderData.sliders[this.sliderIndex].data.response && @@ -111,13 +115,17 @@ export default { ) } } catch (err) { - this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false } + // this.sliderData.sliders[this.sliderIndex].data.response = { isValidInviteCode: false } + this.sliderData.setSliderValuesCallback(this.sliderData.sliders[this.sliderIndex].validated, { sliderData: { response: { isValidInviteCode: false } } }) const { message } = err this.$toast.error(message) } } }, + onNextClick() { + return true + }, }, } diff --git a/webapp/components/Registration/RegistrationItemEnterNonce.vue b/webapp/components/Registration/RegistrationItemEnterNonce.vue index 9debdebe4..9acc70baf 100644 --- a/webapp/components/Registration/RegistrationItemEnterNonce.vue +++ b/webapp/components/Registration/RegistrationItemEnterNonce.vue @@ -43,8 +43,8 @@ export default { formSchema: { nonce: { type: 'string', - min: 6, - max: 6, + // Wolle min: 6, + // max: 6, required: true, message: this.$t('components.enter-nonce.form.validations.length'), }, @@ -60,26 +60,28 @@ export default { ? this.sliderData.collectedInputData.nonce : '' this.sendValidation() + + // Wolle this.sliderData.setSliderValuesCallback(this.validInput, {}, {}, this.onNextClick) + this.sliderData.setSliderValuesCallback(this.valid, {}, this.onNextClick) }) }, computed: { valid() { - const isValid = this.formData.nonce.length === 6 - return isValid + return this.formData.nonce.length === 6 }, }, methods: { sendValidation() { const { nonce } = this.formData - const value = { + const values = { nonce, } // console.log('sendValidation !!! value: ', value) - this.sliderData.validateCallback(this.valid, value) + this.sliderData.setSliderValuesCallback(this.valid, { collectedInputData: values }) }, async handleInput() { // this.disabled = true - // this.sliderData.validateCallback(false) + // this.sliderData.setSliderValuesCallback(false) this.sendValidation() }, async handleInputValid() { @@ -87,7 +89,7 @@ export default { // const { nonce } = this.formData // validate in backend? // toaster? - // this.sliderData.validateCallback(true, { nonce }) + // this.sliderData.setSliderValuesCallback(true, { nonce }) this.sendValidation() }, handleSubmitVerify() { @@ -95,6 +97,9 @@ export default { // const email = this.email // this.$emit('nonceEntered', { email, nonce }) }, + onNextClick() { + return true + }, }, } diff --git a/webapp/components/Registration/RegistrationSlider.story.js b/webapp/components/Registration/RegistrationSlider.story.js index f749760e0..be7d4e232 100644 --- a/webapp/components/Registration/RegistrationSlider.story.js +++ b/webapp/components/Registration/RegistrationSlider.story.js @@ -87,7 +87,7 @@ storiesOf('RegistrationSlider', module) collectedInputData: { inviteCode: null, email: 'wolle.huss@pjannto.com', - emailSend: true, + emailSend: false, nonce: 'NTRSCZ', name: 'Wolle', password: 'Hello', diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue index 562f65955..5978f6b47 100644 --- a/webapp/components/Registration/RegistrationSlider.vue +++ b/webapp/components/Registration/RegistrationSlider.vue @@ -25,7 +25,6 @@ @@ -96,6 +95,7 @@ export default { title: 'Next', // Wolle icon: 'arrow-right', callback: this.buttonCallback, + slotOnNextClick: null, // optional set by slot }, }, { @@ -108,27 +108,32 @@ export default { title: this.enterEmailButtonTitle(this.overwriteSliderData.emailSend), // Wolle icon: 'envelope', callback: this.buttonCallback, + slotOnNextClick: null, // optional set by slot }, }, { name: 'enter-nonce', title: 'E-Mail Confirmation', // Wolle validated: false, + data: { request: null, response: null }, button: { title: 'Confirm', // Wolle icon: 'arrow-right', callback: this.buttonCallback, + slotOnNextClick: null, // optional set by slot }, }, { name: 'create-user-account', title: this.$t('components.registration.create-user-account.title'), validated: false, + data: { request: null, response: null }, button: { // title: this.$t('actions.save'), // Wolle title: 'Create', // Wolle icon: 'check', callback: this.buttonCallback, + slotOnNextClick: null, // optional set by slot }, }, ] @@ -174,7 +179,7 @@ export default { sliderIndex: 0, sliders: sliders, sliderSelectorCallback: this.sliderSelectorCallback, - validateCallback: this.validateCallback, + setSliderValuesCallback: this.setSliderValuesCallback, ...this.overwriteSliderData, }, } @@ -186,40 +191,65 @@ export default { }, methods: { enterEmailButtonTitle(emailSend) { - return emailSend ? 'Resend E-Mail' : 'Send E-Mail' + // return emailSend ? 'Resend e-mail' : 'Send e-mail' + return emailSend ? 'Skip send' : 'Send e-mail' // Wolle }, - validateCallback(isValid, data = null) { + setSliderValuesCallback(isValid, { collectedInputData, sliderData, sliderSettings }, slotOnNextClick = null) { this.sliderData.sliders[this.sliderIndex].validated = isValid - if (data) { + + if (collectedInputData) { this.sliderData.collectedInputData = { ...this.sliderData.collectedInputData, - ...data, + ...collectedInputData, } } + if (sliderData) { + if (this.sliderData.sliders[this.sliderIndex].data) { + this.sliderData.sliders[this.sliderIndex].data = { + request: sliderData.request ? sliderData.request : this.sliderData.sliders[this.sliderIndex].data.request, + response: sliderData.response ? sliderData.response : this.sliderData.sliders[this.sliderIndex].data.response, + } + } + } + if (sliderSettings) { + + } + + if (slotOnNextClick) { + this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick = slotOnNextClick + } }, sliderSelectorCallback(selectedIndex) { - if (selectedIndex < this.sliderIndex) { + if (selectedIndex <= this.sliderIndex + 1 && selectedIndex < this.sliderData.sliders.length) { + if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') { + this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle( + this.sliderData.collectedInputData.emailSend, + ) + } this.sliderData.sliderIndex = selectedIndex } }, buttonCallback() { - if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') { - this.$refs.RegistrationItemEnterEmail.handleSubmitVerify() - this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle( - this.sliderData.collectedInputData.emailSend, - ) - } + // Wolle + // if (this.sliderData.sliders[this.sliderIndex].name === 'enter-email') { + // // if (this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick) { + // // this.sliderData.sliders[this.sliderIndex].button.slotOnNextClick() + // // } + // this.sliderData.sliders[this.sliderIndex].button.title = this.enterEmailButtonTitle( + // this.sliderData.collectedInputData.emailSend, + // ) + // } - if (this.sliderIndex === this.sliderData.sliders.length - 1) { - // console.log('submit data: ', this.sliderData.collectedInputData) - } else { - if (this.sliderIndex < this.sliderData.sliders.length - 1) { - this.sliderData.sliderIndex++ - if (this.sliderData.sliders[this.sliderIndex] === 'create-user-account') { - this.sliderData.sliders[this.sliderIndex].validated = false - } - } - } + // if (this.sliderIndex === this.sliderData.sliders.length - 1) { + // // console.log('submit data: ', this.sliderData.collectedInputData) + // } else { + // if (this.sliderIndex < this.sliderData.sliders.length - 1) { + // this.sliderData.sliderIndex++ + // if (this.sliderData.sliders[this.sliderIndex] === 'create-user-account') { + // this.sliderData.sliders[this.sliderIndex].validated = false + // } + // } + // } }, }, }