Initial commit to add placeholder image for Post

backend/add_teaser_image_heights.sh

@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+shopt -s nullglob
+TEMP_FILE=/var/lib/neo4j/import/temp.json
+for image in public/uploads/*; do
+  [ -e "$image" ] || continue
+  export IMAGE_METADATA=$( identify -format '%w %h' "$image" )
+  JSON_STRING=$( jq -n \
+                    --arg imageURL "$image" \
+                    --arg imageMetaData "$IMAGE_METADATA" \
+                    '{imageURL: $imageURL, imageMetaData: $imageMetaData}' )
+  echo "$JSON_STRING," >> "$TEMP_FILE"
+done
+
+ENV_FILE=$(dirname "$0")/.env
+[[ -f "$ENV_FILE" ]] && source "$ENV_FILE"
+
+if [ -z "$NEO4J_USERNAME" ] || [ -z "$NEO4J_PASSWORD" ]; then
+  echo "Please set NEO4J_USERNAME and NEO4J_PASSWORD environment variables."
+  echo "Database manipulation is not possible without connecting to the database."
+  echo "E.g. you could \`cp .env.template .env\` unless you run the script in a docker container"
+fi
+
+until echo 'RETURN "Connection successful" as info;' | cypher-shell
+do
+  echo "Connecting to neo4j failed, trying again..."
+  sleep 1
+done
+echo "
+WITH "file:${TEMP_FILE}" 
+AS url
+CALL apoc.load.json(url) YIELD value as post
+MATCH (p:Post {image: post.imageURL}) return p;
+" | cypher-shell

backend/src/schema/resolvers/posts.js

@@ -297,7 +297,7 @@ export default {
   },
   Post: {
     ...Resolver('Post', {
-      undefinedToNull: ['activityId', 'objectId', 'image', 'language', 'pinnedAt', 'pinned'],
+      undefinedToNull: ['activityId', 'objectId', 'image', 'language', 'pinnedAt', 'pinned', 'teaserImageHeight'],
       hasMany: {
         tags: '-[:TAGGED]->(related:Tag)',
         categories: '-[:CATEGORIZED]->(related:Category)',

backend/src/schema/types/type/Post.gql

@@ -118,6 +118,7 @@ type Post {
   contentExcerpt: String
   image: String
   imageUpload: Upload
+  teaserImageHeight: String
   visibility: Visibility
   deleted: Boolean
   disabled: Boolean
@@ -194,6 +195,7 @@ type Mutation {
     visibility: Visibility
     language: String
     categoryIds: [ID]
+    teaserImageHeight: String
   ): Post
   DeletePost(id: ID!): Post
   AddPostEmotions(to: _PostInput!, data: _EMOTEDInput!): EMOTED

deployment/legacy-migration/maintenance-worker/migration/mongo/.env

@@ -12,6 +12,6 @@
 # On Windows this resolves to C:\Users\dornhoeschen\AppData\Local\Temp\mongo-export (MinGW)
 EXPORT_PATH='/tmp/mongo-export/'
 EXPORT_MONGOEXPORT_BIN='mongoexport'
-MONGO_EXPORT_SPLIT_SIZE=6000
+MONGO_EXPORT_SPLIT_SIZE=500000
 # On Windows use something like this
 # EXPORT_MONGOEXPORT_BIN='C:\Program Files\MongoDB\Server\3.6\bin\mongoexport.exe'

deployment/legacy-migration/maintenance-worker/migration/neo4j/import.sh

@@ -39,6 +39,7 @@ function import_collection () {
       echo "Import $1 ${CHUNK_FILE_NAME} (${chunk})"
       echo "${NEO4J_COMMAND}" | "${IMPORT_CYPHERSHELL_BIN}" > /dev/null
       # add file to array and file
+      echo "$IMPORT_CHUNK_PATH_CQL_FILE"
       IMPORT_INDEX+=("${CHUNK_FILE_NAME}")
       echo "${CHUNK_FILE_NAME}" >> ${INDEX_FILE}
     else

neo4j/add_teaser_image_heights.sh

@@ -0,0 +1,28 @@
+#!/usr/bin/env bash
+set -e
+
+echo "images"
+shopt -s nullglob
+for image in *; do
+# [ -e "$image" ] || continue
+  echo "$image"
+done
+
+# ENV_FILE=$(dirname "$0")/.env
+# [[ -f "$ENV_FILE" ]] && source "$ENV_FILE"
+
+# if [ -z "$NEO4J_USERNAME" ] || [ -z "$NEO4J_PASSWORD" ]; then
+#   echo "Please set NEO4J_USERNAME and NEO4J_PASSWORD environment variables."
+#   echo "Database manipulation is not possible without connecting to the database."
+#   echo "E.g. you could \`cp .env.template .env\` unless you run the script in a docker container"
+# fi
+
+# until echo 'RETURN "Connection successful" as info;' | cypher-shell
+# do
+#   echo "Connecting to neo4j failed, trying again..."
+#   sleep 1
+# done
+
+# echo "
+# MATCH (post:Post) where post.teaserImageHeight is not null return post;
+# " | cypher-shell

webapp/components/ContributionForm/ContributionForm.vue

@@ -7,7 +7,7 @@
     @submit="submit"
   >
     <template slot-scope="{ errors }">
-      <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
+      <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage" @addTeaserImageHeight="addTeaserImageHeight">
         <img
           v-if="contribution"
           class="contribution-image"
@@ -190,9 +190,12 @@ export default {
         content,
         image,
         teaserImage,
+        teaserImageHeight,
         categoryIds,
       } = this.form
       this.loading = true
+      console.log('file', teaserImage)
+      console.log('imageHeight', typeof teaserImageHeight)
       this.$apollo
         .mutate({
           mutation: this.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
@@ -204,6 +207,7 @@ export default {
             language,
             image,
             imageUpload: teaserImage,
+            teaserImageHeight
           },
         })
         .then(({ data }) => {
@@ -227,6 +231,10 @@ export default {
     addTeaserImage(file) {
       this.form.teaserImage = file
     },
+    addTeaserImageHeight(height) {
+      console.log(height.toString())
+      this.form.teaserImageHeight = height.toString()
+    },
     categoryIds(categories) {
       return categories.map(c => c.id)
     },

webapp/components/Editor/ContextMenu.vue

@@ -22,11 +22,24 @@ export default {
         content: content,
         duration: [400, 200],
         inertia: true,
+<<<<<<< Updated upstream
         interactive: true,
+=======
+        // interactive: true,
+>>>>>>> Stashed changes
         placement,
         showOnInit,
         theme: 'human-connection',
         trigger,
+<<<<<<< Updated upstream
+=======
+        onCreate(instance) {
+          instance.popperInstance.reference = {
+            ...virtualNode,
+            // popperOptions: { positionFixed: true },
+          }
+        },
+>>>>>>> Stashed changes
         onMount(instance) {
           const input = instance.popper.querySelector('input')
 
@@ -79,6 +92,7 @@ export default {
   .tippy-roundarrow {
     fill: $color-primary;
   }
+<<<<<<< Updated upstream
   .tippy-popper[x-placement^='top'] & .tippy-arrow {
     border-top-color: $color-primary;
   }
@@ -91,5 +105,10 @@ export default {
   .tippy-popper[x-placement^='right'] & .tippy-arrow {
     border-right-color: $color-primary;
   }
+=======
+  // .tippy-popper {
+  //   pointer-events: auto;
+  // }
+>>>>>>> Stashed changes
 }
 </style>

webapp/components/MasonryGrid/MasonryGrid.vue

@@ -22,6 +22,7 @@ export default {
     },
     endCalculation() {
       this.itemsCalculating -= 1
+      this.$emit('hidePlaceholder')
     },
   },
 }

webapp/components/PostCard/PostCard.vue

@@ -4,6 +4,9 @@
     :image="post.image | proxyApiUrl"
     :class="{ 'post-card': true, 'disabled-content': post.disabled, 'post--pinned': isPinned }"
   >
+    <ds-placeholder v-if="showPlaceholder && post.teaserImageHeight" class="placeholder-image">
+      I'm a placeholder
+    </ds-placeholder>
     <!-- Post Link Target -->
     <nuxt-link
       class="post-link"
@@ -98,6 +101,15 @@ export default {
       type: Object,
       default: () => {},
     },
+    showPlaceholder: {
+      type: Boolean,
+      default: true,
+    }
+  },
+  data() {
+    return {
+      imageLoading: true,
+    }
   },
   computed: {
     ...mapGetters({
@@ -121,6 +133,11 @@ export default {
     isPinned() {
       return this.post && this.post.pinnedBy
     },
+    cssVars() {
+      return {
+        '--height': this.post.teaserImageHeight + 'px'
+      }
+    }
   },
   methods: {
     async deletePostCallback() {
@@ -140,6 +157,10 @@ export default {
     unpinPost(post) {
       this.$emit('unpinPost', post)
     },
+    hidePlaceholder() {
+      console.log('this has been called')
+      this.imageLoading = false
+    }
   },
 }
 </script>
@@ -184,4 +205,8 @@ export default {
 .post--pinned {
   border: 1px solid $color-warning;
 }
+
+.placeholder-image {
+  height: var(--height)
+}
 </style>

webapp/components/TeaserImage/TeaserImage.vue

@@ -111,12 +111,16 @@ export default {
     cropImage() {
       this.showCropper = false
       const canvas = this.cropper.getCroppedCanvas()
+      console.log('canvas', canvas)
       canvas.toBlob(blob => {
         this.setupPreview(canvas)
         this.removeCropper()
-        const croppedImageFile = new File([blob], this.file.name, { type: 'image/jpeg' })
+        console.log(blob)
+        const croppedImageFile = new File([blob], this.file.name, { type: this.file.type })
+        console.log('croppedImageFile', croppedImageFile)
         this.$emit('addTeaserImage', croppedImageFile)
-      }, 'image/jpeg')
+        this.$emit('addTeaserImageHeight', canvas.height)
+      })
     },
     setupPreview(canvas) {
       this.image = new Image()

webapp/graphql/Fragments.js

@@ -64,6 +64,7 @@ export const postFragment = lang => gql`
       role
     }
     pinnedAt
+    teaserImageHeight
   }
 `
 export const commentFragment = lang => gql`

webapp/graphql/PostMutations.js

@@ -34,6 +34,7 @@ export default () => {
         $imageUpload: Upload
         $categoryIds: [ID]
         $image: String
+        $teaserImageHeight: String
       ) {
         UpdatePost(
           id: $id
@@ -43,6 +44,7 @@ export default () => {
           imageUpload: $imageUpload
           categoryIds: $categoryIds
           image: $image
+          teaserImageHeight: $teaserImageHeight
         ) {
           id
           title
@@ -55,6 +57,7 @@ export default () => {
             name
             role
           }
+          teaserImageHeight
         }
       }
     `,

webapp/pages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <masonry-grid>
+    <masonry-grid @hidePlaceholder="hidePlaceholder">
       <ds-grid-item v-show="hashtag" :row-span="2" column-span="fullWidth">
         <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
@@ -20,6 +20,7 @@
           <hc-post-card
             :post="post"
             :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
+            :showPlaceholder="showPlaceholder"
             @removePostFromList="deletePost"
             @pinPost="pinPost"
             @unpinPost="unpinPost"
@@ -83,6 +84,7 @@ export default {
       offset: 0,
       pageSize: 12,
       hashtag,
+      showPlaceholder: true,
     }
   },
   computed: {
@@ -204,6 +206,9 @@ export default {
         })
         .catch(error => this.$toast.error(error.message))
     },
+    hidePlaceholder() {
+      this.showPlaceholder = false
+    }
   },
   apollo: {
     Post: {