Temporarily remove cache update of last module mutation
This commit is contained in:
parent
b635dc338a
commit
8c9c27b9c4
|
|
@ -1,249 +0,0 @@
|
|||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
|
||||
import Chapter from '@/components/Chapter.vue';
|
||||
|
||||
import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
|
||||
import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
|
||||
import ME_QUERY from '@/graphql/gql/meQuery.gql';
|
||||
import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
|
||||
|
||||
import BookmarkActions from '@/components/notes/BookmarkActions';
|
||||
import meMixin from '@/mixins/me';
|
||||
|
||||
export default {
|
||||
|
||||
props: {
|
||||
module: {
|
||||
required: true,
|
||||
type: Object
|
||||
},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
mixins: [meMixin],
|
||||
|
||||
components: {
|
||||
BookmarkActions,
|
||||
ObjectiveGroups,
|
||||
Chapter
|
||||
},
|
||||
|
||||
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);
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateLastVisitedModule(moduleId) {
|
||||
this.$apollo.mutate({
|
||||
mutation: UPDATE_LAST_MODULE_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
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) {
|
||||
const slug = this.module.slug;
|
||||
this.$apollo.mutate({
|
||||
mutation: UPDATE_MODULE_BOOKMARK_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
module: slug,
|
||||
bookmarked
|
||||
}
|
||||
},
|
||||
update: (store, response) => {
|
||||
const fragment = MODULE_FRAGMENT;
|
||||
const id = `ModuleNode:${slug}`;
|
||||
const data = store.readFragment({
|
||||
fragment,
|
||||
id
|
||||
});
|
||||
|
||||
if (bookmarked) {
|
||||
data.bookmark = {
|
||||
__typename: 'ModuleBookmarkNode',
|
||||
note: null
|
||||
};
|
||||
} else {
|
||||
data.bookmark = null;
|
||||
}
|
||||
|
||||
store.writeFragment({
|
||||
data,
|
||||
fragment,
|
||||
id
|
||||
});
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
updateModuleBookmark: {
|
||||
__typename: 'UpdateModuleBookmarkPayload',
|
||||
success: true
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
addNote(id) {
|
||||
this.$store.dispatch('addNote', {
|
||||
content: id,
|
||||
parent: this.module.id
|
||||
});
|
||||
},
|
||||
editNote() {
|
||||
this.$store.dispatch('editNote', this.module.bookmark.note);
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
|
|
@ -1,22 +1,70 @@
|
|||
<template>
|
||||
<module
|
||||
:module="module"
|
||||
:edit="editModule"
|
||||
v-if="module.id"/>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState, mapActions} from 'vuex';
|
||||
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
|
||||
import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
|
||||
import Chapter from '@/components/Chapter.vue';
|
||||
|
||||
import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
|
||||
import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
|
||||
import ME_QUERY from '@/graphql/gql/meQuery.gql';
|
||||
import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
|
||||
import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
|
||||
import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
|
||||
|
||||
import Module from '@/components/modules/Module.vue';
|
||||
import BookmarkActions from '@/components/notes/BookmarkActions';
|
||||
import meMixin from '@/mixins/me';
|
||||
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery';
|
||||
|
||||
export default {
|
||||
mixins: [meMixin],
|
||||
|
||||
components: {
|
||||
Module,
|
||||
BookmarkActions,
|
||||
ObjectiveGroups,
|
||||
Chapter,
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -26,9 +74,31 @@
|
|||
},
|
||||
|
||||
computed: {
|
||||
...mapState({
|
||||
editModule: 'editModule',
|
||||
}),
|
||||
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);
|
||||
},
|
||||
|
||||
apollo: {
|
||||
|
|
@ -38,13 +108,14 @@
|
|||
variables: {
|
||||
slug: this.$route.params.slug,
|
||||
},
|
||||
update({module}) {
|
||||
return this.$getRidOfEdges(module) || {};
|
||||
update(data) {
|
||||
return this.$getRidOfEdges(data).module || {};
|
||||
},
|
||||
result() {
|
||||
// scroll only after the module has been loaded completely
|
||||
this.scrollTo();
|
||||
// this.scrollTo();
|
||||
},
|
||||
fetchPolicy: 'cache-first',
|
||||
};
|
||||
},
|
||||
scrollPosition: {
|
||||
|
|
@ -53,7 +124,94 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
...mapActions(['scrollToAssignmentReady', 'scrollingToAssignment']),
|
||||
updateLastVisitedModule(moduleId) {
|
||||
if (!moduleId) {
|
||||
return;
|
||||
}
|
||||
this.$apollo.mutate({
|
||||
mutation: UPDATE_LAST_MODULE_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
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) {
|
||||
const slug = this.module.slug;
|
||||
this.$apollo.mutate({
|
||||
mutation: UPDATE_MODULE_BOOKMARK_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
module: slug,
|
||||
bookmarked,
|
||||
},
|
||||
},
|
||||
update: (store, response) => {
|
||||
const fragment = MODULE_FRAGMENT;
|
||||
const id = `ModuleNode:${slug}`;
|
||||
const data = store.readFragment({
|
||||
fragment,
|
||||
id,
|
||||
});
|
||||
|
||||
if (bookmarked) {
|
||||
data.bookmark = {
|
||||
__typename: 'ModuleBookmarkNode',
|
||||
note: null,
|
||||
};
|
||||
} else {
|
||||
data.bookmark = null;
|
||||
}
|
||||
|
||||
store.writeFragment({
|
||||
data,
|
||||
fragment,
|
||||
id,
|
||||
});
|
||||
},
|
||||
optimisticResponse: {
|
||||
__typename: 'Mutation',
|
||||
updateModuleBookmark: {
|
||||
__typename: 'UpdateModuleBookmarkPayload',
|
||||
success: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
addNote(id) {
|
||||
this.$store.dispatch('addNote', {
|
||||
content: id,
|
||||
parent: this.module.id,
|
||||
});
|
||||
},
|
||||
editNote() {
|
||||
this.$store.dispatch('editNote', this.module.bookmark.note);
|
||||
},
|
||||
scrollTo() {
|
||||
if (this.scrollPosition && this.scrollPosition.scrollTo) {
|
||||
let options = {
|
||||
|
|
@ -84,3 +242,57 @@
|
|||
},
|
||||
};
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue