From 2d280d9ff8d81e498d5d9d9361c4e06dc3fb7e2d Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 20 Mar 2024 20:23:58 +0100
Subject: [PATCH] Fix reactivity bug

---
 .../content-blocks/assignment/Assignment.vue     | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 45b18891..d60bcdcf 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -42,10 +42,11 @@
 
       <p
         class="assignment__feedback"
-        v-if="assignment.submission.submissionFeedback"
+        v-if="assignment.submission?.submissionFeedback"
         v-html="feedbackText"
       />
     </template>
+
     <template v-if="!isStudent && assignment.id">
       <router-link
         :to="{ name: 'submissions', params: { id: assignment.id } }"
@@ -58,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
+import { defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useMutation, useQuery } from '@vue/apollo-composable';
 import { graphql } from '@/__generated__';
@@ -91,7 +92,7 @@ const initialSubmission = {
   document: '',
   final: false,
 };
-const assignment = reactive({ submission: initialSubmission });
+const assignment = ref({ submission: initialSubmission });
 const corrections = ref('');
 const unsaved = ref(false);
 const saving = ref(0);
@@ -264,9 +265,12 @@ const unmark = () => {
 
 onResult(async () => {
   const { assignment: loadedAssignment } = result.value;
+
   assignment.value = {
     ...loadedAssignment,
   };
+  await nextTick();
+
   assignment.value.submission = Object.assign(initialSubmission, assignment.value.submission);
 
   if (assignmentDiv.value) {
@@ -392,9 +396,9 @@ const saveInput = (answer: string) => {
   corrections.value = '';
   unsaved.value = true;
   /*
-      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
-     */
+        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
+       */
   assignment.value.submission.text = answer;
   _save(assignment.value.submission);