diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js index f4d76895b..a329ad4b1 100644 --- a/webapp/components/ContributionForm/ContributionForm.spec.js +++ b/webapp/components/ContributionForm/ContributionForm.spec.js @@ -22,37 +22,36 @@ config.stubs['v-popover'] = '' const categories = [ { - "id": "cat3", - "slug": "health-wellbeing", - "icon": "medkit" + id: 'cat3', + slug: 'health-wellbeing', + icon: 'medkit', }, { - "id": "cat12", - "slug": "it-internet-data-privacy", - "icon": "mouse-pointer" + id: 'cat12', + slug: 'it-internet-data-privacy', + icon: 'mouse-pointer', }, { - "id": "cat9", - "slug": "democracy-politics", - "icon": "university" + id: 'cat9', + slug: 'democracy-politics', + icon: 'university', }, { - "id": "cat15", - "slug": "consumption-sustainability", - "icon": "shopping-cart" + id: 'cat15', + slug: 'consumption-sustainability', + icon: 'shopping-cart', }, { - "id": "cat4", - "slug": "environment-nature", - "icon": "tree" - } + id: 'cat4', + slug: 'environment-nature', + icon: 'tree', + }, ] describe('ContributionForm.vue', () => { let wrapper let postTitleInput let expectedParams - let deutschOption let cancelBtn let mocks let propsData @@ -137,21 +136,13 @@ describe('ContributionForm.vue', () => { beforeEach(() => { wrapper = Wrapper() - wrapper.setData({ - form: { - languageOptions: [ - { - label: 'Deutsch', - value: 'de', - }, - ], - }, - }) }) describe('CreatePost', () => { describe('language placeholder', () => { - it("displays the name that corresponds with the user's location code", () => { + it.skip("displays the name that corresponds with the user's location code", () => { + // Well not anymore right? We want the user to save the language + // excplicitly. I'll keep this test if we change our minds expect(wrapper.find('.ds-select-placeholder').text()).toEqual('English') }) }) @@ -242,8 +233,16 @@ describe('ContributionForm.vue', () => { postTitleInput = wrapper.find('.ds-input') postTitleInput.setValue(postTitle) await wrapper.vm.updateEditorContent(postContent) - wrapper.find(CategoriesSelect).setData({categories}) - await wrapper.find(CategoriesSelect).findAll('button').at(1).trigger('click') + wrapper.find(CategoriesSelect).setData({ categories }) + wrapper + .findAll('li') + .at(1) + .trigger('click') // language + await wrapper + .find(CategoriesSelect) + .findAll('button') + .at(1) + .trigger('click') }) it('creates a post with valid title, content, and at least one category', async () => { @@ -251,15 +250,12 @@ describe('ContributionForm.vue', () => { expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) }) - it("sends a fallback language based on a user's locale", () => { - wrapper.find('form').trigger('submit') - expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) - }) - it('supports changing the language', async () => { expectedParams.variables.language = 'de' - deutschOption = wrapper.findAll('li').at(0) - deutschOption.trigger('click') + wrapper + .findAll('li') + .at(0) + .trigger('click') // choose German as language wrapper.find('form').trigger('submit') expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) }) @@ -303,8 +299,16 @@ describe('ContributionForm.vue', () => { postTitleInput.setValue(postTitle) await wrapper.vm.updateEditorContent(postContent) categoryIds = ['cat12'] - wrapper.find(CategoriesSelect).setData({categories}) - await wrapper.find(CategoriesSelect).findAll('button').at(1).trigger('click') + wrapper.find(CategoriesSelect).setData({ categories }) + wrapper + .findAll('li') + .at(1) + .trigger('click') // language + await wrapper + .find(CategoriesSelect) + .findAll('button') + .at(1) + .trigger('click') }) it('shows an error toaster when apollo mutation rejects', async () => { @@ -385,6 +389,10 @@ describe('ContributionForm.vue', () => { postTitleInput = wrapper.find('.ds-input') postTitleInput.setValue(postTitle) wrapper.vm.updateEditorContent(postContent) + wrapper + .findAll('li') + .at(0) + .trigger('click') // language await wrapper.find('form').trigger('submit') expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) }) @@ -394,10 +402,26 @@ describe('ContributionForm.vue', () => { postTitleInput = wrapper.find('.ds-input') postTitleInput.setValue(postTitle) wrapper.vm.updateEditorContent(postContent) - wrapper.find(CategoriesSelect).setData({categories}) - await wrapper.find(CategoriesSelect).findAll('button').at(0).trigger('click') - await wrapper.find(CategoriesSelect).findAll('button').at(3).trigger('click') - await wrapper.find(CategoriesSelect).findAll('button').at(4).trigger('click') + wrapper + .findAll('li') + .at(0) + .trigger('click') // language + wrapper.find(CategoriesSelect).setData({ categories }) + await wrapper + .find(CategoriesSelect) + .findAll('button') + .at(0) + .trigger('click') + await wrapper + .find(CategoriesSelect) + .findAll('button') + .at(3) + .trigger('click') + await wrapper + .find(CategoriesSelect) + .findAll('button') + .at(4) + .trigger('click') await wrapper.find('form').trigger('submit') expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) }) diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue index 90a63b7df..ca4444683 100644 --- a/webapp/components/ContributionForm/ContributionForm.vue +++ b/webapp/components/ContributionForm/ContributionForm.vue @@ -50,23 +50,27 @@ {{ form.categoryIds.length }} / 3 - + {{ form.categoryIds.length }} / 3 - - + + + + + +
{{ $t('actions.cancel') }} - + {{ $t('actions.save') }}
@@ -115,16 +113,35 @@ export default { contribution: { type: Object, default: () => {} }, }, data() { + const languageOptions = orderBy(locales, 'name').map(locale => { + return { label: locale.name, value: locale.code } + }) + + const formDefaults = { + title: '', + content: '', + teaserImage: null, + image: null, + language: null, + categoryIds: [], + } + let id = null + let slug = null + const form = { ...formDefaults } + if (this.contribution && this.contribution.id) { + id = this.contribution.id + slug = this.contribution.slug + form.title = this.contribution.title + form.content = this.contribution.content + form.image = this.contribution.image + form.language = + this.contribution && this.contribution.language + ? languageOptions.find(o => this.contribution.language === o.value) + : null + form.categoryIds = this.categoryIds(this.contribution.categories) + } return { - form: { - title: '', - content: '', - categoryIds: [], - teaserImage: null, - image: null, - language: null, - languageOptions: [], - }, + form, formSchema: { title: { required: true, min: 3, max: 100 }, content: { @@ -139,66 +156,41 @@ export default { required: true, validator: (rule, value) => { const errors = [] - if (!(value && 1 <= value.length && value.length <= 3)) { + if (!(value && value.length >= 1 && value.length <= 3)) { errors.push(new Error(this.$t('common.validations.categories'))) } return errors }, }, + language: { required: true }, }, - id: null, + languageOptions, + id, + slug, loading: false, - slug: null, users: [], contentMin: 3, hashtags: [], } }, - watch: { - contribution: { - immediate: true, - handler: function(contribution) { - if (!contribution || !contribution.id) { - return - } - this.id = contribution.id - this.slug = contribution.slug - this.form.title = contribution.title - this.form.content = contribution.content - this.form.image = contribution.image - this.form.categoryIds = this.categoryIds(contribution.categories) - }, - }, - }, computed: { contentLength() { return this.$filters.removeHtml(this.form.content).length }, - locale() { - const locale = - this.contribution && this.contribution.language - ? locales.find(loc => this.contribution.language === loc.code) - : locales.find(loc => this.$i18n.locale() === loc.code) - return locale.name - }, ...mapGetters({ currentUser: 'auth/user', }), }, - mounted() { - this.availableLocales() - }, methods: { submit() { - const { title, content, image, teaserImage, categoryIds } = this.form - let language - if (this.form.language) { - language = this.form.language.value - } else if (this.contribution && this.contribution.language) { - language = this.contribution.language - } else { - language = this.$i18n.locale() - } + const { + language: { value: language }, + title, + content, + image, + teaserImage, + categoryIds, + } = this.form this.loading = true this.$apollo .mutate({ @@ -231,11 +223,6 @@ export default { updateEditorContent(value) { this.$refs.contributionForm.update('content', value) }, - availableLocales() { - orderBy(locales, 'name').map(locale => { - this.form.languageOptions.push({ label: locale.name, value: locale.code }) - }) - }, addTeaserImage(file) { this.form.teaserImage = file }, @@ -295,4 +282,14 @@ export default { padding-right: 0; } } +.checkicon { + cursor: default; + top: -18px; +} +.checkicon_cat { + top: -58px; +} +.colorRed { + color: red; +} diff --git a/webapp/graphql/Fragments.js b/webapp/graphql/Fragments.js index 37ec15435..faff33b47 100644 --- a/webapp/graphql/Fragments.js +++ b/webapp/graphql/Fragments.js @@ -45,6 +45,7 @@ export const postFragment = lang => gql` deleted slug image + language author { ...user } diff --git a/webapp/locales/de.json b/webapp/locales/de.json index fb371c831..9948b7686 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -580,7 +580,8 @@ "filterFollow": "Beiträge filtern von Usern denen ich folge", "filterALL": "Alle Beiträge anzeigen", "success": "Gespeichert!", - "languageSelectLabel": "Sprache", + "languageSelectLabel": "Sprache deines Beitrags", + "languageSelectText": "Sprache wählen", "categories": { "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt" }, diff --git a/webapp/locales/en.json b/webapp/locales/en.json index e898c9000..7ffa2e9ce 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -581,7 +581,8 @@ "filterFollow": "Filter contributions from users I follow", "filterALL": "View all contributions", "success": "Saved!", - "languageSelectLabel": "Language", + "languageSelectLabel": "Language of your contribution", + "languageSelectText": "Select Language", "categories": { "infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected" },