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

chore(frontend): DiscussionsSideBar component

Browse source
This commit is contained in:
Tibo De Peuter 2025-05-17 15:50:47 +02:00
parent fe397c54e3
commit 0d2b486a2c
Signed by: tdpeuter
GPG key ID: 38297DE43F75FFE2
4 changed files with 317 additions and 330 deletions
Download patch file Download diff file Expand all files Collapse all files

66
frontend/src/components/DiscussionsSideBar.vue Normal file
View file

@ -0,0 +1,66 @@
<script setup lang="ts">
import type { LearningPath } from '@/data-objects/learning-paths/learning-path.ts';
import UsingQueryResult from '@/components/UsingQueryResult.vue';
import DiscussionSideBarElement from '@/components/DiscussionSideBarElement.vue';
import { useI18n } from 'vue-i18n';
import { useGetAllLearningPaths } from '@/queries/learning-paths.ts';
import { ref } from 'vue';
const { t, locale } = useI18n();
const navigationDrawerShown = ref(true);
const allLearningPathsResult = useGetAllLearningPaths(locale.value);
</script>
<template>
<v-navigation-drawer
v-model="navigationDrawerShown"
:width="350"
app
>
<div class="d-flex flex-column h-100">
<v-list-item>
<template v-slot:title>
<div class="title">{{ t('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"
:key="learningPath.hruid"
>
</DiscussionSideBarElement>
</using-query-result>
</div>
</div>
</v-navigation-drawer>
<div class="control-bar-above-content">
<v-btn
:icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
class="navigation-drawer-toggle-button"
variant="plain"
@click="navigationDrawerShown = !navigationDrawerShown"
></v-btn>
</div>
</template>
<style scoped>
.title {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 36px;
}
</style>

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

@ -57,12 +57,6 @@ const router = createRouter({
name: "UserClasses",
component: UserClasses,
},
// TODO Re-enable this route when the discussion page is ready
// {
// Path: "discussion",
// Name: "UserDiscussions",
// Component: UserDiscussions,
// },
],
},

64
frontend/src/views/discussions/NoDiscussion.vue
View file

@ -1,47 +1,13 @@
<script setup lang="ts">
import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
import { useI18n } from "vue-i18n";
import { useGetAllLearningPaths } from "@/queries/learning-paths.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import DiscussionSideBarElement from "@/components/DiscussionSideBarElement.vue";
import { ref } from "vue";
import { useI18n } from 'vue-i18n';
import DiscussionsSideBar from '@/components/DiscussionsSideBar.vue';
const { t, locale } = useI18n();
const allLearningPathsResult = useGetAllLearningPaths(locale.value)
const navigationDrawerShown = ref(true);
const { t } = useI18n();
</script>
<template>
<v-navigation-drawer
v-model="navigationDrawerShown"
:width="350"
app
>
<div class="d-flex flex-column h-100">
<v-list-item>
<template v-slot:title>
<div class="title">{{t("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"
:key="learningPath.hruid"
>
</DiscussionSideBarElement>
</using-query-result>
</div>
</div>
</v-navigation-drawer>
<DiscussionsSideBar></DiscussionsSideBar>
<div>
<p class="no-discussion-tip">{{t("no-discussion-tip")}}</p>
</div>
@ -52,19 +18,12 @@
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
height: 100vh;
text-align: center;
font-size: 18px;
color: #666;
padding: 0 20px;
}
.title {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 36px;
}
.learning-path-title {
white-space: normal;
}
@ -130,19 +89,6 @@
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;

511
frontend/src/views/discussions/SingleDiscussion.vue
View file

@ -1,189 +1,176 @@
<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, ref, watch } from "vue";
import type { LearningObject } from "@/data-objects/learning-objects/learning-object.ts";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
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 { 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";
import { Language } from '@/data-objects/language.ts';
import type { LearningPath } from '@/data-objects/learning-paths/learning-path.ts';
import { computed, type ComputedRef, ref, watch } from 'vue';
import type { LearningObject } from '@/data-objects/learning-objects/learning-object.ts';
import { useRoute } from 'vue-router';
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 { 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 DiscussionsSideBar from '@/components/DiscussionsSideBar.vue';
const route = useRoute();
const { t } = useI18n();
const route = useRoute();
const props = defineProps<{
hruid: string;
language: Language;
learningObjectHruid?: string;
}>();
const props = defineProps<{
hruid: string;
language: Language;
learningObjectHruid?: string;
}>();
interface LearningPathPageQuery {
forGroup?: string;
assignmentNo?: string;
classId?: string;
}
interface LearningPathPageQuery {
forGroup?: string;
assignmentNo?: string;
classId?: string;
}
const query = computed(() => route.query as LearningPathPageQuery);
const query = computed(() => route.query as LearningPathPageQuery);
const forGroup = computed(() => {
if (query.value.forGroup && query.value.assignmentNo && query.value.classId) {
return {
forGroup: parseInt(query.value.forGroup),
assignmentNo: parseInt(query.value.assignmentNo),
classId: query.value.classId,
};
}
return undefined;
});
const allLearningPathsResult = useGetAllLearningPaths(props.language)
// TODO: dit moet alle leerpaden met vragen teruggeven, maar werkt niet
const _questionedLearningPaths = computed(() => {
function objectHasQuestion(learningObject: LearningObject): ComputedRef<boolean> {
const loid = {
hruid: learningObject.key,
version: learningObject.version,
language: learningObject.language,
} as LearningObjectIdentifierDTO;
const { data } = useQuestionsQuery(loid);
const hasQuestions = computed(() => (data.value?.questions.length ?? 0) > 0);
return hasQuestions;
}
function pathHasQuestion(learningPath: LearningPath): boolean {
const learningPathQueryResult = useGetLearningPathQuery(learningPath.hruid, learningPath.language as Language, forGroup);
const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
const learningObjects = learningObjectListQueryResult.data.value;
return learningObjects?.some(objectHasQuestion) || false;
}
return allLearningPathsResult.data.value?.filter(pathHasQuestion);
})
const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, forGroup);
const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
const nodesList: ComputedRef<LearningPathNode[] | null> = computed(
() => learningPathQueryResult.data.value?.nodesAsList ?? null,
);
const currentNode = computed(() => {
const currentHruid = props.learningObjectHruid;
return nodesList.value?.find((it) => it.learningobjectHruid === currentHruid);
});
const getQuestionsQuery = useQuestionsQuery(
computed(
() =>
({
language: currentNode.value?.language,
hruid: currentNode.value?.learningobjectHruid,
version: currentNode.value?.version,
}) as LearningObjectIdentifierDTO,
),
);
const navigationDrawerShown = ref(true);
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: ComputedRef<LearningObjectIdentifierDTO> = computed(() => ({
hruid: props.learningObjectHruid as string,
language: props.language,
version: currentNode.value?.version
}));
const createQuestionMutation = useCreateQuestionMutation(loID.value);
watch(
() => [route.params.hruid, route.params.language, route.params.learningObjectHruid],
() => {
//TODO: moet op een of andere manier createQuestionMutation opnieuw kunnen instellen
// Momenteel opgelost door de DiscussionsForward page workaround
}
);
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,
const forGroup = computed(() => {
if (query.value.forGroup && query.value.assignmentNo && query.value.classId) {
return {
forGroup: parseInt(query.value.forGroup),
assignmentNo: parseInt(query.value.assignmentNo),
classId: query.value.classId,
};
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);
},
});
}
}
return undefined;
});
const allLearningPathsResult = useGetAllLearningPaths(props.language);
async function learningObjectHasQuestions(learningObject: LearningObject): Promise<boolean> {
const loid = {
hruid: learningObject.key,
version: learningObject.version,
language: learningObject.language,
} as LearningObjectIdentifierDTO;
const { data } = useQuestionsQuery(loid);
return (data.value?.questions.length ?? 0) > 0;
}
async function learningPathHasQuestions(learningPath: LearningPath): Promise<boolean> {
const learningPathQueryResult = useGetLearningPathQuery(learningPath.hruid, learningPath.language as Language, forGroup);
const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
const learningObjects = learningObjectListQueryResult.data.value || [];
const hasQuestions = await Promise.all(
learningObjects.map(async (learningObject) => learningObjectHasQuestions(learningObject)),
);
return hasQuestions.some((hasQuestion) => hasQuestion);
}
const questionedLearningPaths = ref<LearningPath[] | null>(null);
watch(
() => allLearningPathsResult.data.value,
async (learningPaths) => {
if (learningPaths) {
const pathsWithQuestions = await Promise.all(
learningPaths.map(async (learningPath) => {
const hasQuestions = await learningPathHasQuestions(learningPath);
return hasQuestions ? learningPath : null;
}),
);
questionedLearningPaths.value = pathsWithQuestions.filter((path) => path !== null);
}
},
{ immediate: true },
);
const learningPathQueryResult = useGetLearningPathQuery(props.hruid, props.language, forGroup);
const learningObjectListQueryResult = useLearningObjectListForPathQuery(learningPathQueryResult.data);
const nodesList: ComputedRef<LearningPathNode[] | null> = computed(
() => learningPathQueryResult.data.value?.nodesAsList ?? null,
);
const currentNode = computed(() => {
const currentHruid = props.learningObjectHruid;
return nodesList.value?.find((it) => it.learningobjectHruid === currentHruid);
});
const getQuestionsQuery = useQuestionsQuery(
computed(
() =>
({
language: currentNode.value?.language,
hruid: currentNode.value?.learningobjectHruid,
version: currentNode.value?.version,
}) as LearningObjectIdentifierDTO,
),
);
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: ComputedRef<LearningObjectIdentifierDTO> = computed(() => ({
hruid: props.learningObjectHruid as string,
language: props.language,
version: currentNode.value?.version,
}));
const createQuestionMutation = useCreateQuestionMutation(loID.value);
watch(
() => [route.params.hruid, route.params.language, route.params.learningObjectHruid],
() => {
//TODO: moet op een of andere manier createQuestionMutation opnieuw kunnen instellen
// Momenteel opgelost door de DiscussionsForward page workaround
},
);
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,
};
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>
<v-navigation-drawer
v-model="navigationDrawerShown"
:width="350"
>
<div class="d-flex flex-column h-100">
<v-list-item>
<template v-slot:title>
<div class="title">{{t("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="props.learningObjectHruid as string"
:key="learningPath.hruid"
>
</DiscussionSideBarElement>
</using-query-result>
</div>
</div>
</v-navigation-drawer>
<DiscussionsSideBar></DiscussionsSideBar>
<div
v-if="authService.authState.activeRole === 'student' && pathIsAssignment"
class="question-box"
@ -212,103 +199,97 @@
</template>
<style scoped>
.title {
color: #0e6942;
text-transform: uppercase;
font-weight: bolder;
padding-top: 2%;
font-size: 36px;
}
.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);
}
.learning-path-title {
white-space: normal;
}
.question-input {
flex: 1;
border: none;
outline: none;
font-size: 14px;
background-color: transparent;
}
.search-field-container {
min-width: 250px;
}
.question-input::placeholder {
color: #999;
}
.control-bar-above-content {
margin-left: 5px;
margin-right: 5px;
margin-bottom: -30px;
display: flex;
justify-content: space-between;
}
.send-button {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
color: #555;
transition: color 0.2s ease;
}
.learning-object-view-container {
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.send-button:hover {
color: #000;
}
.navigation-buttons-container {
padding: 20px;
display: flex;
justify-content: space-between;
}
.discussion-link {
margin-top: 8px;
font-size: 13px;
color: #444;
}
.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 */
}
.discussion-link a {
color: #3b82f6; /* blue */
text-decoration: none;
}
.question-box {
width: 100%;
max-width: 400px;
margin: 20px auto;
font-family: sans-serif;
}
.discussion-link a:hover {
text-decoration: underline;
}
.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 a {
color: #3b82f6; /* blue */
text-decoration: none;
}
.discussion-link a:hover {
text-decoration: underline;
}
</style>