Refactor folder structure

client/src/components/ContentBlock.vue

@@ -40,7 +40,7 @@
   import VideoBlock from '@/components/content-blocks/VideoBlock';
   import LinkBlock from '@/components/content-blocks/LinkBlock';
   import DocumentBlock from '@/components/content-blocks/DocumentBlock';
-  import Assignment from '@/components/content-blocks/Assignment';
+  import Assignment from '@/components/content-blocks/assignment/Assignment';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
   import VisibilityPopover from '@/components/VisibilityPopover';
   import EyeIcon from '@/components/icons/EyeIcon';

client/src/components/content-blocks/assignment/Assignment.vue

@@ -5,25 +5,27 @@
       {{assignment.assignment}}
     </p>
 
-    <div class="assignment__toggle-input-container">
+    <final-submission :submission="assignment.submission" v-if="assignment.submission.final"></final-submission>
-      <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__answer">
+    <div class="assignment__submission" v-if="!assignment.submission.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__text-answer"
+      <div class="assignment__inputs">
+        <div class="assignment__text-answer"
            v-if="inputType === 'text'">
       <textarea
         class="assignment__textarea"
@@ -41,10 +43,14 @@
         v-if="inputType === 'file'">
         File Input goes here
       </div>
+      </div>
+
+      <button
+        class="assignment__submit button button--primary button--white-bg"
+        @click="turnIn"
+      >Ergebnis mit Lehrperson teilen
+      </button>
     </div>
-
-
-    <button class="assignment__submit button button--primary button--white-bg">Ergebnis mit Lehrperson teilen</button>
   </div>
 </template>
 
@@ -54,12 +60,14 @@
   import debounce from 'debounce';
 
   import TickCircleIcon from '@/components/icons/TickCircleIcon';
+  import FinalSubmission from '@/components/content-blocks/assignment/FinalSubmission';
 
   export default {
     props: ['value'],
 
     components: {
-      TickCircleIcon
+      TickCircleIcon,
+      FinalSubmission
     },
 
     computed: {},
@@ -77,7 +85,21 @@
             }
           }
         });
-      }, 500)
+      }, 500),
+      turnIn() {
+        this.$apollo.mutate({
+          mutation: UPDATE_ASSIGNMENT_MUTATION,
+          variables: {
+            input: {
+              assignment: {
+                id: this.assignment.id,
+                answer: this.assignment.submission.text,
+                final: true
+              }
+            }
+          }
+        });
+      }
     },
 
     apollo: {
@@ -107,6 +129,7 @@
 <style scoped lang="scss">
   @import '@/styles/_variables.scss';
   @import '@/styles/_functions.scss';
+  @import '@/styles/_mixins.scss';
 
   .assignment {
     margin-bottom: 2em;
@@ -140,17 +163,20 @@
       }
     }
 
-    &__answer {
+    &__submission {
+      /*margin-bottom: 12px;*/
+    }
+
+    &__inputs {
       margin-bottom: 12px;
     }
 
     &__textarea {
       display: block;
       width: 100%;
-      border-radius: 3px;
+      border-radius: $input-border-radius;
-      border: 1px solid #DBDBDB;
       padding: 13px;
-      box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
+      @include input-box-shadow;
       box-sizing: border-box;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
@@ -163,7 +189,7 @@
       background-color: $color-white;
       font-family: $sans-serif-font-family;
       padding: 13px;
-      border-radius: 3px;
+      border-radius: $input-border-radius;
       border-top-left-radius: 0;
       border-top-right-radius: 0;
       border: 1px solid #DBDBDB;