ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add component class to content component

This commit is contained in:
Ramon Wenger 2020-10-07 21:49:56 +02:00
parent 7fb61d9f05
commit 69e19591b3
1 changed files with 86 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
client/src/components/content-blocks/ContentComponent.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div <div
:class="{'content-component--bookmarked': bookmarked}" :class="componentClass"
:data-scrollto="component.id" :data-scrollto="component.id"
class="content-component"> >
<bookmark-actions <bookmark-actions
:bookmarked="bookmarked" :bookmarked="bookmarked"
:note="note" :note="note"
@ -19,96 +19,103 @@
</template> </template>
<script> <script>
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex';
import TextBlock from '@/components/content-blocks/TextBlock'; import TextBlock from '@/components/content-blocks/TextBlock';
import InstrumentWidget from '@/components/content-blocks/InstrumentWidget'; import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
import ImageBlock from '@/components/content-blocks/ImageBlock'; import ImageBlock from '@/components/content-blocks/ImageBlock';
import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock'; import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
import VideoBlock from '@/components/content-blocks/VideoBlock'; import VideoBlock from '@/components/content-blocks/VideoBlock';
import LinkBlock from '@/components/content-blocks/LinkBlock'; import LinkBlock from '@/components/content-blocks/LinkBlock';
import DocumentBlock from '@/components/content-blocks/DocumentBlock'; import DocumentBlock from '@/components/content-blocks/DocumentBlock';
import InfogramBlock from '@/components/content-blocks/InfogramBlock'; import InfogramBlock from '@/components/content-blocks/InfogramBlock';
import ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock'; import ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
import GeniallyBlock from '@/components/content-blocks/GeniallyBlock'; import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
import SubtitleBlock from '@/components/content-blocks/SubtitleBlock'; import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock'; import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
import ContentListBlock from '@/components/content-blocks/ContentListBlock'; import ContentListBlock from '@/components/content-blocks/ContentListBlock';
import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug'; import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug';
import Assignment from '@/components/content-blocks/assignment/Assignment'; import Assignment from '@/components/content-blocks/assignment/Assignment';
import Survey from '@/components/content-blocks/SurveyBlock'; import Survey from '@/components/content-blocks/SurveyBlock';
import Solution from '@/components/content-blocks/Solution'; import Solution from '@/components/content-blocks/Solution';
import Instruction from '@/components/content-blocks/Instruction'; import Instruction from '@/components/content-blocks/Instruction';
import BookmarkActions from '@/components/notes/BookmarkActions'; import BookmarkActions from '@/components/notes/BookmarkActions';
import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation'; import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
export default { export default {
props: ['component', 'parent', 'bookmarks', 'notes', 'root'], props: ['component', 'parent', 'bookmarks', 'notes', 'root'],
components: { components: {
'text_block': TextBlock, 'text_block': TextBlock,
'basic_knowledge': InstrumentWidget, // for legacy 'basic_knowledge': InstrumentWidget, // for legacy
'instrument': InstrumentWidget, 'instrument': InstrumentWidget,
'image_block': ImageBlock, 'image_block': ImageBlock,
'image_url_block': ImageUrlBlock, 'image_url_block': ImageUrlBlock,
'video_block': VideoBlock, 'video_block': VideoBlock,
'link_block': LinkBlock, 'link_block': LinkBlock,
'document_block': DocumentBlock, 'document_block': DocumentBlock,
'infogram_block': InfogramBlock, 'infogram_block': InfogramBlock,
'genially_block': GeniallyBlock, 'genially_block': GeniallyBlock,
'subtitle': SubtitleBlock, 'subtitle': SubtitleBlock,
'section_title': SectionTitleBlock, 'section_title': SectionTitleBlock,
'content_list': ContentListBlock, 'content_list': ContentListBlock,
'module_room_slug': ModuleRoomSlug, 'module_room_slug': ModuleRoomSlug,
'thinglink_block': ThinglinkBlock, 'thinglink_block': ThinglinkBlock,
Survey, Survey,
Solution, Solution,
Instruction, Instruction,
Assignment, Assignment,
BookmarkActions BookmarkActions
},
computed: {
...mapGetters(['editModule']),
bookmarked() {
return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
}, },
note() {
computed: { const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
...mapGetters(['editModule']), return bookmark && bookmark.note;
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;
}
}, },
showBookmarkActions() {
methods: { return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
addNote(id) { },
this.$store.dispatch('addNote', { componentClass() {
content: id, let classes = ['content-component', `content-component--${this.component.type}`];
type: this.parent.__typename, if (this.bookmarked) {
block: this.root classes.push('content-component--bookmarked');
});
},
editNote() {
this.$store.dispatch('editNote', this.note);
},
bookmarkContent(uuid, bookmarked) {
this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
} }
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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.content-component { .content-component {
position: relative; position: relative;
&--bookmarked { &--bookmarked {
}
} }
}
</style> </style>