Re-add the module component
This commit is contained in:
parent
29f3726993
commit
09566f1193
|
|
@ -1,51 +1,13 @@
|
|||
<template>
|
||||
<div class="module">
|
||||
<h2
|
||||
class="module__meta-title"
|
||||
id="meta-title">{{ module.metaTitle }}</h2>
|
||||
<h1
|
||||
class="module__title"
|
||||
data-cy="module-title">{{ module.title }}</h1>
|
||||
<img
|
||||
:src="module.heroImage"
|
||||
alt=""
|
||||
class="module__hero">
|
||||
|
||||
<div class="module__intro-wrapper">
|
||||
<bookmark-actions
|
||||
:bookmarked="module.bookmark"
|
||||
:note="note"
|
||||
class="module__bookmark-actions"
|
||||
@add-note="addNote"
|
||||
@edit-note="editNote"
|
||||
@bookmark="bookmark(!module.bookmark)"/>
|
||||
<div
|
||||
class="module__intro intro"
|
||||
v-html="module.intro"/>
|
||||
</div>
|
||||
|
||||
<h3 id="objectives">Lernziele</h3>
|
||||
|
||||
<div class="module__objective-groups">
|
||||
<objective-groups :groups="languageCommunicationObjectiveGroups"/>
|
||||
|
||||
<objective-groups :groups="societyObjectiveGroups"/>
|
||||
|
||||
<objective-groups :groups="interdisciplinaryObjectiveGroups"/>
|
||||
</div>
|
||||
|
||||
<chapter
|
||||
:chapter="chapter"
|
||||
:index="index"
|
||||
:key="chapter.id"
|
||||
v-for="(chapter, index) in module.chapters"/>
|
||||
|
||||
</div>
|
||||
<module
|
||||
:module="module"
|
||||
@editNote="editNote"
|
||||
@addNote="addNote"
|
||||
@bookmark="bookmark"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
|
||||
import Chapter from '@/components/Chapter.vue';
|
||||
import Module from '@/components/modules/Module';
|
||||
|
||||
import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
|
||||
import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
|
||||
|
|
@ -54,17 +16,14 @@
|
|||
import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
|
||||
import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
|
||||
|
||||
import BookmarkActions from '@/components/notes/BookmarkActions';
|
||||
import meMixin from '@/mixins/me';
|
||||
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/moduleDetailsQuery';
|
||||
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
|
||||
|
||||
export default {
|
||||
mixins: [meMixin],
|
||||
|
||||
components: {
|
||||
BookmarkActions,
|
||||
ObjectiveGroups,
|
||||
Chapter,
|
||||
Module
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -73,30 +32,6 @@
|
|||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
languageCommunicationObjectiveGroups() {
|
||||
return this.module.objectiveGroups ? this.module.objectiveGroups
|
||||
.filter(group => group.title === 'LANGUAGE_COMMUNICATION') : [];
|
||||
},
|
||||
societyObjectiveGroups() {
|
||||
return this.module.objectiveGroups ? this.module.objectiveGroups
|
||||
.filter(group => group.title === 'SOCIETY') : [];
|
||||
},
|
||||
interdisciplinaryObjectiveGroups() {
|
||||
return this.module.objectiveGroups ? this.module.objectiveGroups
|
||||
.filter(group => group.title === 'INTERDISCIPLINARY') : [];
|
||||
},
|
||||
isStudent() {
|
||||
return !this.me.permissions.includes('users.can_manage_school_class_content');
|
||||
},
|
||||
note() {
|
||||
if (!(this.module && this.module.bookmark)) {
|
||||
return;
|
||||
}
|
||||
return this.module.bookmark.note;
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.updateLastVisitedModule(this.module.id);
|
||||
},
|
||||
|
|
@ -135,30 +70,6 @@
|
|||
id: moduleId,
|
||||
},
|
||||
},
|
||||
// update(store, {data: {updateLastModule: {lastModule}}}) {
|
||||
// if (lastModule) {
|
||||
// const data = store.readQuery({query: ME_QUERY});
|
||||
// if (data) {
|
||||
// data.me.lastModule = lastModule;
|
||||
// let recentModules = data.me.recentModules.edges;
|
||||
// let newRecentModules;
|
||||
// let index = recentModules.findIndex(element => element.node.id === lastModule.id);
|
||||
// if (index > -1) {
|
||||
// newRecentModules = [...recentModules.slice(0, index), ...recentModules.slice(index + 1)];
|
||||
// } else if (recentModules.length >= 3) {
|
||||
// newRecentModules = recentModules.slice(0, recentModules.length - 1);
|
||||
// } else {
|
||||
// newRecentModules = recentModules;
|
||||
// }
|
||||
// newRecentModules.unshift({
|
||||
// __typename: 'ModuleNodeEdge',
|
||||
// node: lastModule,
|
||||
// });
|
||||
// data.me.recentModules.edges = newRecentModules;
|
||||
// store.writeQuery({query: ME_QUERY, data});
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
});
|
||||
},
|
||||
bookmark(bookmarked) {
|
||||
|
|
@ -244,55 +155,5 @@
|
|||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.module {
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
max-width: 100vw;
|
||||
|
||||
@include desktop {
|
||||
width: 800px;
|
||||
}
|
||||
flex-direction: column;
|
||||
padding: $large-spacing 15px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
&__hero {
|
||||
margin-bottom: 35px;
|
||||
border-radius: 12px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
&__meta-title {
|
||||
@include meta-title;
|
||||
}
|
||||
|
||||
&__intro-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__intro {
|
||||
> /deep/ p {
|
||||
font-size: toRem(25px);
|
||||
margin-bottom: $large-spacing;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__bookmark-actions {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
&__objective-groups {
|
||||
margin-bottom: $large-spacing;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
import me from '@/mixins/me';
|
||||
|
||||
import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
|
||||
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/moduleDetailsQuery';
|
||||
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery';
|
||||
import {MODULE_PAGE} from '@/router/module.names';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -2,13 +2,15 @@
|
|||
<div>
|
||||
Hello
|
||||
{{ id }}
|
||||
|
||||
<module :module="snapshot" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SNAPSHOT_DETAIL_QUERY from '@/graphql/gql/queries/snapshots/detail.gql';
|
||||
|
||||
import Module from '@/components/modules/Module';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
id: {
|
||||
|
|
@ -17,6 +19,10 @@
|
|||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
Module
|
||||
},
|
||||
|
||||
apollo: {
|
||||
snapshot: {
|
||||
query: SNAPSHOT_DETAIL_QUERY,
|
||||
|
|
|
|||
Loading…
Reference in New Issue