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

feat: algemene discussions pagina terug

Browse source
This commit is contained in:
Timo De Meyst 2025-05-15 17:23:48 +02:00
parent f3b4050f0d
commit e2abaa2625
3 changed files with 169 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
frontend/src/components/MenuBar.vue
View file

@ -82,14 +82,13 @@
>
{{ t("classes") }}
</v-btn>
<!-- TODO Re-enable this button when the discussion page is ready -->
<!-- <v-btn-->
<!-- class="menu_item"-->
<!-- variant="text"-->
<!-- to="/user/discussion"-->
<!-- >-->
<!-- {{ t("discussions") }}-->
<!-- </v-btn>-->
<v-btn
class="menu_item"
variant="text"
to="/discussion"
>
{{ t("discussions") }}
</v-btn>
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn

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

@ -15,6 +15,7 @@ import SingleTheme from "@/views/SingleTheme.vue";
import LearningObjectView from "@/views/learning-paths/learning-object/LearningObjectView.vue";
import authService from "@/services/auth/auth-service";
import DiscussionForward from "@/views/discussions/DiscussionForward.vue";
import NoDiscussion from "@/views/discussions/NoDiscussion.vue";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -100,6 +101,12 @@ const router = createRouter({
component: CreateDiscussion,
meta: { requiresAuth: true },
},
{
path: "/discussion",
name: "Discussions",
component: NoDiscussion,
meta: { requiresAuth: true },
},
{
path: "/discussion/:hruid/:language/:learningObjectHruid",
name: "SingleDiscussion",

155
frontend/src/views/discussions/NoDiscussion.vue Normal file
View file

@ -0,0 +1,155 @@
<script setup lang="ts">
import { Language } from "@/data-objects/language.ts";
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import { computed, type ComputedRef, provide, ref, watch } from "vue";
import type { LearningObject } from "@/data-objects/learning-objects/learning-object.ts";
import { useRoute, useRouter } from "vue-router";
import LearningObjectView from "@/views/learning-paths/learning-object/LearningObjectView.vue";
import { useI18n } from "vue-i18n";
import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
import { useGetAllLearningPaths, useGetLearningPathQuery } from "@/queries/learning-paths.ts";
import { useLearningObjectListForPathQuery } from "@/queries/learning-objects.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
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 DiscussionSideBarElement from "@/components/DiscussionSideBarElement.vue";
const route = useRoute();
const { t, locale } = useI18n();
const allLearningPathsResult = useGetAllLearningPaths(locale.value)
</script>
<template>
<div class="d-flex flex-column h-100">
<v-list-item>
<template v-slot:title>
<div class="title">Discussions</div>
</template>
</v-list-item>
<v-divider></v-divider>
<div>
<using-query-result
:query-result="allLearningPathsResult"
v-slot="learningPaths: {data: LearningPath[]}">
<DiscussionSideBarElement
v-for="learningPath in learningPaths.data"
:path="learningPath"
:activeObjectId="'' as string">
</DiscussionSideBarElement>
</using-query-result>
</div>
</div>
</template>
<style scoped>
.title {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 50px;
}
.learning-path-title {
white-space: normal;
}
.search-field-container {
min-width: 250px;
}
.control-bar-above-content {
margin-left: 5px;
margin-right: 5px;
margin-bottom: -30px;
display: flex;
justify-content: space-between;
}
.learning-object-view-container {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.navigation-buttons-container {
padding: 20px;
display: flex;
justify-content: space-between;
}
.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>