Add document upload to project entry

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

@@ -2,46 +2,24 @@
   <div class="document-form" ref="documentform">
     <div v-if="!value.url" ref="uploadcare-panel"></div>
     <div v-if="value.url">
-      <a :href="previewUrl">{{previewUrl}}</a>
+      <a :href="previewUrl" target="_blank">{{previewUrl}}</a>
     </div>
   </div>
 </template>
 
 <script>
-  import uploadcare from 'uploadcare-widget';
+  import {uploadcare} from '@/helpers/uploadcare';
 
   export default {
 
     props: ['value', 'index'],
     mounted() {
-      const uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
+      uploadcare(this, url => {
-        tabs: ['file'],
+        this.$emit('link-change-url', url, this.index)
-      });
-
-      // HACK to change the text of the Uploadcare dynamically we need to change the text here directly
-      setTimeout(() => {
-        const formElem = this.$refs['documentform'];
-        if (formElem.getElementsByClassName('uploadcare--text_size_extra-large').length > 1) {
-          formElem.getElementsByClassName('uploadcare--text_size_extra-large')[1].innerText = 'Ziehen Sie ein Dokument hier hinein';
-          formElem.getElementsByClassName('uploadcare--tab__action-button')[0].innerText = 'Wählen Sie ein lokales Dokument';
-        }
-      }, 0);
-
-      uploadcarePanel.done(panelResult => {
-        panelResult.done(fileInfo => {
-          let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
-          this.$emit('link-change-url', urlWithFilename, this.index)
-        });
-
-        panelResult.progress(p => {
-        });
-
-        panelResult.fail(uploadResult => {
-        });
       });
     },
     computed: {
-      previewUrl: function() {
+      previewUrl: function () {
         if (this.value && this.value.url) {
           return this.value.url;
         }

client/src/components/portfolio/NewProjectEntryWizard.vue

@@ -10,6 +10,7 @@
       <text-form-with-help-text title="Nächste Schritte" :value="nextSteps" @change="nextSteps = $event"
                                 help-text="Wie geht es weiter? Wer macht was?">
       </text-form-with-help-text>
+      <document-form :value="document" :index="0" @link-change-url="setDocumentUrl"></document-form>
     </div>
     <div slot="footer">
       <a class="button button--primary" data-cy="modal-save-button" v-on:click="save">Speichern</a>
@@ -24,9 +25,11 @@
 
   import NEW_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/addProjectEntry.gql';
   import PROJECT_QUERY from '@/graphql/gql/projectQuery.gql';
+  import DocumentForm from '@/components/content-forms/DocumentForm';
 
   export default {
     components: {
+      DocumentForm,
       Modal,
       TextFormWithHelpText
     },
@@ -37,10 +40,18 @@
       },
       slug() {
         return this.$route.params.slug;
+      },
+      document() {
+        return this.documentUrl > '' ? {
+          url: this.documentUrl
+        } : {};
       }
     },
 
     methods: {
+      setDocumentUrl(url) {
+        this.documentUrl = url;
+      },
       save() {
         this.$apollo.mutate({
           mutation: NEW_PROJECT_ENTRY_MUTATION,
@@ -50,6 +61,7 @@
                 nextSteps: this.nextSteps,
                 activity: this.activity,
                 reflection: this.reflection,
+                documentUrl: this.documentUrl,
                 project: this.project
               })
             }
@@ -80,7 +92,8 @@
       return {
         activity: '',
         reflection: '',
-        nextSteps: ''
+        nextSteps: '',
+        documentUrl: ''
       }
     }
   }

client/src/components/portfolio/ProjectEntry.vue

@@ -14,6 +14,9 @@
     <p class="project-entry__paragraph">
       {{nextSteps}}
     </p>
+    <p class="project-entry__paragraph" v-if="documentUrl">
+      <a target="_blank" class="project-entry__link" :href="documentUrl">Dokument anzeigen</a>
+    </p>
     <div class="project-entry__date">
       {{created | date }}
     </div>
@@ -22,13 +25,14 @@
 
 <script>
   export default {
-    props: ['activity', 'reflection', 'nextSteps', 'created']
+    props: ['activity', 'reflection', 'nextSteps', 'documentUrl', 'created']
   }
 </script>
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
   @import "@/styles/_functions.scss";
+  @import "@/styles/_mixins.scss";
 
   .project-entry {
     background-color: $color-white;
@@ -49,5 +53,10 @@
       color: $color-grey;
       font-size: toRem(17px);
     }
+
+    &__link {
+      cursor: pointer;
+      @include heading-4;
+    }
   }
 </style>

client/src/graphql/gql/fragments/projectEntryParts.gql

@@ -3,5 +3,6 @@ fragment ProjectEntryParts on ProjectEntryNode {
   activity
   reflection
   nextSteps
+  documentUrl
   created
 }

client/src/helpers/uploadcare.js

@@ -0,0 +1,29 @@
+import uploadcareWidget from 'uploadcare-widget';
+
+export const uploadcare = (component, callback) => { // callback with signature parameter `url`
+  const uploadcarePanel = uploadcareWidget.openPanel(component.$refs['uploadcare-panel'], null, {
+    tabs: ['file'],
+  });
+
+  // HACK to change the text of the Uploadcare dynamically we need to change the text here directly
+  setTimeout(() => {
+    const formElem = component.$refs['documentform'];
+    if (formElem.getElementsByClassName('uploadcare--text_size_extra-large').length > 1) {
+      formElem.getElementsByClassName('uploadcare--text_size_extra-large')[1].innerText = 'Ziehen Sie ein Dokument hier hinein';
+      formElem.getElementsByClassName('uploadcare--tab__action-button')[0].innerText = 'Wählen Sie ein lokales Dokument';
+    }
+  }, 0);
+
+  return uploadcarePanel.done(panelResult => {
+    panelResult.done(fileInfo => {
+      let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
+      callback(urlWithFilename);
+    });
+
+    panelResult.progress(p => {
+    });
+
+    panelResult.fail(uploadResult => {
+    });
+  });
+};

server/portfolio/inputs.py

@@ -22,6 +22,7 @@ class ProjectEntryInput(InputObjectType):
     activity = graphene.String()
     reflection = graphene.String()
     next_steps = graphene.String()
+    document_url = graphene.String()
 
 
 class AddProjectEntryArgument(ProjectEntryInput):

server/portfolio/migrations/0004_projectentry_document_url.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.0.6 on 2019-04-24 08:07
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('portfolio', '0003_auto_20190325_1452'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='projectentry',
+            name='document_url',
+            field=models.TextField(blank=True),
+        ),
+    ]

server/portfolio/models.py

@@ -17,6 +17,7 @@ class ProjectEntry(models.Model):
     activity = models.TextField(blank=True)
     reflection = models.TextField(blank=True)
     next_steps = models.TextField(blank=True)
+    document_url = models.TextField(blank=True)
     created = models.DateTimeField(auto_now_add=True)
     project = models.ForeignKey(Project, related_name='entries', on_delete=models.CASCADE)
 

server/portfolio/serializers.py

@@ -13,5 +13,5 @@ class ProjectSerializer(serializers.ModelSerializer):
 class ProjectEntrySerializer(serializers.ModelSerializer):
     class Meta:
         model = ProjectEntry
-        fields = ('id', 'activity', 'reflection', 'next_steps', 'created', 'project')
+        fields = ('id', 'activity', 'reflection', 'next_steps', 'document_url', 'created', 'project')
         read_only_fields = ('id', 'created',)