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

Make modal handling a bit more generic

This commit is contained in:
Ramon Wenger 2018-09-19 14:13:31 +02:00
parent c9d43dd111
commit a760949b84
3 changed files with 96 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/App.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="{'no-scroll': showModal}">
<component :is="modalComponent" v-if="showModal"></component>
<component :is="showModal" v-if="showModal"></component>
<component :is="layout"></component>
</div>
</template>
@ -9,7 +9,7 @@
import DefaultLayout from '@/layouts/DefaultLayout';
import SimpleLayout from '@/layouts/SimpleLayout';
import Modal from '@/components/Modal';
import NewContentBlockWizard from '@/components/NewContentBlockWizard';
import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
export default {
name: 'App',
@ -27,9 +27,6 @@
},
showModal() {
return this.$store.state.showModal
},
modalComponent() {
return 'new-content-block-wizard'
}
},

94
client/src/components/NewContentBlockWizard.vue → client/src/components/content-block-form/ContentBlockForm.vue
View File

@ -1,15 +1,16 @@
<template>
<modal>
<content-block-title-input slot="header" v-on:update-title="updateTitle" :title="title" :error="error"></content-block-title-input>
<add-content-element class="new-content-block-wizard__add"
<content-block-title-input slot="header" v-on:update-title="updateTitle" :title="contentBlock.title"
:error="error"></content-block-title-input>
<add-content-element class="content-block-form__add"
v-on:add-element="addElement"
:index="-1"
></add-content-element>
<div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
<div v-for="(element, index) in contentBlock.elements" :key="index" class="content-block-form__element">
<component
class="new-content-block-wizard__element-component"
class="content-block-form__element-component"
:is="type(element)"
:class="{'new-content-block-wizard__chooser': type(element) === 'content-block-element-chooser-widget'}"
:class="{'content-block-form__chooser': type(element) === 'content-block-element-chooser-widget'}"
:element="element" v-bind="element" :index="index"
v-on:change-type="changeType"
v-on:link-change-url="changeLinkUrl"
@ -18,20 +19,20 @@
v-on:document-change-url="changeDocumentUrl"
v-on:video-change-url="changeVideoUrl">
</component>
<a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
<a class="content-block-form__remove" v-on:click="removeElement(index)">
<trash-icon v-if="type(element) !== 'content-block-element-chooser-widget'"
class="new-content-block-wizard__trash-icon"></trash-icon>
class="content-block-form__trash-icon"></trash-icon>
</a>
<add-content-element class="new-content-block-wizard__add"
<add-content-element class="content-block-form__add"
v-on:add-element="addElement"
:index="index"
></add-content-element>
</div>
<div slot="footer">
<a class="button" v-on:click="saveContentBlock">Speichern</a>
<a class="button" v-on:click="hideModal">Abbrechen</a>
<a class="button" v-on:click="save">Speichern</a>
<a class="button" v-on:click="$emit('hide')">Abbrechen</a>
</div>
</modal>
</template>
@ -49,9 +50,9 @@
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 {
props: ['content-block'],
components: {
Modal,
ContentBlockElementChooserWidget,
@ -66,6 +67,13 @@
TrashIcon
},
data() {
return {
error: false,
localContentBlock: Object.assign({}, this.contentBlock)
}
},
methods: {
type(element) {
switch (element.type) {
@ -85,8 +93,8 @@
return 'content-block-element-chooser-widget'
},
_updateProperty(value, index, key) {
this.elements.splice(index, 1, {
...this.elements[index],
this.localContentBlock.elements.splice(index, 1, {
...this.localContentBlock.elements[index],
[key]: value
});
},
@ -94,6 +102,7 @@
this._updateProperty(value, index, 'url')
},
changeLinkText(value, index) {
// debugger;
this._updateProperty(value, index, 'text')
},
changeVideoUrl(value, index) {
@ -106,13 +115,13 @@
this._updateProperty(value, index, 'text')
},
removeElement(index) {
this.elements.splice(index, 1);
this.localContentBlock.elements.splice(index, 1);
},
addElement(index) {
this.elements.splice(index + 1, 0, {})
this.localContentBlock.elements.splice(index + 1, 0, {})
},
updateTitle(title) {
this.title = title;
this.localContentBlock.title = title;
this.error = false;
},
changeType(index, type) {
@ -147,55 +156,14 @@
break;
}
this.elements.splice(index, 1, el);
this.localContentBlock.elements.splice(index, 1, el);
},
hideModal() {
this.$store.dispatch('resetContentBlock');
this.$store.dispatch('hideModal');
},
saveContentBlock() {
if (!this.title) {
save() {
if (!this.localContentBlock.title) {
this.error = true;
return false;
}
this.$apollo.mutate({
mutation: NEW_CONTENT_BLOCK_MUTATION,
variables: {
input: {
contentBlock: {
title: this.title,
contents: this.elements.filter(value => Object.keys(value).length > 0)
},
after: this.$store.state.contentBlockPosition.after,
parent: this.$store.state.contentBlockPosition.parent
}
},
update: () => {
this.$store.dispatch('updateContentBlocks');
this.hideModal();
}
});
}
},
data() {
return {
title: '',
elements: [
{}
// {
// type: 'image'
// },
// {
// type: 'video',
// url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
// },
// {
// type: 'video',
// url: 'https://vimeo.com/267384185'
// }
],
error: false
this.$emit('save', this.localContentBlock);
}
}
}
@ -204,7 +172,7 @@
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.new-content-block-wizard {
.content-block-form {
/* top level does not exist, because of the modal */
&__element {

63
client/src/components/content-block-form/NewContentBlockWizard.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<content-block-form
:content-block="contentBlock"
@save="saveContentBlock"
@hide="hideModal"
></content-block-form>
</template>
<script>
import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
import store from '@/store/index';
import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
export default {
components: {
ContentBlockForm
},
methods: {
hideModal() {
this.$store.dispatch('resetContentBlock');
this.$store.dispatch('hideModal');
},
saveContentBlock(contentBlock) {
this.$apollo.mutate({
mutation: NEW_CONTENT_BLOCK_MUTATION,
variables: {
input: {
contentBlock: {
title: contentBlock.title,
contents: contentBlock.elements.filter(value => Object.keys(value).length > 0)
},
after: this.$store.state.contentBlockPosition.after,
parent: this.$store.state.contentBlockPosition.parent
}
},
refetchQueries: [{
query: MODULE_DETAILS_QUERY,
variables: {
slug: store.state.moduleSlug
}
}]
}).then(() => {
this.hideModal();
});
}
},
data() {
return {
contentBlock: {
title: '',
elements: [
{}
]
}
}
}
}
</script>