From 7f719775237bc808bb555bebbfb1bed5866fd0d2 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 16 Dec 2019 14:25:55 +0100
Subject: [PATCH] Add initial frontend implementation for spell checks

---
 .../content-blocks/assignment/Assignment.vue  |  39 +++++-
 .../assignment/SubmissionForm.vue             | 129 ++++++++++--------
 .../src/graphql/gql/mutations/spellCheck.gql  |  13 ++
 client/src/styles/_taskbase.scss              |   5 +
 client/src/styles/main.scss                   |   1 +
 5 files changed, 124 insertions(+), 63 deletions(-)
 create mode 100644 client/src/graphql/gql/mutations/spellCheck.gql
 create mode 100644 client/src/styles/_taskbase.scss

diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index cad57597..6e2e5623 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/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>
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 137ab45a..b0d42600 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -1,44 +1,49 @@
 <template>
-    <div class="feedback__submission submission-form-container">
-      <div class="submission-form-container__inputs">
-        <submission-input
-          @input="saveInput"
-          :input-text="userInput.text"
-          :saved="saved"
-          :final="final"
-          :placeholder="placeholder"
-          :reopen="reopenSubmission"
-        ></submission-input>
-      </div>
-
-      <div class="submission-form-container__actions" v-if="!final">
-        <button class="submission-form-container__submit button button--primary button--white-bg"
-          @click="$emit('turnIn')"
-        >{{action}}
-        </button>
-        <div v-if="userInput.document">
-          <document-block
-            :value="{url: userInput.document}"
-            show-trash-icon
-            v-on:trash="changeDocumentUrl('')"
-          ></document-block>
-        </div>
-
-        <simple-file-upload
-          v-if="allowsDocuments"
-          v-on:link-change-url="changeDocumentUrl"
-          :value="userInput.document"
-          class="submission-form-container__document"
-        ></simple-file-upload>
-        <slot></slot>
-      </div>
-
-      <final-submission
-        v-if="final"
-        :user-input="userInput"
-        :shared-msg="sharedMsg"
-        @reopen="$emit('reopen')"></final-submission>
+  <div class="feedback__submission submission-form-container">
+    <div class="submission-form-container__inputs">
+      <submission-input
+        @input="saveInput"
+        :input-text="userInput.text"
+        :saved="saved"
+        :final="final"
+        :placeholder="placeholder"
+        :reopen="reopenSubmission"
+      ></submission-input>
     </div>
+
+    <div class="submission-form-container__actions" v-if="!final">
+      <button class="submission-form-container__submit button button--primary button--white-bg"
+              @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}"
+          show-trash-icon
+          v-on:trash="changeDocumentUrl('')"
+        ></document-block>
+      </div>
+
+      <simple-file-upload
+        v-if="allowsDocuments"
+        v-on:link-change-url="changeDocumentUrl"
+        :value="userInput.document"
+        class="submission-form-container__document"
+      ></simple-file-upload>
+      <slot></slot>
+    </div>
+
+    <final-submission
+      v-if="final"
+      :user-input="userInput"
+      :shared-msg="sharedMsg"
+      @reopen="$emit('reopen')"></final-submission>
+  </div>
 </template>
 
 <script>
@@ -62,6 +67,10 @@
       action: String,
       reopen: Function,
       document: String,
+      spellcheck: {
+        tyoe: Boolean,
+        default: false
+      },
       sharedMsg: String
     },
 
@@ -90,34 +99,34 @@
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_mixins.scss';
+  @import '@/styles/_mixins.scss';
 
-.submission-form-container {
+  .submission-form-container {
 
-  @include input-box-shadow;
-  background-color: $color-white;
-  border-radius: $input-border-radius;
-  border: 1px solid $color-silver;
-  padding: $medium-spacing;
+    @include input-box-shadow;
+    background-color: $color-white;
+    border-radius: $input-border-radius;
+    border: 1px solid $color-silver;
+    padding: $medium-spacing;
 
-  &__inputs {
-    margin-bottom: 12px;
-  }
+    &__inputs {
+      margin-bottom: 12px;
+    }
 
-  &__submit {
-    margin-right: $medium-spacing;
-  }
+    &__submit {
+      margin-right: $medium-spacing;
+    }
 
-  &__actions {
-    display: flex;
-    align-items: center;
-  }
+    &__actions {
+      display: flex;
+      align-items: center;
+    }
 
-  &__document {
-    &:hover {
-      cursor: pointer;
+    &__document {
+      &:hover {
+        cursor: pointer;
+      }
     }
   }
-}
 
 </style>
diff --git a/client/src/graphql/gql/mutations/spellCheck.gql b/client/src/graphql/gql/mutations/spellCheck.gql
new file mode 100644
index 00000000..db54804b
--- /dev/null
+++ b/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
+    }
+  }
+}
+
diff --git a/client/src/styles/_taskbase.scss b/client/src/styles/_taskbase.scss
new file mode 100644
index 00000000..64f13107
--- /dev/null
+++ b/client/src/styles/_taskbase.scss
@@ -0,0 +1,5 @@
+.taskbase {
+  &__correction {
+    background: yellow;
+  }
+}
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 62d4cf26..00e4bd68 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -22,3 +22,4 @@
 @import "public-page";
 @import "student-submission";
 @import "module-activity";
+@import "taskbase";