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

<template>
  <div class="content-component" :class="{'content-component--bookmarked': bookmarked}">
    <bookmark-actions
      v-if="showBookmarkActions()"
      @add-note="addNote(component.id)"
      @edit-note="editNote"
      @bookmark="bookmarkContent(component.id, !bookmarked)"
      :bookmarked="bookmarked"
      :note="note"></bookmark-actions>
    <component
      :is="component.type"
      v-bind="component"
      :parent="parent"
    >
    </component>
  </div>
</template>

<script>
  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 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 BookmarkActions from '@/components/notes/BookmarkActions';

  import UPDATE_CONTENT_BOOKMARK from '@/graphql/gql/mutations/updateContentBookmark.gql';
  import CONTENT_BLOCK_QUERY from '@/graphql/gql/contentBlockQuery.gql';

  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,
      'content_list': ContentListBlock,
      'module_room_slug': ModuleRoomSlug,
      Survey,
      Solution,
      Assignment,
      BookmarkActions
    },

    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;
      }
    },

    methods: {
      addNote(id) {
        this.$store.dispatch('addNote', {
          content: id,
          contentBlock: this.root
        });
      },
      editNote() {
        this.$store.dispatch('editNote', this.note);
      },
      bookmarkContent(uuid, bookmarked) {
        this.$apollo.mutate({
          mutation: UPDATE_CONTENT_BOOKMARK,
          variables: {
            input: {
              uuid,
              contentBlock: this.root,
              bookmarked
            }
          },
          update: (store, response) => {
            const query = CONTENT_BLOCK_QUERY;
            const variables = {id: this.root};
            const data = store.readQuery({
              query,
              variables
            });

            const bookmarks = data.contentBlock.bookmarks;

            if (bookmarked) {
              bookmarks.push({
                note: null,
                uuid: uuid,
                __typename: 'ContentBlockBookmarkNode'
              });
            } else {
              let index = bookmarks.findIndex(element => {
                return element.uuid === uuid;
              });
              if (index > -1) {
                bookmarks.splice(index, 1);
              }
            }

            data.contentBlock.bookmarks = bookmarks;

            store.writeQuery({
              data,
              query,
              variables
            });
          },
          optimisticResponse: {
            __typename: 'Mutation',
            updateContentBookmark: {
              __typename: 'UpdateContentBookmarkPayload',
              success: true
            }
          }
        });
      },
      showBookmarkActions() {
        return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "@/styles/_variables.scss";

  .content-component {
    position: relative;
    &--bookmarked {

    }
  }
</style>