From c5fea80ab4d6ea4a711058593c10434dc7cf6146 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Thu, 11 Jul 2019 16:19:06 +0200
Subject: [PATCH] Add single button file upload

---
 client/src/components/SimpleFileUpload.vue    | 73 +++++++++++++++++
 .../content-blocks/DocumentBlock.vue          |  1 -
 .../content-blocks/assignment/Assignment.vue  | 81 +++++++++++--------
 .../assignment/FinalSubmission.vue            | 14 +++-
 .../assignment/SubmissionForm.vue             |  3 +-
 client/src/components/icons/DocumentIcon.vue  |  1 -
 .../src/components/icons/TickCircleIcon.vue   |  3 +-
 client/src/pages/studentSubmission.vue        |  5 +-
 8 files changed, 139 insertions(+), 42 deletions(-)
 create mode 100644 client/src/components/SimpleFileUpload.vue

diff --git a/client/src/components/SimpleFileUpload.vue b/client/src/components/SimpleFileUpload.vue
new file mode 100644
index 00000000..45a446c2
--- /dev/null
+++ b/client/src/components/SimpleFileUpload.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="simple-file-upload">
+    <a class="simple-file-upload__link" @click="clickUploadCare" v-if="!value">
+      <document-icon class="simple-file-upload__icon"></document-icon>
+    </a>
+    <input type="hidden" ref="uploadcare-filedialog" role="uploadcare-uploader" name="file-upload" data-system-dialog/>
+  </div>
+</template>
+
+<script>
+  import uploadcareWidget from 'uploadcare-widget';
+
+  import DocumentIcon from '@/components/icons/DocumentIcon';
+
+  export default {
+    props: ['value'],
+
+    components: {
+      DocumentIcon
+    },
+
+    methods: {
+      clickUploadCare() {
+        // workaround for styling the uploadcare widget
+        let button = this.$el.querySelector('.uploadcare--widget__button');
+        button.click();
+      }
+    },
+
+    mounted() {
+      let widget = uploadcareWidget.Widget('[role=uploadcare-uploader]');
+
+      widget.onChange(result => {
+        result.done(fileInfo => {
+          let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
+          this.$emit('link-change-url', urlWithFilename);
+        });
+
+        result.progress(p => {
+        });
+
+        result.fail(uploadResult => {
+        });
+      });
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .simple-file-upload {
+    width: 25px;
+    height: 25px;
+    overflow: hidden;
+
+    &__icon {
+      width: 25px;
+      fill: $color-silver-dark;
+    }
+
+    &__link {
+      display: inline-block;
+      overflow: hidden;
+      width: 25px;
+      height: 25px;
+    }
+  }
+
+  /deep/ .uploadcare--widget {
+    display: none;
+  }
+</style>
diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue
index f3a0b5a6..5948fa6f 100644
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@@ -41,7 +41,6 @@
   @import '@/styles/_mixins.scss';
 
   .document-block {
-    margin-bottom: 30px;
     display: grid;
     grid-template-columns: 50px 1fr 50px;
     align-items: center;
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index d47dd2a7..02d82333 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -7,47 +7,39 @@
     <solution :value="solution" v-if="assignment.solution"></solution>
 
     <template v-if="isStudent">
-      <final-submission :submission="assignment.submission" v-if="final"></final-submission>
-
-      <div class="assignment__submission" v-if="!final">
-        <!--<div class="assignment__toggle-input-container">-->
-          <!--<button-->
-            <!--class="assignment__toggle-input"-->
-            <!--@click="inputType = 'file'"-->
-            <!--:class="{'assignment__toggle-input&#45;&#45;active': inputType === 'file'}"-->
-          <!--&gt;Dokument hochladen-->
-          <!--</button>-->
-        <!--</div>-->
+      <div class="assignment__submission">
 
         <div class="assignment__inputs">
           <submission-form
             @input="saveInput"
             :submission="submission"
             :saved="!unsaved"
+            :final="final"
           ></submission-form>
-          <div
-            class="assignment__file-upload"
-            v-if="inputType === 'file'">
-            <div v-if="assignment.submission.document">
-              <document-block
-                :value="{url: assignment.submission.document}"
-                show-trash-icon
-                v-on:trash="changeDocumentUrl('')"
-              ></document-block>
-            </div>
-            <document-form
-              v-if="!assignment.submission.document"
-              :value="{url: ''}"
-              v-on:link-change-url="changeDocumentUrl"
-            ></document-form>
-          </div>
         </div>
 
-        <button
-          class="assignment__submit button button--primary button--white-bg"
-          @click="turnIn"
-        >Ergebnis mit Lehrperson teilen
-        </button>
+        <div class="assignment__actions" v-if="!final">
+          <button
+            class="assignment__submit button button--primary button--white-bg"
+            @click="turnIn"
+          >Ergebnis mit Lehrperson teilen
+          </button>
+
+          <div v-if="assignment.submission.document">
+            <document-block
+              :value="{url: assignment.submission.document}"
+              show-trash-icon
+              v-on:trash="changeDocumentUrl('')"
+            ></document-block>
+          </div>
+
+          <simple-file-upload
+            v-on:link-change-url="changeDocumentUrl"
+            :value="assignment.submission.document"
+          ></simple-file-upload>
+        </div>
+
+        <final-submission :submission="assignment.submission" v-if="final" @reopen="reopen"></final-submission>
       </div>
     </template>
     <template v-if="!isStudent">
@@ -71,6 +63,7 @@
   import DocumentForm from '@/components/content-forms/DocumentForm';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import Solution from '@/components/content-blocks/Solution';
+  import SimpleFileUpload from '@/components/SimpleFileUpload';
 
   export default {
     props: ['value'],
@@ -80,7 +73,8 @@
       DocumentForm,
       SubmissionForm,
       FinalSubmission,
-      Solution
+      Solution,
+      SimpleFileUpload
     },
 
     computed: {
@@ -173,6 +167,21 @@
           }
         });
       },
+      reopen() {
+        this.$apollo.mutate({
+          mutation: UPDATE_ASSIGNMENT_MUTATION,
+          variables: {
+            input: {
+              assignment: {
+                id: this.assignment.id,
+                answer: this.assignment.submission.text,
+                document: this.assignment.submission.document,
+                final: false
+              }
+            }
+          }
+        });
+      },
       initialSubmission() {
         return {
           text: '',
@@ -271,6 +280,12 @@
     }
 
     &__submit {
+      margin-right: $medium-spacing;
+    }
+
+    &__actions {
+      display: flex;
+      align-items: center;
     }
   }
 </style>
diff --git a/client/src/components/content-blocks/assignment/FinalSubmission.vue b/client/src/components/content-blocks/assignment/FinalSubmission.vue
index f91f1537..ade2a66d 100644
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="final-submission">
-    <div v-if="submission.text" class="final-submission__text" v-html="text">
-    </div>
     <document-block
       v-if="submission.document"
       :value="{url: submission.document}"
+      class="final-submission__document"
     ></document-block>
     <div class="final-submission__explanation">
       <info-icon class="final-submission__explanation-icon"></info-icon>
       <span class="final-submission__explanation-text">Das Ergebnis wurde mit der Lehrperson geteilt</span>
+      <a class="final-submission__reopen" @click="$emit('reopen')">Bearbeiten</a>
     </div>
   </div>
 </template>
@@ -56,6 +56,10 @@
       word-break: break-word;
     }
 
+    &__document {
+      margin-bottom: $small-spacing;
+    }
+
     &__explanation {
       display: flex;
       align-items: center;
@@ -70,6 +74,12 @@
       color: $color-brand;
       font-family: $sans-serif-font-family;
       font-weight: $font-weight-regular;
+      margin-right: $medium-spacing;
+    }
+    &__reopen {
+      @include small-text;
+      cursor: pointer;
+      color: $color-charcoal-light;
     }
   }
 </style>
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 18526a81..7c9ed3a7 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -5,6 +5,7 @@
         rows="1"
         class="submission-form__textarea"
         placeholder="Ergebnis erfassen"
+        :readonly="final"
         :value="submission.text"
         @input="$emit('input', $event.target.value)"
       ></textarea>
@@ -22,7 +23,7 @@
   import LoadingIcon from '@/components/icons/LoadingIcon';
 
   export default {
-    props: ['submission', 'saved'],
+    props: ['submission', 'saved', 'final'],
 
     components: {
       TickCircleIcon,
diff --git a/client/src/components/icons/DocumentIcon.vue b/client/src/components/icons/DocumentIcon.vue
index 8298d050..410a6867 100644
--- a/client/src/components/icons/DocumentIcon.vue
+++ b/client/src/components/icons/DocumentIcon.vue
@@ -1,6 +1,5 @@
 <template>
   <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    <title>document</title>
     <path
       d="M22.64,5.3a8.38,8.38,0,0,0-8.37,8.37V86.33a8.38,8.38,0,0,0,8.37,8.37H77.36a8.38,8.38,0,0,0,8.37-8.37v-57L61.39,5.3ZM79.17,88.08a2.74,2.74,0,0,1-2.11.94H22.34a3,3,0,0,1-3-3V13.37a3,3,0,0,1,3-3H54V28.32a7.78,7.78,0,0,0,7.77,7.77H79.75V85.73A2.85,2.85,0,0,1,79.17,88.08ZM62.11,31a2.34,2.34,0,0,1-2.39-2.39V11.15L79.58,31Z"/>
     <path
diff --git a/client/src/components/icons/TickCircleIcon.vue b/client/src/components/icons/TickCircleIcon.vue
index e1e34f55..9a82f612 100644
--- a/client/src/components/icons/TickCircleIcon.vue
+++ b/client/src/components/icons/TickCircleIcon.vue
@@ -1,6 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>
-    tick-circle</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"/>
     <path d="M69.27,41a2.45,2.45,0,1,0-3.46-3.46L45,58.3,34.2,47.49A2.45,2.45,0,0,0,30.73,51L45,65.23Z"/>
diff --git a/client/src/pages/studentSubmission.vue b/client/src/pages/studentSubmission.vue
index 71f9278e..e3781ab6 100644
--- a/client/src/pages/studentSubmission.vue
+++ b/client/src/pages/studentSubmission.vue
@@ -18,12 +18,13 @@
 <script>
   import {newLineToParagraph} from '@/helpers/text';
 
-  import DocumentIcon from '@/components/icons/DocumentIcon';
   import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
   import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/studentSubmissionQuery.gql';
 
   export default {
-    components: {DocumentIcon, StudentSubmissionDocument},
+    components: {
+      StudentSubmissionDocument
+    },
 
     computed: {
       text() {