Add modal save action

client/src/components/Modal.vue

@@ -9,7 +9,7 @@
       </div>
       <div class="modal__footer">
         <slot name="footer">
-          <a class="button button--active">Speichern</a>
+          <!--<a class="button button&#45;&#45;active">Speichern</a>-->
           <a class="button" v-on:click="hideModal">Abbrechen</a>
         </slot>
       </div>

client/src/components/NewContentBlockWizard.vue

@@ -1,6 +1,9 @@
 <template>
   <modal>
     <content-block-title-input slot="header"></content-block-title-input>
+    <!--<div>-->
+      <!--<span v-for="(e, i) in elements" :key="i">{{e.text}}</span>-->
+    <!--</div>-->
     <div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
       <component
         class="new-content-block-wizard__element-component"
@@ -10,6 +13,7 @@
         v-on:change-type="changeType"
         v-on:link-change-url="changeLinkUrl"
         v-on:link-change-text="changeLinkText"
+        v-on:video-change-url="changeVideoUrl"
       ></component>
       <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
         <trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
@@ -21,6 +25,11 @@
                            :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>
+    </div>
   </modal>
 </template>
 
@@ -70,17 +79,20 @@
         }
         return 'content-block-chooser-widget'
       },
-      changeLinkUrl(value, index) {
+      updateProperty(value, index, key) {
         this.elements.splice(index, 1, {
           ...this.elements[index],
-          url: value
+          [key]: value
         });
       },
+      changeLinkUrl(value, index) {
+        this.updateProperty(value, index, 'url')
+      },
       changeLinkText(value, index) {
-        this.elements.splice(index, 1, {
-          ...this.elements[index],
-          text: value
-        });
+        this.updateProperty(value, index, 'text')
+      },
+      changeVideoUrl(value, index) {
+        this.updateProperty(value, index, 'url')
       },
       removeElement(index) {
         this.elements.splice(index, 1);
@@ -103,6 +115,14 @@
         }
 
         this.elements.splice(index, 1, el);
+      },
+      hideModal() {
+        this.$store.dispatch('hideModal');
+      },
+      saveContentBlock() {
+        this.$store.dispatch('saveContentBlock', {
+          elements: this.elements
+        });
       }
     },
 

client/src/store/index.js

@@ -10,7 +10,8 @@ export default new Vuex.Store({
     specialContainerClass: '',
     showFilter: true,
     showModal: false,
-    scrollPosition: 0
+    scrollPosition: 0,
+    newContentBlock: {}
   },
 
   getters: {},
@@ -32,6 +33,11 @@ export default new Vuex.Store({
     showModal({commit}) {
       document.body.classList.add('no-scroll');
       commit('setModal', true);
+    },
+    saveContentBlock({commit}, payload){
+      console.log(payload);
+      commit('setNewContentBlock', payload);
+      commit('setModal', false);
     }
   },
 
@@ -47,6 +53,9 @@ export default new Vuex.Store({
     },
     setScrollPosition(state, payload) {
       state.scrollPosition = payload;
+    },
+    setNewContentBlock(state, payload) {
+      state.newContentBlock = payload;
     }
   }
 })