Add single button file upload

2019-07-11 16:19:06 +02:00 · 2019-07-11 16:19:06 +02:00 · c5fea80ab4
parent 6710f51b64
commit c5fea80ab4
8 changed files with 139 additions and 42 deletions
--- a/client/src/components/SimpleFileUpload.vue
+++ 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>
--- 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;
--- 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>
--- 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>
--- 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,
--- 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
--- 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"/>
--- 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() {