Add documents to client view

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="cms-document-block">
+  <div
+    :class="{'cms-document-block--solution': solution}"
+    class="cms-document-block"
+  >
     <document-icon class="cms-document-block__icon" />
     <a
       :href="value.url"
@@ -15,6 +18,10 @@
   export default {
     props: {
       value: Object,
+      solution: {
+        type: Boolean,
+        default: false,
+      },
     },
 
     components: {
@@ -37,8 +44,23 @@
       height: 30px;
     }
 
+
     &__link {
       text-decoration: underline;
     }
+
+    $parent: &;
+
+    &--solution {
+      margin-bottom: $small-spacing;
+
+      #{$parent}__link {
+        color: $color-silver-dark;
+      }
+      #{$parent}__icon {
+        fill: $color-silver-dark;
+      }
+
+    }
   }
 </style>

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

@@ -5,7 +5,7 @@
   >
     <bulb-icon class="instruction__icon" />
     <a
-      :href="value.url"
+      :href="url"
       class="instruction__link"
     >{{ text }}</a>
   </div>
@@ -27,6 +27,9 @@
     computed: {
       text() {
         return this.value.text ? this.value.text : 'Anweisungen';
+      },
+      url() {
+        return this.value.document ? this.value.document.url : this.value.url;
       }
     }
   };

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

@@ -13,22 +13,34 @@
       <template v-else>ausblenden</template>
     </a>
     <transition name="fade">
-      <p
+      <div
-        class="solution__text solution-text fade"
+        class="solution__hidden fade"
-        data-cy="solution-text"
-
         v-if="visible"
-        v-html="sanitizedText"
+      >
-      />
+        <p
+          class="solution__text solution-text"
+          data-cy="solution-text"
+
+          v-html="sanitizedText"
+        />
+        <cms-document-block
+          :solution="true"
+          class="solution__document"
+          :value="value.document"
+          v-if="value.document"
+        />
+      </div>
     </transition>
   </div>
 </template>
 
 <script>
   import {sanitizeAsHtml} from '@/helpers/text';
+  import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
 
   export default {
     props: ['value'],
+    components: {CmsDocumentBlock},
 
     data() {
       return {

server/api/graphene_wagtail.py

@@ -17,12 +17,26 @@ from surveys.models import Survey
 logger = logging.getLogger(__name__)
 
 
+# todo: replace this with the newer method from https://wagtail.org/blog/graphql-with-streamfield/
 class GenericStreamFieldType(Scalar):
     @staticmethod
     def serialize(stream_value):
         raw_data = stream_value.raw_data
         return list(augment_fields(raw_data))
 
+def get_document_json(document_id):
+    document = CustomDocument.objects.get(id=document_id)
+    value = {
+        'value': document_id,
+        'id': document.id,
+        'file_name': document.filename,
+        'file_extension': document.file_extension,
+        'url': document.url,
+        'title': document.title,
+        'display_text': document.display_text
+    }
+    return value
+
 
 def augment_fields(raw_data):
     for data in raw_data:
@@ -90,19 +104,19 @@ def augment_fields(raw_data):
             if _type == 'cms_document_block':
                 try:
                     _value = data['value']
-                    document = CustomDocument.objects.get(id=_value)
+                    value = get_document_json(_value)
-                    value = {
-                        'value': _value,
-                        'id': document.id,
-                        'file_name': document.filename,
-                        'file_extension': document.file_extension,
-                        'url': document.url,
-                        'title': document.title,
-                        'display_text': document.display_text
-                    }
                     data['value'] = value
                 except CustomDocument.DoesNotExist:
                     logger.error('CustomDocument {} does not exist'.format(_value))
+            if _type == 'solution' or _type == 'instruction':
+                _value = data['value']
+                document_id = _value.get('document')
+                if document_id is not None:
+                    document = get_document_json(document_id)
+                    _value['document'] = document
+                data['value'] = _value
+
+
 
     return raw_data
 

server/books/blocks.py

@@ -34,7 +34,7 @@ class SolutionBlock(blocks.StructBlock):
         icon = 'tick'
 
     text = blocks.RichTextBlock(features=DEFAULT_RICH_TEXT_FEATURES)
-    document = CMSDocumentBlock()
+    document = CMSDocumentBlock(required=False)
 
 
 # 'basic_knowledge'
@@ -127,9 +127,9 @@ class InstructionBlock(blocks.StructBlock):
     class Meta:
         icon = 'help'
 
-    url = blocks.URLBlock()
+    url = blocks.URLBlock(required=False)
     text = blocks.TextBlock(required=False)
-    document = DocumentChooserBlock()
+    document = DocumentChooserBlock(required=False)
 
 
 # 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'