Handle document upload in image form

client/src/components/content-block-form/ContentsForm.vue

@@ -39,6 +39,8 @@
 
         v-on:video-change-url="changeVideoUrl"
 
+        @switch-to-document="switchToDocument"
+
         v-on:assignment-change-title="changeAssignmentTitle"
         v-on:assignment-change-assignment="changeAssignmentAssignment"
       >
@@ -200,10 +202,10 @@
         this.localContentBlock.title = title;
         this.error = false;
       },
-      changeType(index, type) {
+      changeType(index, type, value) {
         let el = {
           type: type,
-          value: {}
+          value: Object.assign({}, value)
         };
         switch (type) {
           case 'text_block':
@@ -234,9 +236,9 @@
           case 'document_block':
             el = {
               ...el,
-              value: {
+              value: Object.assign({
                 url: ''
-              }
+              }, value)
             };
             break;
           case 'image_url_block':
@@ -262,6 +264,9 @@
       },
       setContentBlockType(checked, localContentBlock) {
         this.localContentBlock.isAssignment = checked;
+      },
+      switchToDocument(index, value) {
+        this.changeType(index, 'document_block', value)
       }
     }
   }

client/src/components/content-forms/DocumentForm.vue

@@ -2,7 +2,7 @@
   <div class="document-form" ref="documentform">
     <div v-if="!value.url" ref="uploadcare-panel"></div>
     <div v-if="value.url">
-      <a :href="previewUrl" target="_blank">{{previewUrl}}</a>
+      <a :href="previewUrl" class="document-form__link" target="_blank">{{previewLink}}</a>
     </div>
   </div>
 </template>
@@ -18,12 +18,20 @@
         this.$emit('link-change-url', url, this.index)
       });
     },
+
     computed: {
-      previewUrl: function () {
+      previewUrl() {
         if (this.value && this.value.url) {
           return this.value.url;
         }
         return null;
+      },
+      previewLink() {
+        if (this.value && this.value.url) {
+          const parts = this.value.url.split('/');
+          return parts[parts.length - 1]
+        }
+        return '';
       }
     }
   }
@@ -32,7 +40,12 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
-  .image-form {
+  .document-form {
+
+    &__link {
+      text-decoration: underline;
+    }
+
     &__file-input {
       width: 0.1px;
       height: 0.1px;

client/src/components/content-forms/ImageForm.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="image-form">
+    <div v-if="hadError" class="image-form__error">
+      Ups, das scheint kein Bild zu sein. Bitte versuche es nochmal mit einer anderen Datei, oder lade die Datei als <a
+      class="image-form__link" @click="switchToDocument">Dokument</a> hoch.
+    </div>
+
     <div v-if="!value.url" ref="uploadcare-panel"></div>
-    <div v-if="value.url">
-      <img :src="previewUrl">
+    <div v-if="value.url && !hadError">
+      <img :src="previewUrl" @error="error">
     </div>
   </div>
 </template>
@@ -11,15 +16,45 @@
   import uploadcare from 'uploadcare-widget';
 
   export default {
-
     props: ['value', 'index'],
     mounted() {
-      const uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
+      this.mountUploadcare();
+    },
+    data() {
+      return {
+        hadError: false,
+        uploadcarePanel: null,
+        url: '',
+        filename: ''
+      }
+    },
+    computed: {
+      previewUrl: function () {
+        if (this.value && this.value.url) {
+          return this.value.url + '-/preview/200x200/';
+        }
+        return null;
+      }
+    },
+    methods: {
+      error(e) {
+        this.hadError = true;
+        delete this.value.url;
+
+        setTimeout(() => {
+          this.mountUploadcare();
+        }, 0);
+      },
+      mountUploadcare() {
+        this.uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
           tabs: ['file'],
         });
 
-      uploadcarePanel.done(panelResult => {
+        this.uploadcarePanel.done(panelResult => {
           panelResult.done(fileInfo => {
+            this.hadError = false;
+            this.url = fileInfo.cdnUrl;
+            this.filename = fileInfo.name;
             this.$emit('link-change-url', fileInfo.cdnUrl, this.index)
           });
 
@@ -30,12 +65,10 @@
           });
         });
       },
-    computed: {
-      previewUrl: function() {
-        if (this.value && this.value.url) {
-          return this.value.url + '-/preview/200x200/';
-        }
-        return null;
+      switchToDocument() {
+        this.$emit('switch-to-document', this.index, {
+          url: `${this.url}${this.filename}`
+        });
       }
     }
   }
@@ -43,8 +76,21 @@
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
   .image-form {
+    &__error {
+      @include regular-text;
+      margin-bottom: $medium-spacing;
+      line-height: 1.5;
+    }
+
+    &__link {
+      text-decoration: underline;
+      @include regular-text;
+      cursor: pointer;
+    }
+
     &__file-input {
       width: 0.1px;
       height: 0.1px;

client/src/components/modules/Module.vue

@@ -96,7 +96,6 @@
             if (module) {
               const data = store.readQuery({query: ME_QUERY});
               if (data) {
-                console.log(data);
                 data.me.lastModule = module;
                 store.writeQuery({query: ME_QUERY, data});
               }