Merged in feature/new-assignment-design (pull request #21)

Feature/new assignment design Approved-by: Christian Cueni <christian.cueni@iterativ.ch>
2019-07-15 08:35:44 +00:00 · 2019-07-15 08:35:44 +00:00 · 33a4f9e2c1
parent a7042d05ef b7e4d3eb53
commit 33a4f9e2c1
9 changed files with 148 additions and 80 deletions
--- a/client/src/components/SimpleFileUpload.vue
+++ b/client/src/components/SimpleFileUpload.vue
@ -0,0 +1,67 @@
+<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);
+        });
+      });
+    }
+  }
+</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,55 +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 = 'text'"
-            :class="{'assignment__toggle-input--active': inputType === 'text'}"
-          >Text
-            erfassen
-          </button>
-          <button
-            class="assignment__toggle-input"
-            @click="inputType = 'file'"
-            :class="{'assignment__toggle-input--active': inputType === 'file'}"
-          >Dokument hochladen
-          </button>
-        </div>
+      <div class="assignment__submission">

        <div class="assignment__inputs">
          <submission-form
            @input="saveInput"
            :submission="submission"
            :saved="!unsaved"
-            v-if="inputType === 'text'"
+            :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">
@ -66,7 +50,7 @@
 </template>

 <script>
-  import { mapGetters, mapActions } from 'vuex';
+  import {mapGetters, mapActions} from 'vuex';
  import ASSIGNMENT_QUERY from '@/graphql/gql/assignmentQuery.gql';
  import ME_QUERY from '@/graphql/gql/meQuery.gql';
  import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
@ -79,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'],
@ -88,7 +73,8 @@
      DocumentForm,
      SubmissionForm,
      FinalSubmission,
-      Solution
+      Solution,
+      SimpleFileUpload
    },

    computed: {
@ -181,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: '',
@ -235,6 +236,7 @@

  .assignment {
    margin-bottom: 3rem;
+    position: relative;

    &__title {
      font-size: toRem(17px);
@ -265,7 +267,11 @@
    }

    &__submission {
-      /*margin-bottom: 12px;*/
+      @include input-box-shadow;
+      background-color: $color-white;
+      border-radius: $input-border-radius;
+      border: 1px solid $color-silver;
+      padding: $medium-spacing;
    }

    &__inputs {
@ -273,6 +279,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,16 +5,15 @@
        rows="1"
        class="submission-form__textarea"
        placeholder="Ergebnis erfassen"
+        :readonly="final"
        :value="submission.text"
        @input="$emit('input', $event.target.value)"
      ></textarea>
    <div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
      <tick-circle-icon class="submission-form__save-status-icon"></tick-circle-icon>
-      <span class="submission-form__save-status-text">Alle Änderungen gespeichert</span>
    </div>
    <div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
      <loading-icon class="submission-form__save-status-icon submission-form__saving-icon"></loading-icon>
-      <span class="submission-form__save-status-text">Änderungen werden gespeichert</span>
    </div>
  </div>
 </template>
@ -24,7 +23,7 @@
  import LoadingIcon from '@/components/icons/LoadingIcon';

  export default {
-    props: ['submission', 'saved'],
+    props: ['submission', 'saved', 'final'],

    components: {
      TickCircleIcon,
@ -38,30 +37,24 @@
  @import "@/styles/_mixins.scss";

  .submission-form {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
    &__textarea {
-      display: block;
-      width: 100%;
-      border-radius: $input-border-radius;
-      padding: 13px;
-      @include input-box-shadow;
+      display: flex;
+      width: 95%;
+      padding: 0;
      box-sizing: border-box;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      line-height: 1.5;
-      border-bottom: 0;
+      border: 0;
      min-height: 110px;
    }

    &__save-status {
-      background-color: $color-white;
-      font-family: $sans-serif-font-family;
-      padding: 13px;
-      border-radius: $input-border-radius;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border: 1px solid #DBDBDB;
      position: relative;
-      display: flex;
      align-items: center;
    }

@ -69,12 +62,6 @@
      width: 22px;
      height: 22px;
      fill: $color-silver-dark;
-      margin-right: 8px;
-    }
-
-    &__save-status-text {
-      font-size: toRem(14px);
-      color: $color-silver-dark;
    }

    @keyframes spin {
--- 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/helpers/uploadcare.js
+++ b/client/src/helpers/uploadcare.js
@ -19,11 +19,5 @@ export const uploadcare = (component, callback) => { // callback with signature
      let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
      callback(urlWithFilename);
    });
-
-    panelResult.progress(p => {
-    });
-
-    panelResult.fail(uploadResult => {
-    });
  });
 };
--- 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() {