Add initial frontend implementation for spell checks

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

@@ -13,20 +13,25 @@
         @saveInput="saveInput"
         @reopen="reopen"
         @changeDocumentUrl="changeDocumentUrl"
+        @spellcheck="spellcheck"
         :user-input="submission"
         placeholder="Ergebnis erfassen"
         action="Ergebnis mit Lehrperson teilen"
         shared-msg="Das Ergebnis wurde mit der Lehrperson geteilt."
         :saved="!unsaved"
+        :spellcheck="true"
       >
       </submission-form>
 
+      <div v-html="corrections"></div>
+
       <div v-if="this.assignment.submission.submissionFeedback" class="assignment__feedback">
         <p>{{feedbackText}}</p>
       </div>
     </template>
     <template v-if="!isStudent">
-      <router-link class="button button--primary" :to="{name: 'submissions', params: { id: assignment.id }}">Zu den Ergebnissen
+      <router-link class="button button--primary" :to="{name: 'submissions', params: { id: assignment.id }}">Zu den
+        Ergebnissen
       </router-link>
     </template>
   </div>
@@ -38,6 +43,7 @@
   import ME_QUERY from '@/graphql/gql/meQuery.gql';
   import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
   import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
+  import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
   import debounce from 'lodash/debounce';
   import cloneDeep from 'lodash/cloneDeep'
 
@@ -178,6 +184,31 @@
           final: false,
         }
       },
+      spellcheck() {
+        let self = this;
+        this.$apollo.mutate({
+          mutation: SPELL_CHECK_MUTATION,
+          variables: {
+            input: {
+              assignment: 'Hallo',
+              text: this.assignment.submission.text
+            }
+          },
+          update(store, {data: {spellCheck: {correct, results}}}) {
+            console.log(results);
+            console.log(correct);
+            let corrections = results.map(result => {
+              let first, middle, last;
+              first = result.sentence.substring(0, result.offset);
+              middle = result.sentence.substring(result.offset, result.offset + result.length);
+              last = result.sentence.substring(result.offset + result.length);
+
+              return `<p>${first}<span class="taskbase__correction">${middle}</span>${last}</p>`;
+            });
+            self.corrections = corrections.join('');
+          }
+        });
+      }
     },
 
     apollo: {
@@ -212,7 +243,8 @@
         },
         inputType: 'text',
         unsaved: false,
-        saving: 0
+        saving: 0,
+        corrections: ''
       }
     }
   }
@@ -258,6 +290,7 @@
     &__feedback {
       margin-top: $medium-spacing;
     }
+
   }
 
 </style>

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

@@ -16,6 +16,11 @@
               @click="$emit('turnIn')"
       >{{action}}
       </button>
+      <button class="submission-form-container__submit button button--primary button--white-bg"
+              v-if="spellcheck"
+              @click="$emit('spellcheck')"
+      >Rechtschreibung prüfen
+      </button>
       <div v-if="userInput.document">
         <document-block
           :value="{url: userInput.document}"
@@ -62,6 +67,10 @@
       action: String,
       reopen: Function,
       document: String,
+      spellcheck: {
+        tyoe: Boolean,
+        default: false
+      },
       sharedMsg: String
     },
 

client/src/graphql/gql/mutations/spellCheck.gql

@@ -0,0 +1,13 @@
+mutation SpellCheck($input: SpellCheckInput!) {
+  spellCheck(input: $input) {
+    correct
+    results {
+      sentence
+      offset
+      length
+      affected
+      corrected
+    }
+  }
+}
+

client/src/styles/_taskbase.scss

@@ -0,0 +1,5 @@
+.taskbase {
+  &__correction {
+    background: yellow;
+  }
+}

client/src/styles/main.scss

@@ -22,3 +22,4 @@
 @import "public-page";
 @import "student-submission";
 @import "module-activity";
+@import "taskbase";