Show result in EdoniqTestBlock

client/src/pages/competence/CompetenceCertificateComponent.vue

@@ -3,7 +3,6 @@ import * as log from "loglevel";
 import type { CompetenceCertificate } from "@/types";
 import CompetenceAssignmentRow from "@/pages/competence/CompetenceAssignmentRow.vue";
 import { computed } from "vue";
-import type { StatusCount } from "@/components/ui/ItProgress.vue";
 import ItProgress from "@/components/ui/ItProgress.vue";
 import {
   assignmentsMaxEvaluationPoints,

client/src/pages/learningPath/learningContentPage/blocks/EdoniqTestBlock.vue

@@ -2,10 +2,17 @@
 import { useTranslation } from "i18next-vue";
 import ItCheckbox from "@/components/ui/ItCheckbox.vue";
 import LearningContentSimpleLayout from "@/pages/learningPath/learningContentPage/layouts/LearningContentSimpleLayout.vue";
-import type { LearningContentEdoniqTest } from "@/types";
+import type {
-import { ref } from "vue";
+  Assignment,
+  AssignmentCompletion,
+  LearningContentEdoniqTest,
+} from "@/types";
+import { computed, ref } from "vue";
 import * as log from "loglevel";
 import { itPost } from "@/fetchHelpers";
+import { useQuery } from "@urql/vue";
+import { ASSIGNMENT_COMPLETION_QUERY } from "@/graphql/queries";
+import { useCurrentCourseSession } from "@/composables";
 
 const { t } = useTranslation();
 
@@ -13,6 +20,29 @@ const props = defineProps<{
   content: LearningContentEdoniqTest;
 }>();
 
+const courseSession = useCurrentCourseSession();
+
+const queryResult = useQuery({
+  query: ASSIGNMENT_COMPLETION_QUERY,
+  variables: {
+    courseSessionId: courseSession.value.id.toString(),
+    assignmentId: props.content.content_assignment_id.toString(),
+    learningContentId: props.content.id.toString(),
+  },
+});
+
+const assignment = computed(
+  () => queryResult.data.value?.assignment as Assignment | undefined
+);
+const assignmentCompletion = computed(
+  () =>
+    queryResult.data.value?.assignment_completion as AssignmentCompletion | undefined
+);
+
+const completionStatus = computed(() => {
+  return assignmentCompletion.value?.completion_status ?? "IN_PROGRESS";
+});
+
 const termsAccepted = ref(false);
 const extendedTimeTest = ref(false);
 
@@ -33,45 +63,55 @@ async function startTest() {
     :learning-content="props.content"
   >
     <!-- eslint-disable vue/no-v-html -->
-    <div class="container-medium">
+    <div v-if="queryResult.data" class="container-medium">
-      <p
+      <div v-if="completionStatus !== 'IN_PROGRESS'">
-        v-if="props.content.description"
+        <div v-if="completionStatus === 'EVALUATION_SUBMITTED'">
-        class="default-wagtail-rich-text text-large my-4"
+          {{ $t("a.Bewertung") }}:
-        v-html="props.content.description"
+          {{ assignmentCompletion?.evaluation_points }}
-      ></p>
+          {{ $t("assignment.von x Punkten", { x: assignment?.max_points }) }}
-
+        </div>
-      <div class="my-8">
+        <div v-else>Ergebnisse abgeben, Bewertung ausstehend</div>
-        <ItCheckbox
-          v-if="props.content.checkbox_text"
-          :checkbox-item="{
-            label: props.content.checkbox_text,
-            value: termsAccepted,
-            checked: termsAccepted,
-          }"
-          @toggle="termsAccepted = !termsAccepted"
-        />
-      </div>
-      <div class="my-8">
-        <ItCheckbox
-          v-if="props.content.has_extended_time_test"
-          :checkbox-item="{
-            label: t('edoniqTest.qualifiesForExtendedTime'),
-            value: extendedTimeTest,
-            checked: extendedTimeTest,
-          }"
-          @toggle="extendedTimeTest = !extendedTimeTest"
-        />
       </div>
+      <div v-else>
+        <p
+          v-if="props.content.description"
+          class="default-wagtail-rich-text text-large my-4"
+          v-html="props.content.description"
+        ></p>
 
-      <div class="my-8">
+        <div class="my-8">
-        <button
+          <ItCheckbox
-          :disabled="!termsAccepted"
+            v-if="props.content.checkbox_text"
-          class="btn-primary inline-flex items-center"
+            :checkbox-item="{
-          @click="startTest()"
+              label: props.content.checkbox_text,
-        >
+              value: termsAccepted,
-          {{ $t("edoniqTest.startTest") }}
+              checked: termsAccepted,
-          <it-icon-external-link class="it-icon ml-2 h-5 w-5"></it-icon-external-link>
+            }"
-        </button>
+            @toggle="termsAccepted = !termsAccepted"
+          />
+        </div>
+        <div class="my-8">
+          <ItCheckbox
+            v-if="props.content.has_extended_time_test"
+            :checkbox-item="{
+              label: t('edoniqTest.qualifiesForExtendedTime'),
+              value: extendedTimeTest,
+              checked: extendedTimeTest,
+            }"
+            @toggle="extendedTimeTest = !extendedTimeTest"
+          />
+        </div>
+
+        <div class="my-8">
+          <button
+            :disabled="!termsAccepted"
+            class="btn-primary inline-flex items-center"
+            @click="startTest()"
+          >
+            {{ $t("edoniqTest.startTest") }}
+            <it-icon-external-link class="it-icon ml-2 h-5 w-5"></it-icon-external-link>
+          </button>
+        </div>
       </div>
     </div>
   </LearningContentSimpleLayout>