Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: lexemes cannot be disabled as button is rendered outside of form #776

Merged
merged 1 commit into from
Feb 12, 2024
Merged

fix: lexemes cannot be disabled as button is rendered outside of form #776

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 26 additions & 19 deletions src/components/Pages/ManageWiki/Features/Lexeme.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<v-form ref="form" v-model="valid" @submit="confirmAction">
<v-form ref="form" v-model="valid" @submit="handleSubmit" id="formLexeme">
<v-card elevation="1" class="padding" outlined>
<v-card-title>Lexeme</v-card-title>
<v-card-text>
Expand All @@ -8,7 +8,7 @@
</v-card-text>
<v-card-actions>
<v-btn @click="showModal" color="red" v-if="isEnabled">Disable Lexeme</v-btn>
<v-btn @click="enableFeature" v-else>Enable Lexeme</v-btn>
<v-btn v-else type="submit">Enable Lexeme</v-btn>
</v-card-actions>
</v-card>
<v-dialog v-model="dialog" width="500" v-if="dialog">
Expand All @@ -28,15 +28,16 @@
<v-text-field
:label="`Please type ${userConfirmationString} to confirm`"
:rules="[rules.match]"
></v-text-field>
> {</v-text-field>
</v-card-text>
<v-divider></v-divider>
<v-divider>
}</v-divider>

<v-card-actions>
<v-spacer></v-spacer>
<v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" v-bind="attrs" v-on="on" text type="submit">
<v-btn v-bind="attrs" v-on="on" color="primary" type="submit" form="formLexeme">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First problem here would be that albeit the button is within the parent form in the template, Vue will hoist it outside of the form when rendering the modal, meaning submitting it would go nowhere as there's no associated form.

There are two solutions to the problem:

  • give the form an id and reference it here (like I did)
  • on clicking this button, programatiicaly submit the form

I think both is ok.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this looks nice

I understand
</v-btn>
</template>
Expand All @@ -53,41 +54,47 @@ export default {
name: 'Lexeme',
props: ['wikiId', 'setting'],
data () {
return {
const data = {
valid: false,
dialog: false,
userConfirmationString: 'wbstack-important-change',
rules: {
match: (value) =>
value === this.userConfirmationString || 'Please enter the confirmation'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Second problem was that this here would be the Vue component, not the data object, thus returning undefined instead of the value of userConfirmationString

Also the comparison is borked and would return either true|'Please enter the confirmation' instead of true|false

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm very unclear how this ever really worked

}
rules: {}
}
data.rules.match = (v) => {
v = v && v.trim()
return v === data.userConfirmationString || v === 'Please enter the confirmation'
}
return data
},
computed: {
isEnabled () {
return this.$store.state.wikis.currentWikiSettings.wwExtEnableWikibaseLexeme
}
},
methods: {
enableFeature () {
toggleSetting (validationPassed) {
const updatedValue = !this.isEnabled
if (updatedValue === false && !validationPassed) {
// disabling the features requires user confirmation
// which is checked by validating the form
return
}

const wiki = this.wikiId
const setting = 'wwExtEnableWikibaseLexeme'
const value = !this.isEnabled

this.$store.dispatch('updateSetting', { wiki, setting, value })
.then(() => this.$store.dispatch('setLexemeEnabled', value))
this.$store.dispatch('updateSetting', { wiki, setting, value: updatedValue })
.then(() => this.$store.dispatch('setLexemeEnabled', updatedValue))
.catch(err => {
console.log(err.response)
alert('Something went wrong.')
})

this.hideModal()
},
confirmAction () {
const formValidation = this.$refs.form.validate()
if (formValidation) {
this.enableFeature()
}
handleSubmit (e) {
e.preventDefault()
this.toggleSetting(this.$refs.form.validate())
},
hideModal () {
this.dialog = false
Expand Down
Loading