Make modal handling a bit more generic

client/src/App.vue

@@ -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'
       }
     },
 

client/src/components/content-block-form/ContentBlockForm.vue

@@ -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>
+    <content-block-title-input slot="header" v-on:update-title="updateTitle" :title="contentBlock.title"
-    <add-content-element class="new-content-block-wizard__add"
+                               :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="save">Speichern</a>
-      <a class="button" v-on:click="hideModal">Abbrechen</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.localContentBlock.elements.splice(index, 1, {
-          ...this.elements[index],
+          ...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() {
+      save() {
-        this.$store.dispatch('resetContentBlock');
+        if (!this.localContentBlock.title) {
-        this.$store.dispatch('hideModal');
-      },
-      saveContentBlock() {
-        if (!this.title) {
           this.error = true;
           return false;
         }
-        this.$apollo.mutate({
+        this.$emit('save', this.localContentBlock);
-          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
       }
     }
   }
@@ -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 {

client/src/components/content-block-form/NewContentBlockWizard.vue

@@ -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>