From e2abaa2625e4c7354cd6d1735426b8a0a718a813 Mon Sep 17 00:00:00 2001
From: Timo De Meyst <timo.demeyst@ugent.be>
Date: Thu, 15 May 2025 17:23:48 +0200
Subject: [PATCH] feat: algemene discussions pagina terug

---
 frontend/src/components/MenuBar.vue           |  15 +-
 frontend/src/router/index.ts                  |   7 +
 .../src/views/discussions/NoDiscussion.vue    | 155 ++++++++++++++++++
 3 files changed, 169 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/views/discussions/NoDiscussion.vue

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index e3734976..93671b13 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/frontend/src/components/MenuBar.vue
@@ -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
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index ecdb8540..24998bc0 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -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",
diff --git a/frontend/src/views/discussions/NoDiscussion.vue b/frontend/src/views/discussions/NoDiscussion.vue
new file mode 100644
index 00000000..f367cd4c
--- /dev/null
+++ b/frontend/src/views/discussions/NoDiscussion.vue
@@ -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>