tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat(backend): De meest recente indiening wordt automatisch ingeladen.

Browse source
This commit is contained in:
Gerald Schmittinger 2025-04-18 12:37:17 +02:00
parent 1685c518b6
commit 63c3d6aaa0
18 changed files with 406 additions and 263 deletions
Download patch file Download diff file Expand all files Collapse all files

26
frontend/src/i18n/locale/de.json
View file

@ -1,13 +1,13 @@
{
"welcome": "Willkommen",
"student": "schüler",
"teacher": "lehrer",
"student": "Schüler",
"teacher": "Lehrer",
"assignments": "Aufgaben",
"classes": "Klasses",
"classes": "Klassen",
"discussions": "Diskussionen",
"login": "einloggen",
"logout": "ausloggen",
"cancel": "kündigen",
"cancel": "abbrechen",
"logoutVerification": "Sind Sie sicher, dass Sie sich abmelden wollen?",
"homeTitle": "Unsere Stärken",
"homeIntroduction1": "Wir entwickeln innovative Workshops und Bildungsressourcen, die wir in Zusammenarbeit mit Lehrern und Freiwilligen Schülern auf der ganzen Welt zur Verfügung stellen. Unsere Train-the-Trainer-Sitzungen ermöglichen es ihnen, unsere praktischen Workshops an die Schüler weiterzugeben.",
@ -23,10 +23,10 @@
"submitCode": "senden",
"members": "Mitglieder",
"themes": "Themen",
"choose-theme": "Wähle ein thema",
"choose-theme": "Wählen Sie ein Thema",
"choose-age": "Alter auswählen",
"theme-options": {
"all": "Alle themen",
"all": "Alle Themen",
"culture": "Kultur",
"electricity-and-mechanics": "Elektrizität und Mechanik",
"nature-and-climate": "Natur und Klima",
@ -37,11 +37,11 @@
"algorithms": "Algorithmisches Denken"
},
"age-options": {
"all": "Alle altersgruppen",
"all": "Alle Altersgruppen",
"primary-school": "Grundschule",
"lower-secondary": "12-14 jahre alt",
"upper-secondary": "14-16 jahre alt",
"high-school": "16-18 jahre alt",
"lower-secondary": "12-14 Jahre alt",
"upper-secondary": "14-16 Jahre alt",
"high-school": "16-18 Jahre alt",
"older": "18 und älter"
},
"read-more": "Mehr lesen",
@ -73,7 +73,9 @@
"accept": "akzeptieren",
"deny": "ablehnen",
"sent": "sent",
"failed": "gescheitert",
"failed": "fehlgeschlagen",
"wrong": "etwas ist schief gelaufen",
"created": "erstellt"
"created": "erstellt",
"submit": "Einreichen",
"markAsDone": "Als fertig markieren"
}

4
frontend/src/i18n/locale/en.json
View file

@ -75,5 +75,7 @@
"sent": "sent",
"failed": "failed",
"wrong": "something went wrong",
"created": "created"
"created": "created",
"submit": "Submit",
"markAsDone": "Mark as done"
}

4
frontend/src/i18n/locale/nl.json
View file

@ -75,5 +75,7 @@
"sent": "verzonden",
"failed": "mislukt",
"wrong": "er ging iets verkeerd",
"created": "gecreëerd"
"created": "gecreëerd",
"submit": "Indienen",
"markAsDone": "Markeren als afgewerkt"
}

4
frontend/src/queries/learning-paths.ts
View file

@ -10,13 +10,11 @@ const learningPathController = getLearningPathController();
export function useGetLearningPathQuery(
hruid: MaybeRefOrGetter<string>,
language: MaybeRefOrGetter<Language>,
forGroup?: MaybeRefOrGetter<{forGroup: number, assignmentNo: number, classId: string}>,
forGroup?: MaybeRefOrGetter<{forGroup: number, assignmentNo: number, classId: string} | undefined>,
): UseQueryReturnType<LearningPath, Error> {
return useQuery({
queryKey: [LEARNING_PATH_KEY, "get", toValue(hruid), toValue(language), toValue(forGroup)],
queryFn: async () => {
console.log("queryKey");
console.log([LEARNING_PATH_KEY, "get", toValue(hruid), toValue(language), toValue(forGroup)]);
const [hruidVal, languageVal, forGroupVal] = [toValue(hruid), toValue(language), toValue(forGroup)];
return learningPathController.getBy(hruidVal, languageVal, forGroupVal);
},

79
frontend/src/queries/submissions.ts
View file

@ -1,4 +1,4 @@
import { SubmissionController, type SubmissionResponse, type SubmissionsResponse } from "@/controllers/submissions";
import { SubmissionController, type SubmissionResponse } from "@/controllers/submissions";
import type { SubmissionDTO } from "@dwengo-1/common/interfaces/submission";
import {
QueryClient,
@ -13,17 +13,7 @@ import {LEARNING_PATH_KEY} from "@/queries/learning-paths.ts";
import {LEARNING_OBJECT_KEY} from "@/queries/learning-objects.ts";
import type {Language} from "@dwengo-1/common/util/language";
function submissionsQueryKey(
hruid: string,
language: Language,
version: number,
classid: string,
assignmentNumber: number,
groupNumber?: number,
full?: boolean
) {
return ["submissions", hruid, language, version, classid, assignmentNumber, groupNumber, full ?? false];
}
export const SUBMISSION_KEY = "submissions";
function submissionQueryKey(
hruid: string,
@ -72,19 +62,8 @@ export async function invalidateAllSubmissionKeys(
});
}
function checkEnabled(
classid: string | undefined,
assignmentNumber: number | undefined,
groupNumber: number | undefined,
submissionNumber?: number | undefined,
submissionNumberRequired: boolean = false
): boolean {
return (
Boolean(classid) &&
!isNaN(Number(groupNumber)) &&
!isNaN(Number(assignmentNumber)) &&
(!isNaN(Number(submissionNumber)) || !submissionNumberRequired)
);
function checkEnabled(properties: MaybeRefOrGetter<unknown>[]): boolean {
return properties.every(prop => !!toValue(prop));
}
function toValues(
@ -110,31 +89,24 @@ export function useSubmissionsQuery(
assignmentNumber: MaybeRefOrGetter<number | undefined>,
groupNumber: MaybeRefOrGetter<number | undefined>,
full: MaybeRefOrGetter<boolean> = true,
): UseQueryReturnType<SubmissionsResponse, Error> {
const hruidVal = toValue(hruid);
const languageVal = toValue(language);
const versionVal = toValue(version);
const classIdVal = toValue(classid);
const assignmentNumberVal = toValue(assignmentNumber);
const groupNumberVal = toValue(groupNumber);
const fullVal = toValue(full);
): UseQueryReturnType<SubmissionDTO[], Error> {
return useQuery({
queryKey: computed(() =>
submissionsQueryKey(
hruidVal!,
languageVal!,
versionVal!,
classIdVal!,
assignmentNumberVal!,
groupNumberVal,
fullVal
)
),
queryFn: async () => new SubmissionController(hruidVal!).getAll(
languageVal!, versionVal!, classIdVal!, assignmentNumberVal!, groupNumberVal, fullVal
),
enabled: () => !!hruidVal && !!languageVal && !!versionVal && !!classIdVal && !!assignmentNumberVal,
queryKey: ["submissions", hruid, language, version, classid, assignmentNumber, groupNumber, full],
queryFn: async () => {
const hruidVal = toValue(hruid);
const languageVal = toValue(language);
const versionVal = toValue(version);
const classIdVal = toValue(classid);
const assignmentNumberVal = toValue(assignmentNumber);
const groupNumberVal = toValue(groupNumber);
const fullVal = toValue(full);
const response = await new SubmissionController(hruidVal!).getAll(
languageVal!, versionVal!, classIdVal!, assignmentNumberVal!, groupNumberVal, fullVal
);
return response ? response.submissions as SubmissionDTO[] : undefined;
},
enabled: () => checkEnabled([hruid, language, version, classid, assignmentNumber]),
});
}
@ -147,8 +119,6 @@ export function useSubmissionQuery(
groupNumber: MaybeRefOrGetter<number | undefined>,
submissionNumber: MaybeRefOrGetter<number | undefined>,
): UseQueryReturnType<SubmissionResponse, Error> {
const { cid, an, gn, sn, f } = toValues(classid, assignmentNumber, groupNumber, submissionNumber, true);
const hruidVal = toValue(hruid);
const languageVal = toValue(language);
const versionVal = toValue(version);
@ -192,11 +162,6 @@ export function useCreateSubmissionMutation(): UseMutationReturnType<
const {hruid, language, version} = response.submission.learningObjectIdentifier;
await invalidateAllSubmissionKeys(queryClient, hruid, language, version, cid, an, gn);
console.log("INVALIDATE");
console.log([
LEARNING_PATH_KEY, "get",
response.submission.learningObjectIdentifier.hruid,
]);
await queryClient.invalidateQueries({queryKey: [LEARNING_PATH_KEY, "get"]});
await queryClient.invalidateQueries({
@ -216,7 +181,7 @@ export function useDeleteSubmissionMutation(): UseMutationReturnType<
const queryClient = useQueryClient();
return useMutation({
mutationFn: async ({ cid, an, gn, sn }) => new SubmissionController(cid).deleteSubmission(sn),
mutationFn: async ({ cid, sn }) => new SubmissionController(cid).deleteSubmission(sn),
onSuccess: async (response) => {
if (!response.submission.group) {
await invalidateAllSubmissionKeys(queryClient);

2
frontend/src/router/index.ts
View file

@ -15,7 +15,7 @@ import LearningPathPage from "@/views/learning-paths/LearningPathPage.vue";
import LearningPathSearchPage from "@/views/learning-paths/LearningPathSearchPage.vue";
import UserHomePage from "@/views/homepage/UserHomePage.vue";
import SingleTheme from "@/views/SingleTheme.vue";
import LearningObjectView from "@/views/learning-paths/LearningObjectView.vue";
import LearningObjectView from "@/views/learning-paths/learning-object/LearningObjectView.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),

5
frontend/src/utils/array-utils.ts Normal file
View file

@ -0,0 +1,5 @@
export function copyArrayWith<T>(index: number, newValue: T, array: T[]) {
const copy = [...array];
copy[index] = newValue;
return copy;
}

20
frontend/src/utils/deep-equals.ts Normal file
View file

@ -0,0 +1,20 @@
export function deepEquals<T>(a: T, b: T): boolean {
if (a === b) return true;
if (typeof a !== 'object' || typeof b !== 'object' || a == null || b == null)
return false;
if (Array.isArray(a) !== Array.isArray(b)) return false;
if (Array.isArray(a) && Array.isArray(b)) {
if (a.length !== b.length) return false;
return a.every((val, i) => deepEquals(val, b[i]));
}
const keysA = Object.keys(a) as (keyof T)[];
const keysB = Object.keys(b) as (keyof T)[];
if (keysA.length !== keysB.length) return false;
return keysA.every(key => deepEquals(a[key], b[key]));
}

174
frontend/src/views/learning-paths/LearningObjectView.vue
View file

@ -1,174 +0,0 @@
<script setup lang="ts">
import { Language } from "@/data-objects/language.ts";
import type { UseQueryReturnType } from "@tanstack/vue-query";
import { useLearningObjectHTMLQuery } from "@/queries/learning-objects.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import {computed, nextTick, onMounted, reactive, watch} from "vue";
import {getGiftAdapterForType} from "@/views/learning-paths/gift-adapters/gift-adapters.ts";
import authService from "@/services/auth/auth-service.ts";
import {useCreateSubmissionMutation, useSubmissionsQuery} from "@/queries/submissions.ts";
import type {SubmissionDTO} from "@dwengo-1/common/dist/interfaces/submission.d.ts";
import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
import type {StudentDTO} from "@dwengo-1/common/interfaces/student";
import type {LearningObjectIdentifierDTO} from "@dwengo-1/common/interfaces/learning-content";
import type {UserProfile} from "oidc-client-ts";
const isStudent = computed(() => authService.authState.activeRole === "student");
const props = defineProps<{
hruid: string;
language: Language;
version: number,
group?: {forGroup: number, assignmentNo: number, classId: string}
}>();
const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLearningObjectHTMLQuery(
() => props.hruid,
() => props.language,
() => props.version,
);
const currentAnswer = reactive(<(string | number | object)[]>[]);
const {
isPending: submissionIsPending,
isError: submissionFailed,
error: submissionError,
isSuccess: submissionSuccess,
mutate: submitSolution
} = useCreateSubmissionMutation();
const {
isPending: existingSubmissionsIsPending,
isError: existingSubmissionsFailed,
error: existingSubmissionsError,
isSuccess: existingSubmissionsSuccess,
data: existingSubmissions
} = useSubmissionsQuery(
props.hruid,
props.language,
props.version,
props.group?.classId,
props.group?.assignmentNo,
props.group?.forGroup,
true
);
function submitCurrentAnswer(): void {
const { forGroup, assignmentNo, classId } = props.group!;
const currentUser: UserProfile = authService.authState.user!.profile;
const learningObjectIdentifier: LearningObjectIdentifierDTO = {
hruid: props.hruid,
language: props.language as Language,
version: props.version
};
const submitter: StudentDTO = {
id: currentUser.preferred_username!,
username: currentUser.preferred_username!,
firstName: currentUser.given_name!,
lastName: currentUser.family_name!
};
const group: GroupDTO = {
class: classId,
assignment: assignmentNo,
groupNumber: forGroup
}
const submission: SubmissionDTO = {
learningObjectIdentifier,
submitter,
group,
content: JSON.stringify(currentAnswer)
}
submitSolution({ data: submission });
}
function forEachQuestion(
doAction: (questionIndex: number, questionName: string, questionType: string, questionElement: Element) => void
) {
const questions = document.querySelectorAll(".gift-question");
questions.forEach(question => {
const name = question.id.match(/gift-q(\d+)/)?.[1]
const questionType = question.className.split(" ")
.find(it => it.startsWith("gift-question-type"))
?.match(/gift-question-type-([^ ]*)/)?.[1];
if (!name || isNaN(parseInt(name)) || !questionType) return;
const index = parseInt(name) - 1;
doAction(index, name, questionType, question);
});
}
function attachQuestionListeners() {
forEachQuestion((index, name, type, element) => {
getGiftAdapterForType(type)?.installListener(
element, (newAnswer) => currentAnswer[index] = newAnswer
);
});
}
function setAnswers(answers: (object | string | number)[]) {
forEachQuestion((index, name, type, element) => {
getGiftAdapterForType(type)?.setAnswer(element, answers[index]);
});
currentAnswer.splice(0, currentAnswer.length, ...answers);
}
onMounted(() => nextTick(() => attachQuestionListeners()));
watch(learningObjectHtmlQueryResult.data, async () => {
await nextTick();
attachQuestionListeners();
setAnswers([1]);
});
</script>
<template>
<using-query-result
:query-result="learningObjectHtmlQueryResult as UseQueryReturnType<Document, Error>"
v-slot="learningPathHtml: { data: Document }"
>
<div
class="learning-object-container"
v-html="learningPathHtml.data.body.innerHTML"
></div>
<p>Last submissions: {{ existingSubmissions }}</p>
<p>Your answer: {{ currentAnswer }}</p>
<v-btn v-if="isStudent && props.group"
prepend-icon="mdi-check"
variant="elevated"
:loading="submissionIsPending"
@click="submitCurrentAnswer()"
>
Submit
</v-btn>
</using-query-result>
</template>
<style scoped>
.learning-object-container {
padding: 20px;
}
:deep(hr) {
margin-top: 10px;
margin-bottom: 10px;
}
:deep(li) {
margin-left: 30px;
margin-top: 5px;
margin-bottom: 5px;
}
:deep(img) {
max-width: 80%;
}
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
margin-top: 10px;
}
</style>

23
frontend/src/views/learning-paths/LearningPathPage.vue
View file

@ -4,7 +4,7 @@
import { computed, type ComputedRef, ref } from "vue";
import type { LearningObject } from "@/data-objects/learning-objects/learning-object.ts";
import { useRoute } from "vue-router";
import LearningObjectView from "@/views/learning-paths/LearningObjectView.vue";
import LearningObjectView from "@/views/learning-paths/learning-object/LearningObjectView.vue";
import { useI18n } from "vue-i18n";
import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
@ -185,13 +185,15 @@
<learning-path-search-field></learning-path-search-field>
</div>
</div>
<learning-object-view
:hruid="currentNode.learningobjectHruid"
:language="currentNode.language"
:version="currentNode.version"
:group="forGroup"
v-if="currentNode"
></learning-object-view>
<div class="learning-object-view-container">
<learning-object-view
:hruid="currentNode.learningobjectHruid"
:language="currentNode.language"
:version="currentNode.version"
:group="forGroup"
v-if="currentNode"
></learning-object-view>
</div>
<div class="navigation-buttons-container">
<v-btn
prepend-icon="mdi-chevron-left"
@ -227,6 +229,11 @@
display: flex;
justify-content: space-between;
}
.learning-object-view-container {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.navigation-buttons-container {
padding: 20px;
display: flex;

2
frontend/src/views/learning-paths/gift-adapters/multiple-choice-question-adapter.ts
View file

@ -18,9 +18,7 @@ export const multipleChoiceQuestionAdapter: GiftAdapter = {
setAnswer(questionElement: Element, answer: string | number | object): void {
questionElement.querySelectorAll('input[type=radio]').forEach(element => {
const input = element as HTMLInputElement;
console.log(`input: ${input.value}, answer: ${answer}`);
input.checked = String(answer) === String(input.value);
console.log(input.checked);
});
}
}

73
frontend/src/views/learning-paths/learning-object/LearningObjectView.vue Normal file
View file

@ -0,0 +1,73 @@
<script setup lang="ts">
import { Language } from "@/data-objects/language.ts";
import type { UseQueryReturnType } from "@tanstack/vue-query";
import { useLearningObjectHTMLQuery } from "@/queries/learning-objects.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import {computed, ref} from "vue";
import authService from "@/services/auth/auth-service.ts";
import type {SubmissionData} from "@/views/learning-paths/learning-object/submission-data";
import LearningObjectContentView from "@/views/learning-paths/learning-object/content/LearningObjectContentView.vue";
import LearningObjectSubmissionsView from "@/views/learning-paths/learning-object/submissions/LearningObjectSubmissionsView.vue";
const isStudent = computed(() => authService.authState.activeRole === "student");
const props = defineProps<{
hruid: string;
language: Language;
version: number,
group?: {forGroup: number, assignmentNo: number, classId: string}
}>();
const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLearningObjectHTMLQuery(
() => props.hruid,
() => props.language,
() => props.version,
);
const currentSubmission = ref<SubmissionData>([]);
</script>
<template>
<using-query-result
:query-result="learningObjectHtmlQueryResult as UseQueryReturnType<Document, Error>"
v-slot="learningPathHtml: { data: Document }"
>
<learning-object-content-view
:learning-object-content="learningPathHtml.data"
v-model:submission-data="currentSubmission"
/>
<div class="content-submissions-spacer"/>
<learning-object-submissions-view
v-if="props.group"
:group="props.group"
:hruid="props.hruid"
:language="props.language"
:version="props.version"
v-model:submission-data="currentSubmission"
/>
</using-query-result>
</template>
<style scoped>
:deep(hr) {
margin-top: 10px;
margin-bottom: 10px;
}
:deep(li) {
margin-left: 30px;
margin-top: 5px;
margin-bottom: 5px;
}
:deep(img) {
max-width: 80%;
}
:deep(h2),
:deep(h3),
:deep(h4),
:deep(h5),
:deep(h6) {
margin-top: 10px;
}
.content-submissions-spacer {
height: 20px;
}
</style>

85
frontend/src/views/learning-paths/learning-object/content/LearningObjectContentView.vue Normal file
View file

@ -0,0 +1,85 @@
<script setup lang="ts">
import type {SubmissionData} from "@/views/learning-paths/learning-object/submission-data";
import {getGiftAdapterForType} from "@/views/learning-paths/gift-adapters/gift-adapters.ts";
import {computed, nextTick, onMounted, watch} from "vue";
import {copyArrayWith} from "@/utils/array-utils.ts";
const props = defineProps<{
learningObjectContent: Document
submissionData?: SubmissionData
}>();
const emit = defineEmits<{
(e: "update:submissionData", value: SubmissionData): void
}>();
const submissionData = computed<SubmissionData | undefined>({
get: () => props.submissionData,
set: (v?: SubmissionData) => v ? emit('update:submissionData', v) : undefined,
});
function forEachQuestion(
doAction: (questionIndex: number, questionName: string, questionType: string, questionElement: Element) => void
) {
const questions = document.querySelectorAll(".gift-question");
questions.forEach(question => {
const name = question.id.match(/gift-q(\d+)/)?.[1]
const questionType = question.className.split(" ")
.find(it => it.startsWith("gift-question-type"))
?.match(/gift-question-type-([^ ]*)/)?.[1];
if (!name || isNaN(parseInt(name)) || !questionType) return;
const index = parseInt(name) - 1;
doAction(index, name, questionType, question);
});
}
function attachQuestionListeners(): void {
let counter = 0;
forEachQuestion((index, _name, type, element) => {
getGiftAdapterForType(type)?.installListener(
element,
(newAnswer) => {
submissionData.value = copyArrayWith(index, newAnswer, submissionData.value ?? [])
}
);
counter++;
});
}
function setAnswers(answers: SubmissionData) {
forEachQuestion((index, name, type, element) => {
const answer = answers[index];
if (answer !== null && answer !== undefined) {
getGiftAdapterForType(type)?.setAnswer(element, answer);
} else if (answer === undefined) {
answers[index] = null;
}
});
submissionData.value = answers;
}
onMounted(() => nextTick(() => attachQuestionListeners()));
watch(() => props.learningObjectContent, async () => {
await nextTick();
attachQuestionListeners();
});
watch(() => props.submissionData, async () => {
await nextTick();
setAnswers(props.submissionData ?? []);
});
</script>
<template>
<div
class="learning-object-container"
v-html="learningObjectContent.body.innerHTML"
></div>
</template>
<style scoped>
</style>

1
frontend/src/views/learning-paths/learning-object/submission-data.d.ts vendored Normal file
View file

@ -0,0 +1 @@
export type SubmissionData = (string | number | object | null)[];

58
frontend/src/views/learning-paths/learning-object/submissions/LearningObjectSubmissionsView.vue Normal file
View file

@ -0,0 +1,58 @@
<script setup lang="ts">
import type {SubmissionData} from "@/views/learning-paths/learning-object/submission-data";
import type {SubmissionDTO} from "@dwengo-1/common/interfaces/submission";
import {Language} from "@/data-objects/language.ts";
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";
const props = defineProps<{
submissionData?: SubmissionData,
hruid: string;
language: Language;
version: number,
group: {forGroup: number, assignmentNo: number, classId: string}
}>();
const emit = defineEmits<{
(e: "update:submissionData", value: SubmissionData): void
}>();
const submissionQuery = useSubmissionsQuery(
() => props.hruid,
() => props.language,
() => props.version,
() => props.group.classId,
() => props.group.assignmentNo,
() => props.group.forGroup,
() => true
);
function loadSubmission(submission: SubmissionDTO) {
emit("update:submissionData", JSON.parse(submission.content));
console.log(`emitted: ${JSON.parse(submission.content)}`);
}
watch(submissionQuery.data, () => {
const submissions = submissionQuery.data.value;
if (submissions && submissions.length > 0) {
loadSubmission(submissions[submissions.length - 1]);
}
});
</script>
<template>
<using-query-result :query-result="submissionQuery" v-slot="submissions: { data: SubmissionDTO[] }">
<submit-button
:hruid="props.hruid"
:language="props.language"
:version="props.version"
:group="props.group"
:submission-data="props.submissionData"
:submissions="submissions.data"
/>
</using-query-result>
</template>
<style scoped>
</style>

102
frontend/src/views/learning-paths/learning-object/submissions/SubmitButton.vue Normal file
View file

@ -0,0 +1,102 @@
<script setup lang="ts">
import {computed} from "vue";
import authService from "@/services/auth/auth-service.ts";
import type {SubmissionData} from "@/views/learning-paths/learning-object/submission-data";
import {Language} from "@/data-objects/language.ts";
import type {SubmissionDTO} from "@dwengo-1/common/interfaces/submission";
import {useCreateSubmissionMutation} from "@/queries/submissions.ts";
import {deepEquals} from "@/utils/deep-equals.ts";
import type {UserProfile} from "oidc-client-ts";
import type {LearningObjectIdentifierDTO} from "@dwengo-1/common/interfaces/learning-content";
import type {StudentDTO} from "@dwengo-1/common/interfaces/student";
import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
import {useI18n} from "vue-i18n";
const { t } = useI18n();
const props = defineProps<{
submissionData?: SubmissionData,
submissions: SubmissionDTO[],
hruid: string;
language: Language;
version: number,
group: {forGroup: number, assignmentNo: number, classId: string}
}>();
const {
isPending: submissionIsPending,
isError: submissionFailed,
error: submissionError,
isSuccess: submissionSuccess,
mutate: submitSolution
} = useCreateSubmissionMutation();
const isStudent = computed(() => authService.authState.activeRole === "student");
const isSubmitDisabled = computed(() => {
if (!props.submissionData || props.submissions === undefined) {
return true;
}
if (props.submissionData.some(answer => answer === null)) {
return false;
}
if (props.submissions.length === 0) {
return false;
}
return deepEquals(
JSON.parse(props.submissions[props.submissions.length - 1].content),
props.submissionData
);
});
function submitCurrentAnswer(): void {
const { forGroup, assignmentNo, classId } = props.group!;
const currentUser: UserProfile = authService.authState.user!.profile;
const learningObjectIdentifier: LearningObjectIdentifierDTO = {
hruid: props.hruid,
language: props.language as Language,
version: props.version
};
const submitter: StudentDTO = {
id: currentUser.preferred_username!,
username: currentUser.preferred_username!,
firstName: currentUser.given_name!,
lastName: currentUser.family_name!
};
const group: GroupDTO = {
class: classId,
assignment: assignmentNo,
groupNumber: forGroup
}
const submission: SubmissionDTO = {
learningObjectIdentifier,
submitter,
group,
content: JSON.stringify(props.submissionData)
}
submitSolution({ data: submission });
}
const buttonText = computed(() => {
if (props.submissionData && props.submissionData.length === 0) {
return t("markAsDone");
}
return t("submit");
});
</script>
<template>
<v-btn v-if="isStudent"
prepend-icon="mdi-check"
variant="elevated"
:loading="submissionIsPending"
:disabled="isSubmitDisabled"
@click="submitCurrentAnswer()"
>
{{ buttonText }}
</v-btn>
</template>
<style scoped>
</style>