Add validation and filtering to content block creation

client/src/pages/createContentBlock.vue

@@ -68,10 +68,13 @@
       </div>
 
       <footer class="create-content-block__footer">
-        <a
+        <button
+          :disabled="!isValid"
           class="button button--primary"
           @click="save(contentBlock)"
-        >Speichern</a>
+        >
+          Speichern
+        </button>
         <a
           class="button"
           @click="goToModule"
@@ -94,6 +97,9 @@
   import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
   import {removeAtIndex, replaceAtIndex} from '@/graphql/immutable-operations';
 
+  const CHOOSER = 'content-block-element-chooser-widget';
+  const chooserFilter = value => value.type !== CHOOSER;
+
   export default Vue.extend({
     props: {
       parent: {
@@ -123,6 +129,12 @@
       ]},
     }),
 
+    computed: {
+      isValid() {
+        return this.contentBlock.title > '';
+      }
+    },
+
     methods: {
       update(index, element, parent) {
         if (parent === undefined) {
@@ -158,7 +170,7 @@
                 ...block.contents.slice(0, innerIndex + 1),
                 {
                   id: -1,
-                  type: 'content-block-element-chooser-widget',
+                  type: CHOOSER,
                 },
                 ...block.contents.slice(innerIndex + 1)
               ]
@@ -170,7 +182,7 @@
             ...this.contentBlock.contents.slice(0, afterOuterIndex+1),
             {
               id: -1,
-              type: 'content-block-element-chooser-widget',
+              type: CHOOSER,
               includeListOption: true
             },
             ...this.contentBlock.contents.slice(afterOuterIndex+1)
@@ -202,9 +214,23 @@
         }
       },
       save({title, contents, isAssignment}) {
+        let filteredContents = contents
+          .filter(chooserFilter); // only use items that are not chooser elements
+
+        let mappedContents = filteredContents.map(content => {
+          // if the element has a contents property, it's a list of contents, filter them
+          if (content.contents) {
+            return {
+              ...content,
+              contents: content.contents.filter(chooserFilter)
+            };
+          }
+          // else just return it
+          return content;
+        });
         const contentBlock = {
           title: title,
-          contents: contents.filter(value => Object.keys(value).length > 0),
+          contents: mappedContents,
           type: setUserBlockType(isAssignment),
         };
         let input;