Merge pull request #787 from Human-Connection/759-teaser-image-create-posts

Add teaser image to contribution form

backend/package.json

@@ -61,7 +61,7 @@
     "graphql-custom-directives": "~0.2.14",
     "graphql-iso-date": "~3.6.1",
     "graphql-middleware": "~3.0.2",
-    "graphql-shield": "~5.7.1",
+    "graphql-shield": "~5.6.1",
     "graphql-tag": "~2.10.1",
     "graphql-yoga": "~1.18.0",
     "helmet": "~3.18.0",

backend/src/schema/resolvers/fileUpload/index.js

@@ -12,7 +12,6 @@ const storeUpload = ({ createReadStream, fileLocation }) =>
 
 export default async function fileUpload(params, { file, url }, uploadCallback = storeUpload) {
   const upload = params[file]
-
   if (upload) {
     const { createReadStream, filename } = await upload
     const { name } = path.parse(filename)

backend/src/schema/types/scalar/Upload.gql

@@ -1 +1 @@
-scalar Upload
+scalar Upload

backend/yarn.lock

@@ -1110,10 +1110,10 @@
   resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-12.0.9.tgz#693e76a52f61a2f1e7fb48c0eef167b95ea4ffd0"
   integrity sha512-sCZy4SxP9rN2w30Hlmg5dtdRwgYQfYRiLo9usw8X9cxlf+H4FqM1xX7+sNH7NNKVdbXMJWqva7iyy+fxh/V7fA==
 
-"@types/yup@0.26.17":
-  version "0.26.17"
-  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.17.tgz#5cb7cfc211d8e985b21d88289542591c92cad9dc"
-  integrity sha512-MN7VHlPsZQ2MTBxLE2Gl+Qfg2WyKsoz+vIr8xN0OSZ4AvJDrrKBlxc8b59UXCCIG9tPn9XhxTXh3j/htHbzC2Q==
+"@types/yup@0.26.16":
+  version "0.26.16"
+  resolved "https://registry.yarnpkg.com/@types/yup/-/yup-0.26.16.tgz#75c428236207c48d9f8062dd1495cda8c5485a15"
+  integrity sha512-E2RNc7DSeQ+2EIJ1H3+yFjYu6YiyQBUJ7yNpIxomrYJ3oFizLZ5yDS3T1JTUNBC2OCRkgnhLS0smob5UuCHfNA==
 
 "@types/zen-observable@^0.5.3":
   version "0.5.4"
@@ -3788,12 +3788,12 @@ graphql-request@~1.8.2:
   dependencies:
     cross-fetch "2.2.2"
 
-graphql-shield@~5.7.1:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/graphql-shield/-/graphql-shield-5.7.1.tgz#04095fb8148a463997f7c509d4aeb2a6abf79f98"
-  integrity sha512-UZ0K1uAqRAoGA1U2DsUu4vIZX2Vents4Xim99GFEUBTgvSDkejiE+k/Dywqfu76lJFEE8qu3vG5fhJN3SmnKbA==
+graphql-shield@~5.6.1:
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/graphql-shield/-/graphql-shield-5.6.2.tgz#27eaad2ce2591ed81b1203e8915df99b28fb5ad5"
+  integrity sha512-DlS6r39s7AaP07yMM6i7GI87UkfL65O1tUPW4kNqp67fD1BU71Ekl7Kt/1L3rxS/gcQdGufuKka5oKUa5GKo2A==
   dependencies:
-    "@types/yup" "0.26.17"
+    "@types/yup" "0.26.16"
     lightercollective "^0.3.0"
     object-hash "^1.3.1"
     yup "^0.27.0"

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -3,11 +3,14 @@ import ContributionForm from './index.vue'
 import Styleguide from '@human-connection/styleguide'
 import Vuex from 'vuex'
 import PostMutations from '~/graphql/PostMutations.js'
+import Filters from '~/plugins/vue-filters'
+import TeaserImage from '~/components/TeaserImage/TeaserImage'
 
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.use(Filters)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 
@@ -21,6 +24,10 @@ describe('ContributionForm.vue', () => {
   let propsData
   const postTitle = 'this is a title for a post'
   const postContent = 'this is a post'
+  const imageUpload = {
+    file: { filename: 'avataar.svg', previewElement: '' },
+    url: 'someUrlToImage',
+  }
 
   beforeEach(() => {
     mocks = {
@@ -100,7 +107,13 @@ describe('ContributionForm.vue', () => {
         beforeEach(async () => {
           expectedParams = {
             mutation: PostMutations().CreatePost,
-            variables: { title: postTitle, content: postContent, language: 'en', id: null },
+            variables: {
+              title: postTitle,
+              content: postContent,
+              language: 'en',
+              id: null,
+              imageUpload: null,
+            },
           }
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
@@ -124,6 +137,13 @@ describe('ContributionForm.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
+        it('supports adding a teaser image', async () => {
+          expectedParams.variables.imageUpload = imageUpload
+          wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload)
+          await wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
+        })
+
         it("pushes the user to the post's page", async () => {
           expect(mocks.$router.push).toHaveBeenCalledTimes(1)
         })
@@ -143,6 +163,7 @@ describe('ContributionForm.vue', () => {
 
       describe('handles errors', () => {
         beforeEach(async () => {
+          jest.useFakeTimers()
           wrapper = Wrapper()
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
@@ -150,6 +171,7 @@ describe('ContributionForm.vue', () => {
           // second submission causes mutation to reject
           await wrapper.find('form').trigger('submit')
         })
+
         it('shows an error toaster when apollo mutation rejects', async () => {
           await wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
@@ -167,6 +189,7 @@ describe('ContributionForm.vue', () => {
             title: 'dies ist ein Post',
             content: 'auf Deutsch geschrieben',
             language: 'de',
+            imageUpload,
           },
         }
         wrapper = Wrapper()
@@ -188,10 +211,6 @@ describe('ContributionForm.vue', () => {
         expect(wrapper.vm.form.content).toEqual(propsData.contribution.content)
       })
 
-      it('sets language equal to contribution language', () => {
-        expect(wrapper.vm.form.language).toEqual({ value: propsData.contribution.language })
-      })
-
       it('calls the UpdatePost apollo mutation', async () => {
         expectedParams = {
           mutation: PostMutations().UpdatePost,
@@ -200,6 +219,7 @@ describe('ContributionForm.vue', () => {
             content: postContent,
             language: propsData.contribution.language,
             id: propsData.contribution.id,
+            imageUpload,
           },
         }
         postTitleInput = wrapper.find('.ds-input')

webapp/components/ContributionForm/index.vue

@@ -2,6 +2,13 @@
   <ds-form ref="contributionForm" v-model="form" :schema="formSchema" @submit="submit">
     <template slot-scope="{ errors }">
       <ds-card>
+        <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
+          <img
+            v-if="contribution"
+            class="contribution-image"
+            :src="contribution.image | proxyApiUrl"
+          />
+        </hc-teaser-image>
         <ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
         <no-ssr>
           <hc-editor :users="users" :value="form.content" @input="updateEditorContent" />
@@ -39,6 +46,7 @@
             {{ $t('actions.save') }}
           </ds-button>
         </div>
+        <ds-space margin-bottom="large" />
       </ds-card>
     </template>
   </ds-form>
@@ -50,10 +58,12 @@ import HcEditor from '~/components/Editor'
 import orderBy from 'lodash/orderBy'
 import locales from '~/locales'
 import PostMutations from '~/graphql/PostMutations.js'
+import HcTeaserImage from '~/components/TeaserImage/TeaserImage'
 
 export default {
   components: {
     HcEditor,
+    HcTeaserImage,
   },
   props: {
     contribution: { type: Object, default: () => {} },
@@ -63,6 +73,7 @@ export default {
       form: {
         title: '',
         content: '',
+        teaserImage: null,
         language: null,
         languageOptions: [],
       },
@@ -88,7 +99,7 @@ export default {
         this.slug = contribution.slug
         this.form.content = contribution.content
         this.form.title = contribution.title
-        this.form.language = { value: contribution.language }
+        this.form.teaserImage = contribution.imageUpload
       },
     },
   },
@@ -106,15 +117,25 @@ export default {
   },
   methods: {
     submit() {
+      const { title, content, teaserImage } = 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()
+      }
       this.loading = true
       this.$apollo
         .mutate({
           mutation: this.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
           variables: {
             id: this.id,
-            title: this.form.title,
-            content: this.form.content,
-            language: this.form.language ? this.form.language.value : this.$i18n.locale(),
+            title,
+            content,
+            language,
+            imageUpload: teaserImage,
           },
         })
         .then(res => {
@@ -144,6 +165,9 @@ export default {
         this.form.languageOptions.push({ label: locale.name, value: locale.code })
       })
     },
+    addTeaserImage(file) {
+      this.form.teaserImage = file
+    },
   },
   apollo: {
     User: {
@@ -176,8 +200,4 @@ export default {
     padding-right: 0;
   }
 }
-
-.contribution-form-footer {
-  border-top: $border-size-base solid $border-color-softest;
-}
 </style>

webapp/components/TeaserImage/TeaserImage.spec.js

@@ -0,0 +1,61 @@
+import { mount, createLocalVue } from '@vue/test-utils'
+import TeaserImage from './TeaserImage.vue'
+import Styleguide from '@human-connection/styleguide'
+
+const localVue = createLocalVue()
+
+localVue.use(Styleguide)
+
+describe('TeaserImage.vue', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $toast: {
+        error: jest.fn(),
+      },
+    }
+  })
+  describe('mount', () => {
+    const Wrapper = () => {
+      return mount(TeaserImage, { mocks, localVue })
+    }
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    describe('File upload', () => {
+      const imageUpload = [
+        { file: { filename: 'avataar.svg', previewElement: '' }, url: 'someUrlToImage' },
+      ]
+
+      it('supports adding a teaser image', () => {
+        wrapper.vm.addTeaserImage(imageUpload)
+        expect(wrapper.emitted().addTeaserImage[0]).toEqual(imageUpload)
+      })
+    })
+
+    describe('handles errors', () => {
+      beforeEach(() => jest.useFakeTimers())
+      const message = 'File upload failed'
+      const fileError = { status: 'error' }
+
+      it('defaults to error false', () => {
+        expect(wrapper.vm.error).toEqual(false)
+      })
+
+      it('shows an error toaster when verror is called', () => {
+        wrapper.vm.verror(fileError, message)
+        expect(mocks.$toast.error).toHaveBeenCalledWith(fileError.status, message)
+      })
+
+      it('changes error status from false to true to false', () => {
+        wrapper.vm.verror(fileError, message)
+        expect(wrapper.vm.error).toEqual(true)
+        jest.runAllTimers()
+        expect(wrapper.vm.error).toEqual(false)
+      })
+    })
+  })
+})

webapp/components/TeaserImage/TeaserImage.vue

@@ -0,0 +1,197 @@
+<template>
+  <vue-dropzone
+    :options="dropzoneOptions"
+    ref="el"
+    id="postdropzone"
+    :use-custom-slot="true"
+    @vdropzone-thumbnail="thumbnail"
+    @vdropzone-error="verror"
+  >
+    <div class="dz-message">
+      <div
+        :class="{
+          'hc-attachments-upload-area-post': createAndUpdate,
+          'hc-attachments-upload-area-update-post': contribution,
+        }"
+      >
+        <slot></slot>
+        <div
+          :class="{
+            'hc-drag-marker-post': createAndUpdate,
+            'hc-drag-marker-update-post': contribution,
+          }"
+        >
+          <ds-icon name="image" size="xxx-large" />
+        </div>
+      </div>
+    </div>
+  </vue-dropzone>
+</template>
+
+<script>
+import vueDropzone from 'nuxt-dropzone'
+
+export default {
+  components: {
+    vueDropzone,
+  },
+  props: {
+    contribution: { type: Object, default: () => {} },
+  },
+  data() {
+    return {
+      dropzoneOptions: {
+        url: this.addTeaserImage,
+        maxFilesize: 5.0,
+        previewTemplate: this.template(),
+      },
+      error: false,
+      createAndUpdate: true,
+    }
+  },
+  watch: {
+    error() {
+      let that = this
+      setTimeout(function() {
+        that.error = false
+      }, 2000)
+    },
+  },
+  methods: {
+    template() {
+      return `<div class="dz-preview dz-file-preview">
+                <div class="dz-image">
+                  <div data-dz-thumbnail-bg></div>
+                </div>
+              </div>
+      `
+    },
+    verror(file, message) {
+      this.error = true
+      this.$toast.error(file.status, message)
+    },
+    addTeaserImage(file) {
+      this.$emit('addTeaserImage', file[0])
+      return ''
+    },
+    thumbnail: (file, dataUrl) => {
+      let thumbnailElement, contributionImage, uploadArea
+      if (file.previewElement) {
+        thumbnailElement = document.querySelectorAll('#postdropzone')[0]
+        contributionImage = document.querySelectorAll('.contribution-image')[0]
+        if (contributionImage) {
+          uploadArea = document.querySelectorAll('.hc-attachments-upload-area-update-post')[0]
+          uploadArea.removeChild(contributionImage)
+          uploadArea.classList.remove('hc-attachments-upload-area-update-post')
+        }
+        thumbnailElement.classList.add('image-preview')
+        thumbnailElement.alt = file.name
+        thumbnailElement.style.backgroundImage = 'url("' + dataUrl + '")'
+      }
+    },
+  },
+}
+</script>
+<style lang="scss">
+#postdropzone {
+  width: 100%;
+  min-height: 300px;
+  background-color: $background-color-softest;
+}
+
+#postdropzone.image-preview {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  height: auto;
+  transition: all 0.2s ease-out;
+
+  width: 100%;
+}
+
+@media only screen and (max-width: 400px) {
+  #postdropzone.image-preview {
+    height: 200px;
+  }
+}
+
+@media only screen and (min-width: 401px) and (max-width: 960px) {
+  #postdropzone.image-preview {
+    height: 300px;
+  }
+}
+
+.hc-attachments-upload-area-post {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.hc-attachments-upload-area-update-post img {
+  object-fit: cover;
+  object-position: center;
+  display: block;
+  width: 100%;
+}
+
+.hc-attachments-upload-area-update-post:hover {
+  opacity: 0.7;
+}
+
+.hc-drag-marker-post {
+  position: absolute;
+  width: 122px;
+  height: 122px;
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: hsl(0, 0%, 25%);
+  transition: all 0.2s ease-out;
+  font-size: 60px;
+  margin: 80px 5px;
+
+  background-color: $background-color-softest;
+  opacity: 0.65;
+
+  &:before {
+    position: absolute;
+    content: '';
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    border-radius: 100%;
+    border: 20px solid $text-color-base;
+    visibility: hidden;
+  }
+
+  &:after {
+    position: absolute;
+    content: '';
+    top: 10px;
+    left: 10px;
+    bottom: 10px;
+    right: 10px;
+    border-radius: 100%;
+    border: $border-size-base dashed $text-color-base;
+  }
+
+  .hc-attachments-upload-area-post:hover & {
+    opacity: 1;
+  }
+}
+
+.hc-drag-marker-update-post {
+  opacity: 0;
+}
+
+.contribution-form-footer {
+  border-top: $border-size-base solid $border-color-softest;
+}
+
+.contribution-image {
+  max-height: 300px;
+}
+</style>

webapp/components/Upload/index.vue

@@ -9,7 +9,7 @@
       @vdropzone-error="verror"
     >
       <div class="dz-message" @mouseover="hover = true" @mouseleave="hover = false">
-        <hc-avatar :user="user" class="profile-avatar" size="x-large"></hc-avatar>
+        <slot></slot>
         <div class="hc-attachments-upload-area">
           <div class="hc-drag-marker">
             <ds-icon v-if="hover" name="image" size="xxx-large" />
@@ -22,12 +22,10 @@
 <script>
 import vueDropzone from 'nuxt-dropzone'
 import gql from 'graphql-tag'
-import HcAvatar from '~/components/Avatar/Avatar.vue'
 
 export default {
   components: {
     vueDropzone,
-    HcAvatar,
   },
   props: {
     user: { type: Object, default: null },

webapp/graphql/PostMutations.js

@@ -3,26 +3,45 @@ import gql from 'graphql-tag'
 export default () => {
   return {
     CreatePost: gql`
-      mutation($title: String!, $content: String!, $language: String) {
-        CreatePost(title: $title, content: $content, language: $language) {
+      mutation($title: String!, $content: String!, $language: String, $imageUpload: Upload) {
+        CreatePost(
+          title: $title
+          content: $content
+          language: $language
+          imageUpload: $imageUpload
+        ) {
           id
           title
           slug
           content
           contentExcerpt
           language
+          imageUpload
         }
       }
     `,
     UpdatePost: gql`
-      mutation($id: ID!, $title: String!, $content: String!, $language: String) {
-        UpdatePost(id: $id, title: $title, content: $content, language: $language) {
+      mutation(
+        $id: ID!
+        $title: String!
+        $content: String!
+        $language: String
+        $imageUpload: Upload
+      ) {
+        UpdatePost(
+          id: $id
+          title: $title
+          content: $content
+          language: $language
+          imageUpload: $imageUpload
+        ) {
           id
           title
           slug
           content
           contentExcerpt
           language
+          imageUpload
         }
       }
     `,

webapp/pages/post/_id/_slug/index.spec.js

@@ -2,11 +2,13 @@ import { config, shallowMount, createLocalVue } from '@vue/test-utils'
 import PostSlug from './index.vue'
 import Vuex from 'vuex'
 import Styleguide from '@human-connection/styleguide'
+import Filters from '~/plugins/vue-filters'
 
 const localVue = createLocalVue()
 
 localVue.use(Vuex)
 localVue.use(Styleguide)
+localVue.use(Filters)
 
 config.stubs['no-ssr'] = '<span><slot /></span>'
 

webapp/pages/post/_id/_slug/index.vue

@@ -2,7 +2,7 @@
   <transition name="fade" appear>
     <ds-card
       v-if="post && ready"
-      :image="post.image"
+      :image="post.image | proxyApiUrl"
       :class="{ 'post-card': true, 'disabled-content': post.disabled }"
     >
       <ds-space margin-bottom="small" />

webapp/pages/post/create.vue

@@ -3,9 +3,7 @@
     <ds-flex-item :width="{ base: '100%', md: 3 }">
       <hc-contribution-form />
     </ds-flex-item>
-    <ds-flex-item :width="{ base: '100%', md: 1 }">
-      &nbsp;
-    </ds-flex-item>
+    <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
   </ds-flex>
 </template>
 

webapp/pages/profile/_id/_slug.vue

@@ -10,7 +10,9 @@
           :class="{ 'disabled-content': user.disabled }"
           style="position: relative; height: auto;"
         >
-          <hc-upload v-if="myProfile" :user="user" />
+          <hc-upload v-if="myProfile" :user="user">
+            <hc-avatar :user="user" class="profile-avatar" size="x-large"></hc-avatar>
+          </hc-upload>
           <hc-avatar v-else :user="user" class="profile-avatar" size="x-large" />
           <!-- Menu -->
           <no-ssr>