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

Feature/new assignment design

Approved-by: Christian Cueni <christian.cueni@iterativ.ch>

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>

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;

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">
-
-      <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__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
+        <div class="assignment__actions" v-if="!final">
-          class="assignment__submit button button--primary button--white-bg"
+          <button
-          @click="turnIn"
+            class="assignment__submit button button--primary button--white-bg"
-        >Ergebnis mit Lehrperson teilen
+            @click="turnIn"
-        </button>
+          >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>

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>

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;
+      display: flex;
-      width: 100%;
+      width: 95%;
-      border-radius: $input-border-radius;
+      padding: 0;
-      padding: 13px;
-      @include input-box-shadow;
       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 {

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

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>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-    tick-circle</title>
     <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"/>

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 => {
-    });
   });
 };

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() {