fix(frontend): Fouten door de merge van dev opgelost.

This commit is contained in:
Gerald Schmittinger 2025-03-25 10:05:31 +01:00
parent 858f4c3694
commit 18616450cf
4 changed files with 97 additions and 105 deletions

View file

@ -1,15 +1,11 @@
<script setup lang="ts">
import auth from "@/services/auth/auth-service.ts";
import MenuBar from "@/components/MenuBar.vue";
auth.loadUser();
</script>
<template>
<v-app>
<menu-bar></menu-bar>
<v-main>
<router-view />
</v-main>
<router-view />
</v-app>
</template>

View file

@ -296,7 +296,6 @@
</li>
</div>
</nav>
<router-view />
</main>
</template>
@ -352,16 +351,4 @@
nav a.router-link-active {
font-weight: bold;
}
@media (max-width: 700px) {
.menu {
display: none;
}
}
@media (min-width: 701px) {
.menu_collapsed {
display: none;
}
}
</style>

View file

@ -110,23 +110,30 @@ const router = createRouter({
meta: { requiresAuth: true },
},
{
path: "/learningPath/search",
name: "LearningPathSearchPage",
component: LearningPathSearchPage,
meta: { requiresAuth: false }
},
{
path: "/learningPath/:hruid/:language",
name: "LearningPath",
component: LearningPathPage,
props: true,
meta: { requiresAuth: false },
path: "/learningPath",
component: MenuBar,
children: [
{
path: ":learningObjectHruid",
path: "/search",
name: "LearningPathSearchPage",
component: LearningPathSearchPage,
meta: { requiresAuth: true }
},
{
path: "/:hruid/:language",
name: "LearningPath",
component: LearningPathPage,
props: true,
}
meta: { requiresAuth: true },
children: [
{
path: ":learningObjectHruid",
component: LearningPathPage,
props: true,
meta: { requiresAuth: true }
}
]
},
]
},
{

View file

@ -123,84 +123,86 @@
</script>
<template>
<using-remote-resource
:resource="learningPathResource"
v-slot="learningPath: {data: LearningPath}"
>
<v-navigation-drawer v-model="navigationDrawerShown">
<v-list-item
:title="learningPath.data.title"
:subtitle="learningPath.data.description"
></v-list-item>
<v-list-item>
<template v-slot:subtitle>
<p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
<p><v-icon :color="COLORS.completed" :icon="ICONS.completed"></v-icon> {{ t("legendCompleted") }}</p>
<p><v-icon :color="COLORS.teacherExclusive" :icon="ICONS.teacherExclusive"></v-icon> {{ t("legendTeacherExclusive") }}</p>
</template>
</v-list-item>
<v-divider></v-divider>
<v-main>
<using-remote-resource
:resource="learningPathResource"
v-slot="learningPath: {data: LearningPath}"
>
<v-navigation-drawer v-model="navigationDrawerShown">
<v-list-item
:title="learningPath.data.title"
:subtitle="learningPath.data.description"
></v-list-item>
<v-list-item>
<template v-slot:subtitle>
<p><v-icon :color="COLORS.notCompleted" :icon="ICONS.notCompleted"></v-icon> {{ t("legendNotCompletedYet") }}</p>
<p><v-icon :color="COLORS.completed" :icon="ICONS.completed"></v-icon> {{ t("legendCompleted") }}</p>
<p><v-icon :color="COLORS.teacherExclusive" :icon="ICONS.teacherExclusive"></v-icon> {{ t("legendTeacherExclusive") }}</p>
</template>
</v-list-item>
<v-divider></v-divider>
<div v-if="props.learningObjectHruid">
<using-remote-resource
:resource="learningObjectListResource"
v-slot="learningObjects: {data: LearningObject[]}"
>
<v-list-item
link
:to="{path: node.key, query: route.query}"
:title="node.title"
:active="node.key === props.learningObjectHruid"
v-for="node in learningObjects.data"
<div v-if="props.learningObjectHruid">
<using-remote-resource
:resource="learningObjectListResource"
v-slot="learningObjects: {data: LearningObject[]}"
>
<template v-slot:prepend>
<v-icon
:color="COLORS[getNavItemState(node)]"
:icon="ICONS[getNavItemState(node)]"></v-icon>
</template>
<template v-slot:append>
{{ node.estimatedTime }}'
</template>
</v-list-item>
</using-remote-resource>
<v-list-item
link
:to="{path: node.key, query: route.query}"
:title="node.title"
:active="node.key === props.learningObjectHruid"
v-for="node in learningObjects.data"
>
<template v-slot:prepend>
<v-icon
:color="COLORS[getNavItemState(node)]"
:icon="ICONS[getNavItemState(node)]"></v-icon>
</template>
<template v-slot:append>
{{ node.estimatedTime }}'
</template>
</v-list-item>
</using-remote-resource>
</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 class="search-field-container">
<learning-path-search-field></learning-path-search-field>
</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 class="search-field-container">
<learning-path-search-field></learning-path-search-field>
</div>
</div>
<learning-object-view
:hruid="currentNode.learningobjectHruid"
:language="currentNode.language"
:version="currentNode.version"
v-if="currentNode"
></learning-object-view>
<div class="navigation-buttons-container">
<v-btn
prepend-icon="mdi-chevron-left"
variant="text"
:disabled="!previousNode"
:to="previousNode ? {path: previousNode.learningobjectHruid, query: route.query} : undefined"
>
{{ t("previous") }}
</v-btn>
<v-btn
append-icon="mdi-chevron-right"
variant="text"
:disabled="!nextNode"
:to="nextNode ? {path: nextNode.learningobjectHruid, query: route.query} : undefined"
>
{{ t("next") }}
</v-btn>
</div>
</using-remote-resource>
<learning-object-view
:hruid="currentNode.learningobjectHruid"
:language="currentNode.language"
:version="currentNode.version"
v-if="currentNode"
></learning-object-view>
<div class="navigation-buttons-container">
<v-btn
prepend-icon="mdi-chevron-left"
variant="text"
:disabled="!previousNode"
:to="previousNode ? {path: previousNode.learningobjectHruid, query: route.query} : undefined"
>
{{ t("previous") }}
</v-btn>
<v-btn
append-icon="mdi-chevron-right"
variant="text"
:disabled="!nextNode"
:to="nextNode ? {path: nextNode.learningobjectHruid, query: route.query} : undefined"
>
{{ t("next") }}
</v-btn>
</div>
</using-remote-resource>
</v-main>
</template>
<style scoped>