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

feat(frontend): Navigatiebalk op LearningPathPage inklapbaar gemaakt.

Browse source
This commit is contained in:
Gerald Schmittinger 2025-03-24 23:30:40 +01:00
parent 4356a1ccd2
commit a9643838b7
1 changed files with 21 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/src/views/learning-paths/LearningPathPage.vue
View file

@ -3,7 +3,7 @@
import {getLearningPath} from "@/services/learning-content/learning-path-service.ts"; import {getLearningPath} from "@/services/learning-content/learning-path-service.ts";
import UsingRemoteResource from "@/components/UsingRemoteResource.vue"; import UsingRemoteResource from "@/components/UsingRemoteResource.vue";
import {type LearningPath, LearningPathNode} from "@/services/learning-content/learning-path.ts"; import {type LearningPath, LearningPathNode} from "@/services/learning-content/learning-path.ts";
import {computed, type ComputedRef, watch} from "vue"; import {computed, type ComputedRef, ref, watch} from "vue";
import type {LearningObject} from "@/services/learning-content/learning-object.ts"; import type {LearningObject} from "@/services/learning-content/learning-object.ts";
import {useRoute, useRouter} from "vue-router"; import {useRoute, useRouter} from "vue-router";
import {loadResource, remoteResource, type SuccessState} from "@/services/api-client/remote-resource.ts"; import {loadResource, remoteResource, type SuccessState} from "@/services/api-client/remote-resource.ts";
@ -73,14 +73,16 @@
} }
}); });
if (!props.learningObjectHruid) {
watch(() => learningPathResource.state, (newValue) => { watch(() => learningPathResource.state, (newValue) => {
if (newValue.type === "success") { if (!props.learningObjectHruid && newValue.type === "success") {
router.push(router.currentRoute.value.path router.push({
+ "/" + (newValue as SuccessState<LearningPath>).data.startNode.learningobjectHruid); path: router.currentRoute.value.path + "/" + (newValue as SuccessState<LearningPath>).data.startNode.learningobjectHruid,
} query: route.query,
}); });
} }
});
const navigationDrawerShown = ref(true);
function isLearningObjectCompleted(learningObject: LearningObject): boolean { function isLearningObjectCompleted(learningObject: LearningObject): boolean {
if (learningPathResource.state.type === "success") { if (learningPathResource.state.type === "success") {
@ -99,7 +101,7 @@
:resource="learningPathResource" :resource="learningPathResource"
v-slot="learningPath: {data: LearningPath}" v-slot="learningPath: {data: LearningPath}"
> >
<v-navigation-drawer> <v-navigation-drawer v-model="navigationDrawerShown">
<v-list-item <v-list-item
:title="learningPath.data.title" :title="learningPath.data.title"
:subtitle="learningPath.data.description" :subtitle="learningPath.data.description"
@ -126,6 +128,11 @@
</using-remote-resource> </using-remote-resource>
</div> </div>
</v-navigation-drawer> </v-navigation-drawer>
<v-btn
:icon="navigationDrawerShown ? 'mdi-menu-open' : 'mdi-menu'"
class="navigation-drawer-toggle-button"
variant="plain"
@click="navigationDrawerShown = !navigationDrawerShown"></v-btn>
<learning-object-view <learning-object-view
:hruid="currentNode.learningobjectHruid" :hruid="currentNode.learningobjectHruid"
:language="currentNode.language" :language="currentNode.language"
@ -154,6 +161,10 @@
</template> </template>
<style scoped> <style scoped>
.navigation-drawer-toggle-button {
margin-bottom: -30px;
margin-left: 5px;
}
.navigation-buttons-container { .navigation-buttons-container {
padding: 20px; padding: 20px;
display: flex; display: flex;