Add document block

client/src/components/ContentBlock.vue

@@ -28,6 +28,7 @@
   import ImageBlock from '@/components/content-blocks/ImageBlock';
   import VideoBlock from '@/components/content-blocks/VideoBlock';
   import LinkBlock from '@/components/content-blocks/LinkBlock';
+  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
   import StudentEntry from '@/components/content-blocks/StudentEntry';
   import AddContentBlockButton from '@/components/AddContentBlockButton';
   import EyeIcon from '@/components/icons/EyeIcon';
@@ -42,6 +43,7 @@
       'image_block': ImageBlock,
       'video_block': VideoBlock,
       'link_block': LinkBlock,
+      'document_block': DocumentBlock,
       Task,
       AddContentBlockButton,
       EyeIcon

client/src/components/NewContentBlockWizard.vue

@@ -15,6 +15,7 @@
         v-on:link-change-url="changeLinkUrl"
         v-on:link-change-text="changeLinkText"
         v-on:text-change-value="changeTextValue"
+        v-on:document-change-url="changeDocumentUrl"
         v-on:video-change-url="changeVideoUrl">
       </component>
       <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
@@ -78,7 +79,7 @@
             return 'text-form';
           case 'exercise':
             return 'exercise-form';
-          case 'document':
+          case 'document_block':
             return 'document-form';
         }
         return 'content-block-element-chooser-widget'
@@ -98,6 +99,9 @@
       changeVideoUrl(value, index) {
         this._updateProperty(value, index, 'url')
       },
+      changeDocumentUrl(value, index) {
+        this._updateProperty(value, index, 'url')
+      },
       changeTextValue(value, index) {
         this._updateProperty(value, index, 'text')
       },
@@ -134,6 +138,12 @@
               url: ''
             };
             break;
+          case 'document_block':
+            el = {
+              ...el,
+              url: ''
+            };
+            break;
         }
 
         this.elements.splice(index, 1, el);

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

@@ -0,0 +1,36 @@
+<template>
+  <div class="document-block">
+    <document-icon class="document-block__icon"></document-icon>
+    <a :href="value.url" class="document-block__link" target="_blank">{{value.url}}</a>
+  </div>
+</template>
+
+<script>
+  import DocumentIcon from '@/components/icons/DocumentIcon';
+
+  export default {
+    props: ['value'],
+
+    components: {
+      DocumentIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .document-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-blocks/LinkBlock.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="link-block">
     <link-icon class="link-block__icon"></link-icon>
-    <a :href="value.url" class="link-block__link">{{value.text}}</a>
+    <a :href="value.url" class="link-block__link" target="_blank">{{value.text}}</a>
   </div>
 </template>
 

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

@@ -20,7 +20,7 @@
       <speech-bubble-icon class="content-block-element-chooser-widget__link-icon"></speech-bubble-icon>
       <div class="content-block-element-chooser-widget__link-title">Aufgabe&nbsp;& Ergebnis</div>
     </div>
-    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'document')">
+    <div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'document_block')">
       <document-icon class="content-block-element-chooser-widget__link-icon"></document-icon>
       <div class="content-block-element-chooser-widget__link-title">Dokument</div>
     </div>

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

@@ -8,6 +8,7 @@
     </p>
 
     <input class="document-form__document-link skillbox-input"
+           :value="url" v-on:input="$emit('document-change-url', $event.target.value, index)"
            placeholder="URL einfügen...">
 
   </div>
@@ -17,6 +18,8 @@
   import InfoIcon from '@/components/icons/InfoIcon';
 
   export default {
+    props: ['url', 'index'],
+
     components: {
       InfoIcon
     }

server/book/blocks.py

@@ -36,6 +36,10 @@ class VideoBlock(blocks.StructBlock):
     url = blocks.URLBlock()
 
 
+# 'document_block'
+class DocumentBlock(blocks.StructBlock):
+    url = blocks.URLBlock()
+
 # 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
 #
 # url = blocks.URLBlock()

server/book/models/contentblock.py

@@ -5,7 +5,7 @@ from wagtail.admin.edit_handlers import FieldPanel, TabbedInterface, ObjectList,
 from wagtail.core.fields import StreamField
 from wagtail.images.blocks import ImageChooserBlock
 
-from book.blocks import TextBlock, BasicKnowledgeBlock, StudentEntryBlock, LinkBlock, VideoBlock
+from book.blocks import TextBlock, BasicKnowledgeBlock, StudentEntryBlock, LinkBlock, VideoBlock, DocumentBlock
 from core.wagtail_utils import StrictHierarchyPage
 from user.models import UserGroup
 
@@ -37,6 +37,7 @@ class ContentBlock(StrictHierarchyPage):
         ('link_block', LinkBlock(icon='link')),
         ('task', TextBlock(icon='tick')),
         ('video_block', VideoBlock(icon='media')),
+        ('document_block', DocumentBlock(icon='doc-full')),
     ], null=True, blank=True)
 
     type = models.CharField(

server/book/schema/mutations.py

@@ -13,6 +13,7 @@ from book.schema.queries import ContentBlockNode
 
 def handle_content_blocks(content_data):
     new_contents = []
+
     for content in content_data:
         # todo: add all the content blocks
         # todo: sanitize user inputs!
@@ -43,7 +44,12 @@ def handle_content_blocks(content_data):
                     'url': bleach.clean(content['url'])
                 }})
         elif content['type'] == 'document_block':
-            pass
+            new_contents.append({
+                'type': 'document_block',
+                'value': {
+                    'url': bleach.clean(content['url'])
+                }})
+
     return new_contents