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

style: fix linting issues met Prettier

Browse source
This commit is contained in:
Lint Action 2025-04-18 23:36:22 +00:00
parent af8c783a26
commit 5168ceaee0
56 changed files with 680 additions and 741 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,9 +3,9 @@
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 { computed, ref } from "vue";
import authService from "@/services/auth/auth-service.ts";
import type {SubmissionData} from "@/views/learning-paths/learning-object/submission-data";
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";
@ -14,8 +14,8 @@
const props = defineProps<{
hruid: string;
language: Language;
version: number,
group?: {forGroup: number, assignmentNo: number, classId: string}
version: number;
group?: { forGroup: number; assignmentNo: number; classId: string };
}>();
const learningObjectHtmlQueryResult: UseQueryReturnType<Document, Error> = useLearningObjectHTMLQuery(
@ -35,7 +35,7 @@
:learning-object-content="learningPathHtml.data"
v-model:submission-data="currentSubmission"
/>
<div class="content-submissions-spacer"/>
<div class="content-submissions-spacer" />
<learning-object-submissions-view
v-if="props.group"
:group="props.group"
@ -48,26 +48,26 @@
</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;
}
: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>

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

@ -1,32 +1,32 @@
<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";
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
learningObjectContent: Document;
submissionData?: SubmissionData;
}>();
const emit = defineEmits<{
(e: "update:submissionData", value: SubmissionData): void
(e: "update:submissionData", value: SubmissionData): void;
}>();
const submissionData = computed<SubmissionData | undefined>({
get: () => props.submissionData,
set: (v?: SubmissionData) => v ? emit('update:submissionData', v) : undefined,
set: (v?: SubmissionData) => (v ? emit("update:submissionData", v) : undefined),
});
function forEachQuestion(
doAction: (questionIndex: number, questionName: string, questionType: string, questionElement: Element) => void
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"))
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;
@ -39,12 +39,9 @@
function attachQuestionListeners(): void {
forEachQuestion((index, _name, type, element) => {
getGiftAdapterForType(type)?.installListener(
element,
(newAnswer) => {
submissionData.value = copyArrayWith(index, newAnswer, submissionData.value ?? [])
}
);
getGiftAdapterForType(type)?.installListener(element, (newAnswer) => {
submissionData.value = copyArrayWith(index, newAnswer, submissionData.value ?? []);
});
});
}
@ -62,19 +59,25 @@
onMounted(() =>
nextTick(() => {
attachQuestionListeners()
attachQuestionListeners();
setAnswers(props.submissionData ?? []);
})
}),
);
watch(() => props.learningObjectContent, async () => {
await nextTick();
attachQuestionListeners();
});
watch(() => props.submissionData, async () => {
await nextTick();
setAnswers(props.submissionData ?? []);
});
watch(
() => props.learningObjectContent,
async () => {
await nextTick();
attachQuestionListeners();
},
);
watch(
() => props.submissionData,
async () => {
await nextTick();
setAnswers(props.submissionData ?? []);
},
);
</script>
<template>
@ -84,5 +87,4 @@
></div>
</template>
<style scoped>
</style>
<style scoped></style>

54
frontend/src/views/learning-paths/learning-object/submissions/LearningObjectSubmissionsTable.vue
View file

@ -1,36 +1,37 @@
<script setup lang="ts">
import type {SubmissionDTO} from "@dwengo-1/common/interfaces/submission";
import {computed} from "vue";
import {useI18n} from "vue-i18n";
import type { SubmissionDTO } from "@dwengo-1/common/interfaces/submission";
import { computed } from "vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps<{
allSubmissions: SubmissionDTO[]
allSubmissions: SubmissionDTO[];
}>();
const emit = defineEmits<{
(e: "submission-selected", submission: SubmissionDTO): void
(e: "submission-selected", submission: SubmissionDTO): void;
}>();
const headers = computed(() => [
{ title: "#", value: "submissionNo", width: "50px" },
{ title: t("submittedBy"), value: "submittedBy" },
{ title: t("timestamp"), value: "timestamp"},
{ title: t("timestamp"), value: "timestamp" },
{ title: "", key: "action", width: "70px", sortable: false },
]);
const data = computed(() => [...props.allSubmissions]
.sort((a, b) => (a.submissionNumber ?? 0) - (b.submissionNumber ?? 0))
.map((submission, index) => ({
submissionNo: index + 1,
submittedBy: `${submission.submitter.firstName} ${submission.submitter.lastName}`,
timestamp: submission.time ? new Date(submission.time).toLocaleString(): "-",
dto: submission
})
));
const data = computed(() =>
[...props.allSubmissions]
.sort((a, b) => (a.submissionNumber ?? 0) - (b.submissionNumber ?? 0))
.map((submission, index) => ({
submissionNo: index + 1,
submittedBy: `${submission.submitter.firstName} ${submission.submitter.lastName}`,
timestamp: submission.time ? new Date(submission.time).toLocaleString() : "-",
dto: submission,
})),
);
function selectSubmission(submission: SubmissionDTO) {
emit('submission-selected', submission);
emit("submission-selected", submission);
}
</script>
@ -38,14 +39,19 @@
<v-card>
<v-card-title>{{ t("groupSubmissions") }}</v-card-title>
<v-card-text>
<v-data-table :headers="headers"
:items="data"
density="compact"
hide-default-footer
:no-data-text="t('noSubmissionsYet')"
<v-data-table
:headers="headers"
:items="data"
density="compact"
hide-default-footer
:no-data-text="t('noSubmissionsYet')"
>
<template v-slot:item.action="{ item }">
<v-btn density="compact" variant="plain" @click="selectSubmission(item.dto)">
<v-btn
density="compact"
variant="plain"
@click="selectSubmission(item.dto)"
>
{{ t("loadSubmission") }}
</v-btn>
</template>
@ -54,6 +60,4 @@
</v-card>
</template>
<style scoped>
</style>
<style scoped></style>

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

@ -1,26 +1,25 @@
<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 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 {computed, watch} from "vue";
import LearningObjectSubmissionsTable
from "@/views/learning-paths/learning-object/submissions/LearningObjectSubmissionsTable.vue";
import {useI18n} from "vue-i18n";
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,
submissionData?: SubmissionData;
hruid: string;
language: Language;
version: number,
group: {forGroup: number, assignmentNo: number, classId: string}
version: number;
group: { forGroup: number; assignmentNo: number; classId: string };
}>();
const emit = defineEmits<{
(e: "update:submissionData", value: SubmissionData): void
(e: "update:submissionData", value: SubmissionData): void;
}>();
const submissionQuery = useSubmissionsQuery(
@ -30,7 +29,7 @@
() => props.group.classId,
() => props.group.assignmentNo,
() => props.group.forGroup,
() => true
() => true,
);
function emitSubmissionData(submissionData: SubmissionData) {
@ -58,17 +57,16 @@
return JSON.parse(submissions[submissions.length - 1].content);
});
const showSubmissionTable = computed(() =>
props.submissionData !== undefined && props.submissionData.length > 0
);
const showSubmissionTable = computed(() => props.submissionData !== undefined && props.submissionData.length > 0);
const showIsDoneMessage = computed(() =>
lastSubmission.value !== undefined && lastSubmission.value.length === 0
);
const showIsDoneMessage = computed(() => lastSubmission.value !== undefined && lastSubmission.value.length === 0);
</script>
<template>
<using-query-result :query-result="submissionQuery" v-slot="submissions: { data: SubmissionDTO[] }">
<using-query-result
:query-result="submissionQuery"
v-slot="submissions: { data: SubmissionDTO[] }"
>
<submit-button
:hruid="props.hruid"
:language="props.language"
@ -78,12 +76,13 @@
: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
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"
@ -94,7 +93,7 @@
</template>
<style scoped>
.submit-submissions-spacer {
height: 20px;
}
.submit-submissions-spacer {
height: 20px;
}
</style>

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

@ -1,26 +1,26 @@
<script setup lang="ts">
import {computed} from "vue";
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";
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[],
submissionData?: SubmissionData;
submissions: SubmissionDTO[];
hruid: string;
language: Language;
version: number,
group: {forGroup: number, assignmentNo: number, classId: string}
version: number;
group: { forGroup: number; assignmentNo: number; classId: string };
}>();
const {
@ -28,7 +28,7 @@
isError: submissionFailed,
error: submissionError,
isSuccess: submissionSuccess,
mutate: submitSolution
mutate: submitSolution,
} = useCreateSubmissionMutation();
const isStudent = computed(() => authService.authState.activeRole === "student");
@ -37,16 +37,13 @@
if (!props.submissionData || props.submissions === undefined) {
return true;
}
if (props.submissionData.some(answer => answer === null)) {
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
);
return deepEquals(JSON.parse(props.submissions[props.submissions.length - 1].content), props.submissionData);
});
function submitCurrentAnswer(): void {
@ -55,25 +52,25 @@
const learningObjectIdentifier: LearningObjectIdentifierDTO = {
hruid: props.hruid,
language: props.language as Language,
version: props.version
version: props.version,
};
const submitter: StudentDTO = {
id: currentUser.preferred_username!,
username: currentUser.preferred_username!,
firstName: currentUser.given_name!,
lastName: currentUser.family_name!
lastName: currentUser.family_name!,
};
const group: GroupDTO = {
class: classId,
assignment: assignmentNo,
groupNumber: forGroup
}
groupNumber: forGroup,
};
const submission: SubmissionDTO = {
learningObjectIdentifier,
submitter,
group,
content: JSON.stringify(props.submissionData)
}
content: JSON.stringify(props.submissionData),
};
submitSolution({ data: submission });
}
@ -86,17 +83,16 @@
</script>
<template>
<v-btn v-if="isStudent && !isSubmitDisabled"
prepend-icon="mdi-check"
variant="elevated"
:loading="submissionIsPending"
:disabled="isSubmitDisabled"
@click="submitCurrentAnswer()"
<v-btn
v-if="isStudent && !isSubmitDisabled"
prepend-icon="mdi-check"
variant="elevated"
:loading="submissionIsPending"
:disabled="isSubmitDisabled"
@click="submitCurrentAnswer()"
>
{{ buttonText }}
</v-btn>
</template>
<style scoped>
</style>
<style scoped></style>