Add cms-document-block to api and frontend

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="cms-document-block">
+    <document-icon class="document-block__icon" />
+    <a
+      :href="value.url"
+      class="document-block__link"
+      target="_blank"
+    >{{ value.title }}</a>
+
+  </div>
+</template>
+
+<script>
+  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+
+  export default {
+    props: {
+      value: Object,
+    },
+
+    components: {
+      DocumentIcon,
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "~styles/helpers";
+
+  .cms-document-block {
+    display: grid;
+    grid-template-columns: 50px 1fr 50px;
+    align-items: center;
+
+    &__icon {
+      width: 30px;
+      height: 30px;
+    }
+
+    &__link {
+      text-decoration: underline;
+    }
+  }
+</style>

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

@@ -31,6 +31,7 @@ const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'
 const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
 const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
 const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
+const CmsDocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/CmsDocumentBlock');
 const InfogramBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock');
 const ThinglinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ThinglinkBlock');
 const GeniallyBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock');
@@ -88,6 +89,7 @@ export default {
     'content_list': ContentListBlock,
     'module_room_slug': ModuleRoomSlug,
     'thinglink_block': ThinglinkBlock,
+    'cms_document_block': CmsDocumentBlock,
     Survey,
     Solution,
     Instruction,

server/api/graphene_wagtail.py

@@ -6,6 +6,7 @@ from graphene.types import Scalar
 from graphene_django.converter import convert_django_field
 from graphql_relay import to_global_id
 from wagtail.core.fields import StreamField
+from wagtail.documents.models import Document
 from wagtail.images.models import Image
 
 from assignments.models import Assignment
@@ -85,6 +86,19 @@ def augment_fields(raw_data):
                 item_data = data['value']
                 data['value'] = augment_fields(item_data)
 
+            if _type == 'cms_document_block':
+                _value = data['value']
+                document = Document.objects.get(id=_value)
+                value = {
+                    'value': _value,
+                    'id': document.id,
+                    'file_name': document.filename,
+                    'file_extension': document.file_extension,
+                    'url': document.url,
+                    'title': document.title
+                }
+                data['value'] = value
+
     return raw_data
 
 

server/books/schema/mutations/utils.py

@@ -41,7 +41,6 @@ ALLOWED_BLOCKS = (
     'document_block',
     'content_list_item',
     'subtitle',
-    'cms_document_block'
 )