Send new content block to server, add route

client/src/components/AddContentButton.vue

@@ -10,6 +10,11 @@
 </template>
 
 <script>
+  import {
+    CREATE_CONTENT_BLOCK_AFTER_PAGE,
+    CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+  } from '@/router/module.names';
+
   const AddPointer = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer');
 
   export default {
@@ -19,15 +24,31 @@
       AddPointer
     },
 
+
     methods: {
       addContent() {
         if (this.parent && this.parent.__typename === 'ObjectiveGroupNode') {
           this.$store.dispatch('addObjective', this.parent.id);
         } else {
-          this.$store.dispatch('addContentBlock', {
+          let route;
-            after: this.after ? this.after.id : undefined,
+          const slug = this.$route.params.slug;
-            parent: this.parent ? this.parent.id : undefined
+          if (this.after.id) {
-          });
+             route = {
+              name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
+              params: {
+                after: this.after.id,
+                slug
+              }
+            };
+          } else {
+            route = {
+              name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+              params: {
+                parent: this.parent.id
+              }
+            };
+          }
+          this.$router.push(route);
         }
       }
     }
@@ -35,8 +56,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+  @import "~styles/helpers";
-  @import "@/styles/_mixins.scss";
 
   .add-content {
     display: none;

client/src/components/Chapter.vue

@@ -107,6 +107,7 @@
         if (this.chapter && this.chapter.bookmark) {
           return this.chapter.bookmark.note;
         }
+        return false;
       },
       titleGreyedOut() {
         return this.textHidden(CHAPTER_TITLE_TYPE) && this.editModule;
@@ -141,7 +142,7 @@
               bookmarked,
             },
           },
-          update: (store, response) => {
+          update: (store) => {
             const query = CHAPTER_QUERY;
             const variables = {id};
             const data = store.readQuery({
@@ -199,7 +200,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
+  @import "~styles/helpers";
 
   .chapter {
     position: relative;

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

@@ -213,12 +213,10 @@
         }
 
         if (convertToList) {
-          console.log(el);
           el = {
             type: 'content_list_item',
             contents: [el]
           };
-          console.log(el);
         }
         this.update(el);
       },

client/src/pages/createContentBlock.vue

@@ -7,26 +7,28 @@
 
       <toggle
         :bordered="false"
-        :checked="true"
+        :checked="contentBlock.isAssignment"
         class="create-content-block__task-toggle"
         label="Inhaltsblock als Auftrag formatieren"
+        @input="contentBlock.isAssignment=$event"
       />
 
       <content-form-section title="Titel">
         <input-with-label
-          :value="title"
+          :value="contentBlock.title"
           label="Name"
           placeholder="z.B. Auftrag 3"
-          @input="title=$event"
+          @input="contentBlock.title=$event"
         />
       </content-form-section>
+
       <add-content-link
         class="create-content-block__segment"
-        @click="addBlock(0)"
+        @click="addBlock(-1)"
       />
       <div
         class="content-list content-list--creator create-content-block__segment"
-        v-for="(block, outer) in blocks"
+        v-for="(block, outer) in contentBlock.contents"
         :key="block.id"
       >
         <ol
@@ -66,7 +68,10 @@
       </div>
 
       <footer class="create-content-block__footer">
-        <a class="button button--primary">Speichern</a>
+        <a
+          class="button button--primary"
+          @click="save(contentBlock)"
+        >Speichern</a>
         <a class="button">Abbrechen</a>
       </footer>
     </div>
@@ -81,7 +86,22 @@
   import AddContentLink from '@/components/content-block-form/AddContentLink';
   import ContentElement from '@/components/content-block-form/ContentElement';
 
+  import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
+  import {setUserBlockType} from '@/helpers/content-block';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+
   export default Vue.extend({
+    props: {
+      parent: {
+        type: String,
+        default: ''
+      },
+      after: {
+        type: String,
+        default: ''
+      }
+    },
+
     components: {
       ContentElement,
       AddContentLink,
@@ -91,8 +111,10 @@
     },
 
     data: () => ({
-      title: '',
+      contentBlock: {
-      blocks: [
+        title: '',
+        isAssignment: false,
+      contents: [
         {
           id: 23,
           type: 'content_list_item',
@@ -102,27 +124,24 @@
             }
           ]
         }
-      ],
+      ]},
     }),
     mounted() {
       // this.addBlock(0);
     },
 
     methods: {
-       update(index, element, parent) {
+      update(index, element, parent) {
-        console.log(index, element, parent);
         if (parent === undefined) {
-          console.log('parent undefined');
+          this.contentBlock.contents = [
-          this.blocks = [
+            ...this.contentBlock.contents.slice(0, index),
-            ...this.blocks.slice(0, index),
             element,
-            ...this.blocks.slice(index + 1)
+            ...this.contentBlock.contents.slice(index + 1)
           ];
         } else {
-          console.log('parent yes');
+          const parentBlock = this.contentBlock.contents[parent];
-          const parentBlock = this.blocks[parent];
+          this.contentBlock.contents = [
-          this.blocks = [
+            ...this.contentBlock.contents.slice(0, parent),
-            ...this.blocks.slice(0, parent),
             {
               ...parentBlock,
               contents: [
@@ -131,20 +150,15 @@
                 ...parentBlock.contents.slice(index + 1),
               ]
             },
-            ...this.blocks.slice(parent + 1)
+            ...this.contentBlock.contents.slice(parent + 1)
           ];
         }
-        console.log('updating', index, element);
-        // this.blocks.splice(index, 1, element);
       },
-      addBlock(outerIndex, innerIndex) {
+      addBlock(afterOuterIndex, innerIndex) {
-        console.log('add block', outerIndex, innerIndex);
-        // this.blocks.splice(outerIndex, 0, {});
         if (innerIndex !== undefined) {
-          console.log('inner');
+          const block = this.contentBlock.contents[afterOuterIndex];
-          const block = this.blocks[outerIndex];
+          this.contentBlock.contents = [
-          this.blocks = [
+            ...this.contentBlock.contents.slice(0, afterOuterIndex),
-            ...this.blocks.slice(0, outerIndex),
             {
               ...block,
               contents: [
@@ -156,42 +170,73 @@
                 ...block.contents.slice(innerIndex + 1)
               ]
             },
-            ...this.blocks.slice(outerIndex + 1)
+            ...this.contentBlock.contents.slice(afterOuterIndex + 1)
           ];
         } else {
-          console.log('outer');
+          this.contentBlock.contents = [
-          this.blocks = [
+            ...this.contentBlock.contents.slice(0, afterOuterIndex+1),
-            ...this.blocks.slice(0, outerIndex + 1),
             {
               id: -1,
               type: 'content-block-element-chooser-widget',
               includeListOption: true
             },
-            ...this.blocks.slice(outerIndex + 1)
+            ...this.contentBlock.contents.slice(afterOuterIndex+1)
           ];
         }
       },
       remove(outer, inner) {
-         if (inner === undefined) {
+        if (inner === undefined) {
-           this.blocks = [
+          this.contentBlock.contents = [
-             ...this.blocks.slice(0, outer),
+            ...this.contentBlock.contents.slice(0, outer),
-             ...this.blocks.slice(outer + 1)
+            ...this.contentBlock.contents.slice(outer + 1)
-           ];
+          ];
-         } else {
+        } else {
-           this.blocks = [
+          this.contentBlock.contents = [
-             ...this.blocks.slice(0, outer),
+            ...this.contentBlock.contents.slice(0, outer),
-             {
+            {
-               ...this.blocks[outer],
+              ...this.contentBlock.contents[outer],
-               contents: [
+              contents: [
-                 ...this.blocks[outer].contents.slice(0, inner),
+                ...this.contentBlock.contents[outer].contents.slice(0, inner),
-                 ...this.blocks[outer].contents.slice(inner+1),
+                ...this.contentBlock.contents[outer].contents.slice(inner+1),
-               ]
+              ]
-             },
+            },
-             ...this.blocks.slice(outer + 1)
+            ...this.contentBlock.contents.slice(outer + 1)
-           ];
+          ];
 
-         }
+        }
       },
+      save({title, contents, isAssignment}) {
+        const contentBlock = {
+          title: title,
+          contents: contents.filter(value => Object.keys(value).length > 0),
+          type: setUserBlockType(isAssignment),
+        };
+        let input;
+        const { parent, after, slug} = this.$route.params;
+        if(after) {
+          input = {
+            contentBlock,
+            after
+         };
+        } else {
+          input = {
+            contentBlock,
+            parent
+          };
+        }
+        this.$apollo.mutate({
+          mutation: NEW_CONTENT_BLOCK_MUTATION,
+          variables: {
+            input
+          },
+          refetchQueries: [{
+            query: MODULE_DETAILS_QUERY,
+            variables: {
+              slug
+            }
+          }]
+        });
+      }
     },
   });
 </script>

client/src/router/module.names.js

@@ -4,3 +4,5 @@ export const MODULE_SETTINGS_PAGE = 'module-settings';
 export const VISIBILITY_PAGE = 'visibility';
 export const SNAPSHOT_LIST = 'snapshot-list';
 export const SNAPSHOT_DETAIL = 'snapshot-detail';
+export const CREATE_CONTENT_BLOCK_AFTER_PAGE = 'create-content-block-after';
+export const CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE = 'create-content-block-under-parent';

client/src/router/module.routes.js

@@ -5,6 +5,7 @@ import {
   SNAPSHOT_LIST,
   SUBMISSIONS_PAGE,
   VISIBILITY_PAGE,
+  CREATE_CONTENT_BLOCK_PAGE, CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
 } from '@/router/module.names';
 import {LAYOUT_SIMPLE} from '@/router/core.constants';
 import createContentBlock from '@/pages/createContentBlock';
@@ -17,6 +18,17 @@ const settingsPage = () => import(/* webpackChunkName: "modules" */'@/pages/modu
 const snapshots = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshots');
 const snapshot = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshot');
 
+const createContentBlockRouteFragment = {
+  component: createContentBlock,
+    meta: {
+      // layout: LAYOUT_SIMPLE,
+      hideFooter: true,
+      hideHeader: true,
+      showSubNavigation: true
+    },
+  props: true
+};
+
 export default [
   {
     path: '/module/:slug',
@@ -74,15 +86,15 @@ export default [
         },
       },
       {
-        path: 'add',
+        ...createContentBlockRouteFragment,
-        component: createContentBlock,
+        path: 'add-after/:after',
-        meta: {
+        name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
-          // layout: LAYOUT_SIMPLE,
-          hideFooter: true,
-          hideHeader: true,
-          showSubNavigation: true
-        },
       },
+      {
+        ...createContentBlockRouteFragment,
+        path: 'add-under-parent/:parent',
+        name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+      }
     ],
   },
 ];