Add link block

client/src/components/Chapter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chapter">
-    <h3>{{chapter.title}} {{chapter.id}}</h3>
+    <h3>{{chapter.title}}</h3>
 
     <add-content-block-button :parent="chapter.id"></add-content-block-button>
 

client/src/components/ContentBlock.vue

@@ -6,7 +6,6 @@
       </div>
 
       <h4 class="content-block__title">{{contentBlock.title}}</h4>
-      <h4>{{contentBlock.id}}</h4>
 
       <component v-for="component in contentBlock.contents"
                  :key="component.id"
@@ -28,6 +27,7 @@
   import Task from '@/components/content-blocks/Task';
   import ImageBlock from '@/components/content-blocks/ImageBlock';
   import VideoBlock from '@/components/content-blocks/VideoBlock';
+  import LinkBlock from '@/components/content-blocks/LinkBlock';
   import StudentEntry from '@/components/content-blocks/StudentEntry';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
   import EyeIcon from '@/components/icons/EyeIcon';
@@ -41,6 +41,7 @@
       'student_entry': StudentEntry,
       'image_block': ImageBlock,
       'video_block': VideoBlock,
+      'link_block': LinkBlock,
       Task,
       AddContentBlockButton,
       EyeIcon

client/src/components/NewContentBlockWizard.vue

@@ -1,6 +1,10 @@
 <template>
   <modal>
     <content-block-title-input slot="header" v-on:update-title="updateTitle" :title="title"></content-block-title-input>
+    <add-content-element class="new-content-block-wizard__add"
+                         v-on:add-element="addElement"
+                         :index="-1"
+    ></add-content-element>
     <div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
       <component
         class="new-content-block-wizard__element-component"
@@ -64,7 +68,7 @@
     methods: {
       type(element) {
         switch (element.type) {
-          case 'link':
+          case 'link_block':
             return 'link-form';
           case 'video_block':
             return 'video-form';
@@ -117,7 +121,7 @@
               text: ''
             };
             break;
-          case 'link':
+          case 'link_block':
             el = {
               ...el,
               text: '',
@@ -174,26 +178,7 @@
           // {
           //   type: 'video',
           //   url: 'https://vimeo.com/267384185'
-          // },
+          // }
-          // {
-          //   type: 'link'
-          // },
-          // {
-          //   type: 'text'
-          // },
-          // {
-          //   type: 'video'
-          // },
-          // {
-          //   type: 'document'
-          // },
-          // {
-          //   type: 'exercise'
-          // },
-          // {
-          //   type: 'image'
-          // },
-          // {}
         ]
       }
     }

client/src/components/content-blocks/LinkBlock.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="link-block">
+    <link-icon class="link-block__icon"></link-icon>
+    <a :href="value.url" class="link-block__link">{{value.text}}</a>
+  </div>
+</template>
+
+<script>
+  import LinkIcon from '@/components/icons/LinkIcon';
+
+  export default {
+    props: ['value'],
+
+    components: {
+      LinkIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .link-block {
+    margin-bottom: 30px;
+    display: grid;
+    grid-template-columns: 50px 1fr;
+    align-items: center;
+
+    &__icon {
+      width: 30px;
+      height: 30px;
+    }
+
+    &__link {
+      text-decoration: underline;
+    }
+  }
+</style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class="content-block-element-chooser-widget">
-    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'link')">
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'link_block')">
       <link-icon class="content-block-element-chooser-widget__link-icon"></link-icon>
       <div class="content-block-element-chooser-widget__link-title">Link</div>
     </div>
@@ -45,13 +45,6 @@
       TextIcon,
       SpeechBubbleIcon,
       DocumentIcon
-    },
-
-    methods: {
-      changeType() {
-        console.log('changeType');
-        this.element.type = 'link';
-      }
     }
   }
 </script>

server/book/schema/mutations.py

@@ -27,7 +27,13 @@ def handle_content_blocks(content_data):
         elif content['type'] == 'image_block':
             pass
         elif content['type'] == 'link_block':
-            pass
+            new_contents.append({
+                'type': 'link_block',
+                'value': {
+                    'text': bleach.clean(content['text']),
+                    'url': bleach.clean(content['url'])
+                }
+            })
         elif content['type'] == 'task':
             pass
         elif content['type'] == 'video_block':
@@ -51,9 +57,6 @@ class MutateContentBlock(relay.ClientIDMutation):
     errors = graphene.List(graphene.String)
     content_block = graphene.Field(ContentBlockNode)
 
-    # updated_title = graphene.String()
-    # updated_type = graphene.String()
-
     @classmethod
     def mutate_and_get_payload(cls, *args, **kwargs):
         try: