Merge remote-tracking branch 'origin/dev' into feat/endpoints-beschermen-met-authenticatie-#105

# Conflicts:
#	backend/src/services/questions.ts

.github/workflows/backend-testing.yml

@@ -9,13 +9,13 @@ name: Backend Testing
 #   - a draft PR to "dev" with backend js/ts files is marked as ready for review
 on:
   push:
-    branches: [ "dev" ]
+    branches: [ "dev", "main" ]
     paths:
       - 'backend/src/**.[jt]s'
       - 'backend/tests/**.[jt]s'
       - 'backend/vitest.config.ts'
   pull_request:
-    branches: [ "dev" ]
+    branches: [ "dev", "main" ]
     types: ["synchronize", "ready_for_review", "opened", "reopened"]
     paths:
       - 'backend/src/**.[jt]s'

.github/workflows/deployment.yml

@@ -15,8 +15,8 @@ jobs:
         uses: actions/checkout@v4
       -
         name: Copy environment variables to correct file
-        run: cp /home/dev/.backend.env backend/.env
+        run: cp /home/dev/.backend.env backend/.env && cp /home/dev/.idp.env config/idp/.env
       -
         name: Start docker
-        run: docker compose -f compose.production.yml up --build -d
-        
+        run: docker compose -f compose.yml -f compose.production.yml up --build -d
+        

.github/workflows/frontend-testing.yml

@@ -9,7 +9,7 @@ name: Frontend Testing
 #   - a draft PR to "dev" with frontend js/ts/vue/css files is marked as ready for review
 on:
     push:
-      branches: [ "dev" ]
+      branches: [ "dev", "main" ]
       paths:
         - 'frontend/src/**.[jt]s'
         - 'frontend/src/**.vue'
@@ -20,7 +20,7 @@ on:
         - 'frontend/vitest.config.ts'
         - 'frontend/playwright.config.ts'
     pull_request:
-      branches: [ "dev" ]
+      branches: [ "dev", "main" ]
       types: ["synchronize", "ready_for_review", "opened", "reopened"]
       paths:
         - 'frontend/src/**.[jt]s'

.github/workflows/lint-action.yml

@@ -4,13 +4,11 @@ on:
     # Trigger the workflow on push or pull request,
     # but only for the main branch
     push:
-        branches:
-            - dev
+        branches: [ "dev", "main" ]
     # Replace pull_request with pull_request_target if you
     # plan to use this action with forks, see the Limitations section
     pull_request:
-        branches:
-            - dev
+        branches: [ "dev", "main" ]
         types: ["synchronize", "ready_for_review", "opened", "reopened"]
 
 

backend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dwengo-1/backend",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "description": "Backend for Dwengo-1",
     "private": true,
     "type": "module",

backend/src/controllers/questions.ts

@@ -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 });
 

backend/src/controllers/students.ts

@@ -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 });
 }

backend/src/data/questions/answer-repository.ts

@@ -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({

backend/src/data/questions/question-repository.ts

@@ -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({

backend/src/services/questions.ts

@@ -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';
 import { ConflictException } from '../exceptions/conflict-exception.js';
 
 export async function getQuestionsAboutLearningObjectInAssignment(
@@ -87,22 +88,30 @@ export async function createQuestion(loId: LearningObjectIdentifier, questionDat
     const author = await fetchStudent(questionData.author!);
     const content = questionData.content;
 
-    const clazz = await getClassRepository().findById((questionData.inGroup.assignment as AssignmentDTO).within);
-    const assignment = mapToAssignment(questionData.inGroup.assignment as AssignmentDTO, clazz!);
-    const group = await getGroupRepository().findByAssignmentAndGroupNumber(assignment, questionData.inGroup.groupNumber);
+    let assignment;
 
-    if (!group) {
+    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);
+        assignment = mapToAssignment(questionData.inGroup.assignment as AssignmentDTO, clazz!);
+    }
+
+    const inGroup = await getGroupRepository().findByAssignmentAndGroupNumber(assignment, questionData.inGroup.groupNumber);
+
+    if (!inGroup) {
         throw new NotFoundException('Group with id and assignment not found');
     }
 
-    if (!group.members.contains(author)) {
+    if (!inGroup.members.contains(author)) {
         throw new ConflictException('Author is not part of this group');
     }
 
     const question = await questionRepository.createQuestion({
         loId,
         author,
-        inGroup: group,
+        inGroup: inGroup!,
         content,
     });
 

backend/tests/test_assets/questions/answers.testdata.ts

@@ -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];
 }

backend/tests/test_assets/questions/questions.testdata.ts

@@ -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;
 }

backend/tests/test_assets/users/teachers.testdata.ts

@@ -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];

common/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dwengo-1/common",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "description": "Common types and utilities for Dwengo-1",
     "private": true,
     "type": "module",

compose.production.yml

@@ -42,18 +42,37 @@ services:
         networks:
             - dwengo-1
 
+    keycloak-db:
+        image: postgres:latest
+        ports:
+            - '5442:5432' # Port number 10 higher than normal postgres ports
+        restart: unless-stopped
+        volumes:
+            - dwengo_postgres_keycloak:/var/lib/postgresql/keycloak
+        environment:
+            POSTGRES_USER: keycloak
+            POSTGRES_PASSWORD: ChangeMe
+            POSTGRES_DB: keycloak
+        networks:
+            - dwengo-1
+
     idp:
         extends:
             file: ./compose.yml
             service: idp
-        # TODO Replace with proper production command
-        command: ['start-dev', '--http-port', '7080', '--https-port', '7443', '--import-realm']
+        command: ['start', '--http-port', '7080', '--https-port', '7443', '--import-realm']
         networks:
             - dwengo-1
         labels:
             - 'traefik.enable=true'
             - 'traefik.http.routers.idp.rule=PathPrefix(`/idp`)'
             - 'traefik.http.services.idp.loadbalancer.server.port=7080'
+            - 'traefik.http.routers.block-admin.rule=PathPrefix(`/idp/admin`)'
+            - 'traefik.http.routers.block-admin.service=web'
+        depends_on:
+            - keycloak-db
+        volumes:
+            - /etc/keycloak:/keycloak
         env_file:
             - ./config/idp/.env
         environment:
@@ -62,6 +81,13 @@ services:
             KC_PROXY_HEADERS: 'xforwarded'
             KC_HTTP_ENABLED: 'true'
             KC_HTTP_RELATIVE_PATH: '/idp'
+            KC_HTTPS_CERTIFICATE_FILE: '/keycloak/cert.pem'
+            KC_HTTPS_CERTIFICATE_KEY_FILE: '/keycloak/key.pem'
+            KC_HTTP_MAX_QUEUED_REQUESTS: 30 # Prevent overload situations by limiting number of requests
+            KC_DB: 'postgres'
+            KC_DB_USERNAME: 'keycloak'
+            KC_DB_PASSWORD: 'ChangeMe'
+            KC_DB_URL: 'jdbc:postgresql://keycloak-db:5432/keycloak'
 
     reverse-proxy:
         image: traefik:v3.3
@@ -121,6 +147,7 @@ volumes:
     dwengo_grafana_data:
     dwengo_letsencrypt:
     dwengo_loki_data:
+    dwengo_postgres_keycloak:
 
 networks:
     dwengo-1:

compose.yml

@@ -25,8 +25,6 @@ services:
         restart: unless-stopped
         volumes:
             - ./config/idp:/opt/keycloak/data/import
-        depends_on:
-            - db
         environment:
             KC_HOSTNAME: localhost
             KC_HOSTNAME_PORT: 7080

docs/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dwengo-1-docs",
-    "version": "0.0.1",
+    "version": "0.2.0",
     "description": "Documentation for Dwengo-1",
     "private": true,
     "scripts": {

frontend/index.html

@@ -10,7 +10,7 @@
             name="viewport"
             content="width=device-width, initial-scale=1.0"
         />
-        <title>Vite App</title>
+        <title>Dwengo-1</title>
     </head>
     <body>
         <div id="app"></div>

frontend/package.json

@@ -1,6 +1,6 @@
 {
     "name": "dwengo-1-frontend",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "description": "Frontend for Dwengo-1",
     "private": true,
     "type": "module",
@@ -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",

frontend/src/components/QandA.vue

@@ -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>

frontend/src/components/QuestionNotification.vue

@@ -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>

frontend/src/components/SingleQuestion.vue

@@ -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>

frontend/src/controllers/answers.ts

@@ -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 });
     }
 }

frontend/src/controllers/questions.ts

@@ -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 });
     }
 }

frontend/src/i18n/locale/de.json

@@ -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."
 }

frontend/src/i18n/locale/en.json

@@ -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."
 }

frontend/src/i18n/locale/fr.json

@@ -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."
 }

frontend/src/i18n/locale/nl.json

@@ -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."
 }

frontend/src/views/learning-paths/LearningPathPage.vue

@@ -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>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "dwengo-1",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "description": "Monorepo for Dwengo-1",
     "private": true,
     "type": "module",
@@ -42,8 +42,5 @@
         "eslint-config-prettier": "^10.0.1",
         "jiti": "^2.4.2",
         "typescript-eslint": "^8.24.1"
-    },
-    "dependencies": {
-        "swagger": "^0.7.5"
     }
 }