feat(backend): Overzicht over submissions toegevoegd.

frontend/src/views/learning-paths/learning-object/submissions/LearningObjectSubmissionsView.vue

@@ -5,7 +5,12 @@
     import {useSubmissionsQuery} from "@/queries/submissions.ts";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
     import SubmitButton from "@/views/learning-paths/learning-object/submissions/SubmitButton.vue";
-    import {watch} from "vue";
+    import {computed, watch} from "vue";
+    import LearningObjectSubmissionsTable
+        from "@/views/learning-paths/learning-object/submissions/LearningObjectSubmissionsTable.vue";
+    import {useI18n} from "vue-i18n";
+
+    const { t } = useI18n();
 
     const props = defineProps<{
         submissionData?: SubmissionData,
@@ -28,17 +33,38 @@
         () => true
     );
 
-    function loadSubmission(submission: SubmissionDTO) {
-        emit("update:submissionData", JSON.parse(submission.content));
-        console.log(`emitted: ${JSON.parse(submission.content)}`);
+    function emitSubmissionData(submissionData: SubmissionData) {
+        emit("update:submissionData", submissionData);
+    }
+
+    function emitSubmission(submission: SubmissionDTO) {
+        emitSubmissionData(JSON.parse(submission.content));
     }
 
     watch(submissionQuery.data, () => {
         const submissions = submissionQuery.data.value;
         if (submissions && submissions.length > 0) {
-            loadSubmission(submissions[submissions.length - 1]);
+            emitSubmission(submissions[submissions.length - 1]);
+        } else {
+            emitSubmissionData([]);
         }
     });
+
+    const lastSubmission = computed<SubmissionData>(() => {
+        const submissions = submissionQuery.data.value;
+        if (!submissions || submissions.length === 0) {
+            return undefined;
+        }
+        return JSON.parse(submissions[submissions.length - 1].content);
+    });
+
+    const showSubmissionTable = computed(() =>
+        props.submissionData !== undefined && props.submissionData.length > 0
+    );
+
+    const showIsDoneMessage = computed(() =>
+        lastSubmission.value !== undefined && lastSubmission.value.length === 0
+    );
 </script>
 
 <template>
@@ -51,8 +77,24 @@
             :submission-data="props.submissionData"
             :submissions="submissions.data"
         />
+        <div class="submit-submissions-spacer"></div>
+        <v-alert icon="mdi-check"
+                 :text="t('taskCompleted')"
+                 type="success"
+                 variant="tonal"
+                 density="compact"
+                 v-if="showIsDoneMessage"
+        ></v-alert>
+        <learning-object-submissions-table
+            v-if="submissionQuery.data && showSubmissionTable"
+            :all-submissions="submissions.data"
+            @submission-selected="emitSubmission"
+        />
     </using-query-result>
 </template>
 
 <style scoped>
+.submit-submissions-spacer {
+    height: 20px;
+}
 </style>