diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 5f345adb7..3946f2508 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -26,13 +26,13 @@ describe('ContributionForm.vue', () => {
const postTitle = 'this is a title for a post'
const postTitleTooShort = 'xx'
let postTitleTooLong = ''
- for (let i = 0; i < 100; i++) {
+ for (let i = 0; i < 65; i++) {
postTitleTooLong += 'x'
}
const postContent = 'this is a post'
- const postContentTooShort = 'xx'
+ const postContentTooShort = 'xxx'
let postContentTooLong = ''
- for (let i = 0; i < 2008; i++) {
+ for (let i = 0; i < 2000; i++) {
postContentTooLong += 'x'
}
const imageUpload = {
@@ -157,7 +157,11 @@ describe('ContributionForm.vue', () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
wrapper.vm.updateEditorContent(postContentTooLong)
+ // console.log('this.form.content: ', wrapper.vm.form.content)
+ console.log('wrapper.vm.contentMin: ', wrapper.vm.contentMin)
+ console.log('wrapper.vm.contentMax: ', wrapper.vm.contentMax)
await wrapper.find('form').trigger('submit')
+ // await wrapper.find('.submit-button-for-test').trigger('click')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
@@ -165,7 +169,9 @@ describe('ContributionForm.vue', () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
wrapper.vm.updateEditorContent(postContentTooShort)
+ // console.log('this.form.content: ', wrapper.vm.form.content)
await wrapper.find('form').trigger('submit')
+ // await wrapper.find('.submit-button-for-test').trigger('click')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
})
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 5b1040b62..485af2545 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -18,7 +18,7 @@
:value="form.content"
@input="updateEditorContent"
/>
- {{ form.contentLength }}/{{ content_max }}
+ {{ form.contentLength }}/{{ contentMax }}
{{ $t('actions.save') }}
@@ -112,11 +113,11 @@ export default {
},
id: null,
loading: false,
- disabled: true,
+ disabledByContent: true,
slug: null,
users: [],
- content_min: 3,
- content_max: 2000,
+ contentMin: 3,
+ contentMax: 2000,
hashtags: [],
}
@@ -130,8 +131,9 @@ export default {
}
this.id = contribution.id
this.slug = contribution.slug
- this.form.content = contribution.content
this.form.title = contribution.title
+ this.form.content = contribution.content
+ this.manageContent(this.form.content)
this.form.image = contribution.image
this.form.categoryIds = this.categoryIds(contribution.categories)
},
@@ -177,7 +179,7 @@ export default {
.then(res => {
this.loading = false
this.$toast.success(this.$t('contribution.success'))
- this.disabled = true
+ this.disabledByContent = true
const result = res.data[this.id ? 'UpdatePost' : 'CreatePost']
this.$router.push({
@@ -188,22 +190,23 @@ export default {
.catch(err => {
this.$toast.error(err.message)
this.loading = false
- this.disabled = false
+ this.disabledByContent = false
})
},
updateEditorContent(value) {
- // disable form
- this.disabled = true
// TODO: Do smth????? what is happening
this.$refs.contributionForm.update('content', value)
+ this.manageContent(value)
+ },
+ manageContent(content) {
// filter HTML out of content value
- const str = value.replace(/<\/?[^>]+(>|$)/gm, '')
+ const str = content.replace(/<\/?[^>]+(>|$)/gm, '')
// Set counter length of text
this.form.contentLength = str.length
+ console.log('this.disabledByContent: ', this.disabledByContent)
// Enable save button if requirements are met
- if (str.length >= this.content_min && str.length <= this.content_max) {
- this.disabled = false
- }
+ this.disabledByContent = !(this.contentMin <= str.length && str.length <= this.contentMax)
+ console.log('this.disabledByContent: ', this.disabledByContent)
},
availableLocales() {
orderBy(locales, 'name').map(locale => {