Add link block
This commit is contained in:
Ramon Wenger
parent
395434620b
commit
23f282b358
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="chapter">
|
||||
<h3>{{chapter.title}} {{chapter.id}}</h3>
|
||||
<h3>{{chapter.title}}</h3>
|
||||
|
||||
<add-content-block-button :parent="chapter.id"></add-content-block-button>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
</div>
|
||||
|
||||
<h4 class="content-block__title">{{contentBlock.title}}</h4>
|
||||
<h4>{{contentBlock.id}}</h4>
|
||||
|
||||
<component v-for="component in contentBlock.contents"
|
||||
:key="component.id"
|
||||
|
|
@ -28,6 +27,7 @@
|
|||
import Task from '@/components/content-blocks/Task';
|
||||
import ImageBlock from '@/components/content-blocks/ImageBlock';
|
||||
import VideoBlock from '@/components/content-blocks/VideoBlock';
|
||||
import LinkBlock from '@/components/content-blocks/LinkBlock';
|
||||
import StudentEntry from '@/components/content-blocks/StudentEntry';
|
||||
import AddContentBlockButton from '@/components/AddContentBlockButton';
|
||||
import EyeIcon from '@/components/icons/EyeIcon';
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
'student_entry': StudentEntry,
|
||||
'image_block': ImageBlock,
|
||||
'video_block': VideoBlock,
|
||||
'link_block': LinkBlock,
|
||||
Task,
|
||||
AddContentBlockButton,
|
||||
EyeIcon
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<modal>
|
||||
<content-block-title-input slot="header" v-on:update-title="updateTitle" :title="title"></content-block-title-input>
|
||||
<add-content-element class="new-content-block-wizard__add"
|
||||
v-on:add-element="addElement"
|
||||
:index="-1"
|
||||
></add-content-element>
|
||||
<div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
|
||||
<component
|
||||
class="new-content-block-wizard__element-component"
|
||||
|
|
@ -64,7 +68,7 @@
|
|||
methods: {
|
||||
type(element) {
|
||||
switch (element.type) {
|
||||
case 'link':
|
||||
case 'link_block':
|
||||
return 'link-form';
|
||||
case 'video_block':
|
||||
return 'video-form';
|
||||
|
|
@ -117,7 +121,7 @@
|
|||
text: ''
|
||||
};
|
||||
break;
|
||||
case 'link':
|
||||
case 'link_block':
|
||||
el = {
|
||||
...el,
|
||||
text: '',
|
||||
|
|
@ -174,26 +178,7 @@
|
|||
// {
|
||||
// type: 'video',
|
||||
// url: 'https://vimeo.com/267384185'
|
||||
// },
|
||||
// {
|
||||
// type: 'link'
|
||||
// },
|
||||
// {
|
||||
// type: 'text'
|
||||
// },
|
||||
// {
|
||||
// type: 'video'
|
||||
// },
|
||||
// {
|
||||
// type: 'document'
|
||||
// },
|
||||
// {
|
||||
// type: 'exercise'
|
||||
// },
|
||||
// {
|
||||
// type: 'image'
|
||||
// },
|
||||
// {}
|
||||
// }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="link-block">
|
||||
<link-icon class="link-block__icon"></link-icon>
|
||||
<a :href="value.url" class="link-block__link">{{value.text}}</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LinkIcon from '@/components/icons/LinkIcon';
|
||||
|
||||
export default {
|
||||
props: ['value'],
|
||||
|
||||
components: {
|
||||
LinkIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.link-block {
|
||||
margin-bottom: 30px;
|
||||
display: grid;
|
||||
grid-template-columns: 50px 1fr;
|
||||
align-items: center;
|
||||
|
||||
&__icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&__link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content-block-element-chooser-widget">
|
||||
<div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'link')">
|
||||
<div class="content-block-element-chooser-widget__link" v-on:click="$emit('change-type', index, 'link_block')">
|
||||
<link-icon class="content-block-element-chooser-widget__link-icon"></link-icon>
|
||||
<div class="content-block-element-chooser-widget__link-title">Link</div>
|
||||
</div>
|
||||
|
|
@ -45,13 +45,6 @@
|
|||
TextIcon,
|
||||
SpeechBubbleIcon,
|
||||
DocumentIcon
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeType() {
|
||||
console.log('changeType');
|
||||
this.element.type = 'link';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,13 @@ def handle_content_blocks(content_data):
|
|||
elif content['type'] == 'image_block':
|
||||
pass
|
||||
elif content['type'] == 'link_block':
|
||||
pass
|
||||
new_contents.append({
|
||||
'type': 'link_block',
|
||||
'value': {
|
||||
'text': bleach.clean(content['text']),
|
||||
'url': bleach.clean(content['url'])
|
||||
}
|
||||
})
|
||||
elif content['type'] == 'task':
|
||||
pass
|
||||
elif content['type'] == 'video_block':
|
||||
|
|
@ -51,9 +57,6 @@ class MutateContentBlock(relay.ClientIDMutation):
|
|||
errors = graphene.List(graphene.String)
|
||||
content_block = graphene.Field(ContentBlockNode)
|
||||
|
||||
# updated_title = graphene.String()
|
||||
# updated_type = graphene.String()
|
||||
|
||||
@classmethod
|
||||
def mutate_and_get_payload(cls, *args, **kwargs):
|
||||
try:
|
||||
|
|
|
|||
Loading…
Reference in New Issue