feat: assignment description en lp editen is mogelijk

frontend/src/components/GroupProgressRow.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
+import { computed } from "vue";
+import type { Language } from "@/data-objects/language.ts";
+import { calculateProgress } from "@/utils/assignment-utils.ts";
+
+const props = defineProps<{
+    groupNumber: number;
+    learningPath: string;
+    language: Language;
+    assignmentId: number;
+    classId: string;
+}>();
+
+const query = useGetLearningPathQuery(
+    () => props.learningPath,
+    () => props.language,
+    () => ({
+        forGroup: props.groupNumber,
+        assignmentNo: props.assignmentId,
+        classId: props.classId,
+    }),
+);
+
+const progress = computed(() => {
+    if (!query.data.value) return 0;
+    return calculateProgress(query.data.value);
+});
+
+const progressColor = computed(() => {
+    if (progress.value < 50) return "error";
+    if (progress.value < 80) return "warning";
+    return "success";
+});
+</script>
+
+<template>
+    <v-progress-linear
+        :model-value="progress"
+        :color="progressColor"
+        height="25"
+    >
+        <template v-slot:default="{ value }">
+            <strong>{{ Math.ceil(value) }}%</strong>
+        </template>
+    </v-progress-linear>
+</template>

frontend/src/components/GroupSubmissionStatus.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import { useAssignmentSubmissionsQuery } from "@/queries/assignments.ts";
+import type { SubmissionsResponse } from "@/controllers/submissions.ts";
+
+const props = defineProps<{
+    group: object;
+    assignmentId: number;
+    classId: string;
+    goToGroupSubmissionLink: (groupNo: number) => void;
+}>();
+
+const { t } = useI18n();
+const submissionsQuery = useAssignmentSubmissionsQuery(
+    () => props.classId,
+    () => props.assignmentId,
+    () => props.group.originalGroupNo,
+    () => true,
+);
+</script>
+
+<template>
+    <using-query-result
+        :query-result="submissionsQuery"
+        v-slot="{ data }: { data: SubmissionsResponse }"
+    >
+        <v-btn
+            :color="data.submissions.length > 0 ? 'green' : 'red'"
+            variant="text"
+            :to="data.submissions.length > 0 ? goToGroupSubmissionLink(props.group.groupNo) : undefined"
+            :disabled="data.submissions.length === 0"
+        >
+            {{ data.submissions.length > 0 ? t("submission") : t("noSubmissionsYet") }}
+        </v-btn>
+    </using-query-result>
+</template>