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> <eye-icon class="content-block__visibility-icon"></eye-icon>
</div> </div>
<h4 class="content-block__title">{{contentBlock.title}}</h4> <h4 class="content-block__title">{{contentBlock.title}}</h4>
<h4>{{contentBlock.id}}</h4> <h4>{{contentBlock.id}}</h4>

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

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

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

@ -6,6 +6,8 @@
</template> </template>
<script> <script>
import store from '@/store/index';
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql'; import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
import Module from '@/components/modules/Module.vue'; import Module from '@/components/modules/Module.vue';
@ -18,22 +20,39 @@
}, },
apollo: { apollo: {
moduleQuery: { moduleQuery() {
query: MODULE_DETAILS_QUERY, return {
variables: { query: MODULE_DETAILS_QUERY,
slug: 'mein-neues-umfeld' variables: {
}, slug: store.state.moduleSlug
fetchPolicy: 'network-only', },
manual: true, fetchPolicy: 'network-only',
result({data, loading, networkStatus}) { manual: true,
if (!loading) { result({data, loading, networkStatus}) {
const cleanedData = this.$getRidOfEdges(data) if (!loading) {
this.module = cleanedData.modules[0] || {}; const cleanedData = this.$getRidOfEdges(data)
this.module = cleanedData.modules[0] || {};
}
} }
} }
} }
}, },
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? // TODO: can we do better by defining a type for module?
data() { data() {
return { return {

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

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