From 23f282b358df082f682eac78e2e5f659a07f4d20 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Wed, 12 Sep 2018 14:37:28 +0200
Subject: [PATCH] Add link block

---
 client/src/components/Chapter.vue             |  2 +-
 client/src/components/ContentBlock.vue        |  3 +-
 .../src/components/NewContentBlockWizard.vue  | 29 ++++-----------
 .../components/content-blocks/LinkBlock.vue   | 36 +++++++++++++++++++
 .../ContentBlockElementChooserWidget.vue      |  9 +----
 server/book/schema/mutations.py               | 11 +++---
 6 files changed, 54 insertions(+), 36 deletions(-)
 create mode 100644 client/src/components/content-blocks/LinkBlock.vue

diff --git a/client/src/components/Chapter.vue b/client/src/components/Chapter.vue
index f4cf4098..6e54b712 100644
--- a/client/src/components/Chapter.vue
+++ b/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>
 
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index 18e995e1..58295433 100644
--- a/client/src/components/ContentBlock.vue
+++ b/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
diff --git a/client/src/components/NewContentBlockWizard.vue b/client/src/components/NewContentBlockWizard.vue
index 1640a957..28ff366f 100644
--- a/client/src/components/NewContentBlockWizard.vue
+++ b/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'
-          // },
-          // {}
+          // }
         ]
       }
     }
diff --git a/client/src/components/content-blocks/LinkBlock.vue b/client/src/components/content-blocks/LinkBlock.vue
new file mode 100644
index 00000000..be5afd25
--- /dev/null
+++ b/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>
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index b5669bcb..e498aad1 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/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>
diff --git a/server/book/schema/mutations.py b/server/book/schema/mutations.py
index e2abbe22..12a224a9 100644
--- a/server/book/schema/mutations.py
+++ b/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: