ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update module query after mutation

This commit is contained in:
Ramon Wenger 2018-09-11 15:09:55 +02:00
parent 4260147f2d
commit d6316fc328
4 changed files with 92 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/components/ContentBlock.vue
View File

@ -7,7 +7,6 @@
<eye-icon class="content-block__visibility-icon"></eye-icon>
</div>
<h4 class="content-block__title">{{contentBlock.title}}</h4>
<h4>{{contentBlock.id}}</h4>

83
client/src/components/NewContentBlockWizard.vue
View File

@ -43,6 +43,8 @@
import TextForm from '@/components/content-forms/TextForm';
import TrashIcon from '@/components/icons/TrashIcon';
import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
export default {
components: {
Modal,
@ -120,9 +122,26 @@
this.$store.dispatch('hideModal');
},
saveContentBlock() {
this.$store.dispatch('saveContentBlock', {
this.$apollo.mutate({
mutation: NEW_CONTENT_BLOCK_MUTATION,
variables: {
input: {
contentBlock: {
title: this.title,
contents: this.elements
contents: [
{
type: 'text_block',
text: 'Oh hai'
}
]
},
after: 'Q29udGVudEJsb2NrTm9kZToxOQ=='
}
},
update: () => {
this.$store.dispatch('updateContentBlocks');
this.$store.dispatch('hideModal');
}
});
}
},
@ -131,36 +150,36 @@
return {
title: '',
elements: [
{
type: 'image'
},
{
type: 'video',
url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
},
{
type: 'video',
url: 'https://vimeo.com/267384185'
},
{
type: 'link'
},
{
type: 'text'
},
{
type: 'video'
},
{
type: 'document'
},
{
type: 'exercise'
},
{
type: 'image'
},
{}
// {
// type: 'image'
// },
// {
// type: 'video',
// url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
// },
// {
// type: 'video',
// url: 'https://vimeo.com/267384185'
// },
// {
// type: 'link'
// },
// {
// type: 'text'
// },
// {
// type: 'video'
// },
// {
// type: 'document'
// },
// {
// type: 'exercise'
// },
// {
// type: 'image'
// },
// {}
]
}
}

23
client/src/pages/module.vue
View File

@ -6,6 +6,8 @@
</template>
<script>
import store from '@/store/index';
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
import Module from '@/components/modules/Module.vue';
@ -18,10 +20,11 @@
},
apollo: {
moduleQuery: {
moduleQuery() {
return {
query: MODULE_DETAILS_QUERY,
variables: {
slug: 'mein-neues-umfeld'
slug: store.state.moduleSlug
},
fetchPolicy: 'network-only',
manual: true,
@ -32,6 +35,22 @@
}
}
}
}
},
created() {
this.$store.subscribe((mutation, state) => {
if (mutation.type === 'updateContentBlocks' && state.updateContentBlocks) {
this.updateQuery();
}
})
},
methods: {
updateQuery() {
this.$apollo.queries.moduleQuery.refetch();
this.$store.commit('resetUpdateContentBlocksFlag');
}
},
// TODO: can we do better by defining a type for module?

32
client/src/store/index.js
View File

@ -1,8 +1,5 @@
import Vue from 'vue'
import Vuex from 'vuex'
import apolloClient from '@/graphql/client'
import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
Vue.use(Vuex)
@ -14,7 +11,8 @@ export default new Vuex.Store({
showFilter: true,
showModal: false,
scrollPosition: 0,
newContentBlock: {}
moduleSlug: 'mein-neues-umfeld',
updateContentBlocks: false
},
getters: {},
@ -37,26 +35,11 @@ export default new Vuex.Store({
document.body.classList.add('no-scroll'); // won't get at the body any other way
commit('setModal', true);
},
saveContentBlock({commit, dispatch}, payload) {
commit('setNewContentBlock', payload);
apolloClient.mutate({
mutation: NEW_CONTENT_BLOCK_MUTATION,
variables: {
input: {
contentBlock: {
title: payload.title,
contents: [
{
type: 'text_block',
text: 'Oh hai'
}
]
updateContentBlocks({commit, dispatch}) {
commit('updateContentBlocks', true);
},
after: 'Q29udGVudEJsb2NrTm9kZToxOQ=='
}
}
});
dispatch('hideModal');
resetUpdateContentBlocksFlag({commit}) {
commit('updateContentBlocks', false);
}
},
@ -75,6 +58,9 @@ export default new Vuex.Store({
},
setNewContentBlock(state, payload) {
state.newContentBlock = payload;
},
updateContentBlocks(state, payload) {
state.updateContentBlocks = payload;
}
}
})