Add UI for adding tags to a contribution

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -15,6 +15,8 @@ describe('ContributionForm.vue', () => {
   let deutschOption
   let cancelBtn
   let mocks
+  let tagsInput
+  let chipText
   const postTitle = 'this is a title for a post'
   const postContent = 'this is a post'
   const computed = { locale: () => 'English' }
@@ -79,10 +81,16 @@ describe('ContributionForm.vue', () => {
       })
 
       describe('valid form submission', () => {
-        expectedParams = {
-          variables: { title: postTitle, content: postContent, language: 'en', id: null },
-        }
         beforeEach(async () => {
+          expectedParams = {
+            variables: {
+              title: postTitle,
+              content: postContent,
+              language: 'en',
+              id: null,
+              tags: [],
+            },
+          }
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue('this is a title for a post')
           wrapper.vm.updateEditorContent('this is a post')
@@ -105,6 +113,27 @@ describe('ContributionForm.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
+        it('supports adding tags', async () => {
+          expectedParams.variables.tags = ['Frieden']
+          tagsInput = wrapper.findAll('input').at(1)
+          tagsInput.setValue('Frieden')
+          tagsInput.trigger('keyup.enter')
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
+        })
+
+        it('displays tags if they exist', () => {
+          expectedParams.variables.tags = ['Frieden']
+          tagsInput = wrapper.findAll('input').at(1)
+          tagsInput.setValue('Frieden')
+          tagsInput.trigger('keyup.enter')
+          chipText = wrapper
+            .findAll('span.ds-chip')
+            .at(0)
+            .text()
+          expect(chipText).toEqual('Frieden')
+        })
+
         it("pushes the user to the post's page", async () => {
           expect(mocks.$router.push).toHaveBeenCalledTimes(1)
         })

webapp/components/ContributionForm/index.vue

@@ -7,6 +7,17 @@
           <hc-editor :users="users" :value="form.content" @input="updateEditorContent" />
         </no-ssr>
         <ds-space margin-bottom="xxx-large" />
+        <ds-input
+          model="tagValue"
+          :label="$t('contribution.tagsInputLabel')"
+          :placeholder="$t('contribution.tagsInputPlaceholder')"
+          @input.native="handleInput"
+          @keyup.enter.native="addTag(form.tagValue)"
+          :disabled="form.tags.length >= 5"
+        ></ds-input>
+        <ds-chip v-for="(tag, index) in form.tags" @remove="removeTag(index)" removable :key="tag">
+          {{ tag }}
+        </ds-chip>
         <ds-flex class="contribution-form-footer">
           <ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
           <ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
@@ -20,6 +31,7 @@
             />
           </ds-flex-item>
         </ds-flex>
+        <ds-space />
         <div slot="footer" style="text-align: right">
           <ds-button
             :disabled="loading || disabled"
@@ -65,6 +77,8 @@ export default {
         content: '',
         language: null,
         languageOptions: [],
+        tagValue: null,
+        tags: [],
       },
       formSchema: {
         title: { required: true, min: 3, max: 64 },
@@ -115,6 +129,7 @@ export default {
             title: this.form.title,
             content: this.form.content,
             language: this.form.language ? this.form.language.value : this.$i18n.locale(),
+            tags: this.form.tags,
           },
         })
         .then(res => {
@@ -144,6 +159,16 @@ export default {
         this.form.languageOptions.push({ label: locale.name, value: locale.code })
       })
     },
+    removeTag(index) {
+      this.form.tags.splice(index, 1)
+    },
+    handleInput(e) {
+      this.form.tagValue = e.target ? e.target.value.trim() : ''
+    },
+    addTag(tag) {
+      this.form.tags.push(tag)
+      this.form.tagValue = ''
+    },
   },
   apollo: {
     User: {

webapp/locales/de.json

@@ -304,6 +304,8 @@
   },
   "contribution": {
     "success": "Gespeichert!",
-    "languageSelectLabel": "Sprache"
+    "languageSelectLabel": "Sprache",
+    "tagsInputLabel": "Tags",
+    "tagsInputPlaceholder": "Hinzufügen ein Tag"
   }
 }

webapp/locales/en.json

@@ -303,6 +303,8 @@
   },
   "contribution": {
     "success": "Saved!",
-    "languageSelectLabel": "Language"
+    "languageSelectLabel": "Language",
+    "tagsInputLabel": "Tags",
+    "tagsInputPlaceholder": "Add a tag"
   }
 }