From 69e19591b3e7e0068f941ec0f34de14278f2f1e9 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 7 Oct 2020 21:49:56 +0200
Subject: [PATCH] Add component class to content component

---
 .../content-blocks/ContentComponent.vue       | 165 +++++++++---------
 1 file changed, 86 insertions(+), 79 deletions(-)

diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index abb4c7bc..3a6c3209 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -1,8 +1,8 @@
 <template>
   <div
-    :class="{'content-component--bookmarked': bookmarked}"
+    :class="componentClass"
     :data-scrollto="component.id"
-    class="content-component">
+  >
     <bookmark-actions
       :bookmarked="bookmarked"
       :note="note"
@@ -19,96 +19,103 @@
 </template>
 
 <script>
-  import {mapGetters} from 'vuex';
+import {mapGetters} from 'vuex';
 
-  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 ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
-  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
-  import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
-  import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
-  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 Instruction from '@/components/content-blocks/Instruction';
-  import BookmarkActions from '@/components/notes/BookmarkActions';
+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 ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
+import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
+import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
+import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
+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 Instruction from '@/components/content-blocks/Instruction';
+import BookmarkActions from '@/components/notes/BookmarkActions';
 
-  import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
+import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
 
-  export default {
-    props: ['component', 'parent', 'bookmarks', 'notes', 'root'],
+export default {
+  props: ['component', 'parent', 'bookmarks', 'notes', 'root'],
 
-    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,
-      'section_title': SectionTitleBlock,
-      'content_list': ContentListBlock,
-      'module_room_slug': ModuleRoomSlug,
-      'thinglink_block': ThinglinkBlock,
-      Survey,
-      Solution,
-      Instruction,
-      Assignment,
-      BookmarkActions
+  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,
+    'section_title': SectionTitleBlock,
+    'content_list': ContentListBlock,
+    'module_room_slug': ModuleRoomSlug,
+    'thinglink_block': ThinglinkBlock,
+    Survey,
+    Solution,
+    Instruction,
+    Assignment,
+    BookmarkActions
+  },
+
+  computed: {
+    ...mapGetters(['editModule']),
+    bookmarked() {
+      return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
     },
-
-    computed: {
-      ...mapGetters(['editModule']),
-      bookmarked() {
-        return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
-      },
-      note() {
-        const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
-        return bookmark && bookmark.note;
-      },
-      showBookmarkActions() {
-        return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
-      }
+    note() {
+      const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
+      return bookmark && bookmark.note;
     },
-
-    methods: {
-      addNote(id) {
-        this.$store.dispatch('addNote', {
-          content: id,
-          type: this.parent.__typename,
-          block: this.root
-        });
-      },
-      editNote() {
-        this.$store.dispatch('editNote', this.note);
-      },
-      bookmarkContent(uuid, bookmarked) {
-        this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
+    showBookmarkActions() {
+      return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
+    },
+    componentClass() {
+      let classes = ['content-component', `content-component--${this.component.type}`];
+      if (this.bookmarked) {
+        classes.push('content-component--bookmarked');
       }
+      return classes;
     }
-  };
+  },
+
+  methods: {
+    addNote(id) {
+      this.$store.dispatch('addNote', {
+        content: id,
+        type: this.parent.__typename,
+        block: this.root
+      });
+    },
+    editNote() {
+      this.$store.dispatch('editNote', this.note);
+    },
+    bookmarkContent(uuid, bookmarked) {
+      this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "@/styles/_variables.scss";
+@import "@/styles/_variables.scss";
 
-  .content-component {
-    position: relative;
+.content-component {
+  position: relative;
 
-    &--bookmarked {
+  &--bookmarked {
 
-    }
   }
+}
 </style>