ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor to 'setSliderValuesCallback'

Browse Source
This commit is contained in:
Wolfgang Huß 2021-02-27 15:39:05 +01:00
parent 05352e52c9
commit 091ed52b54
7 changed files with 140 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
webapp/components/ComponentSlider/ComponentSlider.vue
View File

@ -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 }}
</base-button>
@ -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)
}
},
},
}
</script>

10
webapp/components/Registration/RegistrationItemCreateUserAccount.vue
View File

@ -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
},
},
}
</script>

52
webapp/components/Registration/RegistrationItemEnterEmail.vue
View File

@ -43,6 +43,21 @@
{{ $t('components.registration.signup.form.submit') }}
</base-button> -->
<slot></slot>
<ds-text v-if="sliderData.collectedInputData.emailSend">
<!-- Wolle <ds-text v-if="sliderData.collectedInputData.emailSend"> -->
<input
id="checkbox"
type="checkbox"
v-model="sendEmailAgain"
:checked="sendEmailAgain"
/>
<label for="checkbox0">
<!-- Wolle {{ $t('termsAndConditions.termsAndConditionsConfirmed') }} -->
Send e-mail again
<!-- <br />
<nuxt-link to="/terms-and-conditions">{{ $t('site.termsAndConditions') }}</nuxt-link> -->
</label>
</ds-text>
</ds-form>
</ds-space>
<div v-else margin="large">
@ -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
}
}
},

20
webapp/components/Registration/RegistrationItemEnterInvite.vue
View File

@ -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
},
},
}
</script>

21
webapp/components/Registration/RegistrationItemEnterNonce.vue
View File

@ -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
},
},
}
</script>

2
webapp/components/Registration/RegistrationSlider.story.js
View File

@ -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',

76
webapp/components/Registration/RegistrationSlider.vue
View File

@ -25,7 +25,6 @@
<!-- Wolle !!! may create same source with 'webapp/pages/registration/signup.vue' -->
<!-- <signup v-if="publicRegistration" :invitation="false" @submit="handleSubmitted"> -->
<registration-item-enter-email
ref="RegistrationItemEnterEmail"
:sliderData="sliderData"
:invitation="false"
/>
@ -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
// }
// }
// }
},
},
}