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-24 19:28:16 +00:00
parent b45fc47b06
commit 18e17e0133
9 changed files with 184 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

2
backend/src/data/questions/answer-repository.ts
View file

@ -15,7 +15,7 @@ export class AnswerRepository extends DwengoEntityRepository<Answer> {
await this.insert(answerEntity); await this.insert(answerEntity);
answerEntity.toQuestion = answer.toQuestion; answerEntity.toQuestion = answer.toQuestion;
answerEntity.author = answer.author; answerEntity.author = answer.author;
answerEntity.content = answer.content; answerEntity.content = answer.content;
return answerEntity; return answerEntity;
} }
public async findAllAnswersToQuestion(question: Question): Promise<Answer[]> { public async findAllAnswersToQuestion(question: Question): Promise<Answer[]> {

9
backend/src/services/questions.ts
View file

@ -89,9 +89,8 @@ export async function createQuestion(loId: LearningObjectIdentifier, questionDat
let assignment; let assignment;
if ((typeof questionData.inGroup.assignment === "number") && (typeof questionData.inGroup.class === "string")) { if (typeof questionData.inGroup.assignment === 'number' && typeof questionData.inGroup.class === 'string') {
assignment = await fetchAssignment(questionData.inGroup.class, assignment = await fetchAssignment(questionData.inGroup.class, questionData.inGroup.assignment);
questionData.inGroup.assignment);
} else { } else {
// TODO check if necessary and no conflicts to delete this if // TODO check if necessary and no conflicts to delete this if
const clazz = await getClassRepository().findById((questionData.inGroup.assignment as AssignmentDTO).within); const clazz = await getClassRepository().findById((questionData.inGroup.assignment as AssignmentDTO).within);
@ -99,14 +98,14 @@ export async function createQuestion(loId: LearningObjectIdentifier, questionDat
} }
const inGroup = await getGroupRepository().findByAssignmentAndGroupNumber(assignment, questionData.inGroup.groupNumber); const inGroup = await getGroupRepository().findByAssignmentAndGroupNumber(assignment, questionData.inGroup.groupNumber);
const question = await questionRepository.createQuestion({ const question = await questionRepository.createQuestion({
loId, loId,
author, author,
inGroup: inGroup!, inGroup: inGroup!,
content, content,
}); });
return mapToQuestionDTO(question); return mapToQuestionDTO(question);
} }

4
backend/tests/test_assets/questions/answers.testdata.ts
View file

@ -36,7 +36,7 @@ export function makeTestAnswers(em: EntityManager, teachers: Teacher[], question
toQuestion: getQuestion07(), toQuestion: getQuestion07(),
sequenceNumber: 1, sequenceNumber: 1,
timestamp: new Date(), timestamp: new Date(),
content: "this is a test answer" content: 'this is a test answer',
}); });
const answer05 = em.create(Answer, { const answer05 = em.create(Answer, {
@ -44,7 +44,7 @@ export function makeTestAnswers(em: EntityManager, teachers: Teacher[], question
toQuestion: getQuestion07(), toQuestion: getQuestion07(),
sequenceNumber: 2, sequenceNumber: 2,
timestamp: new Date(), timestamp: new Date(),
content: "this is a test answer" content: 'this is a test answer',
}); });
return [answer01, answer02, answer03, answer04, answer05]; return [answer01, answer02, answer03, answer04, answer05];

6
backend/tests/test_assets/questions/questions.testdata.ts
View file

@ -73,7 +73,7 @@ export function makeTestQuestions(em: EntityManager, students: Student[], groups
timestamp: new Date(), timestamp: new Date(),
content: 'question', content: 'question',
}); });
question07 = em.create(Question, { question07 = em.create(Question, {
learningObjectLanguage: Language.English, learningObjectLanguage: Language.English,
learningObjectVersion: 1, learningObjectVersion: 1,
@ -93,7 +93,7 @@ export function makeTestQuestions(em: EntityManager, students: Student[], groups
author: getTestleerling1(), author: getTestleerling1(),
inGroup: getGroup1ConditionalLearningPath(), inGroup: getGroup1ConditionalLearningPath(),
timestamp: new Date(), timestamp: new Date(),
content: 'this is a second test question' content: 'this is a second test question',
}); });
return [question01, question02, question03, question04, question05, question06, question07, question08]; return [question01, question02, question03, question04, question05, question06, question07, question08];
@ -108,4 +108,4 @@ export function getQuestion07(): Question {
export function getQuestion08(): Question { export function getQuestion08(): Question {
return question08; return question08;
} }

4
frontend/src/components/QandA.vue
View file

@ -9,13 +9,11 @@
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<div <div
v-for="(question) in questions" v-for="question in questions"
:key="(question.sequenceNumber, question.content)" :key="(question.sequenceNumber, question.content)"
class="border rounded-2xl p-4 shadow-sm bg-white" class="border rounded-2xl p-4 shadow-sm bg-white"
> >
<SingleQuestion :question="question"></SingleQuestion> <SingleQuestion :question="question"></SingleQuestion>
</div> </div>
</div> </div>
</template> </template>

38
frontend/src/components/QuestionNotification.vue
View file

@ -1,23 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
import type { LearningObject } from '@/data-objects/learning-objects/learning-object'; import type { LearningObject } from "@/data-objects/learning-objects/learning-object";
import { useQuestionsQuery } from '@/queries/questions'; import { useQuestionsQuery } from "@/queries/questions";
import type { LearningObjectIdentifierDTO } from '@dwengo-1/common/interfaces/learning-content'; import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
import { languageMap } from '@dwengo-1/common/util/language'; import { languageMap } from "@dwengo-1/common/util/language";
import { computed, ref } from 'vue'; import { computed, ref } from "vue";
const props = defineProps<{ const props = defineProps<{
node: LearningObject node: LearningObject;
}>(); }>();
const loid = { hruid: props.node.key, version: props.node.version, language: props.node.language} as LearningObjectIdentifierDTO; const loid = {
const { data, isLoading, error} = useQuestionsQuery(loid); hruid: props.node.key,
version: props.node.version,
const hasQuestions = computed(() => { language: props.node.language,
return (data.value?.questions.length ?? 0) > 0; } as LearningObjectIdentifierDTO;
}); const { data, isLoading, error } = useQuestionsQuery(loid);
const hasQuestions = computed(() => {
return (data.value?.questions.length ?? 0) > 0;
});
</script> </script>
<template v-if="!isLoading & !error"> <template v-if="!isLoading & !error">
<v-icon v-if="hasQuestions" icon="mdi-help-circle-outline" color="red" size="small" /> <v-icon
v-if="hasQuestions"
icon="mdi-help-circle-outline"
color="red"
size="small"
/>
</template> </template>
<style scoped></style> <style scoped></style>

125
frontend/src/components/SingleQuestion.vue
View file

@ -5,7 +5,7 @@
import UsingQueryResult from "./UsingQueryResult.vue"; import UsingQueryResult from "./UsingQueryResult.vue";
import type { AnswersResponse } from "@/controllers/answers"; import type { AnswersResponse } from "@/controllers/answers";
import type { AnswerData, AnswerDTO } from "@dwengo-1/common/interfaces/answer"; import type { AnswerData, AnswerDTO } from "@dwengo-1/common/interfaces/answer";
import authService from "@/services/auth/auth-service"; import authService from "@/services/auth/auth-service";
const props = defineProps<{ const props = defineProps<{
question: QuestionDTO; question: QuestionDTO;
@ -30,31 +30,30 @@ import authService from "@/services/auth/auth-service";
}) as QuestionId, }) as QuestionId,
), ),
); );
const questionId : QuestionId = { const questionId: QuestionId = {
learningObjectIdentifier: props.question.learningObjectIdentifier, learningObjectIdentifier: props.question.learningObjectIdentifier,
sequenceNumber: props.question.sequenceNumber as number sequenceNumber: props.question.sequenceNumber as number,
}; };
const createAnswerMutation = useCreateAnswerMutation(questionId); const createAnswerMutation = useCreateAnswerMutation(questionId);
const answer = ref(''); const answer = ref("");
function submitAnswer() { function submitAnswer() {
const answerData: AnswerData = { const answerData: AnswerData = {
author: authService.authState.user?.profile.preferred_username as string, author: authService.authState.user?.profile.preferred_username as string,
content: answer.value content: answer.value,
}; };
if (answer.value != "") { if (answer.value != "") {
createAnswerMutation.mutate(answerData, { createAnswerMutation.mutate(answerData, {
onSuccess: () => { onSuccess: () => {
answer.value = ""; answer.value = "";
answersQuery.refetch(); answersQuery.refetch();
} },
}); });
} else { } else {
alert("Please type an answer before submitting") //TODO: i18n alert("Please type an answer before submitting"); //TODO: i18n
} }
} }
</script> </script>
<template> <template>
@ -82,15 +81,23 @@ import authService from "@/services/auth/auth-service";
> >
{{ question.content }} {{ question.content }}
</div> </div>
<div v-if="(authService.authState.activeRole === 'teacher')" class="answer-input-container"> <div
v-if="authService.authState.activeRole === 'teacher'"
class="answer-input-container"
>
<input <input
v-model="answer" v-model="answer"
type="text" type="text"
placeholder="answer: ..." placeholder="answer: ..."
class="answer-input" class="answer-input"
/> />
<button @click="submitAnswer" class="submit-button">▶</button> <button
</div> @click="submitAnswer"
class="submit-button"
>
▶
</button>
</div>
<using-query-result <using-query-result
:query-result="answersQuery" :query-result="answersQuery"
v-slot="answersResponse: { data: AnswersResponse }" v-slot="answersResponse: { data: AnswersResponse }"
@ -123,9 +130,7 @@ import authService from "@/services/auth/auth-service";
justify-content: space-between; justify-content: space-between;
" "
> >
<span class="font-semibold text-lg text-gray-800">{{ <span class="font-semibold text-lg text-gray-800">{{ answer.author.username }}</span>
answer.author.username
}}</span>
<span class="text-sm text-gray-500">{{ formatDate(answer.timestamp) }}</span> <span class="text-sm text-gray-500">{{ formatDate(answer.timestamp) }}</span>
</div> </div>
@ -141,45 +146,45 @@ import authService from "@/services/auth/auth-service";
</div> </div>
</template> </template>
<style scoped> <style scoped>
.answer-input { .answer-input {
flex-grow: 1; flex-grow: 1;
outline: none; outline: none;
border: none; border: none;
background: transparent; background: transparent;
color: #374151; /* gray-700 */ color: #374151; /* gray-700 */
font-size: 0.875rem; /* smaller font size */ font-size: 0.875rem; /* smaller font size */
} }
.answer-input::placeholder { .answer-input::placeholder {
color: #9ca3af; /* gray-400 */ color: #9ca3af; /* gray-400 */
} }
.submit-button { .submit-button {
margin-left: 0.25rem; margin-left: 0.25rem;
padding: 0.25rem; padding: 0.25rem;
background-color: #f3f4f6; /* gray-100 */ background-color: #f3f4f6; /* gray-100 */
border-radius: 9999px; border-radius: 9999px;
transition: background-color 0.2s; transition: background-color 0.2s;
border: none; border: none;
cursor: pointer; cursor: pointer;
} }
.submit-button:hover { .submit-button:hover {
background-color: #e5e7eb; /* gray-200 */ background-color: #e5e7eb; /* gray-200 */
} }
.submit-icon { .submit-icon {
width: 0.75rem; width: 0.75rem;
height: 0.75rem; height: 0.75rem;
color: #4b5563; /* gray-600 */ color: #4b5563; /* gray-600 */
} }
.answer-input-container { .answer-input-container {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid #d1d5db; /* gray-300 */ border: 1px solid #d1d5db; /* gray-300 */
border-radius: 9999px; border-radius: 9999px;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
max-width: 28rem; max-width: 28rem;
width: 100%; width: 100%;
} }
</style> </style>

6
frontend/src/controllers/answers.ts
View file

@ -12,13 +12,13 @@ export interface AnswerResponse {
} }
export class AnswerController extends BaseController { export class AnswerController extends BaseController {
loId: LearningObjectIdentifierDTO; loId: LearningObjectIdentifierDTO;
sequenceNumber: number; sequenceNumber: number;
constructor(questionId: QuestionId) { constructor(questionId: QuestionId) {
super(`learningObject/${questionId.learningObjectIdentifier.hruid}/:${questionId.learningObjectIdentifier.version}/questions/${questionId.sequenceNumber}/answers`); super(
`learningObject/${questionId.learningObjectIdentifier.hruid}/:${questionId.learningObjectIdentifier.version}/questions/${questionId.sequenceNumber}/answers`,
);
this.loId = questionId.learningObjectIdentifier; this.loId = questionId.learningObjectIdentifier;
this.sequenceNumber = questionId.sequenceNumber; this.sequenceNumber = questionId.sequenceNumber;
} }

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

@ -18,10 +18,10 @@
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content"; import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
import QandA from "@/components/QandA.vue"; import QandA from "@/components/QandA.vue";
import type { QuestionData, QuestionDTO } from "@dwengo-1/common/interfaces/question"; import type { QuestionData, QuestionDTO } from "@dwengo-1/common/interfaces/question";
import {useStudentAssignmentsQuery, useStudentGroupsQuery} from "@/queries/students" import { useStudentAssignmentsQuery, useStudentGroupsQuery } from "@/queries/students";
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment"; import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group"; import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
import QuestionNotification from "@/components/QuestionNotification.vue"; import QuestionNotification from "@/components/QuestionNotification.vue";
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -146,40 +146,38 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
}); });
} }
const studentAssignmentsQueryResult = useStudentAssignmentsQuery(authService.authState.user?.profile.preferred_username); const studentAssignmentsQueryResult = useStudentAssignmentsQuery(
authService.authState.user?.profile.preferred_username,
);
const pathIsAssignment = computed(() => { const pathIsAssignment = computed(() => {
const assignments = studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[] || []; const assignments = (studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[]) || [];
return assignments.some( return assignments.some(
(assignment) => (assignment) => assignment.learningPath === props.hruid && assignment.language === props.language,
assignment.learningPath === props.hruid &&
assignment.language === props.language
); );
}); });
const loID:LearningObjectIdentifierDTO = { const loID: LearningObjectIdentifierDTO = {
hruid: props.learningObjectHruid as string, hruid: props.learningObjectHruid as string,
language: props.language language: props.language,
} };
const createQuestionMutation = useCreateQuestionMutation(loID) const createQuestionMutation = useCreateQuestionMutation(loID);
const groupsQueryResult = useStudentGroupsQuery(authService.authState.user?.profile.preferred_username) const groupsQueryResult = useStudentGroupsQuery(authService.authState.user?.profile.preferred_username);
const questionInput = ref(""); const questionInput = ref("");
function submitQuestion() { function submitQuestion() {
const assignments = studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[] const assignments = studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[];
const assignment = assignments.find( const assignment = assignments.find(
(assignment) => (assignment) => assignment.learningPath === props.hruid && assignment.language === props.language,
assignment.learningPath === props.hruid && );
assignment.language === props.language const groups = groupsQueryResult.data.value?.groups as GroupDTO[];
) const group = groups?.find((group) => group.assignment === assignment?.id) as GroupDTO;
const groups = groupsQueryResult.data.value?.groups as GroupDTO[] const questionData: QuestionData = {
const group = groups?.find(group => group.assignment === assignment?.id) as GroupDTO
const questionData:QuestionData = {
author: authService.authState.user?.profile.preferred_username, author: authService.authState.user?.profile.preferred_username,
content: questionInput.value, content: questionInput.value,
inGroup: group //TODO: POST response zegt dat dit null is??? inGroup: group, //TODO: POST response zegt dat dit null is???
} };
console.log(questionData) console.log(questionData);
if (questionInput.value != "") { if (questionInput.value != "") {
createQuestionMutation.mutate(questionData, { createQuestionMutation.mutate(questionData, {
onSuccess: () => { onSuccess: () => {
@ -187,14 +185,13 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
getQuestionsQuery.refetch(); // Reload the questions getQuestionsQuery.refetch(); // Reload the questions
}, },
onError: (e) => { onError: (e) => {
console.error(e) console.error(e);
}, },
}) });
} else { } else {
alert("Please type a question before submitting.") // TODO: i18n alert("Please type a question before submitting."); // TODO: i18n
} }
} }
</script> </script>
<template> <template>
@ -271,12 +268,18 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
:color="COLORS[getNavItemState(node)]" :color="COLORS[getNavItemState(node)]"
:icon="ICONS[getNavItemState(node)]" :icon="ICONS[getNavItemState(node)]"
></v-icon> ></v-icon>
</template> </template>
<template v-slot:append> <template v-slot:append>
<QuestionNotification :node="node"></QuestionNotification> <QuestionNotification :node="node"></QuestionNotification>
<div>{{ (node.estimatedTime!).toLocaleString('en-US', {minimumIntegerDigits: 2, useGrouping:false}) }}'</div> <div>
{{
node.estimatedTime!.toLocaleString("en-US", {
minimumIntegerDigits: 2,
useGrouping: false,
})
}}'
</div>
</template> </template>
</v-list-item> </v-list-item>
</template> </template>
</using-query-result> </using-query-result>
@ -292,7 +295,10 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
</template> </template>
</v-list-item> </v-list-item>
<v-list-item> <v-list-item>
<div v-if="(authService.authState.activeRole === 'student') && (pathIsAssignment)" class="assignment-indicator"> <div
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
class="assignment-indicator"
>
{{ t("assignmentIndicator") }} {{ t("assignmentIndicator") }}
</div> </div>
</v-list-item> </v-list-item>
@ -318,17 +324,25 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
v-if="currentNode" v-if="currentNode"
></learning-object-view> ></learning-object-view>
</div> </div>
<div v-if="authService.authState.activeRole === 'student' && pathIsAssignment" class="question-box"> <div
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
class="question-box"
>
<div class="input-wrapper"> <div class="input-wrapper">
<input <input
type="text" type="text"
placeholder="question : ..." placeholder="question : ..."
class="question-input" class="question-input"
v-model="questionInput" v-model="questionInput"
/> />
<button @click="submitQuestion" class="send-button">▶</button> <button
@click="submitQuestion"
class="send-button"
>
▶
</button>
</div> </div>
</div> </div>
<div class="navigation-buttons-container"> <div class="navigation-buttons-container">
<v-btn <v-btn
prepend-icon="mdi-chevron-left" prepend-icon="mdi-chevron-left"
@ -351,7 +365,7 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
:query-result="getQuestionsQuery" :query-result="getQuestionsQuery"
v-slot="questionsResponse: { data: QuestionsResponse }" v-slot="questionsResponse: { data: QuestionsResponse }"
> >
<QandA :questions="questionsResponse.data.questions as QuestionDTO[] ?? []" /> <QandA :questions="(questionsResponse.data.questions as QuestionDTO[]) ?? []" />
</using-query-result> </using-query-result>
</using-query-result> </using-query-result>
</template> </template>
@ -395,58 +409,58 @@ import QuestionNotification from "@/components/QuestionNotification.vue";
text-transform: uppercase; text-transform: uppercase;
z-index: 2; /* Less than modals/popups */ z-index: 2; /* Less than modals/popups */
} }
.question-box { .question-box {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
margin: 20px auto; margin: 20px auto;
font-family: sans-serif; font-family: sans-serif;
} }
.input-wrapper { .input-wrapper {
display: flex; display: flex;
align-items: center; align-items: center;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 999px; border-radius: 999px;
padding: 8px 12px; padding: 8px 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} }
.question-input { .question-input {
flex: 1; flex: 1;
border: none; border: none;
outline: none; outline: none;
font-size: 14px; font-size: 14px;
background-color: transparent; background-color: transparent;
} }
.question-input::placeholder { .question-input::placeholder {
color: #999; color: #999;
} }
.send-button { .send-button {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 16px; font-size: 16px;
color: #555; color: #555;
transition: color 0.2s ease; transition: color 0.2s ease;
} }
.send-button:hover { .send-button:hover {
color: #000; color: #000;
} }
.discussion-link { .discussion-link {
margin-top: 8px; margin-top: 8px;
font-size: 13px; font-size: 13px;
color: #444; color: #444;
} }
.discussion-link a { .discussion-link a {
color: #3b82f6; /* blue */ color: #3b82f6; /* blue */
text-decoration: none; text-decoration: none;
} }
.discussion-link a:hover { .discussion-link a:hover {
text-decoration: underline; text-decoration: underline;
} }
</style> </style>