feat: tip wanneer er geen leerobject geselecteerd is in discussies

This commit is contained in:
Timo De Meyst 2025-05-15 19:04:36 +02:00
parent b193d47d42
commit 233d89b5bf
6 changed files with 51 additions and 25 deletions

View file

@ -185,7 +185,7 @@
</v-list-item>
<v-list-item
to="/user/discussion"
to="/discussion"
link
>
<v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>

View file

@ -127,5 +127,6 @@
"question-input-placeholder": "Frage...",
"answer-input-placeholder": "Antwort...",
"answers-toggle-hide": "Antworten verstecken",
"answers-toggle-show": "Antworten anzeigen"
"answers-toggle-show": "Antworten anzeigen",
"no-discussion-tip": "Wählen Sie ein Lernobjekt aus, um dessen Fragen anzuzeigen"
}

View file

@ -127,6 +127,7 @@
"question-input-placeholder": "question...",
"answer-input-placeholder": "answer...",
"answers-toggle-hide": "Hide answers",
"answers-toggle-show": "Show answers"
"answers-toggle-show": "Show answers",
"no-discussion-tip": "Choose a learning object to view its questions"
}

View file

@ -127,5 +127,6 @@
"question-input-placeholder": "question...",
"answer-input-placeholder": "réponse...",
"answers-toggle-hide": "Masquer réponses",
"answers-toggle-show": "Afficher réponse"
"answers-toggle-show": "Afficher réponse",
"no-discussion-tip": "Sélectionnez un objet d'apprentissage pour afficher les questions qui s'y rapportent"
}

View file

@ -127,5 +127,6 @@
"question-input-placeholder": "vraag...",
"answer-input-placeholder": "antwoord...",
"answers-toggle-hide": "Verberg antwoorden",
"answers-toggle-show": "Toon antwoorden"
"answers-toggle-show": "Toon antwoorden",
"no-discussion-tip": "Kies een leerobject om zijn vragen te bekijken"
}

View file

@ -4,44 +4,66 @@
import { useGetAllLearningPaths } from "@/queries/learning-paths.ts";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import DiscussionSideBarElement from "@/components/DiscussionSideBarElement.vue";
import { ref } from "vue";
const { t, locale } = useI18n();
const allLearningPathsResult = useGetAllLearningPaths(locale.value)
const navigationDrawerShown = ref(true);
</script>
<template>
<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>
<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>
<p class="no-discussion-tip">{{t("no-discussion-tip")}}</p>
</div>
</template>
<style scoped>
.no-discussion-tip {
display: flex;
justify-content: center;
align-items: center;
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: 50px;
font-size: 36px;
}
.learning-path-title {
white-space: normal;