110 lines
3.7 KiB
Vue
110 lines
3.7 KiB
Vue
<template>
|
|
<div class="content-component"
|
|
:class="{'content-component--bookmarked': bookmarked}"
|
|
:data-scrollto="component.id">
|
|
<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 ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
|
|
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 {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
|
|
|
|
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,
|
|
'thinglink_block': ThinglinkBlock,
|
|
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;
|
|
},
|
|
showBookmarkActions() {
|
|
return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
|
|
}
|
|
},
|
|
|
|
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";
|
|
|
|
.content-component {
|
|
position: relative;
|
|
&--bookmarked {
|
|
|
|
}
|
|
}
|
|
</style>
|