Move content block content handling to own component
This commit is contained in:
Ramon Wenger
parent
2c665399b6
commit
90598342b8
|
|
@ -17,11 +17,13 @@
|
|||
<h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label">{{instrumentLabel}}</h3>
|
||||
<h4 class="content-block__title" v-if="!contentBlock.indent">{{contentBlock.title}}</h4>
|
||||
|
||||
<component v-for="component in contentBlocksWithContentLists.contents"
|
||||
:key="component.id"
|
||||
:is="component.type"
|
||||
v-bind="component">
|
||||
</component>
|
||||
|
||||
<content-component v-for="component in contentBlocksWithContentLists.contents"
|
||||
:key="component.id"
|
||||
:component="component"
|
||||
:parent="contentBlock.id"
|
||||
:highlights="contentBlock.highlights">
|
||||
</content-component>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -32,21 +34,6 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import TextBlock from '@/components/content-blocks/TextBlock';
|
||||
import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
|
||||
import Task from '@/components/content-blocks/Task';
|
||||
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 Assignment from '@/components/content-blocks/assignment/Assignment';
|
||||
import Survey from '@/components/content-blocks/SurveyBlock';
|
||||
import Solution from '@/components/content-blocks/Solution';
|
||||
import AddContentButton from '@/components/AddContentButton';
|
||||
import MoreOptionsWidget from '@/components/MoreOptionsWidget';
|
||||
import UserWidget from '@/components/UserWidget';
|
||||
|
|
@ -54,7 +41,7 @@
|
|||
import EyeIcon from '@/components/icons/EyeIcon';
|
||||
import PenIcon from '@/components/icons/PenIcon';
|
||||
import TrashIcon from '@/components/icons/TrashIcon';
|
||||
import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug'
|
||||
import ContentComponent from '@/components/content-blocks/ContentComponent';
|
||||
|
||||
import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
|
||||
import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
|
||||
|
|
@ -75,23 +62,7 @@
|
|||
name: 'content-block',
|
||||
|
||||
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,
|
||||
Task,
|
||||
ContentComponent,
|
||||
AddContentButton,
|
||||
VisibilityAction,
|
||||
EyeIcon,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<div class="content-component" :class="{'content-component--highlighted': highlighted}">
|
||||
{{component.id}}
|
||||
<a @click="highlightContent(component.id, !highlighted)">Highlight</a>
|
||||
<div>
|
||||
Highlighted: {{highlighted}}
|
||||
</div>
|
||||
<component
|
||||
:is="component.type"
|
||||
v-bind="component">
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 UPDATE_CONTENT_HIGHLIGHT from '@/graphql/gql/mutations/updateContentHighlight.gql';
|
||||
import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
|
||||
|
||||
export default {
|
||||
props: ['component', 'parent', 'highlights'],
|
||||
|
||||
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,
|
||||
},
|
||||
|
||||
computed: {
|
||||
highlighted() {
|
||||
return this.highlights.indexOf(this.component.id) > -1;
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
highlightContent(id, highlight) {
|
||||
this.$apollo.mutate({
|
||||
mutation: UPDATE_CONTENT_HIGHLIGHT,
|
||||
variables: {
|
||||
input: {
|
||||
id,
|
||||
contentBlock: this.parent,
|
||||
highlight
|
||||
}
|
||||
},
|
||||
refetchQueries: [{
|
||||
query: MODULE_DETAILS_QUERY,
|
||||
variables: {
|
||||
slug: this.$route.params.slug
|
||||
}
|
||||
}]
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-component {
|
||||
&--highlighted {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue