Merge pull request #220 from SELab-2/feat/leerpad-vragen
feat: vragen en antwoorden op leerobjecten
This commit is contained in:
Timo De Meyst
GitHub
commit
8faaf089e5
20 changed files with 540 additions and 93 deletions
|
|
@ -31,7 +31,7 @@ export function getQuestionId(learningObjectIdentifier: LearningObjectIdentifier
|
|||
export async function getAllQuestionsHandler(req: Request, res: Response): Promise<void> {
|
||||
const hruid = req.params.hruid;
|
||||
const version = req.params.version;
|
||||
const language = req.query.lang as string;
|
||||
const language = (req.query.lang ? req.query.lang : FALLBACK_LANG) as string;
|
||||
const full = req.query.full === 'true';
|
||||
requireFields({ hruid });
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ export async function getStudentAssignmentsHandler(req: Request, res: Response):
|
|||
const username = req.params.username;
|
||||
requireFields({ username });
|
||||
|
||||
const assignments = getStudentAssignments(username, full);
|
||||
const assignments = await getStudentAssignments(username, full);
|
||||
|
||||
res.json({ assignments });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,11 @@ export class AnswerRepository extends DwengoEntityRepository<Answer> {
|
|||
content: answer.content,
|
||||
timestamp: new Date(),
|
||||
});
|
||||
return this.insert(answerEntity);
|
||||
await this.insert(answerEntity);
|
||||
answerEntity.toQuestion = answer.toQuestion;
|
||||
answerEntity.author = answer.author;
|
||||
answerEntity.content = answer.content;
|
||||
return answerEntity;
|
||||
}
|
||||
public async findAllAnswersToQuestion(question: Question): Promise<Answer[]> {
|
||||
return this.findAll({
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export class QuestionRepository extends DwengoEntityRepository<Question> {
|
|||
questionEntity.author = question.author;
|
||||
questionEntity.inGroup = question.inGroup;
|
||||
questionEntity.content = question.content;
|
||||
return this.insert(questionEntity);
|
||||
return await this.insert(questionEntity);
|
||||
}
|
||||
public async findAllQuestionsAboutLearningObject(loId: LearningObjectIdentifier): Promise<Question[]> {
|
||||
return this.findAll({
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import { AssignmentDTO } from '@dwengo-1/common/interfaces/assignment';
|
|||
import { fetchStudent } from './students.js';
|
||||
import { NotFoundException } from '../exceptions/not-found-exception.js';
|
||||
import { FALLBACK_VERSION_NUM } from '../config.js';
|
||||
import { fetchAssignment } from './assignments.js';
|
||||
|
||||
export async function getQuestionsAboutLearningObjectInAssignment(
|
||||
loId: LearningObjectIdentifier,
|
||||
|
|
@ -86,8 +87,16 @@ export async function createQuestion(loId: LearningObjectIdentifier, questionDat
|
|||
const author = await fetchStudent(questionData.author!);
|
||||
const content = questionData.content;
|
||||
|
||||
let assignment;
|
||||
|
||||
if (typeof questionData.inGroup.assignment === 'number' && typeof questionData.inGroup.class === 'string') {
|
||||
assignment = await fetchAssignment(questionData.inGroup.class, questionData.inGroup.assignment);
|
||||
} else {
|
||||
// TODO check if necessary and no conflicts to delete this if
|
||||
const clazz = await getClassRepository().findById((questionData.inGroup.assignment as AssignmentDTO).within);
|
||||
const assignment = mapToAssignment(questionData.inGroup.assignment as AssignmentDTO, clazz!);
|
||||
assignment = mapToAssignment(questionData.inGroup.assignment as AssignmentDTO, clazz!);
|
||||
}
|
||||
|
||||
const inGroup = await getGroupRepository().findByAssignmentAndGroupNumber(assignment, questionData.inGroup.groupNumber);
|
||||
|
||||
const question = await questionRepository.createQuestion({
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import { EntityManager } from '@mikro-orm/core';
|
|||
import { Answer } from '../../../src/entities/questions/answer.entity';
|
||||
import { Teacher } from '../../../src/entities/users/teacher.entity';
|
||||
import { Question } from '../../../src/entities/questions/question.entity';
|
||||
import { getTestleerkracht1 } from '../users/teachers.testdata';
|
||||
import { getQuestion07 } from './questions.testdata';
|
||||
|
||||
export function makeTestAnswers(em: EntityManager, teachers: Teacher[], questions: Question[]): Answer[] {
|
||||
const answer01 = em.create(Answer, {
|
||||
|
|
@ -28,5 +30,21 @@ export function makeTestAnswers(em: EntityManager, teachers: Teacher[], question
|
|||
content: 'answer3',
|
||||
});
|
||||
|
||||
return [answer01, answer02, answer03];
|
||||
const answer04 = em.create(Answer, {
|
||||
author: getTestleerkracht1(),
|
||||
toQuestion: getQuestion07(),
|
||||
sequenceNumber: 1,
|
||||
timestamp: new Date(),
|
||||
content: 'this is a test answer',
|
||||
});
|
||||
|
||||
const answer05 = em.create(Answer, {
|
||||
author: getTestleerkracht1(),
|
||||
toQuestion: getQuestion07(),
|
||||
sequenceNumber: 2,
|
||||
timestamp: new Date(),
|
||||
content: 'this is a test answer',
|
||||
});
|
||||
|
||||
return [answer01, answer02, answer03, answer04, answer05];
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@ import { Question } from '../../../src/entities/questions/question.entity';
|
|||
import { Language } from '@dwengo-1/common/util/language';
|
||||
import { Student } from '../../../src/entities/users/student.entity';
|
||||
import { Group } from '../../../src/entities/assignments/group.entity';
|
||||
import { getTestleerling1 } from '../users/students.testdata';
|
||||
import { testLearningObjectMultipleChoice } from '../content/learning-objects.testdata';
|
||||
import { getGroup1ConditionalLearningPath } from '../assignments/groups.testdata';
|
||||
|
||||
export function makeTestQuestions(em: EntityManager, students: Student[], groups: Group[]): Question[] {
|
||||
const question01 = em.create(Question, {
|
||||
|
|
@ -66,10 +69,43 @@ export function makeTestQuestions(em: EntityManager, students: Student[], groups
|
|||
learningObjectHruid: 'id05',
|
||||
sequenceNumber: 4,
|
||||
author: students[2],
|
||||
inGroup: groups[3], // Group #4 for Assignment #2 in class 'id02'
|
||||
inGroup: groups[5], // Group #4 for Assignment #2 in class 'id02'
|
||||
timestamp: new Date(),
|
||||
content: 'question',
|
||||
});
|
||||
|
||||
return [question01, question02, question03, question04, question05, question06];
|
||||
question07 = em.create(Question, {
|
||||
learningObjectLanguage: Language.English,
|
||||
learningObjectVersion: 1,
|
||||
learningObjectHruid: testLearningObjectMultipleChoice.hruid,
|
||||
sequenceNumber: 1,
|
||||
author: getTestleerling1(),
|
||||
inGroup: getGroup1ConditionalLearningPath(),
|
||||
timestamp: new Date(),
|
||||
content: 'this is a test question',
|
||||
});
|
||||
|
||||
question08 = em.create(Question, {
|
||||
learningObjectLanguage: Language.English,
|
||||
learningObjectVersion: 1,
|
||||
learningObjectHruid: testLearningObjectMultipleChoice.hruid,
|
||||
sequenceNumber: 2,
|
||||
author: getTestleerling1(),
|
||||
inGroup: getGroup1ConditionalLearningPath(),
|
||||
timestamp: new Date(),
|
||||
content: 'this is a second test question',
|
||||
});
|
||||
|
||||
return [question01, question02, question03, question04, question05, question06, question07, question08];
|
||||
}
|
||||
|
||||
let question08: Question;
|
||||
let question07: Question;
|
||||
|
||||
export function getQuestion07(): Question {
|
||||
return question07;
|
||||
}
|
||||
|
||||
export function getQuestion08(): Question {
|
||||
return question08;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ export function makeTestTeachers(em: EntityManager): Teacher[] {
|
|||
// Makes sure when logged in as testleerkracht1, there exists a corresponding user
|
||||
testleerkracht1 = em.create(Teacher, {
|
||||
username: 'testleerkracht1',
|
||||
firstName: 'Kris',
|
||||
lastName: 'Coolsaet',
|
||||
firstName: 'David',
|
||||
lastName: 'Bowie',
|
||||
});
|
||||
|
||||
return [teacher01, teacher02, teacher03, teacher04, testleerkracht1];
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"@vueuse/core": "^13.1.0",
|
||||
"axios": "^1.8.2",
|
||||
"oidc-client-ts": "^3.1.0",
|
||||
"rollup": "^4.40.0",
|
||||
"uuid": "^11.1.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^11.1.2",
|
||||
|
|
|
|||
20
frontend/src/components/QandA.vue
Normal file
20
frontend/src/components/QandA.vue
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script setup lang="ts">
|
||||
import type { QuestionDTO } from "@dwengo-1/common/interfaces/question";
|
||||
import SingleQuestion from "./SingleQuestion.vue";
|
||||
|
||||
defineProps<{
|
||||
questions: QuestionDTO[];
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="question in questions"
|
||||
:key="(question.sequenceNumber, question.content)"
|
||||
class="border rounded-2xl p-4 shadow-sm bg-white"
|
||||
>
|
||||
<SingleQuestion :question="question"></SingleQuestion>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
28
frontend/src/components/QuestionNotification.vue
Normal file
28
frontend/src/components/QuestionNotification.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<script setup lang="ts">
|
||||
import type { LearningObject } from "@/data-objects/learning-objects/learning-object";
|
||||
import { useQuestionsQuery } from "@/queries/questions";
|
||||
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = defineProps<{
|
||||
node: LearningObject;
|
||||
}>();
|
||||
|
||||
const loid = {
|
||||
hruid: props.node.key,
|
||||
version: props.node.version,
|
||||
language: props.node.language,
|
||||
} as LearningObjectIdentifierDTO;
|
||||
const { data } = useQuestionsQuery(loid);
|
||||
|
||||
const hasQuestions = computed(() => (data.value?.questions.length ?? 0) > 0);
|
||||
</script>
|
||||
<template v-if="!isLoading & !error">
|
||||
<v-icon
|
||||
v-if="hasQuestions"
|
||||
icon="mdi-help-circle-outline"
|
||||
color="red"
|
||||
size="small"
|
||||
/>
|
||||
</template>
|
||||
<style scoped></style>
|
||||
188
frontend/src/components/SingleQuestion.vue
Normal file
188
frontend/src/components/SingleQuestion.vue
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
<script setup lang="ts">
|
||||
import { useAnswersQuery, useCreateAnswerMutation } from "@/queries/answers";
|
||||
import type { QuestionDTO, QuestionId } from "@dwengo-1/common/interfaces/question";
|
||||
import { computed, ref } from "vue";
|
||||
import UsingQueryResult from "./UsingQueryResult.vue";
|
||||
import type { AnswersResponse } from "@/controllers/answers";
|
||||
import type { AnswerData, AnswerDTO } from "@dwengo-1/common/interfaces/answer";
|
||||
import authService from "@/services/auth/auth-service";
|
||||
|
||||
const props = defineProps<{
|
||||
question: QuestionDTO;
|
||||
}>();
|
||||
|
||||
const expanded = ref(false);
|
||||
|
||||
function toggle(): void {
|
||||
expanded.value = !expanded.value;
|
||||
}
|
||||
|
||||
function formatDate(timestamp: string | Date): string {
|
||||
return new Date(timestamp).toLocaleString();
|
||||
}
|
||||
|
||||
const answersQuery = useAnswersQuery(
|
||||
computed(
|
||||
() =>
|
||||
({
|
||||
learningObjectIdentifier: props.question.learningObjectIdentifier,
|
||||
sequenceNumber: props.question.sequenceNumber,
|
||||
}) as QuestionId,
|
||||
),
|
||||
);
|
||||
|
||||
const questionId: QuestionId = {
|
||||
learningObjectIdentifier: props.question.learningObjectIdentifier,
|
||||
sequenceNumber: props.question.sequenceNumber as number,
|
||||
};
|
||||
const createAnswerMutation = useCreateAnswerMutation(questionId);
|
||||
|
||||
const answer = ref("");
|
||||
|
||||
function submitAnswer(): void {
|
||||
const answerData: AnswerData = {
|
||||
author: authService.authState.user?.profile.preferred_username as string,
|
||||
content: answer.value,
|
||||
};
|
||||
if (answer.value !== "") {
|
||||
createAnswerMutation.mutate(answerData, {
|
||||
onSuccess: async () => {
|
||||
answer.value = "";
|
||||
await answersQuery.refetch();
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
class="flex justify-between items-center mb-2"
|
||||
style="
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span class="font-semibold text-lg text-gray-800">{{
|
||||
question.author.firstName + " " + question.author.lastName
|
||||
}}</span>
|
||||
<span class="text-sm text-gray-500">{{ formatDate(question.timestamp) }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-gray-700 mb-3"
|
||||
style="margin-left: 10px"
|
||||
>
|
||||
{{ question.content }}
|
||||
</div>
|
||||
<div
|
||||
v-if="authService.authState.activeRole === 'teacher'"
|
||||
class="answer-input-container"
|
||||
>
|
||||
<input
|
||||
v-model="answer"
|
||||
type="text"
|
||||
placeholder="answer: ..."
|
||||
class="answer-input"
|
||||
/>
|
||||
<button
|
||||
@click="submitAnswer"
|
||||
class="submit-button"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
</div>
|
||||
<using-query-result
|
||||
:query-result="answersQuery"
|
||||
v-slot="answersResponse: { data: AnswersResponse }"
|
||||
>
|
||||
<button
|
||||
v-if="answersResponse.data.answers && answersResponse.data.answers.length > 0"
|
||||
@click="toggle()"
|
||||
class="text-blue-600 hover:underline text-sm"
|
||||
>
|
||||
{{ expanded ? "Hide Answers" : "Show Answers" }}
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="expanded"
|
||||
class="mt-3 pl-4 border-l-2 border-blue-200 space-y-2"
|
||||
>
|
||||
<div
|
||||
v-for="(answer, answerIndex) in answersResponse.data.answers as AnswerDTO[]"
|
||||
:key="answerIndex"
|
||||
class="text-gray-600"
|
||||
>
|
||||
<div
|
||||
class="flex justify-between items-center mb-2"
|
||||
style="
|
||||
margin-right: 5px;
|
||||
margin-left: 5px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
"
|
||||
>
|
||||
<span class="font-semibold text-lg text-gray-800">{{ answer.author.username }}</span>
|
||||
<span class="text-sm text-gray-500">{{ formatDate(answer.timestamp) }}</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="text-gray-700 mb-3"
|
||||
style="margin-left: 10px"
|
||||
>
|
||||
{{ answer.content }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</using-query-result>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
.answer-input {
|
||||
flex-grow: 1;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #374151; /* gray-700 */
|
||||
font-size: 0.875rem; /* smaller font size */
|
||||
}
|
||||
|
||||
.answer-input::placeholder {
|
||||
color: #9ca3af; /* gray-400 */
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
margin-left: 0.25rem;
|
||||
padding: 0.25rem;
|
||||
background-color: #f3f4f6; /* gray-100 */
|
||||
border-radius: 9999px;
|
||||
transition: background-color 0.2s;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.submit-button:hover {
|
||||
background-color: #e5e7eb; /* gray-200 */
|
||||
}
|
||||
|
||||
.submit-icon {
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
color: #4b5563; /* gray-600 */
|
||||
}
|
||||
.answer-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #d1d5db; /* gray-300 */
|
||||
border-radius: 9999px;
|
||||
padding: 0.5rem 1rem;
|
||||
max-width: 28rem;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
import type { AnswerData, AnswerDTO, AnswerId } from "@dwengo-1/common/interfaces/answer";
|
||||
import { BaseController } from "@/controllers/base-controller.ts";
|
||||
import type { QuestionId } from "@dwengo-1/common/interfaces/question";
|
||||
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
|
||||
|
||||
export interface AnswersResponse {
|
||||
answers: AnswerDTO[] | AnswerId[];
|
||||
|
|
@ -11,29 +12,34 @@ export interface AnswerResponse {
|
|||
}
|
||||
|
||||
export class AnswerController extends BaseController {
|
||||
loId: LearningObjectIdentifierDTO;
|
||||
sequenceNumber: number;
|
||||
|
||||
constructor(questionId: QuestionId) {
|
||||
super(
|
||||
`learningObject/${questionId.learningObjectIdentifier.hruid}/:${questionId.learningObjectIdentifier.version}/questions/${questionId.sequenceNumber}/answers`,
|
||||
);
|
||||
this.loId = questionId.learningObjectIdentifier;
|
||||
this.sequenceNumber = questionId.sequenceNumber;
|
||||
super(`learningObject/${loId.hruid}/:${loId.version}/questions/${this.sequenceNumber}/answers`);
|
||||
}
|
||||
|
||||
async getAll(full = true): Promise<AnswersResponse> {
|
||||
return this.get<AnswersResponse>("/", { lang: this.loId.lang, full });
|
||||
return this.get<AnswersResponse>("/", { lang: this.loId.language, full });
|
||||
}
|
||||
|
||||
async getBy(seq: number): Promise<AnswerResponse> {
|
||||
return this.get<AnswerResponse>(`/${seq}`, { lang: this.loId.lang });
|
||||
return this.get<AnswerResponse>(`/${seq}`, { lang: this.loId.language });
|
||||
}
|
||||
|
||||
async create(answerData: AnswerData): Promise<AnswerResponse> {
|
||||
return this.post<AnswerResponse>("/", answerData, { lang: this.loId.lang });
|
||||
return this.post<AnswerResponse>("/", answerData, { lang: this.loId.language });
|
||||
}
|
||||
|
||||
async remove(seq: number): Promise<AnswerResponse> {
|
||||
return this.delete<AnswerResponse>(`/${seq}`, { lang: this.loId.lang });
|
||||
return this.delete<AnswerResponse>(`/${seq}`, { lang: this.loId.language });
|
||||
}
|
||||
|
||||
async update(seq: number, answerData: AnswerData): Promise<AnswerResponse> {
|
||||
return this.put<AnswerResponse>(`/${seq}`, answerData, { lang: this.loId.lang });
|
||||
return this.put<AnswerResponse>(`/${seq}`, answerData, { lang: this.loId.language });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,28 +11,30 @@ export interface QuestionResponse {
|
|||
}
|
||||
|
||||
export class QuestionController extends BaseController {
|
||||
loId: LearningObjectIdentifierDTO;
|
||||
|
||||
constructor(loId: LearningObjectIdentifierDTO) {
|
||||
this.loId = loId;
|
||||
super(`learningObject/${loId.hruid}/:${loId.version}/questions`);
|
||||
this.loId = loId;
|
||||
}
|
||||
|
||||
async getAll(full = true): Promise<QuestionsResponse> {
|
||||
return this.get<QuestionsResponse>("/", { lang: this.loId.lang, full });
|
||||
return this.get<QuestionsResponse>("/", { lang: this.loId.language, full });
|
||||
}
|
||||
|
||||
async getBy(sequenceNumber: number): Promise<QuestionResponse> {
|
||||
return this.get<QuestionResponse>(`/${sequenceNumber}`, { lang: this.loId.lang });
|
||||
return this.get<QuestionResponse>(`/${sequenceNumber}`, { lang: this.loId.language });
|
||||
}
|
||||
|
||||
async create(questionData: QuestionData): Promise<QuestionResponse> {
|
||||
return this.post<QuestionResponse>("/", questionData, { lang: this.loId.lang });
|
||||
return this.post<QuestionResponse>("/", questionData, { lang: this.loId.language });
|
||||
}
|
||||
|
||||
async remove(sequenceNumber: number): Promise<QuestionResponse> {
|
||||
return this.delete<QuestionResponse>(`/${sequenceNumber}`, { lang: this.loId.lang });
|
||||
return this.delete<QuestionResponse>(`/${sequenceNumber}`, { lang: this.loId.language });
|
||||
}
|
||||
|
||||
async update(sequenceNumber: number, questionData: QuestionData): Promise<QuestionResponse> {
|
||||
return this.put<QuestionResponse>(`/${sequenceNumber}`, questionData, { lang: this.loId.lang });
|
||||
return this.put<QuestionResponse>(`/${sequenceNumber}`, questionData, { lang: this.loId.language });
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@
|
|||
"enterUsername": "Geben Sie den Benutzernamen der Lehrkraft ein, die Sie einladen möchten",
|
||||
"username": "Nutzername",
|
||||
"invite": "einladen",
|
||||
"assignmentIndicator": "AUFGABE",
|
||||
"searchAllLearningPathsTitle": "Alle Lernpfade durchsuchen",
|
||||
"searchAllLearningPathsDescription": "Nicht gefunden, was Sie gesucht haben? Klicken Sie hier, um unsere gesamte Lernpfad-Datenbank zu durchsuchen."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@
|
|||
"enterUsername": "enter the username of the teacher you would like to invite",
|
||||
"username": "username",
|
||||
"invite": "invite",
|
||||
"assignmentIndicator": "ASSIGNMENT",
|
||||
"searchAllLearningPathsTitle": "Search all learning paths",
|
||||
"searchAllLearningPathsDescription": "You didn't find what you were looking for? Click here to search our whole database of available learning paths."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@
|
|||
"enterUsername": "entrez le nom d'utilisateur de l'enseignant que vous souhaitez inviter",
|
||||
"username": "Nom d'utilisateur",
|
||||
"invite": "inviter",
|
||||
"assignmentIndicator": "DEVOIR",
|
||||
"searchAllLearningPathsTitle": "Rechercher tous les parcours d'apprentissage",
|
||||
"searchAllLearningPathsDescription": "Vous n'avez pas trouvé ce que vous cherchiez ? Cliquez ici pour rechercher dans toute notre base de données de parcours d'apprentissage disponibles."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@
|
|||
"enterUsername": "vul de gebruikersnaam van de leerkracht die je wilt uitnodigen in",
|
||||
"username": "gebruikersnaam",
|
||||
"invite": "uitnodigen",
|
||||
"assignmentIndicator": "OPDRACHT",
|
||||
"searchAllLearningPathsTitle": "Alle leerpaden doorzoeken",
|
||||
"searchAllLearningPathsDescription": "Niet gevonden waar je naar op zoek was? Klik hier om onze volledige databank van beschikbare leerpaden te doorzoeken."
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,15 @@
|
|||
import authService from "@/services/auth/auth-service.ts";
|
||||
import { LearningPathNode } from "@/data-objects/learning-paths/learning-path-node.ts";
|
||||
import LearningPathGroupSelector from "@/views/learning-paths/LearningPathGroupSelector.vue";
|
||||
import { useCreateQuestionMutation, useQuestionsQuery } from "@/queries/questions";
|
||||
import type { QuestionsResponse } from "@/controllers/questions";
|
||||
import type { LearningObjectIdentifierDTO } from "@dwengo-1/common/interfaces/learning-content";
|
||||
import QandA from "@/components/QandA.vue";
|
||||
import type { QuestionData, QuestionDTO } from "@dwengo-1/common/interfaces/question";
|
||||
import { useStudentAssignmentsQuery, useStudentGroupsQuery } from "@/queries/students";
|
||||
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
|
||||
import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
|
||||
import QuestionNotification from "@/components/QuestionNotification.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
@ -68,6 +77,17 @@
|
|||
return currentIndex < nodesList.value?.length ? nodesList.value?.[currentIndex - 1] : undefined;
|
||||
});
|
||||
|
||||
const getQuestionsQuery = useQuestionsQuery(
|
||||
computed(
|
||||
() =>
|
||||
({
|
||||
language: currentNode.value?.language,
|
||||
hruid: currentNode.value?.learningobjectHruid,
|
||||
version: currentNode.value?.version,
|
||||
}) as LearningObjectIdentifierDTO,
|
||||
),
|
||||
);
|
||||
|
||||
const navigationDrawerShown = ref(true);
|
||||
|
||||
function isLearningObjectCompleted(learningObject: LearningObject): boolean {
|
||||
|
|
@ -125,6 +145,51 @@
|
|||
},
|
||||
});
|
||||
}
|
||||
|
||||
const studentAssignmentsQueryResult = useStudentAssignmentsQuery(
|
||||
authService.authState.user?.profile.preferred_username,
|
||||
);
|
||||
const pathIsAssignment = computed(() => {
|
||||
const assignments = (studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[]) || [];
|
||||
return assignments.some(
|
||||
(assignment) => assignment.learningPath === props.hruid && assignment.language === props.language,
|
||||
);
|
||||
});
|
||||
|
||||
const loID: LearningObjectIdentifierDTO = {
|
||||
hruid: props.learningObjectHruid as string,
|
||||
language: props.language,
|
||||
};
|
||||
const createQuestionMutation = useCreateQuestionMutation(loID);
|
||||
const groupsQueryResult = useStudentGroupsQuery(authService.authState.user?.profile.preferred_username);
|
||||
|
||||
const questionInput = ref("");
|
||||
|
||||
function submitQuestion(): void {
|
||||
const assignments = studentAssignmentsQueryResult.data.value?.assignments as AssignmentDTO[];
|
||||
const assignment = assignments.find(
|
||||
(assignment) => 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 questionData: QuestionData = {
|
||||
author: authService.authState.user?.profile.preferred_username,
|
||||
content: questionInput.value,
|
||||
inGroup: group, //TODO: POST response zegt dat dit null is???
|
||||
};
|
||||
if (questionInput.value !== "") {
|
||||
createQuestionMutation.mutate(questionData, {
|
||||
onSuccess: async () => {
|
||||
questionInput.value = ""; // Clear the input field after submission
|
||||
await getQuestionsQuery.refetch(); // Reload the questions
|
||||
},
|
||||
onError: (_) => {
|
||||
// TODO Handle error
|
||||
// - console.error(e);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -202,7 +267,17 @@
|
|||
:icon="ICONS[getNavItemState(node)]"
|
||||
></v-icon>
|
||||
</template>
|
||||
<template v-slot:append> {{ node.estimatedTime }}' </template>
|
||||
<template v-slot:append>
|
||||
<QuestionNotification :node="node"></QuestionNotification>
|
||||
<div>
|
||||
{{
|
||||
node.estimatedTime!.toLocaleString("en-US", {
|
||||
minimumIntegerDigits: 2,
|
||||
useGrouping: false,
|
||||
})
|
||||
}}'
|
||||
</div>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</template>
|
||||
</using-query-result>
|
||||
|
|
@ -217,6 +292,14 @@
|
|||
>
|
||||
</template>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<div
|
||||
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
|
||||
class="assignment-indicator"
|
||||
>
|
||||
{{ t("assignmentIndicator") }}
|
||||
</div>
|
||||
</v-list-item>
|
||||
</div>
|
||||
</v-navigation-drawer>
|
||||
<div class="control-bar-above-content">
|
||||
|
|
@ -239,6 +322,25 @@
|
|||
v-if="currentNode"
|
||||
></learning-object-view>
|
||||
</div>
|
||||
<div
|
||||
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
|
||||
class="question-box"
|
||||
>
|
||||
<div class="input-wrapper">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="question : ..."
|
||||
class="question-input"
|
||||
v-model="questionInput"
|
||||
/>
|
||||
<button
|
||||
@click="submitQuestion"
|
||||
class="send-button"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-buttons-container">
|
||||
<v-btn
|
||||
prepend-icon="mdi-chevron-left"
|
||||
|
|
@ -257,6 +359,12 @@
|
|||
{{ t("next") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
<using-query-result
|
||||
:query-result="getQuestionsQuery"
|
||||
v-slot="questionsResponse: { data: QuestionsResponse }"
|
||||
>
|
||||
<QandA :questions="(questionsResponse.data.questions as QuestionDTO[]) ?? []" />
|
||||
</using-query-result>
|
||||
</using-query-result>
|
||||
</template>
|
||||
|
||||
|
|
@ -284,8 +392,73 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.button-in-nav {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
.assignment-indicator {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
padding: 4px 12px;
|
||||
border: 2px solid #f8bcbc;
|
||||
border-radius: 20px;
|
||||
color: #f36c6c;
|
||||
background-color: rgba(248, 188, 188, 0.1);
|
||||
font-weight: bold;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
text-transform: uppercase;
|
||||
z-index: 2; /* Less than modals/popups */
|
||||
}
|
||||
.question-box {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 20px auto;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
.input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 999px;
|
||||
padding: 8px 12px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.question-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.question-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.send-button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #555;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.send-button:hover {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.discussion-link {
|
||||
margin-top: 8px;
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.discussion-link a {
|
||||
color: #3b82f6; /* blue */
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.discussion-link a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
90
package-lock.json
generated
90
package-lock.json
generated
|
|
@ -107,6 +107,7 @@
|
|||
"@vueuse/core": "^13.1.0",
|
||||
"axios": "^1.8.2",
|
||||
"oidc-client-ts": "^3.1.0",
|
||||
"rollup": "^4.40.0",
|
||||
"uuid": "^11.1.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-i18n": "^11.1.2",
|
||||
|
|
@ -2320,13 +2321,11 @@
|
|||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm64": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2335,13 +2334,11 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-arm64": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2350,13 +2347,11 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-x64": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2365,13 +2360,11 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-arm64": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2380,13 +2373,11 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-x64": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2395,13 +2386,11 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2410,13 +2399,11 @@
|
|||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2425,13 +2412,11 @@
|
|||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-gnu": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2440,13 +2425,11 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-musl": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2455,13 +2438,11 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-loongarch64-gnu": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2470,13 +2451,11 @@
|
|||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2485,13 +2464,11 @@
|
|||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2500,13 +2477,11 @@
|
|||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-musl": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2515,13 +2490,11 @@
|
|||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-s390x-gnu": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2530,13 +2503,11 @@
|
|||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-gnu": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2545,13 +2516,11 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-musl": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2560,13 +2529,11 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-arm64-msvc": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2575,13 +2542,11 @@
|
|||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-ia32-msvc": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2590,13 +2555,11 @@
|
|||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-x64-msvc": {
|
||||
"version": "4.40.0",
|
||||
|
|
@ -2605,13 +2568,11 @@
|
|||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"peer": true
|
||||
]
|
||||
},
|
||||
"node_modules/@scarf/scarf": {
|
||||
"version": "1.4.0",
|
||||
|
|
@ -2824,7 +2785,6 @@
|
|||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
|
||||
"integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/express": {
|
||||
|
|
@ -6427,9 +6387,9 @@
|
|||
"license": "MIT"
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.141",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.141.tgz",
|
||||
"integrity": "sha512-qS+qH9oqVYc1ooubTiB9l904WVyM6qNYxtOEEGReoZXw3xlqeYdFr5GclNzbkAufWgwWLEPoDi3d9MoRwwIjGw==",
|
||||
"version": "1.5.142",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.142.tgz",
|
||||
"integrity": "sha512-Ah2HgkTu/9RhTDNThBtzu2Wirdy4DC9b0sMT1pUhbkZQ5U/iwmE+PHZX1MpjD5IkJCc2wSghgGG/B04szAx07w==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
|
|
@ -7854,7 +7814,6 @@
|
|||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
|
||||
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
|
|
@ -13619,7 +13578,6 @@
|
|||
"version": "4.40.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
|
||||
"integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/estree": "1.0.7"
|
||||
|
|
|
|||
Reference in a new issue