Add emojis

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

@@ -16,6 +16,7 @@
           @click="$emit('turnIn')"
         >{{action}}
         </button>
+        <slot></slot>
       </div>
 
       <final-submission

client/src/pages/studentSubmission.vue

@@ -14,17 +14,27 @@
       </p>
       <p class="article-content__text" v-html="text"></p>
     </div>
-      <div class="feedback__submission">
-        <feedback-form
-          @turnIn="turnIn"
-          @saveInput="saveInput"
-          @reopen="reopen"
-          :user-input="studentSubmission.submissionfeedback"
-          :placholder="'Feedback erfassen'"
-          :action="'Feedback teilen'"
-          :saved="!unsaved"
-          />
-      </div>
+    <div class="feedback-submission">
+      <feedback-form
+        @turnIn="turnIn"
+        @saveInput="saveInput"
+        @reopen="reopen"
+        :user-input="studentSubmission.submissionfeedback"
+        :placholder="'Feedback erfassen'"
+        :action="'Feedback teilen'"
+        :saved="!unsaved"
+        >
+        <div v-if="!final" class="feedback-submission__emojis emojis">
+          <span @click="addEmoji('😀')">😀</span>
+          <span @click="addEmoji('🤮')">🤮</span>
+          <span @click="addEmoji('🤩')">🤩</span>
+          <span @click="addEmoji('😎')">😎</span>
+          <span @click="addEmoji('🤔')">🤔</span>
+          <span@click="addEmoji('👍🏻')">👍🏻</span>
+          <span @click="addEmoji('👎🏻')">👎🏻</span>
+        </div>
+        </feedback-form>
+    </div>
   </div>
 </template>
 
@@ -69,6 +79,10 @@
     },
 
     methods: {
+      addEmoji(emoji) {
+        const feedbackText = this.studentSubmission.submissionfeedback.text + emoji;
+        this.updateFeedbackText(feedbackText);
+      },
       _save: debounce(function () {
         const that = this;
 
@@ -113,13 +127,10 @@
           We update the assignment on this component, so the changes are reflected on it. The server does not return
           the updated entity, to prevent the UI to update when the user is entering his input
          */
-        this.studentSubmission = Object.assign({}, this.studentSubmission, {
-          submissionfeedback: Object.assign({}, this.studentSubmission.submissionfeedback, {text: feedbackText})
-        })
+        this.updateFeedbackText(feedbackText);
         this._save();
       },
       turnIn() {
-        console.log('returnInopen')
         this.$apollo.mutate({
           mutation: UPDATE_FEEDBACK_MUTATION,
           variables: {
@@ -151,6 +162,11 @@
           }
         });
       },
+      updateFeedbackText(text) {
+        this.studentSubmission = Object.assign({}, this.studentSubmission, {
+          submissionfeedback: Object.assign({}, this.studentSubmission.submissionfeedback, {text: text})
+        })
+      }
     },
 
     data() {
@@ -178,6 +194,7 @@
 </script>
 
 <style scoped lang="scss">
+  @import "@/styles/_functions.scss";
   .article-content {
     &__document {
       margin-bottom: 1rem;
@@ -187,4 +204,8 @@
       margin-bottom: 1em;
     }
   }
+
+  .emojis {
+    font-size: toRem(24px);
+  }
 </style>

server/assignments/schema/mutations.py

@@ -52,7 +52,7 @@ class UpdateSubmissionFeedback(relay.ClientIDMutation):
         (submission_feedback, created) = SubmissionFeedback.objects.get_or_create(teacher=user,
                                                                                   student_submission_id=student_submission_id)
 
-        submission_feedback.final = submission_feedback_data.get('final')
+        submission_feedback.final = submission_feedback_data.get('final') or submission_feedback.final
         submission_feedback.text = submission_feedback_data.get('text')
         submission_feedback.save()