Merged in feature/instructions (pull request #58)

Feature/instructions

Approved-by: Christian Cueni

client/package-lock.json

@@ -9130,8 +9130,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -9149,13 +9148,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -9168,18 +9165,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -9282,8 +9276,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -9293,7 +9286,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -9306,20 +9298,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -9336,7 +9325,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -9409,8 +9397,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -9420,7 +9407,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -9496,8 +9482,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -9527,7 +9512,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -9545,7 +9529,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -9584,13 +9567,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         }
       }
     },
@@ -11636,8 +11617,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -11680,8 +11660,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -11692,8 +11671,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -11810,8 +11788,7 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -11823,7 +11800,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -11853,7 +11829,6 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -11872,7 +11847,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -11966,7 +11940,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -12052,8 +12025,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -12089,7 +12061,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -12109,7 +12080,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -12153,14 +12123,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "yallist": {
               "version": "3.0.3",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             }
           }
         },

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

@@ -38,6 +38,7 @@
   import Assignment from '@/components/content-blocks/assignment/Assignment';
   import Survey from '@/components/content-blocks/SurveyBlock';
   import Solution from '@/components/content-blocks/Solution';
+  import Instruction from '@/components/content-blocks/Instruction';
   import BookmarkActions from '@/components/notes/BookmarkActions';
 
   import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
@@ -63,6 +64,7 @@
       'thinglink_block': ThinglinkBlock,
       Survey,
       Solution,
+      Instruction,
       Assignment,
       BookmarkActions
     },

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

@@ -0,0 +1,50 @@
+<template>
+  <div class="instruction" v-if="me.isTeacher">
+    <bulb-icon class="instruction__icon"></bulb-icon>
+    <a class="instruction__link" :href="value.url">{{text}}</a>
+  </div>
+</template>
+
+<script>
+  import me from '@/mixins/me';
+  import BulbIcon from '@/components/icons/BulbIcon';
+
+  export default {
+    props: ['value'],
+
+    mixins: [me],
+
+    components: {
+      BulbIcon
+    },
+
+    computed: {
+      text() {
+        return this.value.text ? this.value.text : 'Anweisungen'
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_mixins.scss";
+
+  .instruction {
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+
+    &__icon {
+      width: 40px;
+      height: 40px;
+      background-color: $color-brand;
+      fill: $color-white;
+      border-radius: 20px;
+      margin-right: $small-spacing;
+    }
+
+    &__link {
+      @include heading-3;
+    }
+  }
+</style>

client/src/components/icons/BulbIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+    <path
+      d="M50,6.41C25.74,6.41,6,26,6,50S25.74,93.59,50,93.59,94,74,94,50,74.26,6.41,50,6.41Zm0,82.43A39.1,39.1,0,0,1,10.74,50a39.26,39.26,0,0,1,78.52,0A39.1,39.1,0,0,1,50,88.85Z"/>
+    <path
+      d="M50,22.72A19,19,0,0,0,30.91,41.64a18.72,18.72,0,0,0,6.36,14.13c1.21,1.2,1.66.89,1.68,2.78l0,.84a3.34,3.34,0,0,0,1,2.47,3.53,3.53,0,0,0,2.38,1H57.64a3.39,3.39,0,0,0,2.39-1,3.55,3.55,0,0,0,1-2.57c-.06-1.61.22-2.1,1.75-3.62A18.87,18.87,0,0,0,50,22.72ZM64.35,41.64a14.26,14.26,0,0,1-4.77,10.52l-.24.24c-2.48,2.45-3,3.61-3,5.7H43.67c-.07-2.08-.57-3.22-3.18-5.8A14.27,14.27,0,1,1,64.35,41.64Z"/>
+    <path
+      d="M56.43,78.67H43.57a4,4,0,0,1-4-4v-4a4,4,0,0,1,4-4H56.43a4,4,0,0,1,4,4v4A4,4,0,0,1,56.43,78.67ZM43.57,70.76v4H56.43v-4Z"/>
+  </svg>
+</template>

client/src/graphql/gql/topicQuery.gql

@@ -6,6 +6,7 @@ query Topic($slug: String!){
     teaser
     description
     vimeoId
+    instructions
     modules {
       edges {
         node {

client/src/pages/topic.vue

@@ -4,9 +4,16 @@
     <p class="topic__teaser">
       {{topic.teaser}}
     </p>
-    <div v-if="topic.vimeoId" class="topic__video-link" @click="openVideo">
+    <div class="topic__links">
-      <play class="topic__video-link-icon"></play>
+      <div v-if="topic.vimeoId" class="topic__video-link topic__link" @click="openVideo">
-      <span class="topic__video-link-description">Video schauen</span>
+        <play-icon class="topic__video-link-icon topic__link-icon"></play-icon>
+        <span class="topic__link-description">Video schauen</span>
+      </div>
+      <a target="_blank" :href="topic.instructions" v-if="me.isTeacher && topic.instructions" class="topic__instruction-link topic__link">
+        <bulb-icon class="topic__instruction-icon topic__link-icon"></bulb-icon>
+        <span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
+      </a>
+
     </div>
     <div class="topic__modules">
       <module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
@@ -16,15 +23,20 @@
 
 <script>
   import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
-  import Play from '@/components/icons/Play';
+  import PlayIcon from '@/components/icons/Play';
+  import BulbIcon from '@/components/icons/BulbIcon';
   import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
+  import me from '@/mixins/me';
 
   export default {
     components: {
       ModuleTeaser,
-      Play
+      PlayIcon,
+      BulbIcon
     },
 
+    mixins: [me],
+
     apollo: {
       topic() {
         return {
@@ -75,22 +87,37 @@
       margin-bottom: $large-spacing;
     }
 
-    &__video-link {
+    &__links {
       margin-bottom: $large-spacing;
+      display: flex;
+    }
+
+    &__link {
       cursor: pointer;
       display: flex;
       align-items: center;
     }
 
-    &__video-link-icon {
+    &__video-link {
+      margin-right: $large-spacing;
+    }
+
+    &__link-icon {
       width: 40px;
+      height: 40px;
       margin-right: $medium-spacing;
     }
 
-    &__video-link-description {
+    &__link-description {
       @include heading-3;
     }
 
+    &__instruction-icon {
+      fill: $color-white;
+      border-radius: 20px;
+      background-color: $color-brand;
+    }
+
     &__modules {
       margin-top: 40px;
       display: flex;

server/books/blocks.py

@@ -110,6 +110,14 @@ class ModuleRoomSlugBlock(blocks.StructBlock):
 
     title = blocks.TextBlock()
 
+
+class InstructionBlock(blocks.StructBlock):
+    class Meta:
+        icon = 'help'
+
+    url = blocks.URLBlock()
+    text = blocks.TextBlock(required=False)
+
 # 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
 #
 # url = blocks.URLBlock()

server/books/migrations/0020_topic_instructions.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.1.15 on 2020-04-10 18:43
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('books', '0019_auto_20200408_0841'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='topic',
+            name='instructions',
+            field=models.CharField(blank=True, default=None, max_length=255, null=True),
+        ),
+    ]

server/books/models/contentblock.py

@@ -8,7 +8,7 @@ from wagtail.images.blocks import ImageChooserBlock
 
 from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
     ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock, SurveyBlock, ModuleRoomSlugBlock, \
-    ThinglinkBlock
+    ThinglinkBlock, InstructionBlock
 from books.utils import get_type_and_value
 from core.wagtail_utils import StrictHierarchyPage
 from notes.models import ContentBlockBookmark
@@ -60,6 +60,7 @@ class ContentBlock(StrictHierarchyPage):
         ('genially_block', GeniallyBlock()),
         ('thinglink_block', ThinglinkBlock()),
         ('subtitle', SubtitleBlock()),
+        ('instruction', InstructionBlock()),
         ('module_room_slug', ModuleRoomSlugBlock())
     ]
 

server/books/models/topic.py

@@ -19,12 +19,14 @@ class Topic(StrictHierarchyPage):
     teaser = models.TextField()
     description = RichTextField(features=DEFAULT_RICH_TEXT_FEATURES)
     vimeo_id = models.CharField(max_length=200, blank=True, null=True, default=None)
+    instructions = models.CharField(max_length=255, blank=True, null=True, default=None)
 
     content_panels = [
         FieldPanel('title', classname="full title"),
         FieldPanel('order'),
         FieldPanel('teaser'),
         FieldPanel('vimeo_id'),
+        FieldPanel('instructions'),
         FieldPanel('description'),
     ]
 

server/books/schema/queries.py

@@ -194,7 +194,7 @@ class TopicNode(DjangoObjectType):
     class Meta:
         model = Topic
         only_fields = [
-            'slug', 'title', 'meta_title', 'teaser', 'description', 'vimeo_id', 'order'
+            'slug', 'title', 'meta_title', 'teaser', 'description', 'vimeo_id', 'order', 'instructions'
         ]
         filter_fields = {
             'slug': ['exact', 'icontains', 'in'],