From b7a009972f772a0fce940bf91be268e65dde06e5 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 20 Mar 2024 14:25:30 +0100
Subject: [PATCH 1/3] Fix Assignment bug

---
 client/src/components/ContentBlock.vue                 |  2 --
 .../content-blocks/assignment/Assignment.vue           | 10 +++++-----
 client/src/graphql/cache.ts                            |  2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 85f18fbb..edde4667 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -315,8 +315,6 @@ const createHighlight = createHighlightCurry({
 
 const isNested = computed(() => props.contentBlock.root); // if it's nested, a the parent has the root propert
 onMounted(() => {
-  log.debug('onMounted ContentBlock called');
-
   const element = contentBlockDiv.value;
 
   if (element !== null) {
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index 0b6d4208..45b18891 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -58,7 +58,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';
+import { defineAsyncComponent, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
 import { useMutation, useQuery } from '@vue/apollo-composable';
 import { graphql } from '@/__generated__';
@@ -91,7 +91,7 @@ const initialSubmission = {
   document: '',
   final: false,
 };
-const assignment = ref({ submission: initialSubmission });
+const assignment = reactive({ submission: initialSubmission });
 const corrections = ref('');
 const unsaved = ref(false);
 const saving = ref(0);
@@ -392,9 +392,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);
 
diff --git a/client/src/graphql/cache.ts b/client/src/graphql/cache.ts
index 6acec8eb..84f8de3f 100644
--- a/client/src/graphql/cache.ts
+++ b/client/src/graphql/cache.ts
@@ -12,7 +12,7 @@ const languageVar = makeVar('de');
 const idToRefFactory =
   (__typename: string) =>
   (_, { args, toReference }) => {
-    log.debug(`Referencing ${__typename} with ${args.id}`);
+    //log.debug(`Referencing ${__typename} with ${args.id}`);
     return toReference({
       __typename,
       id: args.id,

From ae09d9a1ef16f06a907831724e378c9170658301 Mon Sep 17 00:00:00 2001
From: Lorenz Padberg <lorenz.padberg@iterativ.ch>
Date: Wed, 20 Mar 2024 14:34:20 +0100
Subject: [PATCH 2/3] Fix lint

---
 client/src/components/ContentBlock.vue | 1 -
 client/src/graphql/cache.ts            | 1 -
 2 files changed, 2 deletions(-)

diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index edde4667..659939a7 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -134,7 +134,6 @@ import {
   SelectionHandlerType,
 } from '@/helpers/highlight';
 import { graphql } from '@/__generated__';
-import log from 'loglevel';
 import highlightSidebar from '@/helpers/highlight-sidebar';
 import { doUpdateHighlight } from '@/graphql/mutations';
 import { AddContentHighlightArgument } from '@/__generated__/graphql';
diff --git a/client/src/graphql/cache.ts b/client/src/graphql/cache.ts
index 84f8de3f..58220c53 100644
--- a/client/src/graphql/cache.ts
+++ b/client/src/graphql/cache.ts
@@ -1,6 +1,5 @@
 import { ContentBlockNode, HighlightNode } from '@/__generated__/graphql';
 import { makeVar, InMemoryCache } from '@apollo/client/core';
-import log from 'loglevel';
 
 const showNavigationSidebarVar = makeVar(false);
 const showProfileSidebarVar = makeVar(false);

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 3/3] 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);