139 lines
3.6 KiB
Vue
139 lines
3.6 KiB
Vue
<template>
|
|
<div>
|
|
<nav class="module-navigation">
|
|
<div class="module-navigation__module-content">
|
|
<router-link
|
|
tag="h3"
|
|
:to="moduleContentLink"
|
|
class="module-navigation__heading"
|
|
>Inhalte: {{module.metaTitle}}
|
|
</router-link>
|
|
<div class="module-navigation__anchors" v-if="onModulePage">
|
|
<a href="#" v-scroll-to="'#meta-title'" class="module-navigation__anchor">Einleitung</a>
|
|
<a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>
|
|
|
|
<a href="#" class="module-navigation__anchor"
|
|
v-scroll-to="chapterId(index)"
|
|
v-for="(chapter, index) in module.chapters"
|
|
:key="chapter.id">{{chapter.title}}</a>
|
|
<a href="#" v-scroll-to="'#objectives-confirm'" class="module-navigation__anchor">Lernzielkontrolle</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="module-navigation__module-submissions" v-if="showResults">
|
|
<router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse:
|
|
{{module.metaTitle}}
|
|
</router-link>
|
|
<div class="module-navigation__anchors">
|
|
<router-link
|
|
:to="submissionsLink(assignment)"
|
|
v-for="assignment in assignments"
|
|
:key="assignment.id"
|
|
class="module-navigation__anchor"
|
|
exact-active-class="module-navigation__anchor--active"
|
|
>{{assignmentTitle(assignment)}}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import {moduleQuery} from '@/graphql/queries';
|
|
import ME_QUERY from '@/graphql/gql/meQuery.gql';
|
|
// import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';
|
|
|
|
export default {
|
|
apollo: {
|
|
module: moduleQuery,
|
|
me: {
|
|
query: ME_QUERY
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
onModulePage() {
|
|
return this.$route.name === 'module';
|
|
},
|
|
moduleContentLink() {
|
|
return `/module/${this.module.slug}`;
|
|
},
|
|
showResults() {
|
|
return this.me.permissions.includes('users.can_manage_school_class_content');
|
|
},
|
|
assignments() {
|
|
return [...this.module.assignments].sort((a, b) => {
|
|
return a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1;
|
|
})
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
module: {
|
|
assignments: []
|
|
},
|
|
me: {
|
|
permissions: []
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
chapterId(index) {
|
|
return `#chapter-${index}`
|
|
},
|
|
submissionsLink(assignment) {
|
|
return `/module/${this.module.slug}/submissions/${assignment.id}`;
|
|
},
|
|
assignmentTitle(assignment) {
|
|
return assignment.title.length > 25 ? assignment.title.substring(0, 22) + '...' : assignment.title;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
|
|
@mixin module-navigation-typography {
|
|
font-family: $sans-serif-font-family;
|
|
color: $color-grey;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.module-navigation {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: 75px;
|
|
|
|
&__module-content {
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
&__heading {
|
|
@include module-navigation-typography;
|
|
margin: 0;
|
|
font-size: 1.0625rem;
|
|
cursor: pointer;
|
|
}
|
|
&__anchors {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px 24px 0;
|
|
}
|
|
&__anchor {
|
|
@include module-navigation-typography;
|
|
font-size: 0.875rem;
|
|
line-height: 1.2rem;
|
|
margin-bottom: .6875rem;
|
|
|
|
&--active {
|
|
color: $color-brand;
|
|
}
|
|
}
|
|
}
|
|
</style>
|