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

<template>
  <div
    :class="componentClass"
    :data-scrollto="component.id"
    data-cy="content-component"
  >
    <bookmark-actions
      :bookmarked="bookmarked"
      :note="note"
      :edit-mode="editMode"
      v-if="showBookmarkActions"
      @add-note="addNote(component.id)"
      @edit-note="editNote"
      @bookmark="bookmarkContent(component.id, !bookmarked)"
    />
    <component
      v-bind="component"
      :parent="parent"
      :is="component.type"
    />
  </div>
</template>

<script>
import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';

const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
const InstrumentWidget = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InstrumentWidget');
const ImageBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock');
const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock');
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 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');
const SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
const SectionTitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SectionTitleBlock');
const ContentListBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentListBlock');
const ModuleRoomSlug = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ModuleRoomSlug');
const Assignment = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/Assignment');
const Survey = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SurveyBlock');
const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
const Instruction = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Instruction');
const BookmarkActions = () => import(/* webpackChunkName: "content-components" */'@/components/notes/BookmarkActions');

export default {
  props: {
    component: {
      type: Object,
      default: () => ({})
    },
    parent: {
      type: Object,
      default: () => ({})
    },
    bookmarks: {
      type: Array,
      default: () => ([])
    },
    notes: {
      type: Array,
      default: () => ([])
    },
    root: {
      type: String,
      default: ''
    },
    editMode: {
      type: Boolean,
      default: false
    }
  },

  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: {
    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.editMode;
    },
    componentClass() {
      let classes = ['content-component', `content-component--${this.component.type}`];
      if (this.bookmarked) {
        classes.push('content-component--bookmarked');
      }
      return classes;
    }
  },

  methods: {
    addNote(id) {
      const type = Object.prototype.hasOwnProperty.call(this.parent, '__typename')
        ? this.parent.__typename : 'ContentBlockNode';

      this.$store.dispatch('addNote', {
        content: id,
        type,
        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/helpers";

  .content-component {
    position: relative;

    &--bookmarked {

    }

    &--subtitle {
      margin-top: $section-spacing;
      margin-bottom: $large-spacing;
    }

    &--section_title {
      margin-top: $section-spacing;
      margin-bottom: $large-spacing;
    }

    &--text_block {
      margin-bottom: $large-spacing;
    }

    &--document_block {
      margin-bottom: $large-spacing;
    }
  }
</style>