Add form validation for new content block

client/src/components/ContentBlockTitleInput.vue

@@ -2,23 +2,35 @@
   <div class="content-block-title-input">
     <input placeholder="Titel für Inhaltsblock erfassen"
            class="content-block-title-input__inputfield skillbox-input"
+           :class="{'skillbox-input--error': error}"
            :value="title"
            v-on:input="$emit('update-title', $event.target.value)">
+    <div class="content-block-title-input__error" v-if="error">
+      Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
+    </div>
   </div>
 </template>
 
 <script>
   export default {
-    props: ['title']
+    props: ['title', 'error']
   }
 </script>
 
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
+  @import "@/styles/_functions.scss";
 
   .content-block-title-input {
     &__inputfield {
       width: $modal-input-width;
     }
+
+    &__error {
+      font-family: sans-serif;
+      font-size: toRem(14px);
+      color: $color-accent-3-dark;
+      padding: 10px 0;
+    }
   }
 </style>

client/src/components/NewContentBlockWizard.vue

@@ -1,6 +1,6 @@
 <template>
   <modal>
-    <content-block-title-input slot="header" v-on:update-title="updateTitle" :title="title"></content-block-title-input>
+    <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"
                          v-on:add-element="addElement"
                          :index="-1"
@@ -73,7 +73,7 @@
             return 'link-form';
           case 'video_block':
             return 'video-form';
-          case 'image':
+          case 'image_block':
             return 'image-form';
           case 'text_block':
             return 'text-form';
@@ -113,6 +113,7 @@
       },
       updateTitle(title) {
         this.title = title;
+        this.error = false;
       },
       changeType(index, type) {
         let el = {
@@ -153,13 +154,17 @@
         this.$store.dispatch('hideModal');
       },
       saveContentBlock() {
+        if (!this.title) {
+          this.error = true;
+          return false;
+        }
         this.$apollo.mutate({
           mutation: NEW_CONTENT_BLOCK_MUTATION,
           variables: {
             input: {
               contentBlock: {
                 title: this.title,
-                contents: this.elements
+                contents: this.elements.filter(value => Object.keys(value).length > 0)
               },
               after: this.$store.state.contentBlockPosition.after,
               parent: this.$store.state.contentBlockPosition.parent
@@ -189,7 +194,8 @@
           //   type: 'video',
           //   url: 'https://vimeo.com/267384185'
           // }
-        ]
+        ],
+        error: false
       }
     }
   }

client/src/components/content-forms/ContentBlockElementChooserWidget.vue

@@ -8,7 +8,7 @@
       <video-icon class="content-block-element-chooser-widget__link-icon"></video-icon>
       <div class="content-block-element-chooser-widget__link-title">Video</div>
     </div>
-    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'image')">
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'image_block')">
       <image-icon class="content-block-element-chooser-widget__link-icon"></image-icon>
       <div class="content-block-element-chooser-widget__link-title">Bild</div>
     </div>

client/src/styles/_forms.scss

@@ -10,6 +10,10 @@
 
 .skillbox-input {
   @include inputstyle;
+
+  &--error {
+    border-color: $color-accent-3-dark;
+  }
 }
 
 .skillbox-textarea {