Insert new content block at correct position

client/src/components/AddContentBlockButton.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="add-content">
-    <a class="add-content__button" v-on:click="showModal">
+    <a class="add-content__button" v-on:click="addContentBlock">
       <add-pointer class="add-content__icon"></add-pointer>
     </a>
   </div>
@@ -10,13 +10,18 @@
   import AddPointer from '@/components/icons/AddPointer';
 
   export default {
+    props: ['after', 'parent'],
+
     components: {
       AddPointer
     },
 
     methods: {
-      showModal() {
+      addContentBlock() {
-        this.$store.dispatch('showModal');
+        this.$store.dispatch('addContentBlock', {
+          after: this.after,
+          parent: this.parent
+        });
       }
     }
   }

client/src/components/Chapter.vue

@@ -1,19 +1,24 @@
 <template>
   <div class="chapter">
-    <h3>{{chapter.title}}</h3>
+    <h3>{{chapter.title}} {{chapter.id}}</h3>
+
+    <add-content-block-button :parent="chapter.id"></add-content-block-button>
+
     <content-block :contentBlock="contentBlock" :key="contentBlock.id" v-for="contentBlock in chapter.contentBlocks">
     </content-block>
   </div>
 </template>
 
 <script>
-  import ContentBlock from '@/components/ContentBlock.vue';
+  import ContentBlock from '@/components/ContentBlock';
+  import AddContentBlockButton from '@/components/AddContentBlockButton';
 
   export default {
     props: ['chapter'],
 
     components: {
-      ContentBlock
+      ContentBlock,
+      AddContentBlockButton
     }
   }
 </script>

client/src/components/ContentBlock.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="content-block__container">
-    <add-content-block-button></add-content-block-button>
-
     <div class="content-block" :class="specialClass">
       <div class="content-block__visibility-button">
         <eye-icon class="content-block__visibility-icon"></eye-icon>
@@ -17,6 +15,9 @@
       </component>
 
     </div>
+
+    <add-content-block-button :after="contentBlock.id"></add-content-block-button>
+
   </div>
 
 </template>

client/src/components/NewContentBlockWizard.vue

@@ -111,6 +111,12 @@
           type: type
         };
         switch (type) {
+          case 'text_block':
+            el = {
+              ...el,
+              text: ''
+            };
+            break;
           case 'link':
             el = {
               ...el,
@@ -123,6 +129,7 @@
         this.elements.splice(index, 1, el);
       },
       hideModal() {
+        this.$store.dispatch('resetContentBlock');
         this.$store.dispatch('hideModal');
       },
       saveContentBlock() {
@@ -134,12 +141,13 @@
                 title: this.title,
                 contents: this.elements
               },
-              after: 'Q29udGVudEJsb2NrTm9kZToxOQ=='
+              after: this.$store.state.contentBlockPosition.after,
+              parent: this.$store.state.contentBlockPosition.parent
             }
           },
           update: () => {
             this.$store.dispatch('updateContentBlocks');
-            this.$store.dispatch('hideModal');
+            this.hideModal();
           }
         });
       }

client/src/store/index.js

@@ -10,6 +10,7 @@ export default new Vuex.Store({
     specialContainerClass: '',
     showFilter: true,
     showModal: false,
+    contentBlockPosition: {},
     scrollPosition: 0,
     moduleSlug: 'mein-neues-umfeld',
     updateContentBlocks: false
@@ -27,15 +28,22 @@ export default new Vuex.Store({
     setSpecialContainerClass({commit}, payload) {
       commit('setSpecialContainerClass', payload);
     },
-    hideModal({commit, state}) {
+    hideModal({commit}) {
       document.body.classList.remove('no-scroll'); // won't get at the body any other way
       commit('setModal', false);
     },
+    resetContentBlock({commit}) {
+      commit('setContentBlockPosition', {});
+    },
+    addContentBlock({commit, dispatch}, payload) {
+      commit('setContentBlockPosition', payload);
+      dispatch('showModal');
+    },
     showModal({commit}) {
       document.body.classList.add('no-scroll'); // won't get at the body any other way
       commit('setModal', true);
     },
-    updateContentBlocks({commit, dispatch}) {
+    updateContentBlocks({commit}) {
       commit('updateContentBlocks', true);
     },
     resetUpdateContentBlocksFlag({commit}) {
@@ -61,6 +69,9 @@ export default new Vuex.Store({
     },
     updateContentBlocks(state, payload) {
       state.updateContentBlocks = payload;
+    },
+    setContentBlockPosition(state, payload) {
+      state.contentBlockPosition = payload;
     }
   }
 })