Move content block content handling to own component

client/src/components/ContentBlock.vue

@@ -17,11 +17,13 @@
       <h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label">{{instrumentLabel}}</h3>
       <h4 class="content-block__title" v-if="!contentBlock.indent">{{contentBlock.title}}</h4>
 
-      <component v-for="component in contentBlocksWithContentLists.contents"
+
-                 :key="component.id"
+      <content-component v-for="component in contentBlocksWithContentLists.contents"
-                 :is="component.type"
+                         :key="component.id"
-                 v-bind="component">
+                         :component="component"
-      </component>
+                         :parent="contentBlock.id"
+                         :highlights="contentBlock.highlights">
+      </content-component>
 
     </div>
 
@@ -32,21 +34,6 @@
 </template>
 
 <script>
-  import TextBlock from '@/components/content-blocks/TextBlock';
-  import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
-  import Task from '@/components/content-blocks/Task';
-  import ImageBlock from '@/components/content-blocks/ImageBlock';
-  import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
-  import VideoBlock from '@/components/content-blocks/VideoBlock';
-  import LinkBlock from '@/components/content-blocks/LinkBlock';
-  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
-  import InfogramBlock from '@/components/content-blocks/InfogramBlock';
-  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
-  import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
-  import ContentListBlock from '@/components/content-blocks/ContentListBlock';
-  import Assignment from '@/components/content-blocks/assignment/Assignment';
-  import Survey from '@/components/content-blocks/SurveyBlock';
-  import Solution from '@/components/content-blocks/Solution';
   import AddContentButton from '@/components/AddContentButton';
   import MoreOptionsWidget from '@/components/MoreOptionsWidget';
   import UserWidget from '@/components/UserWidget';
@@ -54,7 +41,7 @@
   import EyeIcon from '@/components/icons/EyeIcon';
   import PenIcon from '@/components/icons/PenIcon';
   import TrashIcon from '@/components/icons/TrashIcon';
-  import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug'
+  import ContentComponent from '@/components/content-blocks/ContentComponent';
 
   import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
   import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
@@ -75,23 +62,7 @@
     name: 'content-block',
 
     components: {
-      'text_block': TextBlock,
+      ContentComponent,
-      'basic_knowledge': InstrumentWidget, // for legacy
-      'instrument': InstrumentWidget,
-      'image_block': ImageBlock,
-      'image_url_block': ImageUrlBlock,
-      'video_block': VideoBlock,
-      'link_block': LinkBlock,
-      'document_block': DocumentBlock,
-      'infogram_block': InfogramBlock,
-      'genially_block': GeniallyBlock,
-      'subtitle': SubtitleBlock,
-      'content_list': ContentListBlock,
-      'module_room_slug': ModuleRoomSlug,
-      Survey,
-      Solution,
-      Assignment,
-      Task,
       AddContentButton,
       VisibilityAction,
       EyeIcon,

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="content-component" :class="{'content-component--highlighted': highlighted}">
+    {{component.id}}
+    <a @click="highlightContent(component.id, !highlighted)">Highlight</a>
+    <div>
+      Highlighted: {{highlighted}}
+    </div>
+    <component
+      :is="component.type"
+      v-bind="component">
+    </component>
+  </div>
+</template>
+
+<script>
+  import TextBlock from '@/components/content-blocks/TextBlock';
+  import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
+  import ImageBlock from '@/components/content-blocks/ImageBlock';
+  import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
+  import VideoBlock from '@/components/content-blocks/VideoBlock';
+  import LinkBlock from '@/components/content-blocks/LinkBlock';
+  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
+  import InfogramBlock from '@/components/content-blocks/InfogramBlock';
+  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
+  import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
+  import ContentListBlock from '@/components/content-blocks/ContentListBlock';
+  import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug';
+  import Assignment from '@/components/content-blocks/assignment/Assignment';
+  import Survey from '@/components/content-blocks/SurveyBlock';
+  import Solution from '@/components/content-blocks/Solution';
+
+  import UPDATE_CONTENT_HIGHLIGHT from '@/graphql/gql/mutations/updateContentHighlight.gql';
+  import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
+
+  export default {
+    props: ['component', 'parent', 'highlights'],
+
+    components: {
+      'text_block': TextBlock,
+      'basic_knowledge': InstrumentWidget, // for legacy
+      'instrument': InstrumentWidget,
+      'image_block': ImageBlock,
+      'image_url_block': ImageUrlBlock,
+      'video_block': VideoBlock,
+      'link_block': LinkBlock,
+      'document_block': DocumentBlock,
+      'infogram_block': InfogramBlock,
+      'genially_block': GeniallyBlock,
+      'subtitle': SubtitleBlock,
+      'content_list': ContentListBlock,
+      'module_room_slug': ModuleRoomSlug,
+      Survey,
+      Solution,
+      Assignment,
+    },
+
+    computed: {
+      highlighted() {
+        return this.highlights.indexOf(this.component.id) > -1;
+      }
+    },
+
+    methods: {
+      highlightContent(id, highlight) {
+        this.$apollo.mutate({
+          mutation: UPDATE_CONTENT_HIGHLIGHT,
+          variables: {
+            input: {
+              id,
+              contentBlock: this.parent,
+              highlight
+            }
+          },
+          refetchQueries: [{
+            query: MODULE_DETAILS_QUERY,
+            variables: {
+              slug: this.$route.params.slug
+            }
+          }]
+        });
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .content-component {
+    &--highlighted {
+      background-color: yellow;
+    }
+  }
+</style>